This post may contain affiliate links. Please read the disclaimer for more information.
Why would you want to hide images in your blog post?
Naturally, why would you want to hide images in your blog post could be a question you are asking. Well hiding an image has a few advantages I can think of. Especially hiding a pinnable pin for Pinterest. In fact, bloggers love creating images and also like to hide images in blog posts for a few reasons.
- To have more images you can share on Pinterest
- To test multiple images like A and B testing, especially for Pinterest
- Not to overcrowd a blog post with too many images, yet still have multiple images to share that link to the blog.
Where shall I link the images too?
Of course, it is best to link the hidden images back to your blog post. After all, this is the best and recommended practice.
A tip to be aware of is to link the image in the blog post prior to hiding it. Of course there is a way to link it after using CSS, however, if you link your image back to your post before hiding it, it is easier.
What is CSS?
CSS stands for cascading style sheets and is the language used behind the coding that formats pages in WordPress.
How do you hide a pinnable image in a WordPress blog post?
First, you need to create your image. There are multiple programs that you can create your Pinterest image with. Canva is my preferred choice for designing Pinterest pins and images to share in blog posts and across social media.
Once you have your image go to the location on your blog post where you would like to insert the image.
Click on ‘add media’ and upload the image.
A tip here is to have the image saved as the title of the blog post.
Insert the image into your post.
How to hide images in your blog post
Once you have your image uploaded into your blog post. Move from the Visual view to Text view of your blog post. Yes, scary, this means you will be writing a little bit of code.
Despite code looking complicated, it is not. Also, note that when you click update on your blog post you are saving different revisions of your post that you can go back to. So, in essence, you have nothing to lose if you saved your post before editing your code. A little CSS to change the way your blog post views.
A tip is to save your blog post by clicking update prior to editing.
Just in case, you haven’t saved the post. Click the update the button before proceeding to hide images in your blog post.
Another little tip is to highlight the image before going to the text view as this will highlight the code.
Now it is time to change the code and hide the pinnable image into your blog post.
Locate the image in your blog post. That is the image you would like to hide, yet have available to be shared as a Pinterest pin. If you followed the last tip you will find your cursor is at the image location. Still, check that you are in the correct spot by checking that your cursor is by the image code <img class. The title of your image will show just before your cursor. As in screenshot below.
There are two pieces of code that is required which wraps around the image tag text and hides the image.
Frist the code that goes prior to the image. This is <div style = “display:none;”>
Second, the code that goes after the image, which is the closing tag </div>
Hence the term wrapping of the code around the image.
Once you have entered in the before and after code to the image tags, click on update to save your post.
Next toggle over to the visual view and scroll to where you placed the image. You should not see the image as it is now hidden.
What if your Pinterest pinnable image is not hidden
Yes, this can happen. If your pinnable image in WordPress is not hidden then complete a few checks.
- Check the code you entered is correct. The opening tag code is <div style = “display:none;”> The closing tag code is </div>
- Ensure you typed in the code not copied and pasted. The reason it is best not to copy and paste is that the coding requires to be in the font you are using for your blogs.
Update your blog post and then view the preview mode.
How to share your hidden Pinterest image using Chrome
Go to the blog post and click the Pinterest share button in your chrome browser.
I like to use the extension button for Pinterest on Chrome as it brings up all the images on the blog post page to pin, not just an individual image.
When you scroll through the images there will be all the images you can share including the image that you had hidden.
Choose an image to share and click share to share your pin.
As you have seen it is not too difficult to hide images in your blog post.
How to hide pinnable images in WordPress
- Create 2 – 3 different Pinterest images
- Add the images to your blog post
- Tag your images with the code to hide
- Check your blog post to ensure images are hidden
- Update your blog post
- Share the pins on Pinterest
How about, you click on share images and share an image I have hidden in this post.
Angie blogs about goals, productivity, blogging and social media marketing, as well as living abroad. She started blogging while learning the skills to start an online business. Her mission is to help others succeed with social media and blogging as well as live a laptop lifestyle while travelling in Australia. Angie often shares tips and tricks while walking the beaches and near the lake on the Central Coast NSW Australia.
Follow on Social Media