hide pinnable images in Wordpress
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.

  1. To have more images you can share on Pinterest
  2. To test multiple images like A and B testing, especially for Pinterest
  3. 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.

wordpress hide pinnable images

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.

Add hidden image to WordPress

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.

  1. Check the code you entered is correct. The opening tag code is <div style = “display:none;”> The closing tag code is </div>
  2. 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. 

Hide Pinterest images in blog

How to hide pinnable images in WordPress

  1. Create 2 – 3 different Pinterest images
  2. Add the images to your blog post
  3. Tag your images with the code to hide
  4. Check your blog post to ensure images are hidden
  5. Update your blog post
  6. Share the pins on Pinterest

How about, you click on share images and share an image I have hidden in this post.

 

hide pinnable images in WordPress blog

 


Lifestyle Anytime

 

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

Facebook: LifestyleAnytime  Instagram: LifestyleAnytime    Pinterest: Angie – Lifestyle Anytime        Contact: Angie at Lifestyle Anytime


    4 replies to "How to hide Pinterest images in WordPress blog posts"

    • Nicole

      Thanks Angie!
      My posts were becoming over loaded with pinnable images that didn’t look very attractive on mobile devices. This is extremely helpful and so simple ( recently started my blogging journey in July).
      You saved me some time and $$.. I really didn’t want to purchase another plugin or widget. Also- pinned this to my blogging tips board & bookmarked your site. Hope to see more from you!

      • Angie Emde

        Hi Nicole, I’m not long into my blogging journey either and what I love is that everyone helps each other sharing tips. I understand the questioning with plugin’s and widget’s, with so many it’s difficult to know exactly which ones are really needed. This becomes clearer with time. Thanks for the follow. I really like the lifestyle niche you are blogging about. Keep up the good work.

    • Eki Ayemenre

      Great post Angie!

      It’s really important to hide some of your pins on your blog post, so as to reduce the load on your blog which may impact your site speed negatively. Your site loading speed has an effect on your ranking. Google does not smile at any site that loads too slow and as such drops the ranking of the site.
      Angie, thanks a great deal for revealing how to hide images on our blogs. The steps you recommended are exactly the ones I use in hiding images on my blog post. and it works perfectly.

      Keep up the good work.

      • Angie Emde

        Thanks Eki, I also believe it is important to compress the images used in blogs. As this too increases the loading speed. Hope you’re having a great day.

Leave a Reply

Your email address will not be published.