Portfolio - Components

    • Home
    • Cascading Images
View All Components

Component: Cascade Images

Features

  1. add 3 overlapping images

Notes

  1. add 4 images only. Add Vertical Spacing component where necessary
  2. field--paragraph--cascading-images-repeater.html.twig naming determined using Twig debugger

Watch Short Video

field--paragraph--cascading-images-repeater.html.twig

 
<div class="row">

  <div class="cascading-images-wrapper my-5">

    <div class="cascading-images position-relative">

{% for item in items %}

{{ item.content }}

{% endfor %}

     </div>

  </div>

</div>
paragraph--cascading-images.html.twig

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

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


{% block paragraph %}

    {% block content %}


      {% if paragraph.index == '0' %}

        <img class="img-fluid" src="{{ imgPath }}" class="appear-animation box-shadow-3" alt="{{ alt }}" data-appear-animation="expandIn" data-appear-animation-duration="600ms" />


      {% elseif paragraph.index == '1' %}

        <div class="position-absolute w-100" style="top: 41%; left: -30%;">

          <img class="img-fluid" src="{{ imgPath }}" class="appear-animation box-shadow-3" alt="{{ alt }}" data-appear-animation="expandIn" data-appear-animation-delay="300" data-appear-animation-duration="600ms" />

        </div>


      {% elseif paragraph.index == '2' %}

        <div class="position-absolute w-100" style="top: 75%; left: 30%;">

        <img class="img-fluid" src="{{ imgPath }}" class="appear-animation box-shadow-3" alt="{{ alt }}"  data-appear-animation="expandIn" data-appear-animation-delay="600" data-appear-animation-duration="600ms" />

        </div>

      {% endif %}


    {% endblock %}

{% endblock paragraph %}