Changing image size in Testimonial block
Permalink
I'm very new at Concrete5. I'm trying to edit the Team page that comes with the Elemental theme. It has Testimonial blocks and I want to add an image to each of them. Once I've added the image, the block increases to the size of the picture (plus the text), instead of the picture shrinking to the space within the block. It looks like there is no way to "fix" the block so it doesn't scale up. It also looks like there is no way to manually shrink the image to fit the block nor a way to resize the block itself.
I looked on the web and there isn't much information available but what is there implies that I have to change the actual size of the picture before putting it in the block. Is this the case? If I want to use the image more than once, I have to have multiple files with the same image but different sizes? Isn't there a way to just scale it down for a particular page?
Can I manipulate the size of the block? I get the + when I click in the block but that doesn't seem to move or size the block. The only thing that has happened is that the block was emptied if I tried to drag it.
I'm also wondering if there is a book or some more detailed documentation than what is on the concrete5 site. I've read the editor documentation and watched the videos which make everything look easy but when I try to actually do something, it's not clear how things work. And a lot of information online is for pre-5.7 which no longer applies.
Thanks in advance
I looked on the web and there isn't much information available but what is there implies that I have to change the actual size of the picture before putting it in the block. Is this the case? If I want to use the image more than once, I have to have multiple files with the same image but different sizes? Isn't there a way to just scale it down for a particular page?
Can I manipulate the size of the block? I get the + when I click in the block but that doesn't seem to move or size the block. The only thing that has happened is that the block was emptied if I tried to drag it.
I'm also wondering if there is a book or some more detailed documentation than what is on the concrete5 site. I've read the editor documentation and watched the videos which make everything look easy but when I try to actually do something, it's not clear how things work. And a lot of information online is for pre-5.7 which no longer applies.
Thanks in advance
Hi Siton,
Thanks for taking the time to reply. It's a bit more technical than I expected though which I keep running into as I try C5. I was hoping there was a straightforward way for an editor to change the image size for that page and that block only.
If I understand your steps correctly, you are saying I should make my own testimonial block with my own size, etc. But if I do that, then I'm changing all testimonial blocks, right? I only want to change the ones on the Team page. The blocks that already exist on that page were reasonably sized but once I added an image, they got quite large. I'm guessing that I could create a special testimonial block that will be customized just for the Team page but it still seems odd to me - it seems like the core testimonial block would have the ability to change the size of the image.
I think I keep having problems achieving anything in C5 because my expectations are different than what C5 really is. I don't know if this is because 5.6 was easier than 5.7 (the tutorials and docs are all 5.6 - including the books on Amazon). Or if C5 is just promoted in way that makes it seem more editor based than it really is. This is getting off topic a bit but I was looking for a tool that would give a good starting point for a site (an intranet in my case), need some editing to get most of the content and look, and then allow developers the control to provide more involved functionality. Then it could be handed over to novices to keep the content up to date - doing basic editing. Adding an image and sizing it appropriately for a particular page is something I would expect an "editor" (novice) to do.
Thanks for taking the time to reply. It's a bit more technical than I expected though which I keep running into as I try C5. I was hoping there was a straightforward way for an editor to change the image size for that page and that block only.
If I understand your steps correctly, you are saying I should make my own testimonial block with my own size, etc. But if I do that, then I'm changing all testimonial blocks, right? I only want to change the ones on the Team page. The blocks that already exist on that page were reasonably sized but once I added an image, they got quite large. I'm guessing that I could create a special testimonial block that will be customized just for the Team page but it still seems odd to me - it seems like the core testimonial block would have the ability to change the size of the image.
I think I keep having problems achieving anything in C5 because my expectations are different than what C5 really is. I don't know if this is because 5.6 was easier than 5.7 (the tutorials and docs are all 5.6 - including the books on Amazon). Or if C5 is just promoted in way that makes it seem more editor based than it really is. This is getting off topic a bit but I was looking for a tool that would give a good starting point for a site (an intranet in my case), need some editing to get most of the content and look, and then allow developers the control to provide more involved functionality. Then it could be handed over to novices to keep the content up to date - doing basic editing. Adding an image and sizing it appropriately for a particular page is something I would expect an "editor" (novice) to do.
I agree that the pic is very basic feature in testimonials blocks.
In other than gallery or sliders - In Testimonials block the editor could destroy the UI design if he scale the image. You only need to set size pic one time.
---About block templates----
In the same page/site you can have 12 block with 12 unique templates (each template in separate folder - in "template" folder)
http://documentation.concrete5.org/developers/working-with-blocks/w...
Maybe try addon like this (with more control for the editor - **I dont know this addon)
http://www.concrete5.org/marketplace/addons/studio-testimonials-pro...
In other than gallery or sliders - In Testimonials block the editor could destroy the UI design if he scale the image. You only need to set size pic one time.
---About block templates----
In the same page/site you can have 12 block with 12 unique templates (each template in separate folder - in "template" folder)
http://documentation.concrete5.org/developers/working-with-blocks/w...
Maybe try addon like this (with more control for the editor - **I dont know this addon)
http://www.concrete5.org/marketplace/addons/studio-testimonials-pro...
@suzsworld
When you add blocks to a page, the way they are displayed is controlled by their "view" and CSS. The view is a file called view.php and handles things like the HTML and can include things like inline JavaScript and CSS. This CSS can be provided just by the block (inline, view.css, and CSS files), just by the theme, or a combination of both.
By default, most core blocks provide minimal styling. Creating a basic starting point to be styled. This allows for the block styling to be added and controlled by the theme. Think of it like a basic framework.
- The Testimonial block on its own, provides only basic CSS. See attached screenshot no_CSS.png to see what it looks like without theme CSS.
- When using the Elemental theme, the Testimonial block will include a default style. See attached screenshot default_Elemental_CSS.png to see what the default style looks like.
- The Elemental theme also includes a custom class for the Testimonial block called "testimonial-bio". This custom class adds additional styling of the block by wrapping it in a div tag container. See attached screenshot testimonial-bio_class.png to see the styling added by this class.
If you want to do more than change the CSS, you can also change the structure of the block view. This could be changing the HTML tags, adding or removing CSS classes, and more. To make these changes, you create a copy of the default view.php and use it as a custom template.
http://documentation.concrete5.org/developers/working-with-blocks/w...
This is example HTML output of the Testimonial block view.php.
The content you add through the block form is added into the view.php.
When you add blocks to a page, the way they are displayed is controlled by their "view" and CSS. The view is a file called view.php and handles things like the HTML and can include things like inline JavaScript and CSS. This CSS can be provided just by the block (inline, view.css, and CSS files), just by the theme, or a combination of both.
By default, most core blocks provide minimal styling. Creating a basic starting point to be styled. This allows for the block styling to be added and controlled by the theme. Think of it like a basic framework.
- The Testimonial block on its own, provides only basic CSS. See attached screenshot no_CSS.png to see what it looks like without theme CSS.
- When using the Elemental theme, the Testimonial block will include a default style. See attached screenshot default_Elemental_CSS.png to see what the default style looks like.
- The Elemental theme also includes a custom class for the Testimonial block called "testimonial-bio". This custom class adds additional styling of the block by wrapping it in a div tag container. See attached screenshot testimonial-bio_class.png to see the styling added by this class.
If you want to do more than change the CSS, you can also change the structure of the block view. This could be changing the HTML tags, adding or removing CSS classes, and more. To make these changes, you create a copy of the default view.php and use it as a custom template.
http://documentation.concrete5.org/developers/working-with-blocks/w...
This is example HTML output of the Testimonial block view.php.
<div class="ccm-block-testimonial-wrapper"> <div class="ccm-block-testimonial"> <div class="ccm-block-testimonial-image"><img src="/concrete5/application/files/6414/5101/3972/bio.png" alt="John Smith" width="460" height="460"></div> <div class="ccm-block-testimonial-text"> <div class="ccm-block-testimonial-name"> John Smith </div> <div class="ccm-block-testimonial-position"> Co-Founder / CEO </div> <div class="ccm-block-testimonial-paragraph">Curabitur sagittis elementum felis at sodales. Nullam fermentum at urna quis accumsan. Nam bibendum leo nisi, lacinia molestie arcu consequat quis.</div> </div> </div> </div>
The content you add through the block form is added into the view.php.
----------------------------
Add screen shot of the problem - or the layout you want to accomplish.
The block view.php "design" is pure css (C5 dont add any classes or styles if you dont want to). In testimonial block you have in the root folder "view.css" for the styles. In other words - you have endless CSS tuts and examples on the web.
In general - The size of my block is:
1)Area size
2)The block size - like any html output depends on the markup, styles and the content
(find tut about : inline // inline-block // block - very important issue in "sizes")
**In responsive layout the size can change depend on the screen size
My advice for you:
Step 1 - Try to get the result/design that you want in static Html (markup and the correct pic. You can use bootstrap - this is the framework for C5). After you accomplish the target try to adapt this design to view.php (add styles and so on).
Step 2 - Now adapt the design - duplicate view.php from the core folder to:
Now you can create your own view.css or change selectors names and add styles to the main css file of your site.
Step 3 - Add this block - change template and - Test in the broswer "inspect element" is very useful (chrome or Firefox).
--------------References --------------
IMPORTANT! Overflow:hidden - example:
http://codepen.io/funkybudda/pen/xoAtD...
Testimonials with pic example:
http://codepen.io/nikhil/pen/bdJXRW...
http://codepen.io/jamy/pen/gbdWGJ...