How to Hide Images in Your Blog Posts (great for pinning vertical images) #bloggingtips #pinterest

It wasn’t until recently that I realized I had been using the wrong kind of images for Pinterest. For some reason, most images found on Pinterest are more vertical and longer rather than your typical image like you see above in this post. So for each blog post I have written, I have created a couple images for each blog post. usually use my own photos but have discovered Canva.com to create images. Using my own photos in the design images I create or designing something like the image above. The second image I create is a longer or taller vertical image that can be used as an option to pin.

The problem with those vertical images is that I really don’t want an image like that in my blog posts. While those size images look great on Pinterest, they ruin the flow and look of my blog posts and disrupts the content. They just look weird or awkward and do not look right. So how do you attach a suitable image that can be pinned directly from your post without it being visible in your post? You hide it of course!

Its actually pretty easy to do. Here are screenshots of one of my blog posts that I have a hidden image in. The only visible image is the one at the top.

Now what you don’t see is that there is actually another image in that post. You just can’t see it. If you hide an image, it doesn’t take up space in your post either. It’s literally like it isn’t even there. When you click on the Pinterest or Pin button at the bottom of the post, that image you have hidden will show up as a choice image to pin right from that particular blog post. When that image is pinned, it will still be linked to your post just like any other visible image that is pinned from the post.

Here is a screenshot of the images available from that post that can be pinned. You can see the long M&Ms image that you do not see in the blog post itself – that’s the hidden one. The other images you see in the screenshot are there because of the “related posts” at the bottom below the share buttons. Just thought I would mention that in case I confuse anyone.

Now you can pin that vertical image and others who are reading your content now have the option of pinning that vertical image themselves.

So how do you hide images?

Normally when writing a blog post, you are in the visual tab. When you are ready to insert the image you want to hide, click the text tab in your editor. Then add the image like you normally do in the visual editor. You can place the image at any point in your post but I usually write my whole post and then just insert it at the end at the bottom.

At the very beginning of your image code in the text editor add this code:

<div style=”display: none;”>

Then at the very end add this closing tag:

</div>

Here is an example of what the whole thing will look like:

<div style=”display: none;”><img class=”aligncenter size-large wp-image-8692″ src=”http://www.dustinnikkimommyofthree.com/wp-content/uploads/2017/05/Caramel-MMS-358×1024.png” alt=”” width=”358″ height=”1024″></div>

I don’t have an image link attached to my image. If you have your image linked you will see the link in your image code. Make sure you add the closing tag at the end of the whole thing.

And that is all there is too it!

Leave a Reply

You can use these HTML tags

<a href="" title="" rel=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>