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.

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

This worked well, thanks Tim. I pressed 'recreate' and it made all the thumbs for me automatically too.