Dynamically Resizing Web App Images in Business Catalyst

Dynamically Resizing Web App Images in Business Catalyst

Here's how I Use Business Catalyst's image resizing feature to make adding images to Web Apps a breeze. You can use the same web app image for list and detail views and you (or the website admin) won't have to worry about getting the image to the perfect size for each web app item either.

I'm assuming for this tutorial you have a good understanding of Adobe's Business Catalyst. I talk about using the image sizing feature with Web Apps and e-commerce so an understanding of how Web Apps work and how to create layouts for each of these features in BC would also be helpful.

I'm also doubling up on a lot of info available in this BC Knowledge Base article. Hopefully i've added enough of my own flavour and some extra use cases to help take it a little further.

The Problem

When building a Web App layout it can be frustrating to have to make images the exact fit for your layout. While this might seem no different to placing an image on any web page, the dynamic nature of Web Apps means that one layout fits a range of content. 

Another scenario is that the person who created the website is not the person entering the content. If the website owner is the one making changes the the site, they may not have the knowledge or skills to prepare the image correctly. 

The Solution

BC has a great feature that allows you to dynamically resize images on the fly. This essentially allows you (or whomever is adding images to the site) to use an image irrespective of size or proportion. This same image can then be reused in different instances and layouts.

The way it works is for you to add a small script to the image tag when placing it in your layout, BC then uses this to resize the image on the server as the page is rendered.

There are three main places where this feature can be used. 

All three require a slightly different approach. I'll start with simply placing an image on a page then show how it can be really useful for use with Web Apps and e-commerce layouts.

Placing an image with dynamic resizing

The most obvious scenario to use this would be to create a thumbnail of an existing image you have uploaded to the site. For example you might have an image on a page within the site that you want to link to from the homepage. Using this method you can create a thumbnail of the original image that is already uploaded to the site without having to make a new version of the image cropped and resized.

This is the code you will need to use to create the thumbnail:

<img src="/folder/your-image.jpg?Action=thumbnail&Width=50&Height=50&algorithm=fill_proportional" />

Change the path to your correct image location and set the width and hight values to suit the size you want the thumbnail to be.

The second part of this code is optional and is used to set the proportion of your image relative to the size values you use. The default value is proportional, which be used if you don't use the scaling algorithm. There are three scaling values you can use, this is what they are and examples of how they will effect your thumbnail:







Of course you will need to take into account the proportions of your original image when using this. For example fill and fill_proportional might not be great to use on portraits of people as it could distort the image or crop off part of someones face.

Taking this further with Web Apps Layouts

This all becomes more powerful when used with Web Apps and e-commerce layouts where images are uploaded via a form and where the user might not be aware of the image size required or not have the knowledge on how to correctly resize and crop the images. 

Take a directory of stores for example, you might have a page on your website that lists all of your stores then a detail page for each store and both layouts require an image. This would require you to create two fields in the Web App - one image correctly sized for your list view layout and one for your profile layout. More over you would have to create this set of two images for each store in the directory. 

Using the dynamic image resizing you can have one image field for each store location and use this on both layouts irrespective of the originals size.

Using this feature in Web Apps requires a slightly different approach as the web app fields are placed in the layout using tags:

<img src="{tag_yourimagefieldname_value}?Action=thumbnail&Width=50&Height=50" />

Appending _value to the tag renders only the value of the Web App field and not the entire html <img> tag, where as the standard tag for placing the Web App image field on the page would look like this:


Your list view image might look like this, generating a thumbnail that proportionally fills a 50x50 pixel space:

<img src="{tag_yourimagefieldname_value}?Action=thumbnail&Width=50&Height=50&algorithm=fill_proportional" />

And your details view image light look like this, proportionally fitting the image into a 400x300 pixel space:

<img src="{tag_yourimagefieldname_value}?Action=thumbnail&Width=400&Height=300" />

Working in E-Commerce Layouts

Pretty much the same principle applies to the e-commerce layouts as with the Web App layouts, with a few small differences...

  • The tags for placing images in e-commerce layouts are standard, they are: {tag_largeimage} and {tag_smallimage} for the large and small images respectively. 
  • Instead of _value to generate the image path you'll need to use _path.

So the code to use for the e-commerce layouts would be:

<img src="{tag_smallimage_path}?Action=thumbnail&Width=50&Height=50&algorithm=fill_proportional" />

<img src="{tag_largeimage_path}?Action=thumbnail&Width=400&Height=300" />

That about sums it up. If you have any feedback, comments or ideas please get in touch or leave a comment.


tree Image credit: Benson Kua

Comments (2)
  • Image

    17-Apr-2014 08:19 AM

    Thanks for this information. I just implemented this today. I do have a question. I have a web app that allows a user to upload three optional/different images. In the WebApp detail layout, I specify the img tag with the appropriate algorithm for resizing. My problem is that if the user only uploads two out of the possible three images, a big "X" appears where the third picture is supposed to be, because it was never uploaded in the first place. This just the page look unprofessional. Any ideas on how to get this removed? Thanks!

  • Image

    17-Apr-2014 09:01 AM

    I was able to figure it out. Basically, I just had to check if the location was null or not. Here is the code I used:

  • Leave a Comment

    Captcha Image