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.
The interesting spot here is the formatter of the article:
<%@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.