I hate the long Image Collages with big titles that dominate Pinterest nowadays. And yet, I do them. I do them, because they WORK. Since I started creating what I call “Image Collages” for my posts, I’ve definitely noticed an increase in repins.
Besides the fact that they DO stand out on Pinterest, the fact is, if you DON’T do them, then you’re putting yourself at a disadvantage as more and more bloggers use them.
But I don’t want Image Collages in my posts. I don’t think they look good – they are way too “in your face”. So I hide them in my posts so they only appear as an option to pin when a reader Pins a post.
Maggie from Omnivore’s Cookbook taught me how to do this, so if you find this useful, please pop over and visit her blog and leave her a note of thanks on one of her posts!
** Update: As at 23 May 2015, there is an issue with WordPress that is causing problems with this but it does eventually work. After hiding the image, save the post, view it and Pin it. The collage may not be there. If you go back to the code, the photos is gone, though the Hide code is still there. Reinsert the image, then save and it should work ok. *
HOW TO HIDE AN IMAGE IN A POST (but still appears as a pinnable image)
1. Insert the Image Collage into a post – you can do it anywhere in the post. Don’t forget to insert Alt text which will appear as the default description when the image is pinned!
2. You will probably be in Visual mode as most people write in this mode. So flick over to the Text mode and locate the code for the image.
3. Insert this code in front of the image code:
<div style="display: none;">
And if you don’t already have </div>
after the image code, insert that too (so you don’t hide the next sentence / image).
This is how it should look.
4. When you flick back to the Visual mode, the image shouldn’t be visible.
5. When you view the post, the image will be hidden.
6. But when you click on the Pin It button, the Image Collage appears as a pinning option!
You can see a demo of how it works in this post here which is the one I used in the above walk through: One Pot Greek Chicken & Lemon Rice
Hope you find this tip useful! And please don’t forget to pop over and thank Maggie from Omnivore’s Cookbook who taught me how to do this!
– Nagi
Is there still an issue with doing this? (As mentioned in your update) I hate these long pins and I find them really really annoying. I’ve been avoiding doing it but feel like I have to now. Thanks for this tip as I find them ugly to put on my blog as well. I am still going to feel bad pinning them to my boards!
I recognize that I’m years late to this post, but this is EXACTLY what I needed. Thank you SO much!
Great tip, applied it successfully today! Thanks
I just used this and it worked perfectly! Thank you!
Used this today on WordPress & it worked perfectly! Thank you so much!!
Thank you so much for this tutorial! I have tried so many things to hide my huge Pinterest photos. Your method is the only one that worked.
Thank you for this! I tried a tutorial on another site and couldn’t get it to work. But this works perfectly! Thank you!!!
Your pictures are important. So is your reputation. Sometimes the reputation you want people to see and the photos saved in your phone don’t quite go hand in hand, which is why you need to learn how to hide photos on your Android phone. http://bit.ly/2fGktpiggp
Thanks for this post, super helpful!
This is AWESOME…Thank you so much for sharing this!!!
btw, anyone wondering…a Pinterest hover button does not appear where the image is hidden, however like Nagi says, the image will be an option to choose from when someone clicks your static Pinterest button.
PS The code does work with blogger.
You’re the best!
Thank you so much, Nagi. I’ve been working on this for 4 hours now. nothing was working but finally, your trick worked to hide my pin image.
much love… GreenStory
Works like a charm – thanks so much for this incredibly useful tip Nagi!!!
Awesome hidden image tip! Thanks so much for sharing. Beautiful site too!
Hi Nagi! I came across your amazing resources only recently and this is a goldmine! This post has helped so much, because I’ve been wondering how to hide images for Pinterest. I just tried it and it worked perfectly
I had a question and it would be so great if you could help me out: I recently switched to the most common Pin It button on WordPress, I was earlier using the share buttons available within my theme itself. With both, I’ve noticed that it only allows me or any user to pin one specific image, usually the first one in the blog, without allowing a choice between various images. My settings currently allow the user to choose an image (attached a screenshot), but this doesn’t seem to be reflecting on the blog itself. I’m not very familiar with code, but I’m learning my way around it, so I’m wondering if there’s something there I need to play around with? Would you know why this is happening?
This is so helpful! Thank you for sharing!
Wow, it worked! Fabulous trick! I found directions on another site re: how to do this, but the author didn’t tell where to put the code, which didn’t help much! Thank you for an informative post!
Hi Nina, thank you for this post! I tried it today in one post and now I have some trouble with my site (it’s totally blank!)
Have you heard this before? I don’t know if it has something to do with adding the code. I already removed it from the post and y site is still being weird. I just wanted to check with you and maybe you have some suggestions? Thanks!
http://www.mybikinimusthaves.com
I am having the same problem right now and haven’t figured it out. I am thinking the problem is either related to the alt text or if a plugin such as easy recipe cards is interfering. Please let me know if you figure it out.
This is THE most useful/easiest way to hide pinnable images I’ve found–thank you so much for sharing! If anyone’s curious, this also works on Blogger.
Great – this is exactly what I was looking for!!
thanks for this!! Saved to my HTML cheat sheet 😉
If I could give you a hug. I would!! Thanks so much for sharing this!!
I don’t usually comment on blogs but just wanted to say that I LOVE YOU!! I’ve seen you can do this other ways by changing the style.css but I didn’t want to start messing with code.
Thank you so much for sharing
No worries Naomi!!
This. Is. Amazing!!! And it works- I’ve just spent the last few hours updating posts and future posts to make them more Pinterest ready! LOVE!!!
This is brilliant!!! Thank you! I don’t like those images in the post either but they are so much more visually appealing in Pinterest.. This is fantastic
Thank you so much for posting this! It was so helpful in setting up hidden pins on my blog
Thanks again!
Thank you! This is so much easier than what another tutorial was trying to show me!
Fantastic tip! Thank you so much. It worked great for me, and I’m using the most recent version of WordPress. XOXO, Erin
ove this! It’s so cool, secret stuff, lol. I am definitely going to try this.
It worked very easily Nagi! Can’t thank you enough! Now the question, I can’t make my photos long enough, even when I do collage on picmonkey, should I upgrade? Or do you have other suggestions? Nagi thanks again for all your effort, really appreciate what you do on FBC!
Thank you for this tutorial, it has been so helpful, Nagi! I am also not a fan of the collage photos so this is the perfect solution for pinning them but not showing them. Heading over to thank Maggie now
This is really great information. I always see these collages on pinterest, but never knew to create one. Thank you so much Nagi for sharing this tip.
Excellent, thank you!
No worries!
I am SO glad that I found this. I’ve been thinking I had to do this (or go down into bandwidth death). Thank goodness I found this quickly!!!!
So glad you found this useful!!
Hi Nagi! I’ve been successful in hiding the hidden pic, but Pinterest is linking the hidden photo back to my home page instead of the particular post. I’m not having this issue with pinning the unhidden pics, which all link back to the post. The only thing that I can see that could be causing an issues is that my image code starts with “<a href=” instead of “<img”. I’ve tried adding the wrapped code before and after the “”, which did not work and also before the “<img” and ending before the “” which also didn’t work to fix the link back issue. I’m using Genesis with Foodie Pro self-hosted on WordPress. Any thoughts?
Gosh Sherry, I’m completely baffled on this! Are you part of our Facebook group? If so, post the question on there, someone is sure to help! N x
It worked! Didn’t disappear either. Thanks so much.
Gah, I’m jealous! I still have the disappearing problem so I always have to do it twice. Annoying!
Yay! This is awesome! Thanks so much. So glad I saw this on FBC on Faceboook today!
So glad you found it useful!
Nagi san, Thank you so much for this post. Took me last TWO days to learn basic photoshop and lightroom and managed to have long photos with text title in the middle for pinterest and hide it on my blog. If I did not have this post, it would probably take another few days to figure out……so Thank you. Thank you and Thank you. Now I am going to try this on my blog.
Ohhh, I feel your pain….it took me a long time to figure out photoshop!
Hmmm I couldn’t get this to work unfortunately! I saw your note about the bug in wordpress, but I can see the code is all still there in the back of the post. The photo just isn’t showing up to pin!
That’s odd….what theme, framework are you using?
Thaaannnk you Nagi! Beautiful! 😀
NO WORRIES!
I’d been trying to figure out how to do this for a while now. This method worked like a charm! Thank you!!
No worries!! It was driving me crazy too!
Such a great tip thank you so much!
Just a FYI your code has a typo in it, so if someone were to copy/paste it, it’s going to throw an error: should be note the last quote is different
Hi Derek, no worries! And THANK YOU for the pick up on the code!!
Just fixed it
Nagi, may I just add that after step 3 you have to click ‘Save’ (or ‘Update”, if the post has been published already) before you proceed to step 4. When I tried this the first time, I was wondering why the collage is still showing when i flip back to the Visual mode. And with trial and error, i figured out I have to first save the changes to the Text mode before going back to the Visual mode. Thanks for the great tutorial! Simple, to the point and easy to understand explanation!
so reinsert in the image code again? after you save it?
Yep. It’s a pain. So I insert the image, add the code, Save then preview the post. Go back to the post and the image is GONE (sometimes the code is too). So I reinsert the image, repeat to preview, and it is [usually] there. Grr!!
Thank you, thank you, thank you! I have been looking for this information FOREVER! And no amount of google searching was helping! I sent a request to join the Facebook group, just waiting on my message to confirm my url! I only discovered y’all last night, and I’ve already found so much useful information!
I KNOW!! I was googling for ages too! Please pop over to Omnivore’s Cookbook to say thanks too! Maggie is the one that taught me that code
She’s a LEGEND!
Will do! I did find though, that it has been messing with my SEO on some posts and shows my word count as zero. And sometimes it does automatically revert to unhidden. Looks like others have been having that glitch, also. Any thoughts on the SEO part?
Hmmm. No, I don’t know! I will have to investigate the SEO part though, that concerns me!
Yeah, it’s really weird! It changes the SEO on most of my pages. It changes the word count to 0. I tried placing the hidden image in different spots, and it still messes with it. I made sure to put the stop code, so I’m not sure what’s happening. And on half of the ones I’ve done, the picture still won’t show up. Ha!
Thanks for sharing Nagi! I wanted to do this long time ago, but I just bookmarked a tutorial and never got back to it. I think it looks a lot better this way. Tried it on my latest post
Catching up on all your wonderful posts here !
Hey Nagi – I have no problem inserting this and it properly hides the photo, but if I go back and update my draft and re-save it, it deletes the code and reverts it to just . Any ideas on what might be going on? Thanks!
Hi Kelly! I’ve been having WordPress problems over the past few weeks like that, there seems to be a glitch. A bunch of other FBC members have had the same problem. Unfortunately just means redoing it. My worst was when I had to recreate an entire new post and copy everything over to it. SO annoying!
This is such a wonderful idea! I had no idea whatsoever that you could hide an image in a post. I’m going to start doing this. Thanks so much for sharing this great idea!
Thanks Nagi. After reading this, I’ve just made my first image with text on it, intended just for Pinterest, not the post itself. Genius – I like it!
Hi Jane! So glad you find it useful. Honestly worth the effort of making those long pins – my repins have noticeably increased!!
Love this idea, however, although my pin is hidden from my post, it also seems to be hidden when I try to pin it. Any suggestion? Thanks!
Problem solved, I switched browsers! Thank you
Oh good!!
wow.. that is one smart tip, Nagi.. loved it.. I have already tried it and simple loved it.. thanks for sharing..
No worries!
Yay! I’ve been meaning to do this but haven’t taken the time to figure out how to ‘hide’ them. Long pins have been working great for me on Pinterest but this is something I need to take care of. Thanks!
This is such a great tip! I haven’t been doing these because I don’t like how they look in my posts. Thanks so much Nagi & Maggie!!
I’ve been looking for this for so long! Thank you!!
Wow, great tip! Thanks!
Love this. Thanks so much!:)
This is great; thanks for this, Nagi! I haven’t experimented with making collages yet. I’ve been focusing so much on trying to get my photography itself better, but one of the things that held me back was not wanting it to appear in the post. Game-changer for sure!