[opencms-dev] How to use the focal point feature

Tue Jul 18 16:51:56 CEST 2023

Hi Kai!

The focal point feature is best used in combination with the CmsJspImageBean.
The bean will generate the required parameter strings.
Adding these parameters manually to the image URL I do not recommend.

Example of the use of the image bean on an JSP:

-----------------
<%@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"%>

<c:set var="imagePath" value="/.galleries/office/07.jpg" />
<c:set var="imageResource" value="${cms.wrap[imagePath].toResource}" />
<c:set var="imageBean" value="${imageResource.toImage}" />

<html>
<body>
<h1>Image test</h1>

<h3>The unscaled image</h3>
<img src="${imageBean.srcUrl}">

<h3>The image cropped to a square</h3>
<p>This will use the focal point when calculating the square.</p>
<img src="${imageBean.scaleRatio['1-1'].srcUrl}">

<h3>The image cropped to 16-9 with a width of 200</h3>
<img src="${imageBean.scaleRatio['16-9'].scaleWidth[200].srcUrl}">

</body>
</html>
-----------------

Regarding the focal point:

* The focal point can be set in the form editor when selecting an image that is defined in the schema as type "OpenCmsVfsFile" with the "imagegallery" widget.
* If set, the focal point is stored at the image in the shared property "image.focalpoint" which will contain the pixel coordinates of the point on the image.
* If the "scaleRatio" option on the image bean is used, the scaler will crop the image so that the focal point is as much in the middle as possible. 

> We have a responsive website with different modules. Let’s say, we have module A, which should render one image in three different image aspect ratios and sizes. One for desktop, tablet and smartphone.

> For example:
> Image desktop: height: 200px, width: 800px

<img src="${imageBean.scaleRatio['800-200'].scaleWidth[800].srcUrl}">

> Image tablet: height: 200px, width: 600px

<img src="${imageBean.scaleRatio['600-200'].scaleWidth[600].srcUrl}">

> Image smartphone: height: 150px, width: 400px

<img src="${imageBean.scaleRatio['400-150'].scaleWidth[400].srcUrl}">

> How can we achieve the output for each device with a focal point set to optimally show the correct part of the image, even with such different image ratios and sizes?

Currently there can be only one focal point which is the same for each generated image.
However, in our projects this is usually good enough.

HTH 

Alex.

-------------------
Alexander Kandzior

Alkacon Software - The OpenCms Experts                                                    
http://www.alkacon.com - http://www.opencms.org                                                          

> Am 13.07.2023 um 19:07 schrieb Schliemann, Kai via opencms-dev <opencms-dev at opencms.org>:
> 
> Hi list,
>  
>  
> OpenCms makes it possible to set a focal point in images.
>  
> We have a question about that.
>  
> We couldn't find any precise instructions on how to use the focal point feature.
> The only documentations we found are about how to set a focal point, but we don't know how to use it.
> However, we have found that additional (scale) properties are needed to be able to use the function.
>  
> We tried this to scale an image with a set focal point:
> <cms:scaleImage var="imgBean1" src="${content.value.Image.toImage}?__scale=h:600,w:900,t:8,cx:40,cy:30,ch:600,cw :1500" />
>  
>  
> Our questions:
>  
> Is there any specific guide on how we can use the focal point feature or can you
> describe to us which steps are necessary to achieve an expected result (result = scale image with focal point)?
>  
> Are there any settings that we are missing to unlock this function?
>  
> A quick example would also be helpful.
>  
> In addition, to make our needs clearer, what our use case is:
> We have a responsive website with different modules. Let’s say, we have module A, which should render one image in three different image aspect ratios and sizes. One for desktop, tablet and smartphone.
> The same image should be used for all three devices.
> Every image has, as already mentioned, different sizes and aspect ratios.
> For example:
> Image desktop: height: 200px, width: 800px
> Image tablet: height: 200px, width: 600px
> Image smartphone: height: 150px, width: 400px
>  
> How can we achieve the output for each device with a focal point set to optimally show the correct part of the image, even with such different image ratios and sizes?
>  
> Thanks a lot in advance for your help.
>  
> Best regards
> Kai
> __________________________________________ 
>  
> Kai Schliemann
> Dipl.-Wirtschaftsingenieur (FH)
> Senior IT-Berater Softwareentwicklung
> comundus GmbH
> Heerstraße 111, D-71332 Waiblingen
> Durchwahl  +49 7151 96528-120
> Zentrale      +49 7151 96528-0
> Fax             +49 7151 96528-999
> E-Mail    k.schliemann at comundus.com <mailto:k.schliemann at comundus.com>
> Internet https://www.comundus.com/
> Hinweis Unsere Datenschutzerklärung <https://www.comundus.com/unternehmen/datenschutz/>
>  
> Geschäftsführer Siegfried Fitzel,  Klaus Hillemeier  
> Amtsgericht Stuttgart, HRB 264290
> __________________________________________ 
> 
> comundus auf:  
>                    
> <image001.png> <https://www.facebook.com/Comundus-GmbH-163398933697079/> <image002.png> <http://twitter.com/comundus> <image003.png> <https://www.xing.com/companies/comundusgmbh> <image004.png> <https://www.youtube.com/channel/UCTTN-c169oHvHDrykuKnMQw>
>  
>  
> _______________________________________________
> This mail is sent to you from the opencms-dev mailing list
> To change your list options, or to unsubscribe from the list, please visit
> https://lists.opencms.org/mailman/listinfo/opencms-dev

-------------- next part --------------
An HTML attachment was scrubbed...
URL: <http://lists.opencms.org/pipermail/opencms-dev/attachments/20230718/645ff73c/attachment.htm>