Slides & Galleries in Weebly

In the article about Pictures we mention the use of Photo Gallery and Slide Show tools. In the article Pictures>Video we mention using a Photo Gallery when building a Cinema Page showing stills from films which can be linked to separate Film Pages where those movies are shown. Here's how Weebly's  Photo Gallery and Slide Show tools work.

Photo Gallery

From the Multi Media Tab drag the Photo Gallery element onto the page:

The small print explains that when you click you will be taken to your own computer and can there select several pictures at once. Hold down the Ctrl key on a PC or the Mac key on an Apple and then click on each picture you want to use.

You can choose any size or shape of picture but we suggest you keep them to a maximum of 800 pixels wide and 600 pixels high. You need to use a separate image editing program to prepare the pictures this way - see suggestions here.

The toolbar above offers ways to amend the layout:

Columns - lets you select the number of pictures to display in each row. The more in a row, the smaller they will appear.

Spacing - offers a selection of spaces you can leave around each picture.

Cropping - offers the chance to make them all the same shape - square, rectangle or none .

Advanced - lets you select how much space to have above and below each row of pictures.

Mini-Toolbar

At the top of each picture there us a "mini-toolbar".

Talk balloon symbol - lets you type in a caption which will appear under the larger version of the picture . You cannot see this in action until the page is published.

x - deletes the image from the gallery.

Note:  If the link option is used, when a visitor clicks on the "thumbnail" they will be taken to the link's destination. They will not see the larger version of the picture.
When you create a Cinema Page you point the link to the corresponding Film Page - for details click here.

Slide Show

This is designed to present a series of photos, one after the other. After the last slide the show starts again. They can be changed by the visitor clicking an arrow or can be set to change after a certain time. There are options to present small versions of each picture so that a visitor can choose to display that photo and can then start the slide show from that photo.

From the Multi Media Tab drag the Slide Show element onto a page. 

Click on the display type you want visitors to see when they visit the slide show. Then click the Continue button.

Most of these options can be amended at a later stage.

The styles at bottom right might be be appropriate for photos of members since it suits portrait format images.

Simple Slideshow changes the pictures when the visitor clicks on one of the arrows.

Thumbnail ... the various options  show where small images of all the slides will appear so that visitors can click on the particular one they wish to see or from which they wish to begin the show.

Given the page space available for slides, we recommend editing your pictures to no larger than 600 pixels wide and 400 pixels high. This must be done in a separate image editing program - see our suggestions here.

Add Photos lets you choose more images.

Save tells Weebly to save the slide show.

Mini Toolbars on the top of each photo let you add a caption by clicking the "speech bubble" symbol . The caption is only visible on the slide after the site has been published. You can delete the image from the slideshow by clicking the "x".

Above the main display is the Slide Show toolbar:

Add/Edit goes back to the tool described immediately above.

Nav Style lets you select whether to have a single row of thumbnail images, a double row, simple numbers for each slide rather than thumbnails or no way for visitors to select where to start the show.

Nav Location lets you choose where to put the thumbnails or numbers: top, bottom, left or right.

Transition Style offers a choice of Fade or Slide.

Autoplay offers On or Off.

Advanced>Speed offers a choice of how many seconds each image should stay before the next one comes.

Advanced>Caption Location offers Top or Bottom.

Advanced>Aspect Ratio offers to present images in 16:9, 3:2, 4:3 or auto. 

Advanced>Spacing Above/Below - these let you select how much space to have around the pictures.

When you click elesewhere on the page you can see how the slide show will appear when the page is published.

There are nine pages in this series of detailed Weebly tips:

They support general articles on web design for film-making and AV club websites which begin here.

[Weebly frequently update and improve their system. These pages are based on tests in November 2010.]