Please share

Following up on the brilliant work done by Louise Myers and Mediavine on adding hidden Pinterest images in your WordPress blog posts, here I address how to make these work with the new WordPress editor, also know as Gutenberg.

Hide Pinterest images in WordPress Gutenberg

I know most people out there have been quite vocal about how much they hate Gutenberg, but for me it’s a great advancement and I find composing posts so much easier and faster. That’s why it’s important to figure out how we can go about making these tricks we all know and love work in the new Gutenberg editor.

The techniques shown by Louise and Mediavine, still work, but the new editor looks a bit different and adding the code isn’t as straight forward, though it’s not any more difficult.

Plus, if you’re happy with simply hiding the images, I’ll show you a much easier way to do it without having to add the html code every single time. So let’s get to it.

monetize your site or blog with skimlinks

Add A Hidden Pinterest Image

In other tutorials on how to add a hidden Pinterest image, you’re told to add a bit of inline css code to the image url in the HTML view. Well, it doesn’t work in Gutenberg, and there’s an easier way to do it. Plus, this will work with both the classic editor and Gutenberg.

Let me show you how.

First, add an image block. Click the “+” sign to add a new block.

Hide Pinterest Images in WordPress Gutenberg - Step 1

Start typing /image to do the quick search, and then click on it to add the block.

Hide Pinterest Images in WordPress Gutenberg - Step 2

Add your Pinterest image to the image block.

Hide Pinterest Images in WordPress Gutenberg - Step 3

Now on right side of the editor window, click on Advanced, and in the Addtional CSS Class text box, type a unique name for the class. The name is not important, just something you can remember easily. Let’s use the name pinterest-hidden.

Hide Pinterest Images in WordPress Gutenberg - Step 4

That’s it (almost)! Save your post.

Add Code to Make Pinterest Image Hidden

The next step is to add a short bit of code into the customizer that will recognize the CSS class you just created, and hide the image. Note, while most themes have the Additional CSS code section in the customizer, your theme may not have it there. If you don’t see it, check with your theme’s documentation as it may be included in another area of your dashboard.

Go to Appearance -> Customizer.

Hide Pinterest Images in WordPress Gutenberg - Step 5

Click on Additional CSS.

Hide Pinterest Images in WordPress Gutenberg - Step 6

When you’ve got the Additional CSS area open, copy and paste this code into it:

/* Hide Pinterest images with the pinterest-hidden class */
.pinterest-hidden {
   display: none;
}
Hide Pinterest Images in WordPress Gutenberg - Step 7

You’ll see the code above is similar to the inline CSS given by Louise Myers, it’s just now it applies to all images on the site with the “pinterest-hidden” CSS class.

Remember though, if you’ve used a different name for your CSS class (instead of pinterest-hidden), make sure to use that in the code above instead or it won’t work.

The first line in the code is just a note (anything in between the /* and */ is ignored) but it helps you remember what it’s there for.

Now, every time you want to add a hidden Pinterest image in Gutenberg, add the image and then add the same pinterest-hidden Additional CSS Class to it. No need to add any more code!

Pinterest Hidden Image in WordPress Classic Editor

By the way, this will also work in the classic editor as well, in exactly the same way. The only difference is how you add the custom class to your image. You add the image, then click the image, and then the pencil icon to edit it.

Hide Pinterest Images in WordPress Gutenberg - Step 8

Now add your class under Image CSS Class under Advanced Options.

Hide Pinterest Images in WordPress Gutenberg - Step 9

Click on Update, and then save your post. Now you can add the display: none; code to the CSS section of the customizer exactly the same way as mentioned above.

Adding a Hidden Pinterest Image in Gutenberg Using Inline CSS

The methods shown by Louise for adding the inline css code still work, but Gutenberg gets a bit upset because you’re messing with it’s normal block code structure.

If you really still want to use the inline CSS method, then the way around it is to use a classic editor block and insert the code in the html view. Here’s how:

Add a Classic Block. Insert your Pinterest formatted image, and make sure you add it as Full Size.

Click on the three vertical dots in the top right of the block and select Edit as HTML.

Hide Pinterest Images in WordPress Gutenberg - Step 10

Remove the class=”…”, including the quotes and anything in them, as well as the opening <p> and closing </p> tag if you see them in the code. Now insert the following code at the beginning before the <img tag:

<div style="display: none;">

And the very end of the code, add the the following:

