[opencms-dev] cms:scaleImage

[Kai Widmann]

Hey Filip,

I’m pressed for time, so here are two short code samples (the first still uses mwx:scaleImage, but that’s the same as cms:scaleImage now):


<mwx:scaleImage src="${item.imageUri}" width="480" scaleType="5" var="xsImage"/>
<mwx:scaleImage src="${item.imageUri}" width="1024" scaleType="5" var="image"/>
<div class="intro-pic ${item.imagePositions}" id="stage-${item.name}"
     style="background-image: url(${image.srcUrl})" data-xs-bg="${xsImage.srcUrl}">

This creates two versions of the image and includes the resulting URLs as background image (in the style attribute) and as smaller background image for smartphones (in the attribute data-xs-bg, swapped depending on window width by JavaScript magic).



<picture>
   <cms:scaleImage src="${image.value.Image}" width="980" scaleType="5" hiDpiVariants="2x" var="lgImage"/>
   <source srcset="${lgImage.srcUrl} 1x${lgImage.hiDpiImages['2x'] != null ? ', '.concat(lgImage.hiDpiImages['2x'].srcUrl).concat(' 2x') : ''}" media="(min-width: 769px)">
   <cms:scaleImage src="${image.value.Image}" width="738"  scaleType="5" hiDpiVariants="2x" var="smImage"/>
   <source srcset="${smImage.srcUrl} 1x${smImage.hiDpiImages['2x'] != null ? ', '.concat(smImage.hiDpiImages['2x'].srcUrl).concat(' 2x') : ''}" media="(min-width: 481px)">
   <cms:scaleImage src="${image.value.Image}" width="320"  scaleType="5" hiDpiVariants="2x" var="xsImage"/>
   <source srcset="${xsImage.srcUrl} 1x${xsImage.hiDpiImages['2x'] != null ? ', '.concat(xsImage.hiDpiImages['2x'].srcUrl).concat(' 2x') : ''}" media="(min-width: 320px)">
   <img class="img-responsive" src="${lgImage.srcUrl}" alt="${mwx:encodeAltAttribute(image.value.AltText)}">
</picture>

That’s a made up example, I didn’t run this code. Usually we use arrays of image widths and media queries instead of doing the same stuff multiple times, so the scaling and source tag output is usually in a loop and the arrays are defined in some config file.
The scaleTypes are exactly the same as in Alkacon’s ImageScaler-Tags/methods, you can find descriptions in the documentation https://documentation.opencms.org/javadoc/tld/cms/scaleImage.html. I usually use scaleType 5, which means: scale to given dimension, keep aspect ratio, don’t enlarge.
A documentation of the bean returned by the scaleImage can be found here: https://documentation.opencms.org/javadoc/core/org/opencms/jsp/util/CmsJspScaledImageBean.html

Best
Kai


Am 03.10.2018 um 11:22 schrieb Filip.Kratochvil at ibacz.eu<mailto:Filip.Kratochvil at ibacz.eu>:

Hi Kai,

please do you have some short example how to use <cms:scaleImage> tag?

Thank you in a advance.

S pozdravem / Kind regards

Filip Kratochvil
OpenCms Consultant


-----opencms-dev-bounces at opencms.org<mailto:opencms-dev-bounces at opencms.org> wrote: -----
To: The OpenCms mailing list <opencms-dev at opencms.org<mailto:opencms-dev at opencms.org>>
From: Filip.Kratochvil at ibacz.eu<mailto:Filip.Kratochvil at ibacz.eu>
Sent by: opencms-dev-bounces at opencms.org<mailto:opencms-dev-bounces at opencms.org>
Date: 08/13/2018 09:27AM
Subject: Re: [opencms-dev] cms:scaleImage

Hi Kai,

i'll appreciate as well that you will describe this function a little bit:)

Thanks!

S pozdravem / Kind regards

Filip Kratochvil
OpenCms Consultant

IBA CZ, s.r.o.


-----opencms-dev-bounces at opencms.org<mailto:opencms-dev-bounces at opencms.org> wrote: -----
To: The OpenCms mailing list <opencms-dev at opencms.org<mailto:opencms-dev at opencms.org>>
From: Kai Widmann
Sent by: opencms-dev-bounces at opencms.org<mailto:opencms-dev-bounces at opencms.org>
Date: 08/07/2018 03:35PM
Subject: Re: [opencms-dev] cms:scaleImage

Hey Fabian,

it’s been a while, so are you still interested in cms:scaleImage? Maybe I can shed some light, if you’re still interested.

Best

Kai

> Am 28.06.2018 um 10:20 schrieb fhsubscriptions at componio.net<mailto:fhsubscriptions at componio.net>:
>
> Hi,
>
> can anyone shed a light on how cms:scaleImage is thought to work with the
> <picture> tag? I am somewhat lost and try to come up with a better aproach
> to responsive image handling (media queries, conditional inline code) we are
> using today.
>
>
> Many thanks,
>
>
> \Fabian
>
>
>
> _______________________________________________
> 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
> http://lists.opencms.org/cgi-bin/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
http://lists.opencms.org/cgi-bin/mailman/listinfo/opencms-dev




________________________________
Disclaimer:

The information contained in this communication is intended solely for the use of the individual or entity to whom it is addressed and others authorized to receive it.
It may contain confidential or legally privileged information.
If you are not the intended recipient you are hereby notified that any disclosure, copying, distribution or taking any action in reliance on the contents of this information is strictly prohibited and may be unlawful.
If you have received this communication in error, please notify us immediately by forwarding this email to ict at ibacz.eu<mailto:ict at ibacz.eu> and then delete it from your system.
IBA Group is neither liable for the proper and complete transmission of the information contained in this communication nor for any delay in its receipt.
_______________________________________________
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
http://lists.opencms.org/cgi-bin/mailman/listinfo/opencms-dev




________________________________
Disclaimer:

The information contained in this communication is intended solely for the use of the individual or entity to whom it is addressed and others authorized to receive it.
It may contain confidential or legally privileged information.
If you are not the intended recipient you are hereby notified that any disclosure, copying, distribution or taking any action in reliance on the contents of this information is strictly prohibited and may be unlawful.
If you have received this communication in error, please notify us immediately by forwarding this email to ict at ibacz.eu<mailto:ict at ibacz.eu> and then delete it from your system.
IBA Group is neither liable for the proper and complete transmission of the information contained in this communication nor for any delay in its receipt.
_______________________________________________
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
http://lists.opencms.org/cgi-bin/mailman/listinfo/opencms-dev




-------------- next part --------------
An HTML attachment was scrubbed...
URL: <https://webmail.opencms.org/pipermail/opencms-dev/attachments/20181004/877cfe13/attachment.htm>