Render Different Image Variants

Introduction

Goal

Render a different variant of an image included in rich text content.

Use Cases

Hippo's delivery tier (HST) supports rendering a different image variant than is stored in the text content of some document.

This might be useful when for example you have one and the same document that you want to render on multiple channels and devices.

Use cases:

1. For the mobile version, you want to render a small image variant, for a tablet a medium variant, and for website the original variant

2. When there is a leftmenu, you want to show a smaller variant of some image and when there is no left menu, you want to show the wide variant

3. When you have detected that the request was done through a wireless device (or low bandwidth), show the low resolution image

An editor / author should not be concerned about this. They just pick some 'default' variant from an imageset in the CMS. During rendering, you can as developer choose to render a different variant of the imageset than the editor / author selected.

Implementation Instructions

Assume, you have the following imageset definition:

[hippogogreengallery:imageset] > hippogallery:imageset, hippogallery:relaxed
  orderable
  + hippogogreengallery:copyright (hippogogreen:copyright)

and by default, have the following variants:

-hippogallery:thumbnail
-hippogogreengallery:mobilethumbnail
-hippogallery:original
-hippogogreengallery:largethumbnail
-hippogogreengallery:smallthumbnail

During rendering some HippoBean containing a rich text field, you can now choose a different image to render than is stored in the html. You can do this in your template as follows (assuming the getHtml() returns a HippoHtml bean for 'document').

Replace image variant from html with mobilethumbnail:

JSP

<hst:html hippohtml="${requestScope.document.html}">
  <hst:imagevariant name="hippogogreengallery:mobilethumbnail"/>
</hst:html>

Freemarker

<@hst.html hippohtml=document.html>
  <@hst.imagevariant name="hippogogreengallery:mobilethumbnail"/>
</@hst.html>

Now, assume you now want to show the hippogogreengallery:mobilethumbnail for mobile devices, the hippogogreengallery:largethumbnail for a tablet, and the hippogallery:original for a normal website. The following template snippets do this (assuming you have stored the device info in device)

Replace image variant:

JSP

<hst:html hippohtml="${requestScope.document.html}">
  <c:choose>
    <c:when test="${requestScope.device eq 'mobile'}">
      <hst:imagevariant name="hippogogreengallery:mobilethumbnail"/>
    </c:when>
    <c:when test="${requestScope.device eq 'tablet'}">
      <hst:imagevariant name="hippogogreengallery:largethumbnail"/>
    </c:when>
    <c:otherwise>
      <hst:imagevariant name="hippogallery:original"/>
    <c:otherwise>
  </c:choose>
</hst:html>

Freemarker

<@hst.html hippohtml=document.html>
  <#if device == 'mobile'>
    <@hst.imagevariant name="hippogogreengallery:mobilethumbnail"/>
  <#elseif device == 'tablet'>
    <@hst.imagevariant name="hippogogreengallery:largethumbnail"/>
  <#else>
    <@hst.imagevariant name="hippogallery:original"/>
  </#if>
</@hst.html>

The hst:imagevariant has two more attribute options:

1. fallback : whether to fallback to original variant if the specified ' name' variant does not exist. Default value is false when not configured.

2. replaces : comma separated list of variants in the richt text that should be replaced by the images variant. Thus, for example, if you'd only like to replace the variants ' hippogallery:thumbnail' and ' hippogallery:original' you can use the code snippet below. This leaves variants other than the ' hippogallery:thumbnail' and ' hippogallery:original' unchanged.

Replace only certain variants:

JSP

<hst:html hippohtml="${requestScope.document.html}">
  <hst:imagevariant name="hippogogreengallery:mobilethumbnail"
    replaces="hippogallery:thumbnail,hippogallery:original"/>
</hst:html>

Freemarker

<@hst.html hippohtml=document.html>
  <@hst.imagevariant name="hippogogreengallery:mobilethumbnail"
    replaces="hippogallery:thumbnail,hippogallery:original"/>
</@hst.html>