How to Hide Pinterest Images on Your Blog Post

Blog posts can get a bit too cluttered for me sometimes. Nowadays you need to have multiple Pinterest images for each blog post so you can attract different audiences with different styles. The issue though is that if you put 2-5 tall images at the bottom (or anywhere) in your post it looks a little funny. So today I wanted to share a little hack that I’ve started using on my blog posts that allow me to have several Pinterest graphics in my blog post without anyone knowing it!

 
How to hide Pinterest images on your blog post with easy CSS and a hidden page | Lux and Vita
 

How to hide Pinterest images in your Squarespace post

  1. Create a new, unlisted page

  2. Add a couple of image blocks (I like to add 3 and turn them into columns)

  3. Add the Pinterest images you’d like to hide on your blog post and save

  4. Go to the blog post you’d like to add these images to

  5. At the bottom of the blog post (or anywhere really), add a code block

  6. Paste the code below into the code block

    <div style="display:none">

    <img src=“YOUR+LINK+HERE" alt="Describe the image for visually impaired users using Google SEO friendly text" data-pin-description="Compelling descriptive copy | Call to action | keywords | hashtags" />

    </div>

  7. Open your new unlisted page in a new window

  8. Right click on an image and copy the Image Address

  9. Paste the image address into the section of the code that says YOUR+LINK+HERE

  10. Update the alt text

  11. Update the pin description

  12. Repeat steps 6-11 for each hidden image you’d like to have in your blog post


Once you’ve created the unlisted page once, you’ll never have to do it again. When you have new blog posts, you’ll just need to follow steps 3-12. You can either keep the old images and add new image blocks to the page, or you can simply replace the images in the original blocks you created. Replacing the old images with new ones won’t break any of the image address links that you had. Pretty neat huh?

How to find those hidden Pinterest graphics

Curious about once it’s all setup how someone Pin's the graphic?

When someone is reading your blog post they won’t see the hidden Pinterest images until they use their Pinterest Chrome plugin. Once they click on the Pin icon in their plugin bar, they’ll be able to see all of the pin-able graphics on that page. That’s when they’ll be able to see all of the hidden Pinterest graphics you’ve added to your blog post, and pin the graphics that appeal to them!

 
You can see there is only 1 Pinterest graphic in the blog post, but when you click on the    Pinterest Chrome Plugin   , 3 new Pinterest graphics appear!

You can see there is only 1 Pinterest graphic in the blog post, but when you click on the Pinterest Chrome Plugin, 3 new Pinterest graphics appear!

 

Wrapping it up

I love being able to create multiple Pinterest graphics for each post, once I had a template with a few options, all I have to do is swap out the image, text, and brand color used. I’ve been working on using different titles, calls to actions and layouts to see what stands out most to my audience. The only thing I ever struggled with was trying to let my readers choose the pin they wanted to use after reading a post. It just got super cluttered and visually overwhelming trying to have more than one Pinterest graphic per post. But with this fun little Squarepsace hack, I’m able to keep my post clean, and give my readers the option for what they Pin.

Huge shoutout to Dawn for showing me the code for adding Pinterest descriptions! If you’re a photographer, she’s got an awesome post about batch updating your alt text!

Describe the image for visually impaired users using Google SEO friendly text Describe the image for visually impaired users using Google SEO friendly text Adding hidden Pinterest graphics to your blog post using easy CSS and hidden page