Yes, you can, with the right widget. The Image Gallery widget lets you set each photo to open a page or a website, and the Image Slider has a link box for each photo. The Responsive Image Gallery can't link its photos, because a click opens the slideshow. On a Responsive page, make a grid of pictures in a Container instead and link each one.
For example:
- A web designer shows screenshots of sites they've built, and each one opens the live website.
- A painter shows a grid of paintings, and each one opens a page with its size, story and price.
- A holiday cottage company shows its cottages, and each photo opens that cottage's page.
Which widget can link each photo?
| Widget | A link for each photo? | Page type |
|---|---|---|
| Image Gallery | Yes: Mouseclick Action set to Go to link | Centered Layout |
| Image Slider | Yes: URL: for each photo | Responsive and Centered Layout |
| Carousel | Yes: each slide is its own object with its own link | Responsive |
| Responsive Image Gallery | No: a click opens the slideshow | Responsive |
| Slide Show Fill | No: one link for the whole box | Responsive and Centered Layout |
Image Gallery (Centered Layout pages)
- Drag Image Gallery from the Widgets tab onto the page and add your photos in Inspector > Widget Settings.
- Select a photo in the list.
- Set Mouseclick Action to Go to link.
- Next to Link Window, click Link.... In the Insert Link window, choose Page: and pick one of your pages, or choose URL: and type the full address of another website, starting with https://. Tick Open in New Window for another website if you like. Click OK.
- Repeat for each photo. Photos left on Popover window still open large when clicked, and No action makes a photo do nothing.
- Click Preview and click each photo to test it.
The link is on the photo, not on the caption under it, so add a line such as "Click a photo to see more" above the gallery.
Image Slider (any page)
Select the Image Slider, go to Inspector > Widget Settings, select each photo in the list and type the address in URL:. For another website, type the full address starting with https://. For one of your own pages, type its published address, such as https://www.example.com/cottages/rose-cottage.html. How to link to another page, a website, an email address, a phone number, a PDF, or a section of a page explains how to find a page's address. The link opens in the same browser tab, and a photo with a link opens its page even when Click to enlarge image is ticked.
Responsive pages: a grid of linked pictures
- Click Containers in the toolbar and choose Container Row. In Inspector > Widget Settings > Display, set Wrap to Wrap so the pictures move onto more rows on a phone.
- Drag your pictures into it. For each one, untick Full width in Inspector > Metrics and give them all the same width, for example 300 pixels.
- Want a caption under each picture? Put the picture and a Text Box in a Container Column first, then put the columns in the Row.
- Select a picture, go to Inspector > Hyperlinks, tick Enable as Hyperlink, set Link To to One of My Pages (or An External Page) and choose where it goes. Link the caption text the same way.
- To show visitors the pictures are clickable, add a hover effect: see Add animation and scroll effects to your pages.
See Build a responsive page with Containers so it stacks neatly on a phone.
Make a page for each photo
- Click Add Directory in the toolbar and name it, for example Paintings. It's your gallery page, and the photo pages go inside it. See Organise your pages: sub-pages and directories, changing your home page, and Do Not Publish.
- Design one photo page, then right-click it in the page list and choose Duplicate for each of the others, changing the photo and text.
- Don't want every photo page in your menu? Untick Include page in navigation menu in Inspector > Page Settings for each one.
- On each photo page, add a "Back to the gallery" button linked to the gallery page. For Previous and Next buttons, set Link To to One of My Pages and choose Previous or Next at the top of the Page menu. They open the page before or after it in your page list.
Want photos to open large instead? See How do I open a popup window or enlarge a photo when someone clicks?.
Related articles
- Add a slideshow to your website: Image Slider, Carousel, Slide Show Fill or a gallery
- How to link to another page, a website, an email address, a phone number, a PDF, or a section of a page
- How do I open a popup window or enlarge a photo when someone clicks?
- Build a responsive page with Containers so it stacks neatly on a phone
- Build a photography or art portfolio website with EverWeb