How to Hide Pinterest Images in Blog Posts [Video Tutorial]

How to Hide Pinterest Images in Blog Posts

Here’s a nifty little Pinterest trick for bloggers.

Square Versus Tall Images

I always use a square image at the top of a blog post. They fit my blog’s aesthetic and translate well to Instagram.

However, square images don’t get pinned on Pinterest as frequently as “tall” images. So, up until recently, I included a square image at the top of a post and a tall one at the bottom.

Images 1

I didn’t like how this looked - repeating the image made the blog post look cluttered.

It turns out there is a way to avoid this situation. You can hide your Pinterest image.

Hide Your Pinterest Images

By inserting a teeny tiny bit of code in your blog post, you can hide your Pinterest image. This means your blog post remains uncluttered, with the square image taking centre stage. However, when someone goes to pin your blog post using the Pinterest browser extension, they have the option of selecting either the tall image or the square one.

Confused? OK, let’s see this in action. I have hidden a Pinterest image in this post. Try pinning the post using your Pin It browser extension. This is what you should see:

How to Hide Pinterest Images in Blog Posts

The Pinterest-friendly image is the second from the left.

How to Hide Your Pinterest Images

These instructions are written for Wordpress, however, you should be able to apply the same concept to other blogging platforms.

1. Upload your Pinterest ("tall") image to your media library.

2. Create a blog post.

3. Work in the text editor, rather than the visual editor of your blog post (see screenshot below).

Text editor

4. Insert this special code into the top of the post:

<div style="display: none;"><image code></div>

5. Still working in the text editor, insert the image in the next line.

6. Highlight/select the whole of the image code (it should be enclosed in <brackets>). Cut it (ctrl + x on PC, cmd + x on Mac).

7. Paste the code (ctrl + v on PC, cmd + v on Mac) over the top of where it says <image code> in the special code above (see below - the pasted image code is in pink).

Screen Shot 2016 11 27 at 16.51.54

If you are a visual learner, you might prefer this video explanation (if the video looks blurred, adjust it to HD using the HD button).