Galery
Renders multiple images in an overview. If you click on an image it is shown in enlarged view. From there you can move forward and backward through the galery.
galery()
Renders images.
Sub-Options for Argument "config":
| Option | Type | Description |
|---|---|---|
| buttons | Boolean|auto | Display buttons. 'auto' hides buttons on touch-enabled devices or when only one image is available (Default: auto) |
| fullScreen | Boolean | Enable full screen mode |
| noScrollbars | Boolean | Hide scrollbars when gallery is displayed |
| titleTag | Boolean | Use caption value also in the gallery img.title attribute |
| async | Boolean | Load files asynchronously) |
| preload | Integer | How many files should be preloaded (Default: 2) |
| animation | slideIn|fadeIn|false | Animation type (Default: slideIn) |
| overlayBackgroundColor | String | Background color for the lightbox overlay |
| filter | RegExp | Pattern to match image files. Applied to the a.href attribute (Default: /.+.(gif|jpe?g|png|webp)/i) |
imageCaptions-File
Arguments
- path
- [path] Path of folder containing images. (default: false)
- thumbWidth
- [int] Width of thumbnails/preview images. Supported units: in,cm,mm,pt,pc,px (default: 200)
- thumbHeight
- [int] Height of thumbnails/preview images. (default: 150)
- width
- [int] Synonyme for "thumbWidth".
- height
- [int] Synonyme for "thumbHeight".
- maxWidth
- [int] Maximum width of images (i.e. in overlay). (default: 1920)
- maxHeight
- [int] Maximum height of images (default: 1440)
- class
- [string] Class to be applied to the wrapper tag. (default: false)
- fullscreen
- [bool] If true, galery covers the entire screen when opened. (default: false)
- background
- [color] Color of the overlay background. (default: #212121f2)
- config
- Various options, see table above. (default: [])
- imageCaptions
- (optional) .txt-file containing image descriptions. Also defines image order. (file-path relative to galery-path or absolute like "~/xy/z.yaml") (default: index.txt)
- thumbCaptions
- [bool] If true, captions from
imageCaptionsare rendered in thumbnail-preview as well. (default: false)
Simple Galery
If no source path is provided, all images in the page folder are included.
{{ galery() }}
Images from assets/ Folder:
Image files don't need to be placed in the page folder. Alternatively, you can place them inside the folder content/assets/.
{{ galery( path: ~assets/images/plants/) }}
Options
- thumbWidth and thumbHeight:
-
size and aspect ratio of the preview or thumbnail images.
- fullscreen:
-
when images are enlarged they cover the entire screen, not only the browser window.
- background:
-
background color of the image overlay.
Hint: apply transparency like #222f.
{{ galery(
'~assets/images/galery/',
thumbWidth: 150,
thumbHeight: 150,
fullscreen: true
)
}}
Config Options
Images should load quickly. Keeping their size low is essential.
Beyond that, for .jpg files it is possible to save them in progressive format, also called interlaced.
Use the following config option in site/config/config.php to activate progressive format:
'thumbs' => [
'interlace' => true,
],
Control-File
The optional control file lets you define the order of images and their captions.
By default, the control file is named index.txt and can be placed either in the page folder or the image folder.
Use macro argument imageCaptions to specify the control file with different folder and/or filename.
{{ galery(
'~assets/images/animals/',
width: 150,
height: 150,
//imageCaptions: myfolder/galery.text // default: index.txt
)
}}
