[Resolved] CSS Class – Pinterest – No Pin

Home Forums Support CSS Class – Pinterest – No Pin

Viewing 14 posts - 1 through 14 (of 14 total)
  • Author
    Posts
  • #1503299
    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.

    #1503682
    David
    Staff
    Customer Support

    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.

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

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

    #1503699
    David
    Staff
    Customer Support

    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.

    #1503705
    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.)

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

    #1504076
    Elvin
    Staff
    Customer Support

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

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

    #1504420
    David
    Staff
    Customer Support

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

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

    #1504596
    David
    Staff
    Customer Support

    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

    #1504609
    Janine

    Thanks, David.

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

    #1504641
    David
    Staff
    Customer Support
Viewing 14 posts - 1 through 14 (of 14 total)
  • You must be logged in to reply to this topic.