Configure Image Variants - BloomReach Experience - Open Source CMS

This article covers a Hippo CMS version 10. There's an updated version available that covers our most recent release.

22-10-2015

Configure Image Variants

Previous Step

Select Out-of-the-Box Features

With the out-of-the-box features added to your project you will now configure the different image sizes for the web site.

Configure Image Set

Point your browser to the setup application:  http://localhost:8080/essentials/.

Select 'Tools' from the menu, then 'Gallery manager'. This will load the Gallery Manager which allows you to configure the different image sizes used in your site. Each image uploaded in the CMS will be stored in an image set containing all configured size variants.

Since this is a new project you need to create an image set configuration for it first.

In the Gallery Manager enter 'imageset' in the 'Imageset name' field.

Make sure the option 'Update existing image sets and regenerate HST beans' is checked and click on the 'Create new image set' button. 

A new section titled 'Edit existing image set' appears. The image set configuration you just created will be listed as gogreen:imageset in the 'Select image set' dropdown and is already selected.

There are two fields below the 'Select image set' dropdown: 'Add Image Variant' and 'Edit Image Variant'.

You can now configure the different image sizes used in the design:

  • small: 491 x 224 pixels
  • large: 663 x 302 pixels
  • smallsquare: 233 x 233 pixels
  • mediumsquare: 313 x 313 pixels
  • largesquare: 663 x 663 pixels
  • banner: 1070 x 250 pixels

For each size, enter the name (use lower case) in the 'Variant name' field and click on the 'Add new image variant' button.

Many new fields will appear under 'Edit Image Variant'. Enter the correct amount of pixels in the 'Width' and 'Height' fields and click on the 'Save' button.

Please save after adding each variant. Due to a bug in Developer Essentials currently only the last added variant is actually saved.

Recreate Content Beans

After saving the new image variant configuration a message will be displayed to notify you about the need to update the image set bean.

Click on the 'BeanWriter tool' link. This will load the BeanWriter which allows you to recreate the Java classes that encapsulate the content items in the repository (including image sets) so the delivery tier can access them as Java beans.

Under 'Use the following image set for new methods of image return type' select 'Imageset'.

Make sure the checkbox 'Update existing methods with selected image set, too' is checked. This is to ensure that the out-of-the-box features will be updated to use the newly configured image set.

Click on the button 'Generate HST Content Beans' to recreate the content bean Java classes. Some messages will be displayed including one telling you that a bean 'Imageset' was created.

Stop, rebuild and restart the application.

Point your browser to the Hippo CMS UI:  http://localhost:8080/cms/. Log in with username 'admin' and password 'admin'.

Click on the 'To the documents' button on the dashboard and browse to an image. You will see the image in all different sizes you configured. Note that depending on the aspect ratio of an image, the actual dimensions of its variants might differ from the configured dimensions.

Also note that you can edit image sets, and replace any variant by cropping the original or uploading an alternative image.

Next Step

Add Static Resources

Did you find this page helpful?
How could this documentation serve you better?
On this page
    Did you find this page helpful?
    How could this documentation serve you better?