Hello Douglas Shaw,
Thanks for reaching to us. Could you please check your image variations? I have added a class to <img> tag. Here is a screencast. Let me know, you wanted something like this or not.
Thanks
hello,
thank you for doing this, but this solution will not work for me. As the class needs to be set prior to the page rendering for the SVG swap from external file to inline in the code.
You can see an example of this on the page that you were looking at:
https://dev.armorexpress.com/product/american-revolution/
looking at the checkbox below the Variations that says: Accepts Up Armor. This is an SVG where the class was assigned in the html. So when the page renders it renders an inline SVG instead of an external reference.
So although you did add the class like I asked. This is happening after the page renders, so the added class is not seen by the process that changes the external SVG reference to an inline SVG file.
Can this class be added with a function in the functions.php? if not then I would request that you add a field in the admin to add a class to the image that is added to an attribute.
please advise.
Hi Douglas,
It’s a great idea. I’ve added it as a feature request. I’ll discuss this feature with my team and make it available with the coming version.
Cheers!
Image variation – adding class to to img tag
Douglas Shaw
Hello,
How can I add a class to the swatches img tag in HTML, without editing the plugin files?
I want to use SVG’s files for some of my swatches as some of the jpg or png files end up being a little fuzzy. Also with the SVG, I need to add an class added to the inserted <img src=””>. Currently you are not inserting any class into the <img> tag.
<img aria-hidden=”true” alt=”Bravo Cut” src=”https://dev.armorexpress.com/wp-content/uploads/2021/04/bravo_cut_v2.svg” width=”150″ height=”150″>
with this class I can swap out the external SVG referenced and have the SVG inserted as inline. Which then allows me to target elements in the SVG with CSS. Changing elements in the SVG on hover for instance.
I need class=”icon-svg” added to the <img> tag, so that the external reference will get swapped out for the incline SVG.
I have tried to do this via JS & jQuery, but this will not work as the SVG replacement happens when the PHP is run on the server.
You can see the SVG file renders without an issue on this page: https://dev.armorexpress.com/product/american-revolution/
as the Ballistic Cuts image Bravo Cut.
please advise.