</div>

So your original code (looks something like this):

<img class="alignnone size-full wp-image-3022" src="https://blogger2wp.com/wp-content/uploads/2019/01/Hide-Pinterest-images-in-wordpress-gutenberg-pinterest.jpg" alt="Hide Pinterest images in WordPress Gutenberg" width="735" height="1102">

Will now look something like this:

<div style="display: none;"><img src="https://blogger2wp.com/wp-content/uploads/2019/01/Hide-Pinterest-images-in-wordpress-gutenberg-pinterest.jpg" alt="Hide Pinterest images in WordPress Gutenberg" width="735" height="1102"></div>

Now you can click on the three vertical dots again, and chose Edit Visually. The classic block will re-appear visually, but it will be empty. This is because of the CSS code you’ve added to hide the image, but the image is still there, and will appear when someone shares your page using the Pinterest button.

Hide Pinterest Images in WordPress Gutenberg - Step 11

Add a Hidden Pinterest Image Using “data-pin-media” Attribute in Gutenberg

Another option for hiding images for Pinterest is using the “data-pin-media” attribute in your images. This doesn’t necessarily hide your image, but it can be used to bring up a different image than the one that’s displayed.

An example of where this is useful is when you want to use a horizontal image in your post, but when a user shares to Pinterest, a more Pinterest friendly image is used.

Adding the “data-pin-media” attribute in Gutenberg does work, Gutenberg doesn’t like it, but we can make it work by converting the block to HTML when prompted. Let’s see how it’s done.

Go ahead and add an image block, then add the image you want to display in your post. Here’s my horizontal aspect ratio image I want to add in my post:

Hide Pinterest images in wordpress gutenberg

Now add a second image block, and add the image you want to be pinned – this is your Pinterest formatted image. Here’s my Pinterest formatted image:

Hide Pinterest images in WordPress Gutenberg

Edit both blocks as HTML by clicking on the three vertical dots of each block and clicking on “Edit as HTML”.

Hide Pinterest Images in WordPress Gutenberg - 13

You’ll now be looking at the HTML code for both image blocks:

Hide Pinterest Images in WordPress Gutenberg - 14

In the second image block, copy the url in quotes after the “<img src=…” tag, including the quotes.

Hide Pinterest Images in WordPress Gutenberg - 16

In my case it would be:

"https://blogger2wp.com/wp-content/uploads/2019/01/Hide-Pinterest-images-in-wordpress-gutenberg-pinterest.jpg"

In the first image block (the one that would be visible in the post), place your cursor after the alt attribute, after the part in quotes and type in data-pin-media= and then paste the url you copied above.

Hide Pinterest Images in WordPress Gutenberg - 15

What you should get is some code in the first image block that went from this:

<figure class="wp-block-image"><img src="https://blogger2wp.com/wp-content/uploads/2019/01/Hide-Pinterest-images-in-wordpress-gutenberg-300x194.jpg" alt="Hide Pinterest images in wordpress gutenberg" class="wp-image-3060"/></figure>

to this:

<figure class="wp-block-image"><img src="https://blogger2wp.com/wp-content/uploads/2019/01/Hide-Pinterest-images-in-wordpress-gutenberg-300x194.jpg" alt="Hide Pinterest images in wordpress gutenberg" data-pin-media="https://blogger2wp.com/wp-content/uploads/2019/01/Hide-Pinterest-images-in-wordpress-gutenberg-pinterest.jpg" class="wp-image-3060"/></figure>

When you navigate out of the block, or switch back to visual editing, you’ll get a message saying “This block contains unexpected or invalid content.” Click on the Convert to HTML button.

Hide Pinterest Images in WordPress Gutenberg - Step 12

And that’s it! The block is converted to HTML, but the image still works when viewing your post. If a user attempts to pin the image, or uses the pin it button in the browser, they’ll see the Pinterest formatted image – the one linked to in the data-pin-media attribute.

The final step, go back and delete the Pinterest formatted image from your post you inserted earlier. It’s not needed since it will be called up when someone pins your image, using the data-pin-media attribute. (Note: I’ve left my Pinterest formatted image in this post in a smaller size for illustrative purposes).

I hope that helps you add a hidden Pinterest image in WordPress using the Gutenberg editor. At the time of this post, this method works, however Gutenberg is being constantly updated so things may change. Drop a comment here if it’s not working for you and I can try to have a look at your site.