I get it. Pinterest images are HUGE. And sometimes they just don’t look that great in your post. Would you rather hide Pinterest images in your blog posts?
If you’re wondering how do I hide a Pinterest sized image in my post, keep reading!
Images that are Pinterest-optimized are big and tall and beautiful, but they do take up a lot of visual space in your blog post. This isn’t always a problem, especially when you use these images to break up text and have the blog visually skimmable.
I sometimes put my largest image, or one of them if I have several Pinnable images, at the bottom of the post. Like I did with this post. Personally, I like the big images. But not everyone likes to have large images in their blog posts.
I have seen some bloggers even suggest loading an image directly into Pinterest and linking to the post, and omitting the image from their blog post completely. I don’t recommend this practice because you are missing out on all the people who want to pin your post directly. And since Pinterest is a top source of blog traffic, you certainly do not want to lose out on those shares.
I have rounded up some solutions for you!
How to hide an image for Pinterest in your blog post using HTML
Did you know you can hide an image in your blog post and still have it show up as an option to Pin (when someone clicks the Pinterest share button)? You can do this with a little bit of HTML! But you do need to know a bit about HTML to do this successfully.
This post will show you how to hide an image in a WordPress post, but I am sure the method is similar on other platforms.
First, you would load your image with the add media button as you normally would. Then, switch to the “text” editing format of your blog post, and locate that image tag.
It looks like this:
<img src=”YOUR IMAGE.JPG” alt=”Image Description” />
Then you add the special div code below, around your image. Specifying the style to display:none (which means invisible!). Like so:
<div style=”display:none;”> <img src=”YOUR IMAGE.JPG” alt=”Image Description” /> </div>
Important Note: If you copy/paste the code I share above, please be sure to update the ” (quotation marks). If they look curly, the HTML reader won’t process them properly. Just erase and replace with the ” key again while in your text editor, and all is well.
It looks like this screenshot in the code:
I like to put this hidden code at the very top of my blog post, so the hidden image still gets picked up for my theme preview and social media shares. You know, the ones that insist on picking the first image in your post?
How to hide an image for Pinterest in your blog post WITHOUT using HTML
Hey, I hear ya. Sometimes messing with HTML code is just not easy. Here’s another option for you to hide an image in a blog post- no coding required!
When you load your image with your add media button, you can specify the size.
Pick full size when you load the image, and then hover over the image itself in your visual editor, and select the pencil.
Select custom size and make the image 1px by 1px. Woot, that’s practically invisible, looks like an empty space, and boom, no image showing up. But when you click the “Pin it” button? The image is there.
How to not hide an image for Pinterest at all
There’s yet another option that’s kind of a bonus for ya! If you don’t want to mess with all this, but prefer the option I mentioned at the start – loading the image directly to Pinterest and linking to your post, here’s what you can do.
Simply grab the link to your pin from your account and add a link to it in your post.
You can say something like:
Enjoyed this post? Pin it!
And link the words “pin it” to your pin that you just uploaded!
Alternatively, you can use Pinterest’s widget builder to embed the pin, but smaller. Just thought I’d throw that option in there. Call it option #4.
Not only will this allow people to share your post on Pinterest, but it counts as a RE-PIN to your original pin, which is extra brownie Pinterest points for you!
There you have it, folks! Three (four?) different ways you can hide an image in your blog post, or even omit the image entirely, and still have it pinned on Pinterest.
Over to you – do you include large Pinterest images in your posts or do you hide them?
Join the Working Mom List
Join the Working Mom collective and get support and tools to help you thrive! Subscribers get access to my library of resources and printables.
Maia says
THANK YOU for leaving the note about changing the quotation marks! That did it! I’d tried it several times before and just couldn’t get it right. Much appreciated ?
Julie says
Yea! I can’t seem to make it show the code in a basic non curly font haha!
Sophia Marie says
Thank you for the tip about the quotation marks!!!
Brittany says
You are amazing! Thank you so much for sharing!
Sara says
I’ve been needing to figure out how to do this. Thank you!
Leah says
This is the only tutorial that has ever worked for me. Thank you, Julie!
Julie says
Thanks Leah! Glad it finally worked for you! which method are you using?
Leah says
I used the code. But I have a new theme for the second blog I’m starting- I still can’t hide pins on my other blog with my current theme! I think it’s because that theme is from Etsy and not WordPress!
Sam says
Thanks so much! Just was able to hide some images. Really appreciate it ? sam @ http://www.therisingdamsel.com
Rob+Ann @TravelLatte(.net) says
We cheat a little bit. We do use the full-sized Pinterest pin on our blog, but we re-size it to fit our needs. Usually, we go about 450×675 at the largest. Then we can use it as a portrait image just like any other.
Nikki says
I need to try this! Thank you for sharing!
Georgiana says
I always wondered how people did this. Cool tricks–thanks! Haha….now I’ll probably go crazy with it.
Julie says
There are tricks for everything heh. But especially when people have like 5 different pin images per post, you just can’t display them all.