srcset-Rendering without "width" doesn't work correctly

[alexanderschnitzler]

srcset-Rendering without "width" doesn't work correctly

[alexanderschnitzler]

tt_content.textmedia.settings.responsive_image_rendering {
    sourceCollection {
        10 {
            width = 1280m
            srcset = 1280w
        }

        20 {
            width = 960m
            srcset = 960w
        }

        30 {
            width = 720m
            srcset = 720w
            sizes = (min-width: 1025px) 660px
        }

        40 {
            width = 640m
            srcset = 640w
        }

        50 {
            width = 360m
            srcset = 360w
        }

        60 {
            width = 320m
            srcset = 320w
            sizes = calc(100vw - 30px)
        }
    }
    layoutKey = srcset
}

This is the actual configuration of this website: http://www.elisenhoehe.de/

You're welcome :)

[alexanderschnitzler]

I don't really understand the problem. But one thing is important to know. The TypoScript configuration of this extension is different than the one of css_styled_content.

Nevertheless, I tried your configuration with a 4k image. This extension renders a 360px image by default, just to be sure there is a small initial version in case one needs a polyfill.

Then these two sizes configurations are evaluated. As both do not define a width, the full with image is used. This is the result:

<img src="fileadmin/_processed_/csm_retina-image5_c2b3bf1a87.jpg" alt="" title="" srcset="fileadmin/user_upload/retina-image5.jpg, fileadmin/user_upload/retina-image5.jpg" sizes="">

So, in general, the extension works fine. It's just that the syntax is different. Hope I could help you.

[bavarianbytes]

Hi Alexander,
thank you for answer.
Yes, but as the extension renders the two sizes based on full width, not on the size a editor has set in the appearance field of the content element, it's not possible to place images on the site with a certain size and render them in multiple sizes based on how big they should be displayed.

An example:
If an editor loads up an file with an original size of 2000x2000 px and sets the output size to 24x24 px it would be optimal to output two images: 24x24 and 48x48 (for retina).

The use case is to remain the possibility to set a size in the appearance field of a content element and render a "normal" and a retina image.

[alexanderschnitzler]

Hi,
I think there are many things involved we need to separate.

1. There is that default image of 360px width. That is a problem if you need to generate images that are smaller than that. It's something I didn't think about and I need to fix.
2. This extensions does not work with a configuration where you leave out the width. If no width is provided, the 360px default image is used and the original file.
3. If you set a width and/or a height for an image, that processing is done before the responsive images are generated and responsive images are only created if the source file is big enough. So, if you upload that 2000x2000 image and set it's width and height to 24px, it's first cropped and then the TS configuration is used to create the responsive images. From there on, you cannot create bigger images than the 24x24. What you can do is this:

Leave the original image untouched and use this configuration.

tt_content.textmedia.settings.responsive_image_rendering.sourceCollection {
  normal.width = 24
  retina.width = 48
}

Then, only the bug, mentioned in 1, applies.

Does that help?

[bavarianbytes]

1. Ok
2. Ok, then i have to set a width for the SourceCollection in any case.
3. Ok, that helps to understand how it works. I think i have to rethink my responsive image concept with fluid_styled_content. I think i should disabled the width/height fields in the CE and just render different resolutions based on each image. Probably it should also set the sizes attribute in the img-tag...

As you have removed a default config in the extension can you recommend a config to use? How do you use it?

Thank you for your answers and the development!

[alexanderschnitzler]

I will close this issue now. If you need any further help, feel free to contact me.