Pinterest is everywhere and as a blogger, you want to rock it for sure. But then you read advice like “create at least three vertical images for Pinterest with every post”. ..er.. have you ever wondered how to beautifully put three or more long vertical images into one post? There is a very easy solution to that: Hide images in a post! Show what you want to show and hide pictures for happy pinning. It’s easier to do than you might think.
The techy side of that will not keep you from creating amazing posts any longer. Follow this easy step-by-step guide, hide images to pin, and start rocking Pinterest while still creating beautiful posts your tribe will love. Plus there won’t be lots of “salesy” images that scream PIN ME!! Just hide pictures. It is easy.
Put vertical images into a post – the dummy approach
Before I found out how ridiculously easy it is to hide images in a post I would just put vertical images into my post and then drag them smaller. They sometimes fit in and sometimes rather disturb the layout. This is especially the case if you have more than one image to share, e.g. in a DIY or recipe post where you have several images that show the actual project. However, I still do this sometimes when I really like the image and the post has not many other pics.
But what if a post has several images already? No way that you can cram in another three or more vertical images just to make Pinterest happy! And yet you want pinnable images that compete in the world of Pinterest.
Read my terms of service here and my privacy policy here.
Hide Images in a WordPress Post – Foolproof Instructions
Don’t freak out if I tell you now that we will be using a code for this. I will show you step by step how you do this. If you have published a post before AND even added an image to a post you are skilled for this and ready to go.
Shall we?
You might want to check out this list of Go-To Places to Find Stunning Free Stock Images for your blog graphics
Step-by-Step Guide to hide images in WordPress
1. I always start with adding the image I want to hide to the post. To do this upload the image to your WordPress Media Library like you would normally do and insert it into the post.
2. Now you will have to switch from “normal” visual mode of your editor in WordPress to “Text” mode where you can enter HTML codes. Just click the tab that says “Text”.
Don’t panic if your post is looking nothing like it used to look. You are in text mode now.
3. Now look for the code of the image. You will look for a code starting with <img and ending with >.
The view in the text editor can be somewhat unclear. This is why I put the image to hide always at the end of a post so I will quickly find the code when I switch to the text editor.
4. Now comes the magic formula, aka the HTML code you need for hiding an image in WordPress. This code is going to be wrapped around the image’s HTML code.
This is the code you need to hide an image:
Copy it manually OR copy and paste it from the text below (step 5). Make sure you have all the brackets. Also, it is a good idea to save this code somewhere so you can copy and paste it everytime you need it, e.g. create a note in Evernote to collect codes you use… or bookmark this page to copy it from here. 🙂
5. Copy the first part of the hiding code
<div style=”display: none;”>
and put it before the image code and then you copy this closing tag
</div>
and paste it right behind the image code. (Just copy and paste the two parts of the code).
(OR take the code of your image and put in right into the hiding code where it says “Insert image HTML code here”. This text will be replaced by the image code.)
Make sure you don’t delete something of the image’s code.
You will end up with something similar to this:
6. Now you can go back to the visual editor and proceed as usual. Keep in mind that the code will now hide the image. It keeps the image away completely. So you will not find an empty space or something in your post. It’s almost as if the image wasn’t there. (Unless you switch to Text mode and see the code)
Final thoughts on hiding images in WordPress
Nerd info: In fact, the image is not hidden, but not displayed. A hidden image would leave an empty space in your post. Of course, you don’t want that. So this is actually a guide on how to have images not displayed. For more on that or to learn more about HTML and CSS codes look into the free tutorials at W3 Schools. They are awesome! Check out the chapter on hiding/not displaying elements on a website.
Now, if someone clicks the Pinterest sharing button the hidden image will be shown in the selection of images to pin. Of course, you should make sure that those images go to Pinterest and create pins yourself.
Psst…Try to pin this post and find 2 hidden images.
Top 10 inspiring podcasts for blogging moms in 2019 – Grow your blog like never before!
Recap of hiding vertical images in a post
Let’s recap quickly.
- You create an awesome pinnable image and upload it.
- Then you insert the image into your post.
- You switch to the text mode in your WordPress editor and you wrap the hiding code around your image’s code.
Done.
Now you can hide as many super long vertical images in your post as you want without smashing your carefully crafted layout. Let’s get to work, hide pictures like a pro, and thrive in Pinterest.
Want to learn how to create awesome Pinterest collage images using free resources and software? Check out this pictured step-by-step guide!
Happy blogging and please share! Don’t forget to subscribe to download your Pinterest SEO swipe file (PDF or editable spreadsheet available)!
Read my terms of service here and my privacy policy here.
