Responsive Images

Hi ,

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

           <!--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}}">

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.



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.