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:

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!