photo_slider¶
The photo_slider macro is used to render a slider of photos and is used in a photo_slider module.
Definition¶
Input parameters¶
sliderSettings¶
object represents an object of slider configuration settings taken from https://splidejs.com/. On top of that we also provide a few additional properties:
| Option key | Type | Default | Required | Description |
|---|---|---|---|---|
| sliderSettings.mountOnConnectedCallback | boolean |
false |
no | If set to true the slider will be rendered when page loads |
options¶
object represents an object of macro configuration options
| Option key | Type | Default | Required | Description |
|---|---|---|---|---|
| options.moduleInstanceId | number |
- | yes | Instance id of the module that the component should refer to |
| options.variant | string |
"" | no | Sets the visual variant of the slider, supported values are default, minimal and multiple |
| options.showNavigation | number |
- | no | If set to 1 the arrow navigation will be enabled. |
| options.autoplay | number |
- | no | If set to 1 auto changing of the slides will be enabled |
| options.slideDisplayTime | number |
5000 | no | Allows to set (in milliseconds) how long should one slide be displayed before change. |
| options.scrollingDuration | number |
400 | no | Allows to set (in milliseconds) how long should sliding animation last. |
| options.title | string |
- | no | Title of a slider |
| options.classNames | string |
"" | no | String containing additional classNames that will be added to the slider |
| options.images | array |
- | no | Represents an array of image objects |
options.images¶
array Represents an array of image objects each consisting of the following properties:
| Option key | Type | Default | Required | Description |
|---|---|---|---|---|
| options.images[index].label | string |
"" | no | Label text of the slide |
| options.images[index].description | string |
"" | no | Description text of the slide |
| options.images[index].active | number |
- | no | If set to 1 the slide will be displayed |
| options.images[index].url | string |
"" | no | Url path of page where user will be redirected after clicking on this slide |
| options.images[index].alt | string |
"" | no | Alt attribute of the image |
| options.images[index].order | number |
- | no | Order in which the images wil be rendered from the smallest number to the largest |
| options.images[index].image | object |
- | no | Represents an image object |
options.images[index].image¶
object Represents an image object consisting of the following properties:
| Option key | Type | Default | Required | Description |
|---|---|---|---|---|
| options.id | string |
"" | no | Unique id of the image |
| options.width | number |
- | no | Width of the image |
| options.height | number |
- | no | Height of the image |
| options.file_name | string |
"" | no | Name of the image file |
| options.uploaded_file | string |
"" | no | Name of the uploaded image file |
Example¶
In this example we render a photo slider with some settings and options. photo-slider macro is made to be used inside the photo_slider module and because of that the options object is usually taken from the module configuration and does not have to be declared separately but for the sake of an example we defined the object here.
{% from "@macros/photo_slider.twig" import photo_slider %}
{%
set sliderSettings = {
"mountOnConnectedCallback": true,
"type": "loop",
"perPage": 1,
"perMove": 1,
"arrows": true,
"pagination": false,
"autoplay": true,
"interval": 5000,
"speed": 400,
"keyboard": true,
"padding": "2.5rem",
"gap": "0.5rem",
"mediaQuery": "min",
"breakpoints": {
768: {
"padding": "5.25rem",
"perPage": 2,
"gap": "1rem"
},
1200: {
"perPage": 3
},
1920: {
"perPage": 4
}
}
}
%}
{%
set options = {
"moduleInstanceId": 1,
"variant": "multiple_slides",
"showNavigation": "1",
"autoplay": "1",
"slideDisplayTime": "2",
"scrollingDuration": "2",
"title": {
"pl_PL": "example title"
},
"images": {
"pl_PL": [
{
"active": true,
"label": "image1",
"alt": "alt1",
"order": 1,
"description": "description1",
"image": {
"width": 1000,
"height": 666,
"file_name": "1000_F_109397389_huBYRiES0sAHsYBHuo7XU9aRvD0I73if.png",
"uploaded_file": "7ce8953f-f5ba-40b8-8d13-52329af04a65.png"
}
},
{
"active": true,
"label": "image2",
"alt": "alt1"
"order": 2,
"description": "description1",
"image": {
"width": 1600,
"height": 900,
"file_name": "purple-sky.jpg",
"uploaded_file": "15d56785-ff08-4c0f-bc78-5bd9d821bc48.jpeg"
}
}
]
}
}
%}
{{
photo_slider(sliderSettings, options)
}}
Example¶
In this example we render a photo slider with a module configuration.
{% from "@macros/photo_slider.twig" import photo_slider %}
{%
set sliderSettings = {
"mountOnConnectedCallback": true,
"type": "loop",
"perPage": 1,
"perMove": 1,
"arrows": false,
"pagination": false,
"autoplay": false,
"interval": 5000,
"speed": 400,
"keyboard": true
}
%}
{{
photo_slider(sliderSettings, moduleConfig|merge({ moduleInstanceId }))
}}
Macro source code¶
{% macro photo_slider(sliderSettings, options) %}
{% from "@macros/image.twig" import image %}
{% from "@macros/slider_arrow_left.twig" import slider_arrow_left %}
{% from "@macros/slider_arrow_right.twig" import slider_arrow_right %}
<photo-slider name="{{ options.moduleInstanceId }}" class="photo-slider
{% if options.variant == "minimal" %}photo-slider_minimal{% endif %}
{% if options.variant == "multiple" %}photo-slider_multiple{% endif %}
{{ options.classNames|join(' ') }}
">
{% if options.title %}
<h2 class="photo-slider__title">{{options.title}}</h2>
{% endif %}
<h-slider id="{{ options.moduleInstanceId }}" class="splide" settings="{{ sliderSettings | json_encode }}">
<div class="splide__track">
<ul class="splide__list">
{% for item in options.images %}
{% if item.active %}
<li class="splide__slide photo-slider__slide">
<a href="{{ item.url }}">
{% set imgProperties = {
src: item.image.paths.original,
width: item.image.width,
height: item.image.height,
alt: item.alt,
title: item.description,
class: "photo-slider__img"
} %}
{% set webpImages = {
src: [
{
path: item.image.paths.webp,
size: "1x"
},
{
path: item.image.paths["webp1.5x"],
size: "1.5x"
},
{
path: item.image.paths.webp2x,
size: "2x"
},
],
type: "image/webp"
} %}
{% set originalImages = {
src: [
{
path: item.image.paths.original,
size: "1x"
},
{
path: item.image.paths["original1.5x"],
size: "1.5x"
},
{
path: item.image.paths.original2x,
size: "2x"
}
],
type: "image/#{item.image.format}"
} %}
{% if item.image.paths.webp %}
{% set imageSet = [webpImages, originalImages] %}
{% else %}
{% set imageSet = [originalImages] %}
{% endif %}
{{
image({ img: imgProperties }, imageSet)
}}
</a>
</li>
{% endif %}
{% endfor %}
</ul>
</div>
{% if options.showNavigation %}
<div class="photo-slider__progress">
<div class="photo-slider__progress-bar"></div>
</div>
{% endif %}
{% if options.showNavigation %}
<div class="splide__arrows photo-slider__arrows">
{{ slider_arrow_left() }}
{% if not (options.variant == "minimal") %}
<div class="photo-slider__pagination">
<span class="photo-slider__pagination-current"></span>/
<span class="photo-slider__pagination-length"></span>
</div>
{% endif %}
{{ slider_arrow_right() }}
</div>
{% endif %}
</h-slider>
</photo-slider>
{% endmacro %}