Add an image gallery
If several images are to be displayed in Sitejet at the same time or in a certain order, the image gallery presets are ideal. How to use presets is explained in our article on the use of presets.
In Sitejet, the following presets are available as galleries in the presets list under the "Images" submenu:
- Gallery (grid, circle, captions)
- Filter Gallery
- Slider
A gallery displays multiple images simultaneously. There are different variants with different display characteristics. For example, images can be displayed in circles of the same size, as squares, or as squares of different sizes creating an effect similar to a photo collage.
The Filter Gallery is a special form that displays images of certain categories at once. If a category is selected on the website with a click, only the images assigned to this category are displayed. Images can be assigned to one or more categories. In order to adapt the Filter Gallery to your wishes, it's necessary to make changes to the buttons and images. Let us assume that a category for "Wedding" should be set up. Write "#wedding" in the "Link" tab of the button in the "URL" field (without the quotation marks). It's important that you use the same word that you used for the button.
Now click on an image that should be displayed when filtering for "Wedding" and switch to the "Style" tab in the left panel and open the "ID & classes" section. Here you enter "filter-wedding" as an additional class. It is important that the class begins with the keyword "filter-" (without quotation marks) and the following term corresponds to the term from the step above.
If you want to add a category to the Filter Gallery, please follow these steps for an exemplary category "Company celebration":
- Click on the last button once and duplicate that button by using the context menu (right-click the element and click "Duplicate element") or by using [Ctrl] + [D]
- Change the button text if you like and change the link in the button's "Link" tab to '#companycelebration'
- Add the class "filter-companycelebration" to the images you want to show in the new category; it is important that you prefix the category's name with "filter-"
- If you wanted a category called "Release Party" you could use the link "#releaseparty" and the class "filter-releaseparty"
Become a part of our Community!
Exchange ideas with other web designers about current developments, tips, and tricks and show your favorite sites. Get advice and talk to us about possible features you would like to see on Sitejet. You can join the Sitejetters community here.
