How To Hide A Pinnable Image In Blog Posts
July 1, 201661 comments
Share
Hiding a Pinterest pin image on your blog post sounds counterintuitive, but we’ll tell you why it’s one of the smartest tricks in the trade.
We always say that Pinterest images should be vertical simply because it takes up more real estate on the page. The longer your image is, the easier it is for people to see the entire photo of that rhubarb pie with immaculate pleats instead of squinting to see them in a horizontal image.
Your rhubarb pie has a better chance of being seen if people can easily see the immaculate pleats in the vertical image you posted instead of squinting to see a tiny horizontal picture.
While on Pinterest these images work wonders, having a super long vertical image in the middle of your blog post can be a bit of an eyesore. To battle this issue, all you need is a tiny piece of code to hide your image visually, but have it pop up when people go to pin your blog post.
Here’s what you need to do:
Step 1: Create Your Pin Image
Find a vertical image that fits your blog post. Because you want people to know your blog post title right off the bat, add text onto your image. Our pin images have dimensions of 600 x 900 pixels.
Step 2: Upload Your Image
Open the blog post you want the pin image to be in. Choose where in your content you want to insert your image (we usually do it at the very top or the very bottom, just so it’s easier to find in Step 7). Click the Add Media button and upload your image to the Media Library. Don’t insert the image yet! Read below!
Step 3: Add Your Title
Before you insert the image, you’ll see a panel of image info on the right-hand side. Change the Title to match your blog post. (Tip: Incorporate your company name into the title. We always add a “- Bloguettes” after the title so the entire title looks like this: “Blog Post Title – Bloguettes.”
Step 4: Insert Alt Text
This is so important! On the right-hand panel, there will be a spot called Alt Text. When someone pins your image, THIS is what auto-populates into the description. You can include your title again and write a brief description explaining what your blog post is about. Double check and make sure there are no spelling or grammar mistakes! If there is, your pin could potentially have a description with typos floating around Pinterest!
Step 5: Adjust Your Image Size
Add the bottom of the panel, there is a place where you can adjust the image size. Make sure your image is the Full Size (in our case, 600 x 900 pixels).
Step 6: Insert Your Image
Scan over everything one more time and Insert your image. You should see your image in the blog post!
Step 6: Switch To Text View
In WordPress, at the top of your Text Editor box, there are two tabs: Visual and Text. If you’re in the Visual tab, switch over to the Text tab. This is where you will insert your code.
Step 7: Insert The Code
Find your image. If you followed along in Step 2, it should be easy to find because it’s at the very top or bottom of your content. The Image Code should be around a paragraph long and start with “<img class.”
Hit Enter to create a new line (this just makes it easier to see both your codes)
Copy and Paste the Hidden Image Code to hide your pin image:
<div style=”display:none;”>PASTE IMG CODE HERE</div>
Highlight the entire Image Code from your pin and Paste it into the Hidden Image Code area that says “PASTE IMG CODE HERE.”
You should now have one piece of code that starts with <div> and ends with </div>.
Step 8: Switch Back To Visual View
Switch back to the Visual tab and your image should be gone. Save your settings by hitting Update.
Step 9: Test It
If you have the Pin It button installed on your browser, you can test out the image by hitting Pin It. If you don’t, go to Pinterest and create a new pin. Copy and paste the URL of the blog post and a couple of images should pop up from you to choose from. Your pin image should be there! Click it and make sure your Alt Text description is what you want it to be and pin!
Want to see this in action? Watch our step-by-step tutorial below!
Thanks for sharing, great article! I would like to ask what text editor you would suggest to use? I’ve found few interesting apps at http://besttexteditor.com
Hi Jennifer! We just use the Text Editor in WordPress!
–Shanna, Bloguettes Editor-in-Chief
Thanks for this – I’ve read several posts on this subject and this is the only one with clear instructions that work 🙂
Hi Sue, I’m so glad it helped you out! Definitely share the post so we can help other people like you! Thanks so much for reading!
–Shanna, Bloguettes Editor-in-Chief
Hi Shanna,
So excited. Finally a post that gives me just perfect instructions for making my pins hidden that actually works! Thank You.
Music to our ears! So happy we could help 🙂
This is incredibly valuable! Thank you so much for posting it. I just used it to hide like, 12 pins on my post. Me and some other bloggers are hosting a New Years Resolution Transformation Giveaway that goes live on December 12th, 2016 and I needed to make sure people had many options for pins, but didn’t clog my page with them. I got them all hidden, and we’re good to go! Thank you so much for making this information easily accessible!
Woo hoo! Now your page looks perfect, I am sure. Thanks for letting us know that it worked for you!
YaY! Thank you so much for this! Super helpful 😀
Hi Lisa!
So glad you found the post helpful, thanks for stopping by!
-Lauren, Associate Editor
Thanks, I’ve been trying to do this for a few days now and this post is the first time it worked!
Hi Stephanie!
Awesome! So glad the post was helpful. 🙂
-Lauren, Associate Editor
I don’t have WordPress for my Blog. Is there a way I can do this with Weebly?
Hi Caitlin!
I’m not super familiar with Weebly, but I think as long as you can switch to the ‘text’ view, the code should work just the same!
Hope this helps!
-Lauren, Associate Editor
Thank you for this! I have got the code working, no problem there, but when I go to pin it the image isn’t shown as one of the options. Any ideas why?
Great guide. I don’t know what I’m doing wrong but I can still see my image 🙁 Have you heard of any themes that it won’t work with? I’ve tried SO many times and still nothing.
Hi Jessi!
Hm…it should work with any WordPress theme! Sometimes, in the text view, extra spaces or symbols are added which will throw off the code. So, I would go back in and double check that there are no extra symbols or spaces that are altering the code first, and if this doesn’t work, you can always contact WordPress support for help!
Hope this helps!
-Lauren, Associate Editor
Mine was still showing and I noticed that towards the beginning it was adding an extra set of quotation marks that were backwards. I deleted them and now my pin is hidden 🙂 Hope this helps!
I was having the same problem, but then I noticed extra space and ” in this part:
I pasted it correctly but somehow extra things happened to it. Check every single space and character. once I removed the extra space and the extra “, it worked perfectly.
Hi Lauren
I’ve tried it but this didn’t work for me. I use Divi so wondering if this is part of the reason it did work?
Thank you so much for this! I had written the code down from some other source, but it wasn’t working. So, I found your post through a Google search and followed your step by step instructions and it worked! What a relief! Thank you so very much!
Hi Brenda!
Yay! We’re so glad it worked for you! Thanks so much for giving us a read!
-Lauren, Associate Editor
Thank you this was incredibly helpful! I had been wondering if this could be done and your step by step instructions were very thorough and easy to follow 🙂
Hey Sarah!
So glad you found this post helpful! Thanks for stopping by and be sure to stay tuned for our future posts!
-Lauren, Associate Editor
This hasn’t worked at all for me 🙁
It didn’t work for me at first either, but then I noticed extra space and ” in this part:
I pasted it correctly but somehow extra things happened to it. Check every single space and character. once I removed the extra space and the extra “, it worked perfectly.
Hi there! I added this blog article link to my pinterest to test it out and it only pulls your featured horizontal image from the top (with the girl and the flower pot). Is this now dated? Thanks for your help!
[…] a pinnable image in Canva for placing it at the end of your post (or hiding it if you like so it doesn’t appear in the post). Optimize your image using the following […]
Hey there! Do you know if there’s any reason this isn’t working any longer? I never used to have any trouble hiding posts using these instructions but a couple months ago, it stopped working.
I was having problems too, but then I noticed extra space and ” in this part:
div style=”display:none;”
I pasted it correctly but somehow extra things happened to it. Check every single space and character. once I removed the extra space and the extra “, it worked perfectly.
Thanks. This works for me
Hello Bloguettes, I wanted to say thank you for this very valuable info it has been extremely helpful lately. I did have trouble with it at first though. So, I wanted to leave a comment to tell people what went wrong for me because it sounds like others were having issues too. Several times I tried it and it didn’t work. I went back and forth making sure I had every character in the right place and still couldn’t figure it out. Then, I noticed that after checking to see if the image had indeed disappeared (and it hadn’t), that when I went back to the text view an extra set of quotation marks had appeared. I had been checking before testing to see if the image had disappeared, not after. Anyway, this is what it looked like for me <div style=""display: instead of this <div style="display: It still adds these extra set of quotation marks each time. I just hit the visual tab and then the text tab again and delete them and it makes the image disappear. I don't know why it's happening, but it's an easy fix and I hope this helps someone else.
Hey Heidi!
Thank you so much for the clarification! Sometimes extra spaces or characters appear in the code so I always go back and double check. So glad it’s working for you now!
– Lauren, Associate Editor
Hi Lauren,
the code works in hiding the image. But then the “hidden” images will not show in the selection to pin.
Any idea how to fix this?!?
If anyone is having problems, try checking all the spaces and characters on the code. I struggled with it for a little bid then noticed that a random space and a ” got added to the code. I’m not sure how. But I physically removed it to match the above code exactly and it worked.
THANK YOU so much! This is brilliant and so easy to follow. I’m so excited to have my first invisible pinterest pin. My blog is only 2 weeks old but I’ve been using pinterest for ever and I always wondered how people have those cool poppy pins that aren’t there when you go to the site. This is SO exciting for me, THANKS!
Hey Talin!
Thanks so much for the clarification! Yes, sometimes extra spaces or characters appear so I always go in and double check the code. So exciting about your blog! Best of luck! 🙂
– Lauren, Associate Editor
Thanks so much for sharing this. This will definitely help me build my Pinterest presence. I’ve been trying to figure this out in wordpress for a while!
Cheers!
Hi there!
So glad you enjoyed, thanks for giving us a read!
– Lauren, Associate Editor
I’m back…. for multiple images, do you use the code on each image?
I’m having a hard time with it but I don’t want to experiment too much and screw up the ones that have already been pinned many times on pinterest.
Hi, I managed to hide my pinned image. However, when I hit the pinterest icon to pin it, it doesn’t pull the pinned image. Help please!
Thank you very much! I just implemented this on my blog and couldn’t be happier!
Thank u so much!
Awesome! So glad the post was helpful.
Thank you so much for these instructions! Like others, it wouldn’t work for me until I realized there was an extra symbol that had to be deleted (“).
One question though…
For my blog posts, I use a horizontal image because it suits the page better. Now that I’ve hidden a Pinterest-friendly vertical image, is there a way to set this one as the default for pinning? When I click the “share this” Pinterest button at the bottom of the post, it defaults to the horizontal one, even though the vertical one appears first in the code. Any thoughts?
Hey Susan! Do you have the “Pin It” add-on installed in your browser? If you do, it should pull the vertical image you embedded when you try to share the post. 😉 Hope this helps!
– Lauren, Associate Editor
This was super useful! I’m going to try this on my next blog post. Thanks for sharing! 🙂
Hi Stefanie! So glad you enjoyed the post, thanks for giving us a read!
– Lauren, Associate Editor
Thanks for the great step by step guide.
It is really helpful and the way you have written is awesome.
Keep sharing.
We’re glad you enjoyed the article Emily! Thanks for stopping by 🙂
– Lauren, Associate Editor
Can’t remember if i’ve already commented or not but thank you so much for posting this! Helps so much! xx
So glad you enjoyed Maria, thanks for giving us a read!
– Lauren, Associate Editor
YAY!! I use Blogger and this was the only post that helped create an invisible pin. THANK YOU for explaining in detail!
Oh my goodness! Amazing article dude! Thank you so much,
However I am having problems with your RSS. I don’t know why I cannot join it.
Is there anyone else having the same RSS problems? Anyone who knows the solution can you kindly respond?
Thanx!!
I got the image to appear when pinning, thanks to the tip above about the extra space and ” but my alt text isn’t appearing. Any ideas?
Thank you so much for the detailed instructions! I followed everything, and the image was successfully hidden. However, when I go to the blog post on my site, and click on the Pin it button, the image does not show up. Is there a specific reason why? Would be lovely if you could shed some light on this, as I noticed other people asking in the comments too! 🙂
Excellent! Thank you even more for adding a video tutorial. This worked like a charm.
Hey …Shanna Fujii
Thanks for sharing a useful information..
[…] with different headline variations. You can either include these pin images in your blog post but hide them, or you can manually upload a new pin image to Pinterest every day. The objective is to add ONE new […]
nice post
Very good post! We are linking to this great post on our website.
Keep up the great writing.
Thank you for your kind words! We’re so happy you enjoyed the post and appreciate you sharing our content with your website’s audience. ~ Emily, Editorial Intern
This is very helpful!