Trying to hide images for Pinterest that will only be visible when pinned

[honeydarko]

Hiya,

We are trying to create vertical Pinterest friendly images in our blog posts. These images must be hidden in the blog post because of esthetic reasons, however, should be visible once a blog reader wants to pin them on Pinterest.

We know how to do this via inserting an image and then adding the code:

<div style=”display:none;”>PASTE IMG CODE HERE</div>

So you basically upload an image, then enter "text mode" and cut the image code and paste it in the code above. This should hide the image from the blog post, however, in our case, it does not. We are using the Foodie Pro theme, and I don't know if there are any code clashes from the theme. Does anybody have any experience with this or any helpful information that would help us out?

Thanks in advance!

/Sandra

[Victor Font]

If an image is hidden, how will a blog reader know that it is even there to pin?

If you want to hide the image, the display:none should be in the img CSS.

---

Regards,

Victor
https://victorfont.com/
Call us toll free: 844-VIC-FONT (842-3668)
Have you requested your free website audit yet?

[honeydarko]

When clicking a Pin-it button, the reader gets a new window pop-up with all images available in the post (invisible ones as well). He/she will then choose the one that they want to pin. The image we want to hide will come up as one of the first images, so the "pinner" will naturally lean towards choosing that one. It is not necessary to pin an image that was originally visible in the post, as the hidden image was specifically created for Pinterest.

Pinterest images tend to naturally be very high vertically, hence do not look good in a blog post, hence people choose to hide them. They still need to be somewhere in the post (hidden in this case) for the Pin-it button to offer them as Pinterest image options.

You can read more about it here:

https://bloguettes.com/hide-pinnable-image-blog-posts/

[Victor Font]

Please post a link to a page that is showing the images you want to hide.

---

Regards,

Victor
https://victorfont.com/
Call us toll free: 844-VIC-FONT (842-3668)
Have you requested your free website audit yet?

[honeydarko]

Hiya,

Sure thing. If you look at this post:
http://www.honeydarko.com/introduction-brush-calligraphy-101/?preview_id=624&preview_nonce=59e764ecfb&_thumbnail_id=-1&preview=true

At the bottom, you will see a vertically long image (the last image in the post). That is supposed to be hidden and the following is the code pasted in the post:

<div style="”display: none;"></div>

According to all the tutorials, this is the only thing that they do and it works but for some reason, in our case, the image is still there.

Thanks again

[Author]

Posts