BC is designed with the functionality to automatically scale and display thumbnail images (smaller versions) of existing image files in your site. In this article, you'll learn how to add code to your pages and leverage this capability, so that you don't have to manually create smaller versions of the image files and upload them to the live site.
Adding code to generate a thumbnail image from an existing image
- Begin by accessing the source code for the page. Select Site Manager > Pages and select the page from the tree view.
- Click HTML below the content editor to see the source code.
- Place your cursor at the location on the page where you want to insert a thumbnail image. Type the following code:
<img src="/folder_name/image_file_name.jpg?Action=thumbnail&Width=80&Height=80" />
In the example above, replace this part of the code:
/folder_name/image_file_name.jpg
With the actual path to your full size image file, like this example:
/images/logo.png
Also, update the two numeric values in the following part with the width and height of the thumbnail you want to display (in pixels):
Width=80&Height=80
For example, if you'd like the thumbnail image to be 70 pixels wide by 50 pixels high, update the values like this:
Width=70&Height=50
Note: You do not need to specify both width and height. You can specify one of these dimensions and Business Catalyst will proportionally resize the image based on this dimension.
Setting the aspect ratio of the source image that is resized
If you want to preserve the aspect ratio for the larger image size (to prevent a squashed or squished looking thumbnail image), you can add an additional parameter, thumbnail, to the <img> tag, as shown in the example below:
<img src="/folder_name/image_file_name.jpg?Action=thumbnail&Width=80&Height=80&algorithm=fill_proportional" />
The algorithm parameter accepts the following three values:
proportional
fill
fill_proportional
The default setting for the thumbnail generator is proportional; if you want this setting, you don't need to add the parameter. Here's a description of the results of each value:
proportional: The thumbnail maintains the aspect ratio of the source image and uses the specified width or height of whichever side of the image file is proportionately bigger.
fill: The dimensions of the thumbnail are resized to fill the specified Width and Height settings as defined in the parameters; the aspect ratio of the original source image is not maintained.
fill_proportional: The dimensions of the thumbnail are resized to fill the specified Width and Height settings as defined in the parameters; the extra pixels from the top/bottom or left/right are cropped on whichever side of the image is proportionally larger, if needed, to maintain the aspect ratio of the original source image and ensure that the thumbnail does not look squashed or squished. If the desired thumbnail dimensions are larger than the source image dimensions then the image is not resized and transparent pixels are added around the image.
Setting the output format of the generated thumbnail image
You can set the output format of the generated image by appending the &Format= parameter.
For instance, to generate the thumbnail in .png format, this would be the thumbnail URL:
<img src="/folder_name/image_file_name.jpg?Action=thumbnail&Width=80&Height=80&Format=png" />
Accepted output parameters include png, jpg and gif.
Generating thumbnail images for Web Apps
Similar to the process of displaying thumbnail images on web pages and photo galleries, you can also generate thumbnail images programmatically for Web App image content. Simply add parameters to the image source tag as shown in the following example:
<img src="{tag_myimage_value}?Action=thumbnail&Width=80&Height=80" />In the example above, the part {tag_myimage_value} is replaced with the path to the full sized image when the Web App is dynamically rendered by the browser.
The system uses the data of the full size image to automatically scale it to the height and width values (in pixels) that you specify in the parameters of the <img> tag.
Generating thumbnail images for products in an online store
Programmatically generated thumbnail images are also very useful when displaying product images in a catalog.
Here's an example of an image tag used to generate a thumbnail image of a larger product image:
<img src="{tag_largeimage_path}?Action=thumbnail&Width=50&Height=50" />
In the example above, {tag_largeimage} was originally our dynamic image tag. However, we appended _path to the tag. Doing so will output the path to the full sized image. The same method will work for {tag_smallimage}.
28
Replies
No worries Carol 🙂 Again thanks for your time -
Im enjoying the web apps the more i dig into it. Got some great ideas for our customers i can now build for them using web apps. Once i get past the learning curves of the system could be dangerous LOL 
In fact we got one client just because of being able to meet their desires using webapps 😉 I'll be a guru yet 😉
Tom
AdChoices