How to Hide an Image in WordPress (Long Pin)

This post may contain affiliate links. Please read my disclosure policy.

Creating a long pin is great for Pinterest but you may not want it on your blog.  Here’s an easy tutorial on how to hide an image in WordPress posts.

How to Hide an Image in WordPress. Creating a long pin is great for Pinterest but you may not want it on your blog. You can easily hide images in your WordPress post for pinning!

©Cook Crave Inspire by SpendWithPennies.com

How to Hide an Image in WordPress (Long Pin)

Follow Spend With Pennies on Pinterest for more great tips and ideas!

I make long Pins for most of my recipes.  There is no doubt that a long pin gives you more real estate on Pinterest and almost always results in more repins.  More repins means more blog traffic!

MY LATEST VIDEOS

(If you don’t know what a long pin is or how to make one, I have a full How to Make a Long Pin tutorial here)

While I do want my big long images on Pinterest (and I always choose long pins if I’m pinning from ANY blog) I don’t want my long pins showing on my posts.  It’s easy to hide the long images in your posts so that they are still pinnable with the bookmarklet or extension.

Below is the code you will need to copy and paste into your post. 

This post has been updated to add a second piece of coding.  You will not need both, you will need one or the other. The original coding doesn’t seem to be working for all blogs (I am currently using the second line of coding).

<div style=”display: none;”><img src=”IMAGE URL” alt=”description” /></div>

OR

<div style=”display: none;”><img class=”PS_Pinterest_Remove” alt=”Title of Recipe Goes Here” src=”Link to photo in your media library goes here”/></div>

How to Hide an Image in WordPress

  1. Create your long pin (step-by-step tutorial here) and upload to WordPress
  2. Copy one of the the lines of code above.  Click the “Text” tab in your WordPress post and paste the code at the bottom of your post.
  3. Go to the media file (where it says ‘add media’ at the top of your post) and copy the link to the long pin image you have uploaded.  Paste the link you just copied into the code where it says IMAGE URL between the ” “
  4. Add your description between the ” ” where the code says description.  Keep in mind this is the wording that will go along with your pin when it is pinned.

Here is an example of what my completed hidden pin coding looks like.

<div style=”display: none;”><img src=”https://www.spendwithpennies.com/wp-content/uploads/2013/05/PIN-Garlic-Ranch-Mashed-Potatoes.jpg” alt=”Garlic Ranch Mashed Potatoes are rich and creamy and totally full of flavor! This comforting side dish can easily be made ahead of time and heated or kept warm in the oven!” /></div>

If you go to THIS POST you can see there is no big long image on the blog post however if you use the Pin bookmarklet or even a scheduling program like TailWind or Viral Tag you will see a big long image popping up for pinning!

More Pinterest Tips Here

Image © http://www.123rf.com/profile_ammza12
How to Hide an Image in WordPress. Creating a long pin is great for Pinterest but you may not want it on your blog. You can easily hide images in your WordPress post for pinning!

Holly

Holly is a wine and cheese lover, recipe creator, shopping enthusiast and self appointed foodie. Her greatest passion is creating in the kitchen and making deliciously comforting recipes for the everyday home cook!

5 comments on “How to Hide an Image in WordPress (Long Pin)”

  1. I just tried doing this and it didn’t seem to work. Do you still use this code to hide your pinterest images?

  2. I blog often and I really thank you for your content.
    Your article has truly peaked my interest. I will take a note of your
    website and keep checking for new information about once a week.
    I subscribed to your RSS feed too.

  3. I see that this article was published quite some time ago, but I thought I would comment for any future readers. Neither of those lines of code worked for me, but if you look at your post in plain text view in wordpress you can find the code for the photo. It might look something like this:

    After the “300” and before the / add: style=”display:none”

    Then your code will look something like this:

    Hopefully this will help someone in the future!

Leave a Reply

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