Image scaling

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 according widgets (see the related links). Consult the descriptions of the ImageGalleryWidget and the VfsImageWidget for such options.

Related links

1 The result

 

Image scaling demo

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

 

2 Example resources and the interesting spots

The interesting spot here is the formatter of the article:

/system/modules/com.alkacon.opencms.documentation/formatters/demo/demo-article-image-scaling.jsp
<%@page buffer="none" session="false" trimDirectiveWhitespaces="true" %>
<%@taglib prefix="cms" uri="http://www.opencms.org/taglib/cms"%>
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<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" />
			</div>
        </c:if>
        ${value.Text}
        <c:if test="${showing}">
            <div class="clear"></div>
        </c:if>
    </div>
</div>
</cms:formatter>

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.