Responsive Images

Using Neos & Flow
1

Hi ,

I’m new to Neos Im trying to create a responsive image block such as follows

        <picture>
           <!--if small image exist -->
                <source media="screen and (max-width: 734px)" srcset="{{smallSrcset}}" type="{{type}}">
              <!--if medium image exist -->
                <source media="screen and (max-width: 1068px)" srcset="{{mediumSrcset}}" type="{{type}}">
             <!--if large image exist -->
                <source media="screen and (max-width: 1440px)" srcset="{{largeSrcset}}" type="{{type}}">
             <!--if extra large image exist -->
                <source media="screen and (min-width: 1441px)" srcset="{{extraLargeSrcset}}" type="{{type}}">
            <!-- Original Image -->
            <img src="{{defaultSrc}}" alt="{{alt}}" class="{{style}}">
        </picture>

The different responsive images would be uploaded manually . I thought maybe by enabling variant for media module that would do the trick but it doesn’t allows me to manually upload a variant. Is there a way to do this without having to introduce multiple media attributes in the inspector as well having to upload independent images? Ideally I want the user to upload an image and if that image has additional responsive images they can upload it as part of same asset.

Thanks

-Emily

2

Hi Emily,

if you want totally different images then there is no way around multiple imageEditors that i know.

But if you want multiple crops of a single image there are packages like Sitegeist.Kaleidoscope, Onedrop.ImageSrcset and Jonnitto.Picture that may help with that.