Create thumbnails from larger image

3 posts by 3 authors in: Forums > CMS Builder
Last Post: July 13, 2010   (RSS)

By degreesnorth - July 13, 2010

Hi

I currently have a detailed property listing with a large image (607px x 301px) which is uploaded to a field called "property_image_right". Is there a way to use this same image on a summary listings type of page which is scaled proportionally to 202px x 100px and not have to manually resize the image and upload it again? I'm using CMS Builder.

Thanks

Re: [degreesnorth] Create thumbnails from larger image

By Jason - July 13, 2010

Hi,

Yes, it is possible in CMS Builder to have up to 4 thumbnails of different sizes for any given image. You can also get these without having to manually resize or reupload.

Go to the section you want to work with. At the bottom of the page, select "Admin: Edit Section". This will give you a list of all the different fields you have in that section. Find "property_image_right" and click on the modify link beside it. This will pop up a window.

Look at the details for the "Input Validation" Section. Here it allows you to select up to 4 different thumbnails. Click the checkbox for each of the different thumbnails you want to create. You can change the values for height and width to whatever you want (note that the resized images will keep their proportions. The values you enter here will just be the maximum values). After you're done selecting each thumbnail you want, you can click the "recreate" button. This will go through all of the images previously uploaded and create a thumbnail of the proportions you entered.

Once you're done, click on Save. Note that you only have to do this once. After that, these thumbnails will automatically be created for any new image uploaded.

In your code, you can access these thumbnails using the following fields:

thumbnail 1 fields:

[thumbFilePath]
[thumbUrlPath]
[thumbWidth]
[thumbHeight]

thumbnail 2 fields

[thumbFilePath2]
[thumbUrlPath2]
[thumbWidth2]
[thumbHeight2]

thumbnail 3 fields

[thumbFilePath3]
[thumbUrlPath3]
[thumbWidth3]
[thumbHeight3]

thumbnail 4 fields

[thumbFilePath4]
[thumbUrlPath4]
[thumbWidth4]
[thumbHeight4]


Let me know if you run into any issues.

Hope this helps.
---------------------------------------------------
Jason Sauchuk - Project Manager
interactivetools.com

Hire me! Save time by getting our experts to help with your project.
http://www.interactivetools.com/consulting/