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

[Schliemann, Kai]

Hi Fabian,

great to hear from you. I hope you are doing well.
Actually we already checked the code and found that not helpful. We as well know how focal points in general work, but we do not get it to work in OpenCms.
Thanks anyway.

Best regards
Kai

Von: opencms-dev <opencms-dev-bounces at opencms.org> Im Auftrag von Fabian Huschka via opencms-dev
Gesendet: Donnerstag, 13. Juli 2023 22:08
An: opencms-dev at opencms.org
Cc: Fabian Huschka <hfcoma at gmx.de>
Betreff: Re: [opencms-dev] How to use the focal point feature


And to get a good idea of how this works, I found a tool that shows just about what's happening:

https://tiny.pictures/demo/focal-point


\Fabian

Gesendet: Donnerstag, 13. Juli 2023 um 22:04 Uhr
Von: "Fabian Huschka via opencms-dev" <opencms-dev at opencms.org<mailto:opencms-dev at opencms.org>>
An: opencms-dev at opencms.org<mailto:opencms-dev at opencms.org>
Cc: "Fabian Huschka" <hfcoma at gmx.de<mailto:hfcoma at gmx.de>>
Betreff: Re: [opencms-dev] How to use the focal point feature
Hi Kai,

From the comments on the Class CmsImageScaler.java

 <p>If a focal point is set on this scaler, this mode will first crop a region defined by cx,cy,cw,ch from the original
        image, then select the largest region of the aspect ratio defined by w/h in the cropped image containing the focal point, and finally
        scale that region to size w x h.</p>

Good to have learned about this feature :)

All the best,

\Fabian


Gesendet: Donnerstag, 13. Juli 2023 um 19:07 Uhr
Von: "Schliemann, Kai via opencms-dev" <opencms-dev at opencms.org<mailto:opencms-dev at opencms.org>>
An: "'The OpenCms mailing list'" <opencms-dev at opencms.org<mailto:opencms-dev at opencms.org>>
Cc: "Schliemann, Kai" <K.Schliemann at comundus.com<mailto:K.Schliemann at comundus.com>>
Betreff: [opencms-dev] How to use the focal point feature
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:

[32-facebook]<https://www.facebook.com/Comundus-GmbH-163398933697079/> [32-twitter] <http://twitter.com/comundus>  [32-xing] <https://www.xing.com/companies/comundusgmbh>  [32-youtube] <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
_______________________________________________ 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/20230714/1d55d7a2/attachment.htm>
-------------- next part --------------
A non-text attachment was scrubbed...
Name: image001.png
Type: image/png
Size: 269 bytes
Desc: image001.png
URL: <http://lists.opencms.org/pipermail/opencms-dev/attachments/20230714/1d55d7a2/attachment.png>
-------------- next part --------------
A non-text attachment was scrubbed...
Name: image002.png
Type: image/png
Size: 462 bytes
Desc: image002.png
URL: <http://lists.opencms.org/pipermail/opencms-dev/attachments/20230714/1d55d7a2/attachment-0001.png>
-------------- next part --------------
A non-text attachment was scrubbed...
Name: image003.png
Type: image/png
Size: 3771 bytes
Desc: image003.png
URL: <http://lists.opencms.org/pipermail/opencms-dev/attachments/20230714/1d55d7a2/attachment-0002.png>
-------------- next part --------------
A non-text attachment was scrubbed...
Name: image004.png
Type: image/png
Size: 350 bytes
Desc: image004.png
URL: <http://lists.opencms.org/pipermail/opencms-dev/attachments/20230714/1d55d7a2/attachment-0003.png>