templates/photo/photos_by_genre.html.twig line 1

Open in your IDE?
  1. {% extends 'base.html.twig' %}
  3. {% block title %}
  4.   {{ meta_title }}
  5. {% endblock %}
  7. {% block meta_description %}
  8.   <meta name="description" content="{{ meta_description }}">
  9. {% endblock %}
  11. {% block body %}
  12.   <h1 class="text-3xl font-semibold my-8 text-center mx-auto uppercase">{{ genre }}</h1>
  14.   {% if description %}
  15.     <p class="text-lg text-center mx-auto mb-4 max-w-2xl">{{ description }}</p>
  16.   {% endif %}
  18.   <div class="flex items-center justify-center py-4 md:py-8 flex-wrap mb-8">
  19.     {% set selectedGenreSlug = selectedGenre %}
  20.     {% set allActive = selectedGenreSlug == 'all' %}
  22.     <button type="button" class="{% if allActive %}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{% else %}hover:text-white hover:bg-blue-700 text-gray-900 border-2 border-white hover:border-gray-200 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{% endif %}">
  23.       <a href="{{ path('photo_gallery') }}">Все жанры</a>
  24.     </button>
  26.     {% for genre in genres %}
  27.       {% set genreSlug = genre %}
  28.       {% set isActive = selectedGenreSlug == genreSlug %}
  29.       <button type="button" class="{% if isActive %}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{% else %}hover:text-white hover:bg-blue-700 text-gray-900 border-2 border-white hover:border-gray-200 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{% endif %}">
  30.         <a href="{{ path('photos_by_genre', {'genre': genreSlug}) }}">{{ genre }}</a>
  31.       </button>
  32.     {% endfor %}
  33.   </div>
  35.   <div class="container mx-auto px-4 pb-2">
  36.     <div class="masonry">
  37.       {% for photo in photos %}
  38.         <div class="masonry-item">
  39.           <a href="{{ path('photo_show', {'genre': photo.genre, 'id': photo.id}) }}">
  40.             <div class="image-container">
  41.               {% if photo.path %}
  42.                 <img class="h-auto max-w-full rounded-lg" src="{{ asset('photos/' ~ photo.path) }}" alt="{{ photo.title }}">
  43.               {% else %}
  44.                 <img class="h-auto max-w-full rounded-lg" src="{{ asset('photos/default.jpg') }}" alt="Изображение по умолчанию">
  45.               {% endif %}
  46.               <div class="image-overlay">
  47.                 <p class="image-text">Посмотреть</p>
  48.               </div>
  49.             </div>
  50.           </a>
  51.         </div>
  52.       {% endfor %}
  53.     </div>
  54.   </div>
  56.   <style>
  57.     .masonry {
  58.       column-count: 3;
  59.       column-gap: 20px;
  60.     }
  62.     .masonry-item {
  63.       break-inside: avoid;
  64.       padding: 1rem;
  65.       background-color: #f0f0f0;
  66.       border: 1px solid #ccc;
  67.       display: inline-block;
  68.       margin-bottom: 1rem;
  69.       width: 100%;
  70.       box-sizing: border-box;
  71.     }
  73.     .image-container {
  74.       position: relative;
  75.     }
  77.     .image-overlay {
  78.       position: absolute;
  79.       top: 0;
  80.       left: 0;
  81.       width: 100%;
  82.       height: 100%;
  83.       background-color: rgba(0, 0, 0, 0.5);
  84.       display: flex;
  85.       justify-content: center;
  86.       align-items: center;
  87.       opacity: 0;
  88.       transition: opacity 0.3s ease;
  89.     }
  91.     .image-text {
  92.       color: #fff;
  93.       font-size: 18px;
  94.       font-weight: bold;
  95.     }
  97.     .image-container:hover .image-overlay {
  98.       opacity: 1;
  99.     }
  100.   </style>
  102.   <script src="https://unpkg.com/masonry-layout@4/dist/masonry.pkgd.min.js"></script>
  104.   <script>
  105.      window.addEventListener('load', () => {
  106.     // Функция для обновления количества колонок в masonry в зависимости от ширины экрана
  107.     function updateMasonryColumns() {
  108.         const masonry = document.querySelector('.masonry');
  109.         if (!masonry) {
  110.             console.warn('Masonry layout container not found.');
  111.             return;
  112.         }
  114.         const screenWidth = window.innerWidth;
  115.         if (screenWidth > 1200) {
  116.             masonry.style.columnCount = 4;
  117.         } else if (screenWidth > 768) {
  118.             masonry.style.columnCount = 3;
  119.         } else {
  120.             masonry.style.columnCount = 2;
  121.         }
  122.         console.log('Column count:', masonry.style.columnCount);
  123.     }
  125.     // Проверка каждого изображения внутри masonry, чтобы убедиться, что src определен
  126.     const images = document.querySelectorAll('.masonry-item img');
  127.     images.forEach((img) => {
  128.         if (!img.src) {
  129.             console.warn('Image src is undefined or empty.');
  130.         }
  131.     });
  133.     // Начальная настройка и обновление masonry при изменении размера окна
  134.     updateMasonryColumns();
  135.     window.addEventListener('resize', updateMasonryColumns);
  136. });
  138.   </script>
  140. {% endblock %}