craft cms adding image gallery code example

Example: making a photo grallery in craft cms 3

{% set vertParams = {
  height: 800,
  mode: 'crop',
  position: 'center-center',
}
%}
{% set horzParams = {
  width: 800,
  mode: 'crop',
  position: 'center-center',
}
%}
{% set thumbParams = {
  width: 120,
  height: 120,
  mode: 'crop',
  position: 'center-center',
}
%}
{% set images = contentBlock.galleryImages %}
{% if images | length %}
  {% if contentBlock.galleryTitle | length %}
   <h3>{{ contentBlock.galleryTitle }}</h3>
  {% endif %}
  <ul class="gallery">
    {% for image in images %}
    <li>
      {% if image.getHeight() > image.getWidth() %}
        <a href="{{ image.getURL(vertParams) }}"><img src="{{ image.getURL(thumbParams) }}" alt="image"></a>
      {% else %}
        <a href="{{ image.getURL(horzParams) }}"><img src="{{ image.getURL(thumbParams) }}" alt="image"></a>
      {% endif %}
    </li>
    {% endfor %}
  </ul>
{% endif %}

Tags:

Php Example