ImageList¶

ImageList element (slider) is an element for uploading more than one image.

View in SVE:

image-list

View on the page:

image-list

Options¶

newItemTitle¶

string Title for new item for image list.

maxNumberOfItems¶

int Optional parameter. Maximum number of images.

requireImageSize¶

bool Optional parameter. If true is set, customer must specify maximum image width.

allowedExtensions¶

array Optional parameter. List of allowed extensions for image. You can specify your list based on allowed extensions in Shoper:

gif,
jpeg,
jpg,
png,
wbmp,
webp,
bmp,
ico,
svg.

JSON

{
  "options":
    {
      "newItemTitle" : "Add image",
      "maxNumberOfItems" : 5,
      "requireImageSize" : true,
      "allowedExtensions" : ["jpeg", "jpg", "png"]
    }
}

Build-in Validators¶

Element validate if sent images are correct and have specified by you allowed extension. If you set maxNumberOfItems, maximum numbers of images will be checked.

Available Validators¶

Element does not have available validators.

Relations Support¶

Element does not support relations between elements.

Configuration output schema¶

schema

{
  "<element_type>" : "imageList",
  "<element_name>" : string,
  "<element_isRequired>" : bool,
  "<element_isHidden>" : bool,
  "<element_options>" : {
    "<element_option_newItemTitle" : string,
    "<element_option_maxNumberOfItems" : int,
    "<element_option_requireImageSize" : bool,
    "<element_option_allowedExtensions>" : array
  }
}

example

{
  "type" : "imageList",
  "name" : "slider",
  "isRequired" : true,
  "isHidden" : false,
  "options": {
    "newItemTitle" : "Add image",
    "maxNumberOfItems" : 5,
    "requireImageSize" : true,
    "allowedExtensions" : ["jpeg", "jpg", "png"]
  }
}

Example of module¶

Twig¶

Twig

<div>
    {% if moduleConfig.images|length %}
        <b>{{ translate("Slides") }}</b>
        {% for item in moduleConfig.images %}
            {% if item.active %}
                <li class="splide__slide photo-slider__slide">
                    {% if item.url %}
                        <a href="{{ item.url }}">
                    {% endif %}
                        <img src="{{ item.image.paths.original }}" {% if item.alt %}alt="{{ item.alt }}"{% endif %} />
                    {% if item.url %}
                        </a>
                    {% endif %}
                </li>
            {% endif %} 
        {% endfor %}
    {% endif %}
</div>

JSON configuration¶

JSON configuration

[
  {
    "state": "unfolded",
    "label": "Slides",
    "elements": [
      {
        "type": "imageList",
        "name": "images",
        "supportsTranslations": true,
        "isHidden" : false,
        "isRequired" : true,
        "options": {
          "newItemTitle": "Add a slide",
          "allowedExtensions": ["jpg", "jpeg", "png", "webp", "svg", "gif"],
          "requireImageSize": false,
          "maxNumberOfItems": 5
        }
      }
    ]
  }
]

JSON translations¶

JSON translations

{
  "module": {
    "pl_PL": {
      "Slides": "Slajdy"
    },
    "en_US": {
      "Slides": "Slides"
    }
  },
  "schema": {
    "pl_PL": {
      "Add a slide" : "Dodaj slajd"
    },
    "en_US": {
      "Add a slide" : "Add a slide"
    }
  }
}