How to Hide Pinnable Images in Blog Posts (& Why!)

When I create a blog post, I always make more than one pinnable image for it! It gives my readers the chance to choose which pins might appeal most to them. As some people try to keep their Pinterest boards themed this gives me the opportunity to appeal to as many people as possible. Today I’m going to describe the simple steps I take to allow my readers to choose from multiple pinnable images, and how I hide pinnable images in blog posts.

There are a few reasons why you might want to provide multiple pinnable images:

  • Give variety to potential pinners.
  • To A/B test which pins/colours/wording work best.
  • The ability to pin the same blog post to Pinterest group boards without seeming spammy.

However, you don’t want to put all of these images into your post – providing lots of pins in a post can easily take away from the look and feel of your blog post and your website. That’s why you need to embed hidden pins within your posts!

Multiple pin options in a blog post give readers a choice when pinning your blog post, find out how to hide pinnable images in your blog posts.

** If you find this helpful, please Pin It! **

Please note, this post may contain affiliate links.
To learn more, check the disclaimer.

Multiple pin options in a blog post give readers a choice when pinning your blog post, find out how to hide pinnable images in your blog posts.

Here’s how to hide pinnable images in blog posts:

  1. Create multiple pin-sized images in whatever image editing tool you use. Personally, I use and recommend Canva.
  2. In your blog post in WordPress, add the images to your blog post as you usually would, with the “Add Media” button.
  3. Switch to “text” mode using the tabs at the top of the editor.
    Wordpress text/visual toggle
  4. Find the image tags for the images you want to hide. It’s a piece of code that will look something like this:
    <img class="size-large wp-image-312" src="" alt="" width="683" height="1024" />


  5. Right before the <img class="... place this code:
  6. <div style="display: none">
  7. Right after the img tag finishes (after the .../>) place this code:
  8. All done! If you switch back to “visual” mode in the editor, you’ll see that the images are no longer there, however if you go back to the code you know they are there. Magic! And, if you hit the Pin It button in your share bar or by using the Pinterest bookmarklet, you’ll see that all of your hidden images are available to be pinned.

Don’t forget to schedule your pins with Tailwind (get $15 Tailwind credit if you sign up with this link!) and make sure you have them all set to pin to group boards using Boardbooster. If you don’t know about group boards yet, you should read about why Pinterest group boards are the ultimate tool for growing your blog traffic!

A few tips for when you are trying to hide pinnable images in blog posts:

  • Always make your pins vertical (tall). Tall pins catch the eye and are more appealing to pinners.
  • Make sure you fill in the Title and Alt fields for every image for SEO purposes. This ensures that the pin descriptions have some content filled in for pinners.
  • When you’re looking for the image in “Text” mode, scan for the filename to find them easier.
  • Always leave one pinnable image on display. I suggest at the beginning or the end of a blog post. Even try to include a request for people to pin it! When they click to pin, they’ll be provided with all the options for your alternative images to pin.

As you can see, it’s super easy to hide pinnable images in blog posts! But it’s something I haven’t seen a lot of people do. I would suggest you try to provide at least a colour variation for all of your blog post pins; one which suits your branding and one which stands out nicely against and contrasts with your branding.

Every now and then I suggest you try to create pins which have slight variations in their titles and wording. This will let you see which get the most traction and repins – helping you learn what your target audience is interested in, while still driving traffic to your blog!

I hope this helped you and that you’ve found it useful. If you did find it useful, I’d love for you to pin it or give it a little tweet!

16 responses to “How to Hide Pinnable Images in Blog Posts (& Why!)”

  1. Alice says:

    Not going to lie, I literally think this post just saved my life! I have been struggling so much with being able to harness Pinterest correctly for my blog because I never wanted to include Pin images made from Canva in my actual post because they never seemed to fit. I am definitely going to start using this trick! Also I definitely need to get involved with some group boards!

    • Gemma says:

      I’m so glad this was helpful! When I’m pinning I noticed a lot of bloggers have multiple images which link back to the same post and it’s definitely a great way to spread the word a bit more! Embedding them in your post just gives your audience a chance to share the imagery they think suits their audience best – which is win/win for you! So glad you found this helpful, I think it’s a great technique! x

  2. Ayse says:

    This post was very helpful! Thank you so much i will definitely try this out!

  3. Priscilla says:

    Just joined Twitter and found this post. So helpful for my new blog. I’ll definitely implement this strategy. Thanks Gemma!

  4. Clarissa says:

    This post is fantastic! I LIVE that idea! But how do I do this if I am using Squarespace rather than WordPress?

  5. Lauren says:

    Woah! Had no idea how bloggers did this until now! Thank you so much for putting this out there! Very grateful I happened upon this on Pinterest tonight! Thanks for sharing!

  6. Katherine says:

    I found this article last night wondering how to set up my pins for my post. Thank you so much for sharing it! Really helped out.

  7. Sharon says:

    Outstanding post Gemma! Thank you so much for sharing. Can’t wait to put it to use!

  8. Laura says:

    Instead of style=”display: none;”, you can also just do width=”0″ height=”0″.

    • Gemma says:

      You can, Laura! However if your theme has any CSS for displaying image width/heights this could conflict, but style=’display:none’ will work in every instance. I suppose it’s a personal preference thing! 🙂

  9. Mae says:

    I love this tip, thanks!

  10. SUCH a helpful post, thank you!! I knew you could hide pinnable images in blog posts, I’ve just never been able to figure out how! Haha I’m definitely not the best at codes and the technical side of blogging, but your post made this super simple, so thank you!!

  11. Henissi says:

    Great post. Thanks so much!

Leave a Reply

Your email address will not be published. Required fields are marked *