SRCset and <picture> plugin for PG available!

Hi All,

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/

2 Likes

Oh My!
You are approaching God like Status…

…especially if your Tutorial Manifests and is anything like as in depth as your UIKit Tutorial was.

spoiler alert
Previous to the chatter on here, I had no idea of what SrcSet was about…feel free to go over the top on the explanations :slight_smile:

This is nice. Now @benhanna will have some company in the clever department of PG.

Hi Rob,

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 :wink:

Regards,

David

Example of “type”:

<picture> <source media="(min-width: 4500px)" srcset="responsive-images/home-slider/aardappel-veld/wide-webp/aardappel-veld-5200px.webp" type="image/webp"> <source media="(min-width: 4500px)" srcset="responsive-images/home-slider/aardappel-veld/wide-jpg/aardappel-veld-5200px.jpg"> <source media="(min-width: 3500px)" srcset="responsive-images/home-slider/aardappel-veld/wide-webp/aardappel-veld-4000px.webp" type="image/webp"> <source media="(min-width: 3500px)" srcset="responsive-images/home-slider/aardappel-veld/wide-jpg/aardappel-veld-4000px.jpg"> <source media="(min-width: 2500px)" srcset="responsive-images/home-slider/aardappel-veld/wide-webp/aardappel-veld-3000px.webp" type="image/webp"> <source media="(min-width: 2500px)" srcset="responsive-images/home-slider/aardappel-veld/wide-jpg/aardappel-veld-3000px.jpg"> <source media="(min-width: 1500px)" srcset="responsive-images/home-slider/aardappel-veld/wide-webp/aardappel-veld-2000px.webp" type="image/webp"> <source media="(min-width: 1500px)" srcset="responsive-images/home-slider/aardappel-veld/wide-jpg/aardappel-veld-2000px.jpg"> <source media="(min-width: 480px)" srcset="responsive-images/home-slider/aardappel-veld/wide-webp/aardappel-veld-1000px.webp 1x, responsive-images/home-slider/aardappel-veld/wide-webp/aardappel-veld-2000px.webp 2x, responsive-images/home-slider/aardappel-veld/wide-webp/aardappel-veld-3000px.webp 3x" type="image/webp"> <source media="(min-width: 480px)" srcset="responsive-images/home-slider/aardappel-veld/wide-jpg/aardappel-veld-1000px.jpg 1x, responsive-images/home-slider/aardappel-veld/wide-jpg/aardappel-veld-2000px.jpg 2x, responsive-images/home-slider/aardappel-veld/wide-jpg/aardappel-veld-3000px.jpg 3x"> <source media="(min-width: 0px) and (orientation: portrait)" srcset="responsive-images/home-slider/aardappel-veld/phone-webp/aardappelen-veld-portrait-500px-%401x.webp 1x, responsive-images/home-slider/aardappel-veld/phone-webp/aardappelen-veld-portrait-750px-%401.5x.webp 1.5x, responsive-images/home-slider/aardappel-veld/phone-webp/aardappelen-veld-portrait-1000px-%402x.webp 2x, responsive-images/home-slider/aardappel-veld/phone-webp/aardappelen-veld-portrait-1500px-%403x.webp 3x" type="image/webp"> <source media="(min-width: 0px) and (orientation: portrait)" srcset="responsive-images/home-slider/aardappel-veld/phone-jpg/aardappelen-veld-portrait-500px-%401x.jpg 1x, responsive-images/home-slider/aardappel-veld/phone-jpg/aardappelen-veld-portrait-750px-%401.5x.jpg 1.5x, responsive-images/home-slider/aardappel-veld/phone-jpg/aardappelen-veld-portrait-1000px-%402x.jpg 2x, responsive-images/home-slider/aardappel-veld/phone-jpg/aardappelen-veld-portrait-1500px-%403x.jpg 3x"> <img src="responsive-images/home-slider/aardappel-veld/wide-jpg/aardappel-veld-1000px.jpg" alt="foto aardappelen" class="d-block img-fluid"> </picture>

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!

1 Like

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!

Another quick question - would these mime types listed at the top of the page be enough?

They would be perfect! And of course the orientation of the media query portrait and landscape.

1 Like

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>

I have a new version. Can you download and try it out when you get a chance?

of course! Downloading now!

Where do I find the plugin? It’s already activated. Have only been reading the documentation till now.

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?

When I activate the plugin on a page of a new project nothing happens!
Will try it tomorrow, have an appointment in a hour.


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.
image
Also, if you put an img tag in and look in your properties panel you should see all of the new fields.

CLICK jpg to see full image!
same with selecting the source element inside the picture element in the tree.
image

Ok I have it! It only works visual. I was in code mode. Have a quick look now!
Looks really good, but don’t see the new features.
I mean “type”

I promise when I’m in my office tomorrow I will test the plugin.

Wow, RobM, you are truely an awesome human being!

Just trying to make up for all the puppies and kittens I’ve thrown into wood chippers.

1 Like

don’t look a gift horse in the mouth
Tested your plugin and it works fine.

I wish there was a plugin that works like this and better, but then with “type” added to the app.
https://www.responsivebreakpoints.com/

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.

https://www.npmjs.com/package/responsive-images-generator