How to add a hidden pinnable image to blog posts

How to add a hidden pinnable image to blog posts

Collages, love them or hate them, they are really popular on Pinterest these days. I remember when I first saw collages on Pinterest a couple of years ago. When I would click on them, they would take me to an unrelated site, someone who had gathered a few images together, for example step by step images, in a collage. Sometimes they linked to the original source and sometimes they didn’t. Bloggers and marketers took notice and started making collages of their own posts, so here we are.

First, why vertical collages? Because vertical images do much better on Pinterest, they catch your eye and after countless tests, get more repins than horizontal images. Vertical collages get even more traction and more attention in feeds.

Most bloggers or people upload the collages they create directly to Pinterest and then add the link accordingly. I hunted around for a long time for a way to add the collage to my post for easy pinning and played around with it for a while. This is what works for me!


First, create your collage in a simple app such as Acorn (my favorite simple photo editor for the Mac), Photoshop Elements or online via PicMonkey or Canva.

Make sure your image is at least 600 pixels wide and no more than 2000 pixels high. It’s okay if it is but it will get cut off on the Pinterest feed with an “Expand Pin” note.

Examples of collages on Pinterest: Sample 1 | Sample 2 | Sample 3

Here’s something else to think about

You can use this to hide other vertical images that visitors can pin that aren’t even collages. If your blog or business blog’s layout favors horizontal images, this technique below is a great way to add images to your post or article that others or you can pin when sharing on Pinterest.

How to add a hidden pinnable image to blog posts

Then, upload images to your post via the Add Media button (if you’re using WordPress), make sure the collages and vertical images you want everyone to pin are the ones you upload last because those images will appear first when they hit the pin it button in your post or the pin bookmarklet in their browser’s toolbar.

And now, we need to delve into HTML code & CSS a little bit. Don’t worry, it won’t hurt!

First, you need to add the following CSS style to your style.css file in your theme. Navigate to Appearance -> Editor and click on the style.css file and add the following code to the bottom of your file.


.hiddenpinimage {
	opacity: 0;
	position: absolute;
	top: 0;
	left: 0;
	height: 0px;
	width: 0px;
}

Updated: I have heard that the above code doesn’t work for displaying the collages when you’re using certain sharing plugins. You can try this instead (and see if it works!):


.hiddenpinimage {
	position: absolute;
	z-index: -1;
}

Whenever you add a new image to your post or article that you want to be hidden from view on the post but pinnable, add the following to your <img> tag for that image.


class="hiddenpinimage"

 

If you already have class attributes for your image, just add hiddenpinimage to it. For example, mine looks like this:


<img class="aligncenter size-full wp-image-12990 hiddenpinimage"
title="Peanut Butter Cookie Brownies from thelittlekitchen.net"
alt="Peanut Butter Cookie Brownies from thelittlekitchen.net"
src="http://www.thelittlekitchen.net/wp-content/uploads/2014/01/
peanut-butter-cookie-brownies-the-little-kitchen.jpg"
width="600" height="2650" />

 

Some other things you need to know:

  • This trick helps you hide images from your post on your website but it won’t hide it from your RSS feed or RSS feed email if you share the entire post.
  • If you do cut your feed so you don’t share the entire post, be sure to add the hidden images after the
    <!–more–> tag (where you cut off your feed or post on your homepage) so they remain hidden.
  • Of course there are other ways to do this directly in your post, using html and other CSS techniques but I really like doing this in the stylesheet so that you can make changes to all of these hidden images at once, if needed.

And guess what? I have a hidden image on this post…to see it in action, go ahead and pin this post and see it!


How to add a hidden pinnable image to blog posts

**There are affiliate links in this post.

If you like this post, share it with your friends...

Subscribe

Subscribe to receive news and updates:

