templates/photo/gallery.html.twig line 1

Open in your IDE?
  1. {% extends 'base.html.twig' %}
  3. {% block title %}Галерея картин – Николай Макаров{% endblock %}
  5. {% block body %}
  6.   <h1 class="text-3xl font-semibold my-8 text-center mx-auto">Галерея</h1>
  8.   <div class="flex items-center justify-center py-4 md:py-8 flex-wrap mb-8">
  9.     <button type="button" class="text-blue-700 hover:text-white border-2 border-blue-600 bg-white hover:bg-blue-700 focus:ring-4 focus:outline-none focus:ring-blue-300 rounded-full text-base font-medium px-5 py-2.5 text-center mr-3 mb-3 dark:border-blue-500 dark:text-blue-500 dark:hover:text-white dark:hover:bg-blue-500 dark:bg-gray-900 dark:focus:ring-blue-800" aria-label="Показать все жанры">
  10.       <a href="{{ path('photo_gallery') }}">Все жанры</a>
  11.     </button>
  13.     {% for genre in genres %}
  14.       {% set isNonFiction = 'non-fiction' in genre %}
  16.       {% if not isNonFiction %}
  17.         <button type="button" class="hover:text-white hover:bg-blue-700 dark:border-blue-500 dark:text-blue-500 dark:hover:text-white dark:hover:bg-blue-500 dark:focus:ring-blue-800 text-gray-900 border-2 border-white hover:border-gray-200 dark:border-gray-900 dark:bg-gray-900 dark:hover:border-gray-700 bg-white focus:ring-4 focus:outline-none focus:ring-gray-300 rounded-full text-base font-medium px-5 py-2.5 text-center mr-3 mb-3 dark:text-white dark:focus:ring-gray-800" aria-label="Показать жанр {{ genre|join(', ') }}">
  18.           <a href="{{ path('photos_by_genre', {'genre': genre|join(',')}) }}">{{ genre|join(', ') }}</a>
  19.         </button>
  20.       {% endif %}
  21.     {% endfor %}
  22.   </div>
  24.   <div class="container mx-auto px-4 pb-2">
  25.     <div class="masonry">
  26.       {% for photo in photos %}
  27.         {% if 'non-fiction' not in photo.genre %}
  28.           <div class="masonry-item">
  29.             <a href="{{ path('photo_show', {'genre': photo.genre, 'id': photo.id}) }}" aria-label="Просмотр картины {{ photo.title }}">
  30.               <div class="image-container" role="img" aria-label="Картина {{ photo.title }}">
  31.                 <img class="h-auto max-w-full rounded-lg" src="{{ asset('photos/' ~ photo.path) }}" alt="Картина '{{ photo.title }}' в жанре {{ photo.genre }}" loading="lazy" width="200" height="300">
  32.                 <div class="image-overlay" aria-hidden="true">
  33.                   <p class="image-text">Посмотреть</p>
  34.                 </div>
  35.               </div>
  36.             </a>
  37.           </div>
  38.         {% endif %}
  39.       {% endfor %}
  40.     </div>
  41.   </div>
  43.   <style>
  44.     /* Основной стиль сетки */
  45.     .masonry {
  46.       display: flex;
  47.       flex-wrap: wrap;
  48.       gap: 20px;
  49.     }
  51.     .masonry-item {
  52.       flex: 1 1 30%;
  53.       max-width: 30%;
  54.       background-color: #f0f0f0;
  55.       border: 1px solid #ccc;
  56.       padding: 1rem;
  57.       box-sizing: border-box;
  58.       margin-bottom: 1rem;
  59.     }
  61.     @media (max-width: 1200px) {
  62.       .masonry-item {
  63.         flex: 1 1 45%;
  64.         max-width: 45%;
  65.       }
  66.     }
  68.     @media (max-width: 768px) {
  69.       .masonry-item {
  70.         flex: 1 1 100%;
  71.         max-width: 100%;
  72.       }
  73.     }
  75.     .image-container {
  76.       position: relative;
  77.     }
  79.     .image-overlay {
  80.       position: absolute;
  81.       top: 0;
  82.       left: 0;
  83.       width: 100%;
  84.       height: 100%;
  85.       background-color: rgba(0, 0, 0, 0.5);
  86.       display: flex;
  87.       justify-content: center;
  88.       align-items: center;
  89.       opacity: 0;
  90.       transition: opacity 0.3s ease;
  91.     }
  93.     .image-text {
  94.       color: #fff;
  95.       font-size: 18px;
  96.       font-weight: bold;
  97.     }
  99.     .image-container:hover .image-overlay {
  100.       opacity: 1;
  101.     }
  102.   </style>
  104.   <!-- Подключение Masonry.js для более точной расстановки элементов -->
  105.   <script src="https://unpkg.com/masonry-layout@4/dist/masonry.pkgd.min.js"></script>
  106.   
  107.   <script>
  108.     // Инициализация Masonry после загрузки
  109.     document.addEventListener('DOMContentLoaded', function () {
  110.       const masonry = new Masonry('.masonry', {
  111.         itemSelector: '.masonry-item',
  112.         columnWidth: '.masonry-item',
  113.         percentPosition: true,
  114.         gutter: 20
  115.       });
  116.     });
  117.   </script>
  118. {% endblock %}