Hiding Long Images in Blog Posts (WordPress)

Hiding long images might seem counter-intuitive. But, different images serve different purposes. Small images are great for illustrating a point and breaking up the text. Long images are great for summarising and sharing.

Being able to hide really long images is one way to keep your posts both readable and shareable, providing a better overall experience for your visitor.


How to hide long images in blog posts. Being able to hide really long images is one way to keep your posts both readable and shareable, providing a better overall experience for your visitor.


Why Hide Images?

There is a need, largely due to the success of Pinterest, to create longer images. They take up more screen space and, as such, get noticed and get shared. And, of course, that's what we all want.

The problem with really long images, however, is they can hinder your enjoyment of a blog post.

We want to break up large chunks of text and images are perfect for this. But, we don't want to have to scroll down so far that we've lost our train of thought and forgotten what we read above the image.

The tutorial I've written below is a good example of this. I can use these small images to nicely break up the text and also illustrate each individual point. Now, if I put all of those images into one long step-by-step image, it would break up the flow of the tutorial and it wouldn't be as easy to link each step with each image.

If you click on a Pinterest or Tailwind extension button, you'll see that I do indeed have both the small images and a longer, collated image available on this post. The collated image is really long but it has been hidden.

Edit: On publishing, I've noticed that the longer images still appear in my Feedly preview. So, to avoid the problem of having a stream of long images at the top of my feed post, I am putting my hidden images at the end of each blog post.


Using Small Versions

Another way to stop long images breaking the flow of the text is to simply display them at a smaller size.

I'd already scheduled this post to go out, when I spent this weekend at Blogtactular (a fantastic UK blogging conference). I had the good fortune to sit down with Sarah from Taming Twins on the Genuis Bar to talk all things Pinterest.

A self-confessed Pinterest fiend, Sarah showed me her method for using long images in posts. She displays them at a small size and encourages pinning for later use. If you click on the link above (a great post on Tailwind Tribes) and scroll down to the bottom, you will see what I mean.

It creates a simple call to action, reminding people that there are images to save for later or share. It's also ideal for visitors who don't use browser extensions or aren't pinning fiends themselves.


Video Tutorial: Hiding Long Images

This video will show you how to:

  • Identify your long image in the text editor; and
  • add don't display code to that image.



If you produce long images for craft tutorials, step-by-steps, or recipes, this would be a perfect technique to try.

Why not pin the image below to remind you where to find the tutorial or share it with someone you know?