33 Responses to “How to add a hidden pinnable image to blog posts”

  1. Cookin Canuck - January 19, 2015 @ 5:30 pm

    This is so helpful, Julie! Congratulations on your new blog. I can’t wait to see your future posts. In the meantime, I’m going to be looking around (and drooling over) your portfolio.

    [Reply]

  2. Irvin - January 19, 2015 @ 6:08 pm

    Nice tutorial! Question: are there any advantages to creating the hidden pin using css this way instead of just using the code? That’s what I use for hidden pins and I don’t have to fuss with the css page. But if the css method you use is better for a specific reason I might switch over…

    [Reply]

    • Julie Deily replied: January 19th, 2015 @ 8:17 pm

      Hi Irvin, thanks for stopping by! 🙂

      I like doing styles in my CSS file in case I decide I want to change everything up all at once. It’s like my CS professor recommended when I was in school, to declare it in one place and then I only have to change it in one place in the future, if needed. You can certainly do it inline like you are; nothing wrong with what you’re doing. This is just what I prefer.

      [Reply]

  3. Christine Pittman - January 19, 2015 @ 6:40 pm

    Love the new site and this post. Congratulations Julie! I actually am one of those odd people who don’t mind having the collage images right in my post. But for the odd time when they seem cumbersome, I will definitely try this!

    [Reply]

    • Julie Deily replied: January 19th, 2015 @ 8:19 pm

      Hi Chris, thank you!

      For my collages, they are really big and take a while to load so that’s why I like to hide them. If you find that your pages take a while to load, this might be the way to go. 🙂

      [Reply]

      • Scott replied: January 20th, 2015 @ 11:46 am

        Unfortunately, the css route does not prevent the image from loading. The whole image is downloaded but not shown in the browser. Not normally a problem with smaller sites, but ones getting large amounts of traffic this will increase bandwidth. Two ways to address this with a large traffic blog is to incorporate a CDN, like CloudFlare to handle your pictures or use pinterest media tags to only load the picture when you click on the create pin button, thus saving the image from downloading unless you are going to use it.

        [Reply]

  4. Brenda @ a farmgirl's dabbles - January 19, 2015 @ 8:29 pm

    Ohhhhhhh, Julie. This is just excellent. LOVE your new site. YOU are awesome!

    [Reply]

  5. Adriana Martin - January 20, 2015 @ 12:06 am

    Congrats Julie great info!

    [Reply]

  6. Carrie Merrell - January 20, 2015 @ 10:05 am

    awesome! adding this to my stylesheet now!

    [Reply]

  7. Kristen - January 21, 2015 @ 12:41 pm

    You are crazy and busy and I love it 🙂 Excited for your new site!

    [Reply]

  8. Aggie - January 21, 2015 @ 2:16 pm

    Sooooo proud of your beautiful {new} space!! Your work is gorgeous Julie and you have so much knowledge to share. I’m so excited for this blog! xo

    [Reply]

  9. Julie @ Willow Bird Baking - February 4, 2015 @ 1:15 am

    Thanks girl!! Just the tutorial I needed 🙂 I’m so impressed with this site on top of everything else you do!

    [Reply]

  10. Nutmeg Nanny - February 11, 2015 @ 3:07 pm

    Thank you so much for the tutorial Julie! I just wanted to give everyone a little heads up incase this does not work the first time you try it. I couldn’t figure out why my image wouldn’t stay hidden and then realized my CDN was caching my stylesheet. After I figured that out I cleared my CDN cache (I had to do that via my host page) and it worked perfectly!

    [Reply]

  11. Adam @ Writing From A to Z - March 15, 2015 @ 1:41 pm

    Thanks for this tutorial Julie, it was immensely beneficial for me 🙂

    [Reply]

  12. Sheila @ Life, Love, and Good Food - March 24, 2015 @ 6:00 am

    Thank you, Julie! I just added this code and it works great. I feel like a real programmer now 🙂

    [Reply]

  13. gina@skinnytaste - March 24, 2015 @ 4:13 pm

    Will this work on blogger?

    [Reply]

  14. Sweetsugarbelle - April 3, 2015 @ 10:40 pm

    Shoulda known it would be you with just the answer I needed!

    [Reply]

  15. Sweetsugarbelle - April 9, 2015 @ 11:37 pm

    Hi, me again, lol! I was wondering…would you advise going back and adding hidden vertical images to older posts? Not all of them, obviously, but at least the more popular ones?

    [Reply]

  16. Robin Gagnon - May 3, 2015 @ 10:27 am

    After pulling my hair out for about a 1/2 hour trying to figure out why this wasn’t working for me anymore, I discovered that the css coding had gone POOF disappeared. I think the last WP update messed with it. So, if anyone has that happen check if your css is still there.

    [Reply]

  17. ellie - May 20, 2015 @ 2:54 pm

    This is awesome! Ok I have added the CSS and added the “hiddenpinimage” code to my image HTML but it is still showing up! Any idea what I am doing wrong? SUCH a great post! Thank you!

    Here is the problem post: http://www.elliepetrov.com/simplify-your-life-with-the-key-ring-app-a-giveaway/

    [Reply]

    • Julie Deily replied: May 20th, 2015 @ 2:58 pm

      Hi Ellie! I don’t see your large image but I saw it when I used my pin it bookmarklet!

      Try clearing out your cache and see if you see the image still. 🙂

      [Reply]

  18. Heather Cheney | heatherlikesfood.com - June 4, 2015 @ 5:14 pm

    I’m FINALLY jumping on the Pinterest Collage train and this worked like a charm! Thanks Julie!!

    [Reply]

  19. Emilie - June 16, 2015 @ 10:48 am

    Hi! So I tried this yesterday and it was working, but when I went back today, the images were in my post 🙁
    I’m on a theme with the Genesis parent theme–should I put the CSS coding in both style.css stylesheets??

    [Reply]

  20. Emilie - June 16, 2015 @ 10:52 am

    just kidding, it said to not change the Genesis style sheet under any circumstances. Ugh why is it not working today??

    [Reply]

  21. Clotilde - September 23, 2015 @ 8:04 am

    Thank you very much! Exactly what I was looking for.

    [Reply]

  22. Jenn Coyle - October 21, 2015 @ 11:14 am

    This was an awesome tip—thank you so much!

    [Reply]

  23. Lynn @ The Actor's Diet - October 23, 2015 @ 12:00 am

    So helpful! Thank you!

    [Reply]

  24. Laura - November 9, 2015 @ 10:37 pm

    I cannot tell you how many of these blog posts I’ve read trying to figure out how to add a hidden pinnable image – yours was the easiest to read and actually worked! Thank you!!!

    [Reply]

  25. Tasha @thatssoyummy - January 25, 2016 @ 1:57 pm

    This was sooooo helpful! Thank you so much and I know I told you already but completely in LOVE with the new site!!!!!

    [Reply]

  26. Melanie - March 6, 2016 @ 4:43 pm

    Thank you so much for the information! I am trying this on a test post that is not published, but when I preview it I can still see the image. Does it have to be published for this to work?

    [Reply]

  27. Hannah - June 29, 2016 @ 9:27 pm

    Thanks for this tutorial! 🙂
    One question – when I use this code to hide the image, my alt text stops working! Instead, random text from my website is pulled for the pin. 🙁 Any ideas on how to fix this?

    [Reply]

  28. Wellie - August 26, 2016 @ 8:24 am

    Thank you for this! I tried it on a post and it works with the bookmark app in my browser, but not with my “share this via” buttons on the page. Any advice?

    [Reply]

Leave a Comment





Subscribe

Subscribe to receive news and updates:

Contact Julie

Interested in working together? Questions? Please feel free to reach me at info@juliedeily.com.

Let’s Connect

Instagram Pinterest Twitter Facebook Google+