Creating Smaller Thumbnails

4 posts by 3 authors in: Forums > CMS Builder
Last Post: July 22   (RSS)

By mark99 - July 17

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.

By TimHurd - July 18 - edited: July 18

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:

  1. Go to CMS Setup
  2. Then select the Database Editor
  3. Modify the given section you are working with (in my case "News" as outlined in the tutorial)
  4. Find your image upload field and select "Modify"
  5. 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. :)

Tim Hurd
Senior Application Developer
TimHurd.com
Attachments:

thumbnail-screenshot.png 50K

By Codee - July 19

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.