Clickable Images

WordPress provides several tools which, when used together, allow you to create a group of thumbnail images which can be clicked to take your visitors to various pages within your site, or to completely different sites on the Internet! Read below for some tips on how to do this.

Be aware that ProPhoto 5 provides an automatic and easy way to create Grids of linkable thumbnail images from content on your site.

Now before we get into how to do this, let us mention that it will most likely take some time to get things looking exactly how you want them to look. This is due to a number of different factors discussed in-depth below.  As such, make sure you’re in the proper, relaxed frame of mind before starting :)

Step 1: Get the link URL (address) for each page

Go to each page you want to link your images to and copy the url address from your browser. This can be a page on your site, a page on another site, a link to a file like a file like a PDF, or anything else you can link to online.

Step 2: Create your new “clickable images” page

Go to “Pages” > “Add New” and give your page a Title. Or if you’ve already created a new page, edit the page you’ve created.

Add new page

Step 3: Upload and insert the images into your page

Upload all of the images you want displayed as clickable images on this page.  Once they’re uploaded, select each individual image so you can edit it’s attachment details. (see screenshot below)

For each image:

  1. (Optional) Enter a caption you’d like displayed below each image in the “Caption” field.
  2. Use the “Link to” dropdown to select “custom url” and paste in the permalink URL address you copied from the page you want the image to link to.
  3. In the “Alignment” dropdown, choose left if you want them in a row horizontally, or center if you want them in a column vertically.
  4. From the “Size” dropdown, choose the size for your image – choosing “thumbnail” is a good choice to downsize your images to a consistent small size, for example
  5. Repeat for each uploaded image, selecting each as you work.

Once you’re done, click on the “Insert into Post” button.

clickable image options

Step 4: (optional) Rearrange your images

After you’ve inserted each image into the page, you may notice that the images are not in the order you’d like, they seem mis-aligned, etc.  So, it will probably help to click on the “Full Screen” option in the editor screen and then you can click and drag the images around to have them displayed as you want.Full screen button

You can also edit the link address used for images already inserted into your post or page – click your image inserted in your post and use the ‘edit’ pencil button to modify the Image Details, and use the “Link To” dropdown to choose “custom URL”.

image-link-to-box

Be aware if you’re still having issues getting the images where you want them, you probably want to visit the “Nitty Gritty Details” area below.

Nitty Gritty Details

Now it’s time for the “fun, in-depth, take your time, it will be worth it when you’re done” details.  For more on alignment, spacing, margin, etc, and your clickable images, see here.


WordPress provides several tools which, when used together, allow you to create a group of thumbnail images which can be clicked to take your visitors to various pages within your site, or to completely different sites on the Internet! Read below for some tips on how to do this.

Be aware that ProPhoto 4 now provides an automatic and easy way to create Grids of linkable thumbnail images from content on your site.

Now before we get into how to do this, let us mention that it will most likely take some time to get things looking exactly how you want them to look. This is due to a number of different factors discussed in-depth at the bottom of this page.  As such, make sure you’re in the proper, relaxed frame of mind before starting :)

Step 1: Get the permalink url for each page you’re wanting to link to

Go to each page you’re wanting to link your images to and copy the permalink url that is displayed under the Title of each page in the editor screen.

copy permalink page

Step 2: Create your new “clickable images” page

Go to “Pages” > “Add New” and title your new page whatever you’re wanting to call it.  Or if you’ve already created a new page for use as a static homepage, go to that page that you’ve created.

Add new page

Step 3: Upload and insert the images into your page

Now that your page is ready, upload all of the images that you want displayed as clickable images on this page.  Once they’re uploaded, select each individual image so you can edit it’s attachment details.

Be sure to:

  1. Enter whatever caption you’d like displayed with the image in the “Caption” field,
  2. In the “Link to” dropdown select “custom url” and paste in the permalink URL address you copied from the page you want the image to link to.
  3. In the “Alignment” dropdown, choose left, if you want them in a row horizontally, or center, if you want them in a column vertically.
  4. From the “Size” dropdown, choose  “thumbnail” (unless you’re wanting to include larger clickable images of course)
  5. Once you’re done, click on the “Insert into Post” button.

clickable image options

Step 4: Exclude the images from “Post image theft protection”

Because you’re going to want your images to be clickable links to other pages, you’re need to exclude the images from ProPhoto’s “Post image theft protection”. Otherwise, the images can’t be clicked on, makes sense right? :). To do this, follow these steps:

    • Edit a post from “Posts” > “All Posts”
    • Be in the visual editor

visual tab

    • Click the image from which you want to disable protection
    • Click the edit button that appears

edit image button

    • Click the “advanced” tab
    • With one space after the previous class enter “img-as-is” in the CSS class field

custom class img-as-is

  • Click “Update” then click to update the post/page.

Step 5: Rearrange your images (if necessary)

After you’ve inserted each image into the page, you may notice that the images are not in the order you’d like, they seem mis-aligned, etc.  So, it will probably help to click on the “Full Screen” option in the editor screen and then you can click and drag the images around to have them displayed as you want.Full screen button

But be aware if you’re still having issues getting the images where you want them, you probably want to visit the “Nitty Gritty Details” area below.

Nitty Gritty Details

Now it’s time for the “fun, in-depth, take your time, it will be worth it when you’re done” details.  For more on alignment, spacing, margin, etc, and your clickable images, see here.

 

If you’ve searched the tutorials and can't find what you need, please contact us. We’re here to help. Contact Us