Portfolio - Components

View All Components

Component: Thumbnail

Features:

  1. add images with large image modal paging
  2. img blur applied for uniform image layout

Notes:

  1. easier to code image paragraphs that image multi field


 

Watch Short Video

Thumbnails

house
house
Class
Class
wall
wall
Class
Class
Class
Class
Class
Class
Class
Class
paragraph--thumbnail.html.twig

 
{% block paragraph %}

    {% block content %}

<div class="col-lg-2 d-none d-lg-block mb-4">

    <div class="image-frame">

        <div class="blur" style="background-image: url({{ file_url(content.field_thumbnail['#items'].entity.uri.value) }})"></div>

       <a href="{{ file_url(content.field_thumbnail['#items'].entity.uri.value) }}" title="{{ content.field_thumbnail['#items'].title }}">

        <img src="{{ file_url(content.field_thumbnail['#items'].entity.uri.value) }}" alt="{{ content.field_thumbnail['#items'].alt }}"/>

        </a>

    </div>

</div>

<div class="d-block d-lg-none">

    <img class="img-fluid w-100 mb-3" src="{{ file_url(content.field_thumbnail['#items'].entity.uri.value) }}" alt="{{ content.field_thumbnail['#items'].alt }}" />

</div>

    {% endblock %}

{% endblock paragraph %}
field--paragraph--thumbnail-repeater.html.twig

 
<div class="lightbox mb-4" data-plugin-options="{'delegate': 'a', 'type': 'image', 'gallery': {'enabled': true}}">

  <div class="row">

      {% for item in items %}

        {{ item.content }}

      {% endfor %}

  </div>

</div>