Portfolio - Components

    • Home
    • Gallery Images
View All Components

Component: Gallery Images

Features:

  1. masonry or grid layout options
  2. image blur used in grid for uniformity

Notes:

  1. use {% set paragraph_parent = paragraph.getParentEntity() %} to get parent paragraph field values

Watch Short Video

Gallery

dog
people
dog
wall
dog
wall
paragraph--gallery-images-repeater.html.twig

 
{% set style = paragraph.field_gallery_style.value %} 


{% if style == "masonry" %}

<div class="row">

  <div class="lightbox my-5" data-plugin-options="{'delegate': 'a.lightbox-{{ paragraph.id() }}', 'type': 'image', 'gallery': {'enabled': true}}">

      <div class="masonry-loader masonry-loader-showing">

        <div class="masonry" data-plugin-masonry data-plugin-options="{'itemSelector': '.masonry-item'}">

{% elseif style == "grid" %}

<div class="row">

{% endif %}

  {% block paragraph %}

    {% block content %}

      {{ content|without('field_gallery_style') }}

    {% endblock %}

  {% endblock paragraph %}

{% if style == "masonry" %}

        </div>

      </div>

  </div><!--close gallery-->

</div><!-- close row -->

{% elseif style == "grid" %}

  </div>

{% endif %}
paragraph--gallery.html.twig

 
{% set paragraph_parent = paragraph.getParentEntity() %}

{% set style = paragraph_parent.field_gallery_style.value %}

{% set img = file_url(content.field_gallery_images['#items'].entity.uri.value) %}

{% set alt = content.field_gallery_images['#items'].alt %}

{% set title = content.field_gallery_images['#items'].title %}

{% set imgDesc = content.field_image_desc %}


  {% block paragraph %}

    {% block content %}

      {% if style == "masonry" %}

          <div class="masonry-item">

            <span class="thumb-info thumb-info-centered-icons thumb-info-no-borders">

              <span class="thumb-info-wrapper">

                <img src="{{ img }}" class="img-fluid border-radius-0" alt="{{ alt }}" title="{{ title }}">

                <span class="thumb-info-action">

                  <a href="{{ img }}" class="lightbox-{{ parent_id }}" title="{{ title }}">

                    <span class="thumb-info-action-icon thumb-info-action-icon-light"><i class="fas fa-search-plus"></i></span>

                  </a>

                </span>

              </span>

            </span>

          </div>

      {% elseif style == "grid" %}

            <div class="col-lg-3 col-md-4">

              <div class="card flip-card flip-card-vertical rounded-0">

								{# front #}

                <div class="flip-front p-0 m-0">

									<div class="flip-content my-3">

                    <div class="image-frame mb-"0>

                      <div class="blur" style="background-image: url('{{ img }}'); z-index: 1;"></div>

                      <img src="{{ img }}" alt="{{ alt }}" decoding="async" loading="lazy" />

                    </div>

                 </div>

            	  </div>

                {# back #}

                <div class="flip-back d-flex p-2" style="background-image: url(); background-size: cover; background-position: center;">

									<div class="flip-content my-3 w-100">


                    {% if imgDesc %}

                    <div class="scroller">

                      <div class="scrollContent">

                      {{ imgDesc }}

                      </div>

                    </div>

                    {% else %}


                    <div class="rotate-r-15 mx-auto" style="width:140px; margin-top: 100px;">

                    <p>Sorry, no info yet!</p>

                    </div>

                   {% endif %}  


									</div>

								</div>

							</div>

						</div>

      {% endif %}

   {% endblock %}

{% endblock paragraph %}
field.html.twig

 
{% for item in items %}

{{ item.content }}

{% endfor %}