How to add a hidden pinnable image to blog posts

Julie Deily
January 19, 2015
Blogging, Social Media

Don't miss out on tips, tricks & the latest articles!

Subscribe

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 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="https://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.

Posted on January 19, 2015
34 comments »
Subscribe

Don't miss another post!

Subscribe today