Originally posted here: https://theme.co/apex/forum/t/how-do-i-add-the-pinterest-nopin-tag-to-images/21171/2?u=simeoned
I have been frustrated at the inability to add class names to images directly when using the V2 image element. The best you can do is add a class to a span which wraps the img itself. But there are scripts which rely on the presence of the class in the img tag. This is most commonly run into when trying to use a PinIt plugin which adds a pinterest sharing button on hover to every image on a site. Well, who wants/needs that on every image? That’s why the authors created the ability to limit the presence of this by adding class=“nopin” to an img you don’t want this to happen for.
But, like I said, the problem is that you cant directly edit the img tag on V2 elements.
Solution: Put this in your functions.php file…
add_action( 'wp_footer', 'load_nopin' );
function load_nopin() {
echo "
<script>
(function( $ ) {
$(function() {
$('.nopin img').attr('class', 'nopin');
});
})(jQuery);
</script>
";
};
This should add the class=“nopin” to any img element which has a wrapper with a class name of ‘nopin’. And since this is eactly what happens when you add ‘nopin’ to the customize area of the element, the parsed markup will now activate the exclude function built into the pinterest plugin. It’ll look like this:
<span class="e11933-4 x-image nopin">
<img alt="Alt Tag" src="https://www.example.com/website-header2.jpg" width="1200" height="550" class="nopin">
</span>
Just dont forget to add ‘nopin’ to the customize area of the image element.