All parameters related to every slide.
|Top margin||The minimum space (in percentages) between the top of the slide and the caption block|
|Right margin||The minimum space (in percentages) between the right of the slide and the caption block|
|Bottom margin||The minimum space (in percentages) between the bottom of the slide and the caption block|
|Left margin||The minimum space (in percentages) between the left of the slide and the caption block|
|Text padding||The padding of the text (in percentages) inside the caption’s container|
|Background opacity||The opacity of the caption’s background|
|Background color||The caption’s background color|
|Default position||The position applied to the caption inside the caption’s container by default
Check the caption configurations section for more information.
|Category header tag||When set to show, the HTML header tag for the category (will match the template)|
|Title header tag||When set to show, the HTML header tag for the title (will match the template)|
|Below slider||Show the slide caption content below the slideshow when the viewport is smaller than 640 pixels|
|On a large device:
On a small device:
|CSS class||CSS class to give to slide content (caption and tooltips) that shows outside of the slideshow|
|Default background||The image that will be used if it is missing from the data source (for instance, if the article fulltext image from an article or the K2 image from a K2 item are missing)|
|Image width||The width of the original slide (images found to create the slide will be cropped if not of this width)|
|Image height||The height of the original slide (images found to create the slide will be cropped if not of this height)|
The extension handles .jpg, .png and v2.0 .webp image file types.
When a WebP image is used, png fallbacks are automatically created ONLY if the image width and height are different from the slide background image dimensions.
When the dimensions are identical, you need to provide a png image fallback in the same directory as the original image.
It is highly recommended to use images that have the same dimensions as the dimensions provided here.
This allows you to have total control over the 'weight' of each image (and bypass the extension's automatic image creation), which will ensure faster page loads if your images are highly optimized. The GD library does not always make a good job in creating large optimized images (especially png files).
The extension can create images of different sizes which will be later used depending on the size of the browser window. Set strategic breakpoints that work best for your designs.
For instance, a breakpoint of value 768 will automatically generate an image of width 768 pixels, which will be used if the window size is less than 768 pixels. The browser will only load the appropriate image.
v2.0 Under the hood, the
<picture> HTML element is used in conjonction with media queries.
|Use breakpoints||Use different image sizes for each slide when the slider is viewed on smaller devices (like mobile phones or tablets)|
|Breakpoint 1||Image size to accommodate the smallest devices
default 360px. v2.0 Set to 0 to ignore this breakpoint
|Breakpoint 2||Image size to accommodate the medium-size devices
default 780px. v2.0 Set to 0 to ignore this breakpoint
|Breakpoint 3||Image size to accommodate the largest devices
default 1024px. v2.0 Set to 0 to ignore this breakpoint
The order of the breakpoints is not important. The extension will make the proper adjustments.
v2.0 When by-passing the extension's automatic image creation, you also need to provide the breakpoint images in the same directory.
For instance, if the original image is called
original.png and you are using a breakpoint at 768px, you need to provide
If the original image is called
original.webp and you are using a breakpoint at 768px, you need to provide
original-768.webp AND the fallback