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?

[BinaryAlchemy11]

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]

@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_]

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

[BinaryAlchemy11]

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

[BinaryAlchemy11]

Not sure the solution works well. I tried with the javascript option. Despite the js replacing the src (relevant image source) for the img tag with change in container size. It doesn't change the current source. 

Note: Using a blank black background image in the screenshot below:

 

[arunpatidar]

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 

[kautuk_sahni]

@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!