Start here
Editing and styles
Media and content
Tutorials
Site and publishing
Layout and navigation
Forms and services
Use Image Gallery to show a sequence of photos or PDF pages in one frame. Visitors can move between slides using the controls you choose.
Use Image/Video Grid for multiple tiles at once, including Masonry or Bento layouts. Use Cinematic Gallery for an immersive slideshow. This page covers the classic Image Gallery.
Add an Image Gallery from the Add menu. The new gallery starts with a placeholder. Fill it with the images or PDF pages you want visitors to browse.
When used as a traditional image gallery, you would add jpg or png images through the ‘Image Gallery’ Section of the style panel. It looks like this.
Clicking the Edit button will reveal an image selection panel where you can add your content. Just click the Add button to browse for images on your disk.
You can also add PDF pages. These can be either single or multipage PDF files. When you add PDFs, Sitely converts each page into a high quality image that gets embedded into the gallery. This makes it easy to embed presentations or brochures into your web page and makes your documents completely font-independent. When combined with the gallery lightbox function, pages will be zoomed up on screen to make for easy reading. In the example below, a Keynote presentation was exported as a PDF file and added to the Image gallery. Click on the gallery to see the simplicity of displaying presentation material in a web page.
There are many creative ways you can use the new image gallery element. For example, you could create a simple two image gallery and have it automatically play the slideshow to create an eye-catching call to action on your page. Here is an example.
In this example, you could set different on click actions on each image, one to open a sign-up form in a popup, the other to open a different popup that explains the offer in more detail. Try it on this example, wait for the images to change, then click on them.
You don’t have to be a graphic artist to create simple banners like this. You could just use the Apple tools you have available. This example was made as a two page keynote presentation (custom sized) and then each slide was exported as an image. You could also export the two slides as a single PDF file and use that to populate the image gallery.
Open either example directly with these buttons. You can use them with the keyboard without waiting for the slideshow.
Select a slide on the canvas and use Selected Image in the Style inspector. Choose Fit to show the entire image, or Fill to cover the frame. Set its alignment and use Edit Crop to position the image within the frame. Use Customize Image Crop by Layout when a different width needs a different crop.
When Lightbox is off, set an On Click action for each slide. Use the settings menu to apply the action to all images when they should behave the same way. Enable Show Label to display text for the selected slide.
To display the images at a larger scale over a dimmed background, select the Lightbox checkbox in the Style panel. This applies to the whole gallery, just like the Image/Video Grid. Click Edit Lightbox to see the additional options shown below.
The gallery and the lightbox have separate playback and navigation options. For a static cover, turn off the gallery’s arrows, dots, thumbnails and automatic slideshow. Open Edit Lightbox and enable Slideshow so visitors can browse after opening it.
In Edit Lightbox, choose arrow and close controls, including custom artwork where available. Adjust size and position, set the transition and easing, and save a preset to reuse the same appearance.
Enable Zoom Icon to signal that the gallery can open larger. Choose a built-in or custom icon, then adjust size, position and supported tint. Drag the icon on the canvas when you want to align it visually.
Enable Left/Right Arrows and choose a built-in style or Custom artwork. Position the arrows inside or outside the image and set their height along its edge. You can also use dots.
Enable Thumbnails and choose whether they appear above or below the gallery. Set their alignment, distance, size and visible count. Size and count are separate controls. Sitely adjusts the values when they cannot fit, and you can customize thumbnail sizing by layout.
Set the gallery’s transition and speed. Use Automatic Slideshow to advance after a delay and choose whether to pause on hover. If a fitted slide leaves space around the image, set the letterbox color. Border, rounding and shadow style the slide frame.
Select a button or another interactive element and set its On Click action to control a gallery on the page. Choose Go to Next Slide, Go to Previous Slide or Go to Slide, then select the target gallery. You can also open the current image in the lightbox or start, stop or toggle autoplay.
Insert an Image Gallery smart field in text or a slide label. Choose Current slide number or Total number of slides. Use both to display a counter such as 2 of 8. In a gallery label the field uses that gallery, and in separate text you select the gallery it should follow.
Use image protection to prevent dragging or context menus, limit published resolution, set search and AI restrictions or embed copyright metadata. The collection settings also apply to the lightbox images. Choose the protections that fit your use of the images.
Please report any shortcoming in this documentation and we’ll fix it as soon as possible!
Updated for Sitely 8
Powerful and refreshingly simple, at home on Mac, finding new freedom on iPad.
Spend €100 or more in our store and add the discount code
MyBigSaving
into the order form
Please send me details of how I can join your beauty club
Submit
This website makes use of cookies.
Please see our privacy policy for details.
