Portfolio - Components

View All Components

Component: Carousel

Features

  1. add multiple images
  2. responsive
  3. option to use image blur for uniform sizing or original image
  4. link option

Notes

  1. paragraph--carousel-repeater.html.twig used to pass values to paragraph--carousel.html.twig

Watch Short Video

park
wall
park
wall
wall
park
wall
park
wall
paragraph--carousel.html.twig

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

{% set uniform = paragraph_parent.field_uniform_images.value %}

{% set url = content.field_carousel_link.0['#url'] %}

{% set title = content.field_carousel_link.0['#title'] %}

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

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


{% block paragraph %}

    {% block content %}

      {% if uniform == 1 %}

      <a href="{{ url }}">

      <div class="image-frame">

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

        <img src="{{ imgPath }}" alt="{{ alt }}" decoding="async" loading="lazy" /> <!--minmize img overhead using the smallest thumbnail for bg-->

      </div>

      </a>

      {% else %}

      <div>

        <img alt="{{ alt }}" class="img-fluid rounded" src="{{ imgPath }}">

      </div>

      {% endif %}

    {% endblock %}

{% endblock paragraph %}
paragraph--carousel-repeater.html.twig

 
{% block paragraph %}

<div class="row"><!--open carousel-->

		<div class="col">

        <div class="owl-carousel owl-theme show-nav-title" data-plugin-options="{'items': 6, 'margin': 10, 'loop': false, 'nav': true, 'dots': false}">

            {% block content %}

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

            {% endblock %}

        </div>

    </div>

</div> <!-- close carousel -->

{% endblock paragraph %}