OpenCms Documentation

Scaling images for source sets

In modern webpages you provide images in different sizes to the browser and the browser choses the one fitting best. OpenCms scales images on the server-side before they are served to the client. With the OpenCms image bean you can easily produce the sizes you need directly in the formatter. Additionally you get the links to the images to put in the srcset attribute of the img tag correctly formattered by the bean.

Here we demonstrate how you can create a set of scaled images for the use on responsive websites. With this set, you can tackle the resolution switching problem. So the image best adapted to the used screen size can be taken.

The result

Dependent you the current resolution differently sized images are loaded by the browser. Make your browser window smaller or wider to see the effect. Have a look at the source of the image too.

 

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium.

Integer tincidunt. Cras dapibus. Vivamus elementum semper nisi. Aenean vulputate eleifend tellus. Aenean leo ligula, porttitor eu, consequat vitae, eleifend ac, enim. Aliquam lorem ante, dapibus in, viverra quis, feugiat a, tellus. Phasellus viverra nulla ut metus varius laoreet. Quisque rutrum. Aenean imperdiet. Etiam ultricies nisi vel augue. Curabitur ullamcorper ultricies nisi. Nam eget dui. Etiam rhoncus. Maecenas tempus, tellus eget condimentum rhoncus, sem quam semper libero, sit amet adipiscing sem neque sed ipsum.

Nam quam nunc, blandit vel, luctus pulvinar, hendrerit id, lorem. Maecenas nec odio et ante tincidunt tempus. Donec vitae sapien ut libero venenatis faucibus. Nullam quis ante. Etiam sit amet orci eget eros faucibus tincidunt.

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium.

 

Example resources and the interesting spots

The interesting bit is the use of the image bean in the formatter. See the comments in the formatter below.

<%@page pageEncoding="UTF-8" buffer="none" session="false" trimDirectiveWhitespaces="true"%>

<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib prefix="cms" uri="http://www.opencms.org/taglib/cms"%>

<cms:formatter var="content" val="value">

  <%-- get the image from the content as image bean --%>
  <c:set var="imageBean" value="${value.Image.toImage}"/>

  <%-- add (links to) scaled versions of the image to the bean's source set
       Note: We provide 250px and 350px, and double the sizes for retina displays --%>
  <c:set target="${imageBean}" property="srcSets" value="${imageBean.scaleWidth[250]}" />
  <c:set target="${imageBean}" property="srcSets" value="${imageBean.scaleWidth[350]}" />
  <c:set target="${imageBean}" property="srcSets" value="${imageBean.scaleWidth[500]}" />
  <c:set target="${imageBean}" property="srcSets" value="${imageBean.scaleWidth[700]}" />

  <div class="clearfix">
    <%-- use image bean with the img tag: Provide a default 400px image for browsers not supporting
         the srcset attibute, and provide our srcset as well.
	     The sizes are needed to tell the browser when to use which resolution. --%>
    <img class="demo-float-on-big-screen"
         src="${imageBean.scaleWidth[400]}"
	     srcset="${imageBean.srcSet}"
	     sizes="(min-width: 768px) 350px, 250px">

    ${value.Text}
  </div>
</cms:formatter>

Besides the formatter itself, we added some extra CSS for the class "demo-float-on-big-screen" in the formatter configuration. This is not that interesting for understanding image handling, but for understanding the example completely, we add a link to the formatter configuration and the CSS code below.

@media (min-width: 768px) {
  .demo-float-on-big-screen {
    float: left;
    padding-right: 10px;
    padding-bottom: 10px;
  }
}

You can improve this page

Please contribute your suggestions or comments regarding this topic on our wiki. For support questions, please use the OpenCms mailing list or go for professional support.