Level 3

Is there a way to have Responsive images with custom renditions from DAM render in Sites dynamically by image container size but not screen/windows size?

Forum|Forum|1 year ago
November 12, 2024
4 replies
1028 views

I have a requirement on if there are ways to use the custom renditions of the images created to be used dynamically to the web page as per the image container size defined in the sites but not by the screen size.

Currently, we are using <picture> tag and media query to render particular rendition of image however is there a way to go more deep to it to customize as per the image container size?

Sample Code:

<picture>
	<source media="(max-width: 480px)" srcset="${item.image}/jcr:content/renditions/cq5dam.thumbnail.140.100.png">
	<source media="(min-width: 1280px)" srcset="${item.image}/jcr:content/renditions/cq5dam.web.1280.1280.jpeg">
	<source media="(min-width: 480px)" srcset="${item.image}/jcr:content/renditions/cq5dam.thumbnail.319.319.png">
	<img src="${item.image}/jcr:content/renditions/cq5dam.web.1280.1280.jpeg" alt="${item.title}" class="img-fluid" loading="lazy">
</picture>

In the HTL code above, for the sites loaded in the screen resolution of 1280px above, the rendition cq5dam.web.1280.1280.jpeg gets rendered, but if my image container as tiles is just 100x100px in the size, the image is way more high resolution to the image container so is there a way to optimize the image by rendering as per the container size rather than screen size?

NOTE: I am not looking into the options for the Dynamic Media integration as of now.

Shashi_Mulugu

Community Advisor

@binaryalchemy11 its not optimal solution without involving Dynamic media as it's built exactly for this usecase.

But you can optimize further by adding more static thumbnail variations in your DAM Asset workflow or ACS commons image transforner.. and use more source entries in your picture tag..

MukeshYadav_

Community Advisor

Hi @binaryalchemy11 ,

If the layout is not that complex, i.e. padding and margin or others width outside container are fixed then max width value can be adjusted accordingly and it should work.

Container width = Viewport width - (Left margin + Right margin + Left padding + Right padding)

max-width: calc(100vw - 20px - 20px); /* viewport width - padding */

<picture>
    <source 
        media="(max-width: calc(480px - 20px))" 
        srcset="${item.image}/jcr:content/renditions/cq5dam.thumbnail.140.100.png">
    <source 
        media="(min-width: calc(1280px - 20px))" 
        srcset="${item.image}/jcr:content/renditions/cq5dam.web.1280.1280.jpeg">
    <img src="${item.image}/jcr:content/renditions/cq5dam.web.1280.1280.jpeg" alt="${item.title}" class="img-fluid" loading="lazy">
</picture>

Other approach can be using JS

<picture id="dynamic-image">
    <source id="source-140" srcset="${item.image}/jcr:content/renditions/cq5dam.thumbnail.140.100.png">
    <source id="source-319" srcset="${item.image}/jcr:content/renditions/cq5dam.thumbnail.319.319.png">
    <img id="image" src="${item.image}/jcr:content/renditions/cq5dam.thumbnail.319.319.png" alt="${item.title}" class="img-fluid" loading="lazy">
</picture>

<script>
    function updateImageSrc() {
        var container = document.querySelector('#dynamic-image');
        var width = container.offsetWidth; // Get the container width

        // Adjust the image source based on the container's width
        if (width <= 140) {
            document.querySelector('#image').src="${item.image}/jcr:content/renditions/cq5dam.thumbnail.140.100.png";
        } else if (width <= 319) {
            document.querySelector('#image').src="${item.image}/jcr:content/renditions/cq5dam.thumbnail.319.319.png";
        } else {
            document.querySelector('#image').src="${item.image}/jcr:content/renditions/cq5dam.web.1280.1280.jpeg";
        }
    }

    // Call the function when the page loads and on window resize
    window.addEventListener('resize', updateImageSrc);
    document.addEventListener('DOMContentLoaded', updateImageSrc);
</script>

Thanks

BinaryAlchemy11Author

Level 3

Thanks for the reply. Will be trying this solution.

On a quick note, I have seen images being used with pc-adaptive in the url.

/content/dam/test/F22-1.jpg.pc-adaptive.768.medium.jpg

Any idea, how this is done? I am pretty sure this is not related to dynamic media but just can't find where the image is being located. I am sure it is not rendered run-time as on editing the image size the content doesn't get loaded: /content/dam/test/F22-1.jpg.pc-adaptive.100.medium.jpg

arunpatidar

Community Advisor

Hi @binaryalchemy11
The picture tag does not support relative widths but you can control the size of the images using size attribute, where you can load images with custom width.

https://webdesign.tutsplus.com/quick-tip-how-to-use-html5-picture-for-responsive-images--cms-21015t

Arun Patidar

kautuk_sahni

Community Manager

@binaryalchemy11 Did you find the suggestions helpful? Please let us know if you require more information. Otherwise, please mark the answer as correct for posterity. If you've discovered a solution yourself, we would appreciate it if you could share it with the community. Thank you!

Kautuk Sahni

Sign up

Login with SSO

Login to the community

Login with SSO

Scanning file for viruses.

This file cannot be downloaded