How to Hide an Image in a Blog Post





 

Pinterest is many a blogger’s BFF . It certainly is in my case, with the vast majority of my blog traffic coming from Pinterest.

A huge part of my strategy for Pinterest success has come from creating multiple pinnable images for my blog posts. This creates more chances for pins to convert into saves and clicks because…well…there are more things to be saved and clicked!

The best way to add multiple images to a blog post, in my opinion, is to hide the images within the post. Yep! That’s a real thing that can be done. If you don’t know how to do it…stress not! Now is the perfect time to learn—and you happen to be in just the right place. 🙂

 

 

Why Hide Pinnable Images?

My big reasons for hiding pinnable images within my blog posts are:

  • Keeps blog posts looking neat and clean
  • Allows you to create as many pinnable images as you’d like
  • Helps your blog posts load faster, which means readers will be more likely to stay on the page longer and actually read your content

 

What Does a Hidden Image Look Like?

I’m a visual/hands-on learner, so let me show you what I’m talking about when I say “hidden image”.

Because I’m currently dreaming of crisp autumn weather (any time now, Atlanta), I’ll use my blog post 25 Fall Blankets Under $25 as an example.

Here is one of my Pinnable images from that blog post, as it appears on Pinterest. If you click on the pin, it will take you straight to the blog post, just as you’d expect.

However, when you scroll through the post, you’ll notice that the pinnable image is nowhere to be found. Sure, there are lots of pictures of blankets, but that particular pinnable graphic is not visible. In fact, I currently have 3 different pinnable images for this particular blog post and none of them are visible on the post itself. 

This is what I mean when I say “hiding an image within a blog post”. The image is there and can be used for Pinterest purposes, but you don’t actually see it when you open the blog post. Magical, right??

 

How Do I Hide an Image in a Blog Post?

Okay, now that you know what I’m talking about, let’s go through how to hide an image in a blog post step-by-step.

 

1. Open the blog post that you want to hide an image in. Go to edit mode.

 

2. Insert your pinnable image into your post the same why that you would any image. Once inserted, the visual version of your blog post will look something like this:

how to hide image in blog post

 

The top of my pinnable image can be seen inserted into the post, underneath my intro text.

 

3. Switch from “Visual” mode to “Text” mode if you’re using a self-hosted WordPress.org site like I am, or get to where you can edit the HTML code of your blog post on whichever platform you’re blogging on.

 

4. Locate the code associated with the pinnable image you just inserted. It should look something like this:

how to hide image in blog post

 

5. Add the “secret code” of the blogging world that hides images within blog posts! The moment of truth!!

Secret Code:

<div style=”display: none;”> IMAGE CODE GOES HERE</div>

 

Once you’ve added the code, the HTML should look like this:

hiding images in blog posts

 

6. Switch back to visual mode to confirm that the image is now hidden.

If you look in the same area that we looked at in Step #2, you’ll notice that the gigantic pinnable image is no longer visible. This means that we’ve typed in our code correctly and are good to go!

If you’re still seeing the image, go back and make sure the “secret code” is entered correctly. Sometimes I have trouble if I copy and paste it into the text editor. If the same is happening for you, try carefully typing in the code by hand to see if it works. Once it’s entered 100% correctly, the image will no longer be visible.

hiding images within blog posts

 

7. Save your changes!

 




How Do I Pin a Hidden Image on Pinterest?

Literally the exact same way that you would pin a non-hidden image on Pinterest. That’s the beauty of this! Once the secret code is entered and working properly, it’s all business as usual from there.

 

1. Share the link on Pinterest as you normally would (through a Pin button, share button, or copying the link and pasting it into the “Save from Website” option on Pinterest, as I’ve shown below. Click “Next”.

 

2. All of the available images for the link will appear. Including…shabam!…the image that you hid!!

 

3. Add a description, etc. just as you would any other image on Pinterest. Save the hidden pinnable image to whatever board you like.

how to hide an image in a blog post

 

4. That’s it! This takes us back to that pinnable image that we looked at earlier in this post. When you click on the pin, you’re taken to the blog post but don’t see the image thanks to the coding magic that you just made happen. Uh-mazing!

 

Happy Pinning, loves! 

 

P.S. If you’ve started up your own blog and aren’t quite sure where to go next, check out my Mama Blog Audit here. (And don’t let the name fool you—non-mamas are 100% welcome, too. ;))





  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
August 24, 2017
Previous Post Next Post

12 Comments

  • Reply Olivia

    Thanks thats really helpful, I’ll definitely bookmark this as there’s no way I’ll ever remember that code!

    August 24, 2017 at 5:29 pm
  • Reply Shelby Stover

    Super helpful! This took me forever to figure out so it’s a great read for other bloggers!

    August 24, 2017 at 5:33 pm
  • Reply Gloria Harvley

    Oh cool, that’s a neat trick! I want to try that next in my posts.

    August 24, 2017 at 11:43 pm
    • Reply Kaity

      Isn’t it?? You definitely should! 🙂

      August 28, 2017 at 3:34 pm
  • Reply Priyadarshini Rajendran

    Quite useful to me. Thank you for the detailed post. Gonna hide those biggie pins now 🙂

    August 25, 2017 at 2:02 am
    • Reply Kaity

      Do it! 🙂

      August 28, 2017 at 3:33 pm
  • Reply Kristina

    THANK YOU! I was trying to figure this out a week ago and no one knew the answer! Woo!

    August 25, 2017 at 3:11 am
    • Reply Kaity

      Hahaha, of course! So happy to help!!

      August 28, 2017 at 3:33 pm
  • Reply Gayathri

    I was avoiding pinnable posts just because they looked so out of place in my book blog. Now I have no excuse, do I?
    Gayathri @ Musings Over Nothing

    August 25, 2017 at 11:05 am
    • Reply Kaity

      Bahaha! Make those pins, lady. 🙂

      August 28, 2017 at 3:29 pm
  • Reply Kate

    I needed this! So helpful and I love being able to hide my vertical pins now.

    August 25, 2017 at 4:35 pm
    • Reply Kaity

      So glad! Isn’t it great??

      August 28, 2017 at 3:28 pm

    Leave a Reply

    You may also like