Linking Page Images to Full-Sized Versions

When I talked about image size in the Uploading Images guide, I suggested you make two versions – a small one for your page and a larger one that will open when a visitor clicks on it.

I suggested you call the page one “imagename-th.jpg” and the larger one “imagename.jpg”. Now we are going to look at how we link these two images.

No doubt you have seen that these large images open in a pop-up box, and visitors can cycle through all the images on your page. This is done by a plugin called Lightbox. It is a much better idea than opening them in a separate browser tab.

Inserting Your Page Image
Adding our imageWhen you add an image in the editor, always place it at the beginning of the line, as shown in this screenshot. Regardless of whether your image is going to be on the left, right or middle of the page, it needs to be put at the beginning of the line.

If it is going to be on a line of its own like the ones at the bottom of this page, simply click on the beginning of the next empty line.

To add the image, click on the “Add Media” button and select the “imagename-th.jpg” version. If you have lots of images, use the search box and type in the name of your small image. You will then only see just that one image.

Preparing Your Image
Edit the imageOnce your image is added, click on it, and some buttons will appear above it.

The four buttons starting at #1 in the screenshot are for aligning your page image to the left, center, right or no alignment.

Choose whichever suits you best. You can always change it if it doesn’t look right.

To create our link to the full-sized image, click on the “Pencil” button at #2. This will take you to the Media Library.

Creating Your Link
To make your link, we will be working with the dropdown box for “Link to” in the Media Library.

Initially the link will be shown as “None” as you can see in the first screenshot.

Open the dropdown box and select “Media File” as seen in the second screenshot. This will open a new box, showing the full website address (URL) of the image. However, the link is greyed out and we can’t modify it.

So next, choose “Custom URL” as seen in the third screenshot. We now have the ability to edit the URL.

The final step is to remove the “-th” part of the URL, so the “Link To” is the URL of our full-size image. Click on “Update” and your images are now linked.

Preparing our link to the full-size image Displaying the image's file location Getting an editable custom link

 

Leave a comment

9 + 1 =