templates/partials/archivBlock.html.twig line 1

Open in your IDE?
  1. {% block archivBlock %}
  2. {% set archive_rows = archives|batch(tabs_per_row) %}
  4. {# Initialize the global_index variable #}
  5. {% set global_index = 0 %}
  6. {% set global_index_2 = 0 %}
  8. {% for row in archive_rows %}
  9. <section id="features_r1" class="features" style="padding: 0">
  10. <div class="container" data-aos="fade-up">
  11. <!-- Nav Tabs for Each Row -->
  12. <ul class="nav nav-tabs row gy-4 d-flex" >
  13. {% for archive in row %}
  14. <li class="nav-item col-12 col-sm-6 col-md-3 col-lg-3" style="position: relative; margin-top: -0.5%">
  15. {# Use global_index instead of loop.index for unique IDs #}
  16. <a class="nav-link" id="tab-{{ global_index }}" data-toggle="tab" href="#content-{{ global_index }}" role="tab">
  17. <img class="tile-image" src="{{ archive.img.url }}" tabindex="0" alt="{{ archive.startyear }}-{{ archive.endyear }}">
  18. <h4 style="font-family: 'Rajdhani Bold',serif;">{{ archive.startyear }}<span style="font-family: Rajdhani,sans-serif; font-weight: 100">|</span>{{ archive.endyear }}</h4>
  19. </a>
  21. </li>
  23. {# Increment the global_index for every archive #}
  24. {% set global_index = global_index + 1 %}
  25. {% endfor %}
  26. </ul>
  28. <!-- Tab content for each archive in the row -->
  29. <div class="tab-content">
  30. {% for archive in row %}
  31. <div class="tab-pane fade" id="content-{{ global_index_2 }}" role="tabpanel" aria-labelledby="tab-{{ global_index_2 }}">
  32. <h4 style="font-family: 'Rajdhani Bold',serif; font-size: 120px;">{{ archive.startyear }}<span style="font-family: Rajdhani,sans-serif; font-weight: 100">|</span>{{ archive.endyear }}</h4>
  33. <div style="width: 70%;">{{ archive.textBlock|raw }}</div>
  34. {% for image_row in archive.images|batch(2) %}
  35. <div class="row mt-4" style="width: 100%; margin-left: 0; margin-right: 0; margin-bottom: 5%">
  36. {% for image in image_row %}
  37. {% if loop.index == 1 %}
  38. <div class="col-lg-7 text-center" data-aos="fade-up" style="width: 62%; padding-left: 0; padding-right: 0;">
  39. <img src="{{ image.getUrl }}" alt="" class="img-fluid" style="max-width: 96%; margin-right: 40px">
  40. </div>
  41. {% else %}
  42. <div class="col-lg-5 text-center" data-aos="fade-up" style="width: 38%; padding-left: 0; padding-right: 0;">
  43. <img src="{{ image.getUrl }}" alt="" class="img-fluid-2">
  44. </div>
  45. {% endif %}
  46. {% endfor %}
  47. </div>
  48. {% endfor %}
  49. </div>
  51. {% set global_index_2 = global_index_2 + 1 %}
  52. {% endfor %}
  53. </div>
  54. </div>
  55. </section>
  56. {% endfor %}
  57. {% endblock %}