Portfolio - Components

View All Components

Component: Files

Features:

  1. add files and apply icon type based on file extension
  2. theme to primary color

Notes:

  1. detect string after last period in file name and apply icon
  2. determine field--paragraph--files-repeater.html.twig off Twig Debug source
  3. 3 boxes per row

Watch Short Video

Files

PDF about X

Word doc about Y

paragraph--files.html.twig

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

{% set desc = content.field_files_description %}


{% block paragraph %}

    {% block content %}

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

    <div class="p-3 border border-primary">

  {% if file_url|split('.')|last == "pdf" %}

  <ul class="list-inline list-unstyled mb-0">

    <li class="list-inline-item"><a href="{{ file_url }}" target="_blank" title="click to download"><i class="fa-solid fa-file-pdf fa-2x"></i></a></li>

    <li class="list-inline-item"><a href="{{ file_url }}" target="_blank" title="click to download">Download PDF File</a></li>

  </ul>

  {{ desc }}

  {% elseif file_url|split('.')|last == "doc" or file_url|split('.')|last == "docx" %}

  <ul class="list-inline list-unstyled mb-0">

    <li class="list-inline-item"><a href="{{ file_url }}" target="_blank" title="click to download"><i class="fa-solid fa-file-word fa-2x"></i></a></li>

    <li class="list-inline-item"><a href="{{ file_url }}" target="_blank" title="click to download">Download Word File</a></li>

  </ul>

  {{ desc }}

  {% elseif file_url|split('.')|last == "xls" or file_url|split('.')|last == "xlsx" %}

  <ul class="list-inline list-unstyled mb-0">

    <li class="list-inline-item"><a href="{{ file_url }}" target="_blank" title="click to download"><i class="fa-solid fa-file-excel fa-2x"></i></a></li>

    <li class="list-inline-item"><a href="{{ file_url }}" target="_blank" title="click to download">Download Excel File</a></li>

  </ul>

  {{ desc }}

 {% elseif file_url|split('.')|last == "png" or file_url|split('.')|last == "jpg" %}

  <ul class="list-inline list-unstyled mb-0">

    <li class="list-inline-item"><a href="{{ file_url }}" target="_blank" title="click to download"><i class="fa-solid fa-image fa-2x"></i></a></li>

    <li class="list-inline-item"><a href="{{ file_url }}" target="_blank" title="click to download">Download Image</a></li>

  </ul>

  {{ desc }}

 {% else %}

  <ul class="list-inline list-unstyled mb-0">

    <li class="list-inline-item"><a href="{{ file_url }}" target="_blank" title="click to download"><i class="fa-solid fa-file fa-2x"></i></a></li>

    <li class="list-inline-item"><a href="{{ file_url }}" target="_blank" title="click to download">Download File</a></li>

  </ul>

  {{ desc }}

  {% endif %}

    </div>

 </div>

    {% endblock %}

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

 
<div class="row gx-3">

    {% for item in items %}

      {{ item.content }}

    {% endfor %}

  </div>