Note: While our most popular guides have been translated into Spanish, some guides are only available in English.
Wells Gallery Pages

Wells' stylish Gallery Page makes it an excellent choice for artists, photographers, and other creative professionals.

Gallery Pages vary by template. This guide explains the options available for Gallery Pages in Wells. For general information about adding images and videos to a Gallery Page, visit Using the Gallery Page.

Layout

The Gallery Page in Wells displays images and videos in a slideshow format by default.

If a visitor clicks Show Thumbnails in the bottom-left, or the up arrow that appears on hover over an image, the display changes to the thumbnail view. Clicking a thumbnail returns the view to slideshow for that image.

  • Use the Initial Gallery View tweak in the Gallery Options section of the Style Editor to make thumbnail view the default initial layout for the page.
  • If you’ve set a Gallery Page as your homepage, it can have different layout settings than other Gallery Pages on your site. Use the Homepage Gallery View tweak to set the Gallery Page homepage layout.
  • If you select Inherit, the homepage gallery automatically follows the same layout as all other Gallery Pages.
  • If you only want a slideshow layout, uncheck the Enable Gallery Thumbnails tweak. The “show thumbnails” text will disappear.

Navigation and cursor behavior

When the Gallery Page is in slideshow mode, navigation elements appear in the sidebar. In the Gallery Options section of the Style Editor, use the Gallery Controls tweaks to adjust the color, size, and font of the gallery navigation.

When Gallery Controls: Simple is selected, the navigation displays as the words Prev / Next. Use that tweak to change the navigation to Numbers or Bullets, or to Hide the controls altogether.

Gallery Page images also have built-in navigation elements. When you hover over the side of an image in slideshow, your cursor turns into a left or right arrow. Use these to scroll left or right through the slideshow.

When thumbnails are enabled, the cursor turns into an up arrow in the top-center. Clicking this changes the display to thumbnail view.

Note: If there is only one image in a gallery, the navigation won’t display.

Image display options

Slideshow

By default, slideshow images resize to fit the browser height with no cropping. If you select Gallery Style: Fill tweak, images crop to fill all available space.

Thumbnails

In the Gallery Options section of the Style Editor, use the Thumbnail Aspect Ratio tweak to control the size and shape of your thumbnails. Selecting any Aspect Ratio other than Auto will make all the images in your gallery the same size.

Use the Thumbnail Width tweak to change the size of the thumbnails.

Image titles and descriptions

Add titles and descriptions for each image with the image editor. Titles and descriptions display in the sidebar in slideshow layout. They don’t display in thumbnail view.

Wells Gallery Pages have responsive design based on browser size. If the title, descriptions, and navigation for any image in a gallery are too big to fit in the sidebar, those elements for all images in that Gallery Page will display on the opposite side as an overlay.

If you’ve selected Number or Bullets as your navigation, it displays as Prev / Next while in the overlay.

Enlarge the browser or shorten the titles and descriptions to move these elements back to the sidebar.

Deeplink and clickthrough URLs

Wells supports deeplink URLs. These are individual URLs assigned to each image, so that you can send visitors directly to any image within a Gallery. You can customize the deeplink URL for each image. The image will display in slideshow format.

Because of its unique slideshow-to-thumbnail functionality, the Wells template doesn’t support clickthrough URLs on Gallery Page images. To achieve a similar effect, customize image descriptions to add links to external pages, internal pages, or files.

Mobile

On mobile devices and reduced-width browsers, images stack vertically. Image titles and descriptions display below the image.

Note: For general information about styling your site, visit Structure and style.

Next step

Learn about Wells Blog Pages.

Was this article helpful?
23 out of 34 found this helpful
Wells Gallery Pages