# SRCset and \ plugin for PG available! **URL:** \ **Category:** Third Party Plugins\ **Created:** [December 14, 2019, 9:20pm UTC](https://forum.pinegrow.com/t/srcset-and-picture-plugin-for-pg-available/3619 "2019-12-14T21:20:28Z")\ **Posts on this page:** 20\ **Page:** 1

**Author:** ![RobM](https://avatars.discourse-cdn.com/v4/letter/r/278dde/32.png) [@RobM](https://forum.pinegrow.com/u/RobM)\ **Post date:** [December 14, 2019, 9:20pm UTC](https://forum.pinegrow.com/t/srcset-and-picture-plugin-for-pg-available/3619/1 "2019-12-14T21:20:28Z")

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/](https://plugins.springhilldesign.net/pinegrow/) ---

**Author:** ![schpengle](https://yyz2.discourse-cdn.com/flex036/user_avatar/forum.pinegrow.com/schpengle/32/238_2.png) [@schpengle](https://forum.pinegrow.com/u/schpengle)\ **Post date:** [December 14, 2019, 10:15pm UTC](https://forum.pinegrow.com/t/srcset-and-picture-plugin-for-pg-available/3619/2 "2019-12-14T22:15:47Z")

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 🙂 This is nice. Now @benhanna will have some company in the _clever_ department of PG. ---

**Author:** ![AllMediaLab](https://yyz2.discourse-cdn.com/flex036/user_avatar/forum.pinegrow.com/allmedialab/32/2079_2.png) [@AllMediaLab](https://forum.pinegrow.com/u/AllMediaLab)\ **Post date:** [December 15, 2019, 11:15am UTC](https://forum.pinegrow.com/t/srcset-and-picture-plugin-for-pg-available/3619/3 "2019-12-15T11:15:40Z")

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/](https://www.responsivebreakpoints.com/) Eventually I’m willing to pay for the Pro version 😉 Regards, David Example of “type”: `

` ---

**Author:** ![RobM](https://avatars.discourse-cdn.com/v4/letter/r/278dde/32.png) [@RobM](https://forum.pinegrow.com/u/RobM)\ **Post date:** [December 15, 2019, 2:04pm UTC](https://forum.pinegrow.com/t/srcset-and-picture-plugin-for-pg-available/3619/4 "2019-12-15T14:04:25Z")

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

**Author:** ![RobM](https://avatars.discourse-cdn.com/v4/letter/r/278dde/32.png) [@RobM](https://forum.pinegrow.com/u/RobM)\ **Post date:** [December 15, 2019, 2:07pm UTC](https://forum.pinegrow.com/t/srcset-and-picture-plugin-for-pg-available/3619/5 "2019-12-15T14:07:18Z")

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. ---

**Author:** ![AllMediaLab](https://yyz2.discourse-cdn.com/flex036/user_avatar/forum.pinegrow.com/allmedialab/32/2079_2.png) [@AllMediaLab](https://forum.pinegrow.com/u/AllMediaLab)\ **Post date:** [December 15, 2019, 2:12pm UTC](https://forum.pinegrow.com/t/srcset-and-picture-plugin-for-pg-available/3619/6 "2019-12-15T14:12:53Z")

Thanks for your reply Rob, This Bootstrap Carousel I created is made with that code. [https://www.friture-kasteelhoeve.nl/](https://www.friture-kasteelhoeve.nl/) To see the mobile version you have to use Chrome developers responsive mode or a mobile device! ---

**Author:** ![RobM](https://avatars.discourse-cdn.com/v4/letter/r/278dde/32.png) [@RobM](https://forum.pinegrow.com/u/RobM)\ **Post date:** [December 15, 2019, 2:19pm UTC](https://forum.pinegrow.com/t/srcset-and-picture-plugin-for-pg-available/3619/7 "2019-12-15T14:19:20Z")

Another quick question - would these mime types listed at the top of the page be enough? > **[Image file type and format guide](https://developer.mozilla.org/en-US/docs/Web/Media/Formats/Image_types)** > > In this guide, we'll cover the image file types generally supported by web browsers, and provide insights that will help you select the most appropriate formats to use for your site's imagery. ---

**Author:** ![AllMediaLab](https://yyz2.discourse-cdn.com/flex036/user_avatar/forum.pinegrow.com/allmedialab/32/2079_2.png) [@AllMediaLab](https://forum.pinegrow.com/u/AllMediaLab)\ **Post date:** [December 15, 2019, 2:20pm UTC](https://forum.pinegrow.com/t/srcset-and-picture-plugin-for-pg-available/3619/8 "2019-12-15T14:20:54Z")

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

**Author:** ![RobM](https://avatars.discourse-cdn.com/v4/letter/r/278dde/32.png) [@RobM](https://forum.pinegrow.com/u/RobM)\ **Post date:** [December 15, 2019, 3:19pm UTC](https://forum.pinegrow.com/t/srcset-and-picture-plugin-for-pg-available/3619/9 "2019-12-15T15:19:21Z")

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

**Author:** ![AllMediaLab](https://yyz2.discourse-cdn.com/flex036/user_avatar/forum.pinegrow.com/allmedialab/32/2079_2.png) [@AllMediaLab](https://forum.pinegrow.com/u/AllMediaLab)\ **Post date:** [December 15, 2019, 3:48pm UTC](https://forum.pinegrow.com/t/srcset-and-picture-plugin-for-pg-available/3619/10 "2019-12-15T15:48:48Z")

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/](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. `

Full screen foto van een panorama over de Voerstreek in Belgie met een uitzicht over heuvelachtig landschap met een helder blauwe lucht.

` ---

**Author:** ![RobM](https://avatars.discourse-cdn.com/v4/letter/r/278dde/32.png) [@RobM](https://forum.pinegrow.com/u/RobM)\ **Post date:** [December 15, 2019, 4:02pm UTC](https://forum.pinegrow.com/t/srcset-and-picture-plugin-for-pg-available/3619/11 "2019-12-15T16:02:42Z")

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

**Author:** ![AllMediaLab](https://yyz2.discourse-cdn.com/flex036/user_avatar/forum.pinegrow.com/allmedialab/32/2079_2.png) [@AllMediaLab](https://forum.pinegrow.com/u/AllMediaLab)\ **Post date:** [December 15, 2019, 4:27pm UTC](https://forum.pinegrow.com/t/srcset-and-picture-plugin-for-pg-available/3619/12 "2019-12-15T16:27:11Z")

of course! Downloading now! ---

**Author:** ![AllMediaLab](https://yyz2.discourse-cdn.com/flex036/user_avatar/forum.pinegrow.com/allmedialab/32/2079_2.png) [@AllMediaLab](https://forum.pinegrow.com/u/AllMediaLab)\ **Post date:** [December 15, 2019, 4:42pm UTC](https://forum.pinegrow.com/t/srcset-and-picture-plugin-for-pg-available/3619/13 "2019-12-15T16:42:22Z")

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

**Author:** ![RobM](https://avatars.discourse-cdn.com/v4/letter/r/278dde/32.png) [@RobM](https://forum.pinegrow.com/u/RobM)\ **Post date:** [December 15, 2019, 4:46pm UTC](https://forum.pinegrow.com/t/srcset-and-picture-plugin-for-pg-available/3619/14 "2019-12-15T16:46:02Z")

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? ---

**Author:** ![AllMediaLab](https://yyz2.discourse-cdn.com/flex036/user_avatar/forum.pinegrow.com/allmedialab/32/2079_2.png) [@AllMediaLab](https://forum.pinegrow.com/u/AllMediaLab)\ **Post date:** [December 15, 2019, 5:02pm UTC](https://forum.pinegrow.com/t/srcset-and-picture-plugin-for-pg-available/3619/15 "2019-12-15T17:02:20Z")

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

**Author:** ![RobM](https://avatars.discourse-cdn.com/v4/letter/r/278dde/32.png) [@RobM](https://forum.pinegrow.com/u/RobM)\ **Post date:** [December 15, 2019, 5:10pm UTC](https://forum.pinegrow.com/t/srcset-and-picture-plugin-for-pg-available/3619/16 "2019-12-15T17:10:11Z")

![image](https://canada1.discourse-cdn.com/flex036/uploads/pinegrow/original/2X/0/0c39606b068719678a5c6ef4e1eac30982c23d6b.png) 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](https://canada1.discourse-cdn.com/flex036/uploads/pinegrow/original/2X/f/f0147ea352b52cf7275d7ace6905c56b06ea86b6.png) Also, if you put an img tag in and look in your properties panel you should see all of the new fields. ![image](https://canada1.discourse-cdn.com/flex036/uploads/pinegrow/original/2X/5/55e333d1dfc640eeb75c08b7e1b533e92305959c.png) CLICK jpg to see full image! same with selecting the source element inside the picture element in the tree. ![image](https://canada1.discourse-cdn.com/flex036/uploads/pinegrow/original/2X/e/e550e485952df0bce5c686d3d61d840949036b5c.png) ![image](https://canada1.discourse-cdn.com/flex036/uploads/pinegrow/original/2X/a/a2f4ff33820afb8c2d001557d921b13654baf8e5.png) ---

**Author:** ![AllMediaLab](https://yyz2.discourse-cdn.com/flex036/user_avatar/forum.pinegrow.com/allmedialab/32/2079_2.png) [@AllMediaLab](https://forum.pinegrow.com/u/AllMediaLab)\ **Post date:** [December 15, 2019, 5:16pm UTC](https://forum.pinegrow.com/t/srcset-and-picture-plugin-for-pg-available/3619/17 "2019-12-15T17:16:43Z")

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. ---

**Author:** ![Printninja](https://yyz2.discourse-cdn.com/flex036/user_avatar/forum.pinegrow.com/printninja/32/1181_2.png) [@Printninja](https://forum.pinegrow.com/u/Printninja)\ **Post date:** [December 16, 2019, 12:39am UTC](https://forum.pinegrow.com/t/srcset-and-picture-plugin-for-pg-available/3619/18 "2019-12-16T00:39:53Z")

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

**Author:** ![RobM](https://avatars.discourse-cdn.com/v4/letter/r/278dde/32.png) [@RobM](https://forum.pinegrow.com/u/RobM)\ **Post date:** [December 16, 2019, 10:40am UTC](https://forum.pinegrow.com/t/srcset-and-picture-plugin-for-pg-available/3619/19 "2019-12-16T10:40:37Z")

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

**Author:** ![AllMediaLab](https://yyz2.discourse-cdn.com/flex036/user_avatar/forum.pinegrow.com/allmedialab/32/2079_2.png) [@AllMediaLab](https://forum.pinegrow.com/u/AllMediaLab)\ **Post date:** [December 16, 2019, 2:58pm UTC](https://forum.pinegrow.com/t/srcset-and-picture-plugin-for-pg-available/3619/20 "2019-12-16T14:58:57Z")

“ **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/](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 `