OpenCms Documentation

Image scaling

 Show GitHub edit links  Hide GitHub edit links
In OpenCms since: 6.2.0 Valid for OpenCms: 11.0.0

OpenCms scales images if requested and caches scaled versions. We demonstrate how to use the <cms:img>-tag in a formatter to scale images.

Note that this is just one way to scale images. Images may also be scaled, cropped, etc. when inserting them into the content when using appropriate widgets (see the related links). Consult the descriptions of the ImageGalleryWidget and the VfsImageWidget for such options.

Since OpenCms 11, the image bean provides much more flexibility on scaling images in JSPs. The scaling options explained here are accessible via the bean as well. So have a look at the bean before using <cms:img>.

The result


Image scaling demo

The same image is inserted three times, but scaled differently.


Example resources and the interesting spots

The interesting spot here is the formatter of the article:

<%@page buffer="none" session="false" trimDirectiveWhitespaces="true" %>
<%@taglib prefix="cms" uri=""%>
<%@taglib prefix="c" uri=""%>
<cms:formatter var="content" val="value">
<div class="margin-bottom-30">
    <%-- Title of the article --%>
    <div class="headline"><h3>${value.Title}</h3></div>
    <%-- The text field of the article with image --%>
    <div class="paragraph">
        <c:set var="showing" value="false" />
        <c:if test="${value.Image.isSet}">
            <c:set var="showing" value="true" />
            <div style="text-align:center;">
				<cms:img src="${value.Image}" width="700" height="100" scaleColor="transparent" scaleType="4" />
            	<cms:img src="${value.Image}" width="700" height="100" scaleColor="#000000" scaleType="1" />
            	<cms:img src="${value.Image}" width="700" height="100" scaleColor="#0000dd" scaleType="2" />
        <c:if test="${showing}">
            <div class="clear"></div>

We use the tag <cms:img> to scale the images. For the example, we altered the scaletype parameter. The tag has many more options. Please consult theĀ taglib documentation for it. If you are offline, you may alter the parameters of the <cms:img>-tags to see what happens.

All scaling configured in the formatter is done on the server-side. Hence, you may not know what is the "best" size for the image on the client and may adjust the image size on the client again. Nevertheless, server-side scaling has many advantages, e.g., thumbnails can be generated, parts of pictures can be extracted, picture quality can be changed, special effects can be added to the pictures.

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.