CSS Class – Pinterest – No Pin

[Janine]

Hiya.

I want to display only Pinterest Optimized images.

I have tried this with: nopin = “nopin” AND data-pin-nopin=”true”.

I get this error: This block contains unexpected or invalid content. So, it displays properly on the backend.

So my two questions are:

1. Can I set up a CSS class and then add additional CSS to customizer to accomplish this? Then, I could just add the class to the Advanced > Additional CSS Class(es).
2. And how do I resolve the error: This block contains unexpected or invalid content. So, it displays properly on the backend.

Thank you.

[David]

Hi there,

you cannot edit any Blocks HTML without you receiving the invalid content.
Instead you would need to insert your Pins HTML using a HTML Block.

Or you would need a plugin like JetPack which provides a Pinterest Block.

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Janine]

Hi, David.

Why is it that when I manually enter nopin = “nopin” OR data-pin-nopin=”true” and choose CONVERT to HMTL, the image disappears and is replaced by HTML. And when I preview, it is elongated and zoomed in?

[Janine]

When you say HMTL block, you mean the Custom HTML block, right? Would I copy the image HTML into the Custom HTML block?

Thanks.

[David]

It’s just the way WordPress core blocks work, any changes to the core blocks spits out HTML without the data that the image block uses to style itself. – the Image block could seriously do with some love on this matter.

Yes – its the Custom HTML block.

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Janine]

So should I just copy the contents of the image block to a Custom HTML block? (I have over 800 images on my site.)

[Janine]

AND how can I create a version of the code below for data-pin-nopin=”true” or nopin=”nopin”:

/* Hide Pinterest images with the pinterest-hidden class */
.hide-pin {
display: none;
}

Thank you.

[Elvin]

So should I just copy the contents of the image block to a Custom HTML block? (I have over 800 images on my site.)

Converting blocks with “This block contains unexpected or invalid content” to HTML is the same as copy + pasting its code to a custom HTML block.

As long as the CSS classes added are the same, it shouldn’t affect what’s displayed on the live site even if the preview looks weird.

And yes, I’m afraid you’ll have to apply your data attribute manually on all 800 images.

AND how can I create a version of the code below for data-pin-nopin=”true” or nopin=”nopin”:

/* Hide Pinterest images with the pinterest-hidden class */
.hide-pin {
display: none;
}

Thank you.

You can target the images by using its attribute as the selector.

Here’s an example CSS targetting <img> with data-pin-nopin="true" attribute.

img[data-pin-nopin=true] {
    display: none;
}

A wise man once said:
"Have you cleared your cache?"

[Janine]

Hi, Elvin.

Since I manually have to apply the data-pin-nopin to each image, what is the purpose of this code?

img[data-pin-nopin=true] {
display: none;
}

Do I place this code in the customizer as additional CSS and how does it work?

It looks like if I place the code provided in Additional CSS, it will make all images nopin.

Thank you.

[David]

What plugin are you using to create your Pinterest optimized images ?

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Janine]

I am not using a plugin. I create the pins in Canva.

Next, I want to hide the pins I create on my site.

Next, I want the pins I create to be the ONLY option for pinning. I do not want visitors to be able to pin the images inside the my posts and on my pages.

When I added this code to the Customizer, it removed my featured images on the frontend:

img[data-pin-nopin=true] {
display: none;
}

Thank you.

[David]

I don’t think there is an easy way to do this, without a plugin, and it would require a lot of manual HTML for each and every pin image you wanted to add.

Maybe a plugin like this would do the trick ( unfortunately its only premium ):

https://www.wptasty.com/tasty-pins

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Janine]

Thanks, David.

I am familiar with WP Tasty plugin. I will check it out.

[David]

You’re welcome!

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Author]

Posts