Square photos

This pre-defined component simply displays square shape photos in form of a grid. The first photo will be the __ leading __ photo and will be bigger in size.

Following is the location of this component.

└── src 
  ├── views
   ├── components    
   |  ├──── home
   |  |  ├──── square-photos.twig
      ...
   ...

Example

Square Photos

Variables

Usage

This component takes a list of photos as a collection of items[]. Each item in this collection has url, link_type, image.url, and image.alt. The first item represents the first image that will be the leading photo and will be bigger in size, then a for-loop will be used to list the rest of the photos.

{% for item in items %}
    <a href="{{ item.url }}" {% if item.link_type=='external_link' %} target="_blank" {% endif %}>
        <img src="{{ items[0].image.url }}" alt="{{ item.text }}">
        {% if item.text %}
            <h3>{{ item.text }}</h3>
        {% endif %}
    </a>
{% endfor %}

[updatedIn] 10 months ago