How to do the ‘click to embiggen’ trick

OK, first off: what do I mean by ‘click to embiggen’? I’m talking about WordPress blog posts, for one thing (although it can work in other fields). You have a small image; you click on it and are presented with a larger copy of the same image. It’s just a different use of a hyperlink.

Like this, for example:

An image taken by Hubble of galaxy cluster RXC J0142.9+4438

Click to embiggen

In technical gobbledegook: you enclose the small image within an HTML anchor element that points to the larger image. None of which you actually need to know, because WordPress does all the donkey work for you (if you press the right buttons).

Now, you don’t actually need two different copies of the image. WordPress allows you to present a larger image as a smaller one. It offers you a choice of size options when placing an image into a blog post: ‘Thumbnail’, ‘Medium’, ‘Large’ and ‘Full Size’. So you can get away with just using a single large image for both your ‘small’ and ‘large’ images.

However, it is much better to have two copies at the sizes you want, because if you have a very large image in your page, it will take a long time to load this, even if it’s rendered at a smaller size. And your users, by and large, won’t wait for those images to load. It makes sense to have images that are the size that you need them to be. This means that you need to use some image manipulation software (I use PaintShop Pro) to make a small copy of your large image that you place into your page so that it loads fast, and then link to the larger one. (Take a gander at my earlier post ‘Turbo-boost your site by optimising images‘ for more information.)

That’s the preamble: now to the nitty-gritty. Which really isn’t all that difficult. If any of my instructions aren’t clear, please do ask me to clarify in the comments, as this will help me to not only help you, but may also help me to improve this article for other visitors.

First of all, you will want to identify the address of your large image. This could be in one of two places:

  • An address somewhere on the Internet
  • In your local WordPress media library (assuming you’ve already uploaded it)

If it’s on the Internet, you will need to visit its URL and copy it (from the address bar in the browser). Paste it into somewhere like the Windows notepad application; you’ll need it later. Note, however, that should this image disappear from the Internet, anyone trying to access it from your post will be faced with the dreaded ‘404 not found’ error message; so it may be better to store the large copy of the image in your WordPress media library.

If your large image is in your local WordPress media library, you will need to find its URL. This is fairly easy to do.

  1. Select Media > Library from the dashboard.
  2. Locate the image you want to use as the ‘big’ image, and click on it — this will take you into the ‘Attachment Details’ screen.
  3. On the right-hand side where it says ‘Copy Link‘; click on that to highlight the address, then right-click on the address itself and select ‘Copy’.
  4. Paste that into somewhere like the Windows notepad (you’ll need it shortly).
  5. Hit the ‘x’ button (top right) to dismiss the ‘Attachment Details’ screen.

OK, that’s the tricky bit dealt with.

Now you go to your post, ‘Add media’, and select the small copy of the image (the one that you want to appear directly in the post itself) — to confuse matters, as I mentioned above this could be the large image, but presented as a ‘Thumbnail’ or ‘Custom Size’ image (please ask me in the comments if this isn’t clear). To make it obvious to your visitors that a bigger version is available, use the ‘Caption’ field to say something like ‘Click to embiggen’, or ‘Click for larger image’, or some such.

What you do next depends upon whether you’re using the Classic or the Block editor:

[Classic Editor] In the ‘Image Details‘ for the small image, go to ‘Link To‘, and make sure it says ‘Custom URL‘. Then you need to copy the address (URL) of the large image, that you saved earlier in notepad, and paste it into the ‘URL‘ field. Then click the ‘Update‘ button.

[Block Editor] Click on the small image in your post, then on the ‘insert link‘ symbol, then copy the address (URL) of the large image, that you saved earlier in notepad, and paste it where it says ‘Paste URL or type to search‘. Then hit the ‘Apply‘ button.

Save your article, preview it, and marvel at how clicking on the image takes you to a bigger copy of the image.

That’s all there is to it!

If all this is clear as mud, check out the WordPress support page on links, or please do ask me in the comments. I’d be happy to help!

About peNdantry

Phlyarologist (part-time) and pendant. Campaigner for action against anthropogenic global warming (AGW) and injustice in all its forms. Humanist, atheist, notoftenpist. Wannabe poet, writer and astronaut.
This entry was posted in ... wait, what?, Communication, Computers and Internet, Education, Tech tips and tagged , , . Bookmark the permalink.

15 Responses to How to do the ‘click to embiggen’ trick

  1. Clear as mud is 😉😉😉😏🙄 helpful post,as always

    Liked by 1 person

  2. msjadeli says:

    I was doing this before but forgot how. Thanks for the instructions I’ll copy and save them.

    Liked by 1 person

  3. masercot says:

    How cromulent…

    Liked by 1 person

  4. I knew exactly what the title meant and I was SO excited to click it. It’s something I’ve been trying to figure out for a while. Not for myself (since I don’t really post images other than the featured one) but for others.

    Here’s where you lost me. So say that I have just a single image saved to my WP library. I know how to find a link to that image and I have copied it. Then, I inserted the image into my post and…??? Where’s “Image details?” How do I get to there? And once there and the URL is pasted… Will the image appear smaller in post and enlarged when clicked if it’s the same image from the library?

    Like

    • pendantry says:

      You get to ‘image details’ by selecting the image and then selecting ‘edit’. Having said that, I can’t actually get that to work on the image in this article, because when I click on ‘edit’ nothing happens :( My best guess is that the switch to the new block editor has broken something.

      To address your other question: IF the original image in your media library is a higher resolution (‘bigger’) image, then linking to that will present a larger copy on screen. But if it’s not, you’ll just be presented with an image that’s the same size.

      Does that answer your question? If not, please do come back to me.

      Liked by 1 person

  5. Pingback: Click to embiggen revisited (classic editor) | Wibble

  6. Forestwood says:

    I imagine that if you have the large image uploaded to your WordPress media library that counts as part of the storage and if so, could present issues from those with 6GB storage limits.
    But yes, this does address the slow loading of some images and readers are definitely impatient.

    Liked by 1 person

  7. Pingback: The green way to blog longevity via image optimisation | Wibble

I'd love to hear your thoughts...

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s