Creating Smaller Thumbnails
4 posts by 3 authors in: Forums > CMS Builder
Last Post: July 22 (RSS)
So until now I've been happy outputting the default thumbnails created by CMSB using a direct call in the template, which normally size to 600x600:
<img src="<?php echo htmlencode($upload['urlPath']) ?>" />I still intend to use that same approach on some pages, but I'd also like to be able to resize a smaller thumbnail for short summaries in order to keep Google's Core Web Vitals happy. So I wondered, is there a simple way to additionally output a 100x100 pixel version of the same image? Without changing the original (primary) thumbnail/image or manually uploading a second smaller version, that would be very laborious.
Hi mark99,
I am new here but I thought perhaps I can chime in and give you a solution to the problem. I am assuming you have the latest version but if you do:
- Go to CMS Setup
- Then select the Database Editor
- Modify the given section you are working with (in my case "News" as outlined in the tutorial)
- Find your image upload field and select "Modify"
- Under input validation you will see sections for creating thumbnails. By default it looks like it only creates 1, but you can select to have it generate up to 4 and specify the dimensions for each. You could just make one of those 100 x 100 and it will generate a thumbnail image for each size you specified. I attached a screenshot.
Then in your templates you can access these other thumbnails using code like...
<img src="<?php echo htmlencode($upload['thumbUrlPath2']) ?>" width="<?php echo $upload['thumbWidth2'] ?>" height="<?php echo $upload['thumbHeight2'] ?>" alt="">
<img src="<?php echo htmlencode($upload['thumbUrlPath3']) ?>" width="<?php echo $upload['thumbWidth3'] ?>" height="<?php echo $upload['thumbHeight3'] ?>" alt="">
<img src="<?php echo htmlencode($upload['thumbUrlPath4']) ?>" width="<?php echo $upload['thumbWidth4'] ?>" height="<?php echo $upload['thumbHeight4'] ?>" alt="">It looks like by default the system will support up to 4 thumbnails and you can have those thumbnails either "crop" or "recreate". I think if you go back and reattach any images on older items it will regenerate those new thumbs. This process I outline here would then work for all new items going forward. Hopefully that solves the issue for you. :)
Senior Application Developer
TimHurd.com
Yes. Tim Hurd is correct. I want to add one small consideration while making this modification. Hitting "recreate" only scales up to the max size dimensions (w x h) you have allowed for the original upload. For example: you have uploaded a 2000 x 2000 image, and your max allowed size is 600 x 600. You realize you need a 800 x 800 of that image. Changing one of the thumbnail sizes to 800 x 800 will pixelate your image (.jpg, .png, .gif) because the max size in the Db is 600 x 600. For ease of use for future changes I set my max allowed size to very large and upload the best quality images I can. My first thumbnail will either be the same or a relatively high max size and the rest, maybe 600 x 600, 300 x 300 and 100 x 100. Then months or years later the site needs larger display images it's covered for any recreate changes.