I have heard chatter on both the forum and over at FB that people would like both a tag, as well as better/easier ways to add in srcset data to tags. I fully expect the PG development team to address this, but in the meantime, here is a plugin that will provide these two things. Fair warning, it is NO-FRILLS. It is however, free! The number of srcset fields is fixed at 10 - you can add less, but not more. Same with accompanying media queries. This plugin will NOT check to make sure that what you are entering isn’t malformed, so you have to have some idea about using srcset and . Having said that, I will likely have a quick tutorial on this posted soon if people want this (There are a lot of tuts online already for both, just not in conjunction with PG). Without further ado, here you go! https://plugins.springhilldesign.net/pinegrow/
Thanks for the great free plugin! Would it be possible to add “type” to the plugin to create the possibility to use webp with jpg fallback? Because webp is implemented in all browsers except Safari most developers use webp and jpg fallback. And it would really be nice to be able to crop the images like here: https://www.responsivebreakpoints.com/
Eventually I’m willing to pay for the Pro version
Sorry about the type thing. I put this together for a project I hadn’t started yet. I loaded in a plain HTML project and when I selected the source element in the tree I saw a dropdown for type show-up. I assumed it had all the different possibilities (like image/webp). So, I thought I didn’t need to include it. Imagine my surprise when I pulled it down and it has “Submit”, “Button”, and “Reset” as choices! I will include type right away.
Any other suggestions for improvement?
Thanks for the links and I will see if I could integrate it in some way to PG.
Cheers!
Huh - just looking through your example -> should the srcset on the have multiple fields? I see that some of the srcset attributes at the end have multiple src with density. I didn’t realize that this was a possibility.
Thanks for your reply Rob,
This Bootstrap Carousel I created is made with that code. https://www.friture-kasteelhoeve.nl/
To see the mobile version you have to use Chrome developers responsive mode or a mobile device!
I will make sure that you can add the orientation in by typing the full media query: (min-width: 400px) and (orientation: portrait)
for example.
So, for each source tag there is one media rule and one type attribute, correct? So even though you can have a long srcset with images with different densities, there is still only one media rule? Or is this not true? If you were using a srcset that supplied images with ###h instead of #w would you need multiple media rules? For example: srcset="image-1-300px.jpg 280w, image-1-600px.jpg 590w, image-1-1024px.jpg 1000w"
would you then want multiple media rules?
Ahhhh!! I thought I sort of/kind of knew what I was doing with responsive images.
Thanks
You don’t always need a orientation, but in case of a full screen image it’s good to be able to use it.
This is an example of a full screen image system I created with LazySizes from Farkas on Github. https://yourweblab.nl/full-screen/
Basically I use 3 sorts of images: phone portrait, tablet portrait and wide.
This could be made in a plugin too. I created a couple of lines of CSS to make it work with foreground images. It works cross browser. <picture> <source media="(max-width: 475px) and (orientation: portrait)" type="image/webp" data-sizes="auto" srcset="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==" data-srcset=" responsive-images/home-back/bg-Phone-webp/bg-home-phone_i2pozi_c_scale%2Cw_480.webp 480w, responsive-images/home-back/bg-Phone-webp/bg-home-phone_i2pozi_c_scale%2Cw_890.webp 890w, responsive-images/home-back/bg-Phone-webp/bg-home-phone_i2pozi_c_scale%2Cw_1200.webp 1200w" class="lazyload"> <source media="(max-width: 475px) and (orientation: portrait)" data-sizes="auto" srcset="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==" data-srcset=" responsive-images/home-back/bg-Phone-jpg/bg-home-phone_i2pozi_c_scale%2Cw_480.jpg 480w, responsive-images/home-back/bg-Phone-jpg/bg-home-phone_i2pozi_c_scale%2Cw_890.jpg 890w, responsive-images/home-back/bg-Phone-jpg/bg-home-phone_i2pozi_c_scale%2Cw_1200.jpg 1200w" class="lazyload"> <source media="(min-width: 476px) and (orientation: portrait)" type="image/webp" data-sizes="auto" srcset="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==" data-srcset=" responsive-images/home-back/bg-Tablets-webp/bg-home-tablet_m1dp98_c_scale%2Cw_768.webp 768w, responsive-images/home-back/bg-Tablets-webp/bg-home-tablet_m1dp98_c_scale%2Cw_1207.webp 1207w, responsive-images/home-back/bg-Tablets-webp/bg-home-tablet_m1dp98_c_scale%2Cw_1536.webp 1536w" class="lazyload"> <source media="(min-width: 476px) and (orientation: portrait)" data-sizes="auto" srcset="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==" data-srcset=" responsive-images/home-back/bg-Tablets-jpg/bg-home-tablet_m1dp98_c_scale%2Cw_768.jpg 768w, responsive-images/home-back/bg-Tablets-jpg/bg-home-tablet_m1dp98_c_scale%2Cw_1207.jpg 1207w, responsive-images/home-back/bg-Tablets-jpg/bg-home-tablet_m1dp98_c_scale%2Cw_1536.jpg 1536w" class="lazyload"> <source media="(max-width: 4800px)" type="image/webp" data-sizes="auto" srcset="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==" data-srcset=" responsive-images/home-back/bg-wide-webp/bg-home-wide_ra1f9z_c_scale%2Cw_800.webp 800w, responsive-images/home-back/bg-wide-webp/bg-home-wide_ra1f9z_c_scale%2Cw_1733.webp 1733w, responsive-images/home-back/bg-wide-webp/bg-home-wide_ra1f9z_c_scale%2Cw_2379.webp 2379w, responsive-images/home-back/bg-wide-webp/bg-home-wide_ra1f9z_c_scale%2Cw_2951.webp 2951w, responsive-images/home-back/bg-wide-webp/bg-home-wide_ra1f9z_c_scale%2Cw_3499.webp 3499w, responsive-images/home-back/bg-wide-webp/bg-home-wide_ra1f9z_c_scale%2Cw_3840.webp 3840w, responsive-images/home-back/bg-wide-webp/bg-home-wide_ra1f9z_c_scale%2Cw_5000.webp 5000w" class="lazyload"> <img data-sizes="auto" srcset="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==" data-srcset=" responsive-images/home-back/bg-wide-jpg/bg-home-wide_ra1f9z_c_scale%2Cw_800.jpg 800w, responsive-images/home-back/bg-wide-jpg/bg-home-wide_ra1f9z_c_scale%2Cw_1733.jpg 1733w, responsive-images/home-back/bg-wide-jpg/bg-home-wide_ra1f9z_c_scale%2Cw_2379.jpg 2379w, responsive-images/home-back/bg-wide-jpg/bg-home-wide_ra1f9z_c_scale%2Cw_2951.jpg 2951w, responsive-images/home-back/bg-wide-jpg/bg-home-wide_ra1f9z_c_scale%2Cw_3499.jpg 3499w, responsive-images/home-back/bg-wide-jpg/bg-home-wide_ra1f9z_c_scale%2Cw_3840.jpg 3840w, responsive-images/home-back/bg-wide-jpg/bg-home-wide_ra1f9z_c_scale%2Cw_5000.jpg 5000w" class="lazyload" src="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==" alt="Full screen foto van een panorama over de Voerstreek in Belgie met een uitzicht over heuvelachtig landschap met een helder blauwe lucht."> </picture>
Replace the old folder with the newly downloaded one in the same location. It should still be loaded since it has the same filename. Restart PG and open a new document. You can add the plugin to the new page from the “Manage libraries and plugins’’’” under the file menu. Just click on the “+Activate” You will then see that the Picture element has been added. There will also be new properties for the source and img elements. Does that make sense?
Make sure that the the srcset has a green checkmark next to it. If so, try doing a search in your elements panel for picture. It should show up.
Also, if you put an img tag in and look in your properties panel you should see all of the new fields.
That means providing one high resolution image to the app and then do:
Path to the images folder and name.
From what minimum width to what maximum width in how many steps?
Put in “the art directions”. And Orientations.
click the “Type” for the images for example webp and jpg.
Create responsive images and code by click on the “Go” button.
Now the application runs and creates automatically the HTML code with webp and jpg fallback and crops/optimizes the images in webp and jpg extension.
This means that you can create a responsive/adaptive image with <picture> and <srcset> in a couple of minutes compare to maybe spend 30 minutes on creating one image.
