How To: Add Hidden Images on WordPress



Hiya, Fellow Yarn Lovers!

If you have a WordPress blog, there’s a nifty little trick that I think you might like. I’ll show you how to do it, right here in the Academy!

For those of you who’ve spent a fair bit of time on Pinterest (you know who you are!), you know that there’s an ideal ratio for the graphics.

Tall pins get more shares and repins, so you want to make those available on your posts if possible.

But what if you don’t want a ton of nearly identical pictures cluttering up your blog post?

Never fear; I’ll walk you through it. It does take just a TINY bit of html, but don’t run screaming! I promise I’ll make it as painless as possible. 🙂

 

Lets Get Started

Normally, if someone wants to Pin a picture, they click on the Pin button that pops up when they hover over the picture.

 

However, if they have installed the Pin Button on their browser, they will be able to pin any graphic associated with the page, even your hidden ones.

 

In the case of the page above, when a visitor clicks on the browser Pin button, this is what they see:

The SDW logo, my profile pic, and the beginning of the text in the post are all added automatically by WordPress.

The first three pictures are the ones I added.

The wide picture is the one that I wanted to be visible, while the other two options are hidden from the post itself.

  • Square pics are best for Instagram, and also work well for sharing on Facebook (even though “ideal” Facebook pictures are slightly wider than tall),
  • While the tall narrow pictures are best for Pinterest.

When you’re ready to add pictures to your post, add all of the images you’d like to be included, as you normally would.  Include all the possible options for pinning, even the ones you want hidden.

The default for editing in WordPress is the “Visual” tab.

But once you add the pictures you want, click on the “HTML” tab.

Now all the pretty elements of your page will be replaced with the code or text instructions used by the magical elves of the Interweb.

The magic words (or magic HTML) are: <div style=”display: none;”>, which you place before your hidden pictures, and </div>, which you place at the end.

For example, for the page I’ve showed you, my first image section looks like this:

<img class="aligncenter size-full wp-image-321" src="https://sleepydragonworkshop.files.wordpress.com/2017/09/bamboo-pop-wide.png" alt="Cotton Alternative: Bamboo Pop" width="675" height="383" />

We need to add in the magical elements around both of the other images:

<div style="display: none;"> <img class="aligncenter size-full wp-image-322" src="https://sleepydragonworkshop.files.wordpress.com/2017/09/bamboo-pop-tall.png" alt="Cotton Alternative: Bamboo Pop" width="306" height="600" /><img class="aligncenter size-full wp-image-323"  src="https://sleepydragonworkshop.files.wordpress.com/2017/09/bamboo-pop-square.png" alt="Cotton Alternative: Bamboo Pop" width="453" height="450" /> </div>

The first image, the “wide” one, is visible.

The other two, the “tall” and the “square” ones, are not.

You can place the hidden pictures anywhere in the layout of the page, since they’re not going to be visible.

If you place them together as I did, you only need the “magic words” before the first picture you want hidden and after the last one. But if you split them up, you’ll need to add the HTML codes before and after each picture.

That’s all there is to it! I told you it wouldn’t be too painful!

Until next time, happy blogging!

Mama Dragon

 

About the Author

Leave a Reply 0 comments