The plugin disappears with no reason after seeing it ones! And spits out a error code <src srcset="image-link"> must be <img srcset="image-link">. Or <src="image-link">
The plugin is activated and with a green V search for picture or srcset does nothing.
Unload is missing so I can’t remove the plugin and install it again. Just a new install does nothing.
Huh, I’ll look into this right away. Can you send me a little more detail on how to cause the error.
Thanks!
This is in Windows 10. At the moment I’m doing the same test on my iMac and till now it works OK.
Have no clue where the error comes from.
Only don’t understand the <src srcset="image-link"> And maybe it’s an idea to add the class="img-fluid" to the images, because otherwise it gets real messy (Bootstrap 4).
The type shows only video and audio, but no images like jpg and webp
You also use source type a bit confusing.
But the plugin needs to spit out <img srcset="image-link"> and <src="image-link">
Not <src srcset>
But the best way is to use img only ones at the beginning and only use src to prevent double images.
<img srcset="small.jpg 1x, large.jpg 2x" src="small.jpg" alt="A rad wolf" />
In Windows 10 there is no Unload next to the plugin On my Mac there is Unload.
How can I manually get rid of the plugin in Windows 10?
Sorry to be dense. Just want to fix what needs fixing so trying to understand.
The plugin adds three things.
<picture> tag. Which is made up of:<source> tag that contains a srcset attribute, a media attribute, and a type attribute<source> tag that contains a srcset attribute, a media attribute, and a type attribute<picture> tag enclosed <img> is selected in the tree.With regards to your problems - I’m not seeing how you are causing it to spit out <src srcset>. I’m mostly testing under the plain HTML pages, but I will see if it acts differently for Bootstrap 4. Are you working with the tree, the visual output, or…? I have to look into the “img-fluid” class to see how that works. I don’t use Bootstrap that much - thanks for the suggestion.
I’m using “Source type” because I thought it was only the <source>' tag that excepted the type` attribute. Is this not true?
Here are some screenshots of how it looks on my mac with the latest version of Pinegrow.
New items that appear on the Library tab after plugin activation
Tree with the picture element highlighted and expanded
Initial output code
Picture Source highlighted in the tree results in new options
Options listed on the “Properties” tab - note: use the ‘Srcset’ options, not the ‘HTML’ options
<source> fields inside the <picture> element. If you highlight the <img> tag inside the <picture> element in the tree you should not see additional options. However, if you add a stand-alone <img> you should see scrcset, density, and sizes options.
sizes attribute. I need to fix this. Should I add type into the <img> tag as an attribute? I don’t see this as a part of the HTML standard.
Thank you so much for your help!! Sorry for so many questions and not designing the interface to be a little more friendly!
This is on the iMac <src srcset>: And how do I uninstall the plugin on Windows without having Unload?
In my opinion it should be for the most simple methode:
<img srcset="image-link" src="image-link" alt="image" /> With what ever you want to add: media queries, type etc. Then add the multiple images sizes to the <img srcset>
<img srcset="small.jpg 1x, large.jpg 2x" src="small.jpg" alt="A rad wolf" />
Or like this if you want advanced:
<picture>
<source media="(min-width: 36em)"
srcset="large.jpg 1024w,
medium.jpg 640w,
small.jpg 320w"
sizes="33.3vw" />
<source srcset="cropped-large.jpg 2x,
cropped-small.jpg 1x" />
<img src="small.jpg" alt="image" />
</picture>
According to the HTML standard the <picture> element should contain a single <img> that has the fallback src attribute, alt attribute, and a description of the image display properties (like ‘height’ and ‘width’) plus zero or more source elements to provide alternative versions for different display/device scenarios. https://developer.mozilla.org/en-US/docs/Web/HTML/Element/picture.
If you just have an <img> element that does not have a <picture> tag as the parent, you get what you described. A simple srcset attribute in an <img> element.
I’m not quite sure what you mean “unload” on the Windows side. If you deactivate the plugin you should be able to just click on unload, I think. I don’t have a PC where I am right now to test. Sorry.
I uploaded a image of my Windows 10 laptop showing the plugin. What I want is manually uninstall the plugin. Then do a fresh install. It doesn’t work on Windows here.
This is with your code in Bootstrap 4 collapsing the columns:
Try it your self!
You are correct that the way you put your code together results in incorrect behavior. However, the point of the <picture> tag is to give the browser a choice of elements (source) to load into the <img> tag. In your code you are modifying the srcset with the “img-fluid” class. You should be modifying the <img>.
srcset. I do know that the HTML standard suggests it be done the way I coded it.Hi Rob,
No I’m not aware of Foundation and only work with Bootstrap.
Think you misunderstood me. I love the plugin and you are right about the use of source. My point is that you forgot the simple <img srcset> and src . The plugin doesn’t recognizes it! I will use source, because I always use webp with jpg fallback and Art Directions, but most people stick with jpg and if you only do that and have regular static images on a website that only need 3 sizes those people can not use it.
Where can I remove the plugin in Windows if I can’t unload it? Where in Pinegrow are the plugins hidden?
Regards,
David
Hi Rob,
Created a header (Windows 10) with webp and jpg fallback. The only problem is as you can see on the screen shot that the links to the images in the app get lost when you later get back to the app.
Regards,
David
Damn! For all of the testing I did, this one isn’t surviving the fire of production well! Thank you for helping me out by being a (potentially disgruntled) beta tester. I ran through multiple scenarios, but I guess you have found some extras! I will get to work on this later today. My apologies!
Cheers,
Bob
PG doesn’t “install” plugins anywhere. They stay in the same location where you identified them in the plugin manager. I’m still not sure what you mean about unloading the plugin, but if you move the plugin folder and quite PG, the next time you open it I think it will be gone.
So, I have been trying to replicate your error on my machine without luck. I’m downloading a Win10.iso for my virtual box - something I should have done a long time ago. Can you upload your base file and images somewhere I can access them? Maybe there is something I’m missing when trying to replicate it locally.
Thanks for your help.
Bob
I’ve been testing all morning on my Win10 virtual box. I’ve created several different picture and image scenarios, and I can’t get it to replicate the error you experienced, @AllMediaLab. Sorry! Not sure how to move forward to help you out.
PM’t you to sent you the test site.
Almost spit water all over my monitor on this comment. 
Glad we worked together on fixing this little issue! 
For the people following this post. The problem was a (non) existing space behind the comma in the srcset images code that should have been there in the plugin code. Or to keep it simple: with the latest update you see cleaner/clearer srcset code and no broken links.
Can’t wait to see the Pro version coming!
Thanks again for your help!
