How To HIDE Image Collages (for Pinterest) in your Post

Share on Facebook0Pin on Pinterest119Tweet about this on Twitter0Share on Google+4Share on StumbleUpon6Email this to someonePrint this page

How to hide long images for Pinterest in blog posts

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.

Screen Shot 2015-04-28 at 8.28.00 pm

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.

Screen Shot 2015-04-28 at 8.45.23 pm

6. But when you click on the Pin It button, the Image Collage appears as a pinning option!

Screen Shot 2015-04-28 at 8.48.06 pm

Screen Shot 2015-04-28 at 8.48.26 pm

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

Share on Facebook0Pin on Pinterest119Tweet about this on Twitter0Share on Google+4Share on StumbleUpon6Email this to someonePrint this page
The Food Photography Book by Nagi from RecipeTin Eats

Comments

  1. Mary Perry says

    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

  2. says

    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!

  3. says

    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?

  4. says

    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!

  5. says

    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

    • says

      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.

  6. Naomi says

    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 :-)

  7. says

    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

  8. nutrizonia says

    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!

  9. says

    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 :)

  10. says

    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!!!!

  11. says

    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?

    • Nagi says

      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

  12. says

    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.

  13. says

    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!

  14. deliciousmeetshealthywp says

    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!

    • Nagi says

      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!!

  15. says

    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!

    • Nagi says

      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!

      • says

        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?

          • says

            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!

  16. Mira says

    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 !

  17. says

    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!

    • Nagi says

      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!

  18. says

    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!

    • Nagi says

      Hi Jane! So glad you find it useful. Honestly worth the effort of making those long pins – my repins have noticeably increased!! :)

  19. says

    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!

  20. says

    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!

Leave a Reply