templates/photo/show.html.twig line 1

Open in your IDE?
  1. {% extends 'base.html.twig' %}
  3. {% block title %}Картина "{{ photo.title }}" – Николай Макаров{% endblock %}
  4. {% block meta_description %}
  5.   <meta name="description" content="Картина '{{ photo.title }}' от Николая Макарова. {{ photo.description|striptags|slice(0, 160) }}. Прекрасные произведения искусства, доступные к просмотру и покупке.">
  6. {% endblock %}
  7. {% block meta_og %}
  8.   <meta property="og:title" content="Картина '{{ photo.title }}' – Николай Макаров">
  9.   <meta property="og:description" content="Просмотр картины '{{ photo.title }}' от Николая Макарова. {{ photo.description|striptags|slice(0, 160) }}">
  10.   <meta property="og:image" content="{{ asset('photos/' ~ photo.path) }}">
  11.   <meta property="og:type" content="website">
  12.   <meta property="og:url" content="{{ app.request.uri }}">
  13. {% endblock %}
  15. {% block body %}
  16.   <div class="flex flex-col items-center">
  17.     {% if isAdmin %}
  18.       <a href="{{ path('app_admin_index') }}"
  19.          class="mt-2 mb-5 inline-flex items-center justify-center p-5 text-base font-medium text-gray-500 rounded-lg bg-gray-50 hover:text-gray-900 hover:bg-gray-100 dark:text-gray-400 dark:bg-gray-800 dark:hover:bg-gray-700 dark:hover:text-white"
  20.          aria-label="Вернуться на главную страницу администратора">
  21.         <span class="w-full">Вернуться на главную</span>
  22.       </a>
  23.     {% else %}
  24.       <a href="{{ path('photo_gallery') }}"
  25.          class="mt-2 mb-5 inline-flex items-center justify-center p-5 text-base font-medium text-gray-500 rounded-lg bg-gray-50 hover:text-gray-900 hover:bg-gray-100 dark:text-gray-400 dark:bg-gray-800 dark:hover:bg-gray-700 dark:hover:text-white"
  26.          aria-label="Вернуться в галерею">
  27.         <span class="w-full">Вернуться в галерею</span>
  28.       </a>
  29.     {% endif %}
  31.     <div class="mb-4 max-w-screen-sm mx-auto">
  32.       <!-- Картинка с открытием модалки -->
  33.       <img
  34.         src="{{ asset('photos/' ~ photo.path) }}"
  35.         class="cursor-pointer mx-auto mb-4 rounded-lg"
  36.         alt="Картина '{{ photo.title }}' от Николая Макарова"
  37.         onclick="openModal('{{ asset('photos/' ~ photo.path) }}', '{{ photo.title }}')"
  38.         aria-label="Просмотр картины '{{ photo.title }}' в увеличенном размере"
  39.       >
  41.       <div class="p-5 rounded-lg bg-white shadow-lg dark:bg-neutral-800">
  42.         <p class="font-bold my-3 text-lg text-gray-800 dark:text-gray-100">Название картины:</p>
  43.         <h1 class="text-xl font-semibold dark:text-gray-200">{{ photo.title }}</h1>
  45.         <p class="font-bold mb-2 text-lg text-gray-800 dark:text-gray-100">Описание:</p>
  46.         <div class="text-gray-700 dark:text-gray-300">
  47.           {{ (photo is defined and photo.description is defined and photo.description ? photo.description : '')
  48.               | replace({ '\\r\\n': '\n' })
  49.               | replace({ '\n\n': '<br><br>' })
  50.               | replace({ '\n': '<br>' })
  51.               | raw
  52.           }}
  53.         </div>
  55.         <p class="font-bold mb-2 text-lg text-gray-800 dark:text-gray-100">Цена:</p>
  56.         <div class="text-gray-700 dark:text-gray-300">{{ photo is defined and photo.price is defined ? photo.price : '' }}</div>
  57.       </div>
  58.     </div>
  59.   </div>
  61.   <!-- Modal -->
  62.   <div class="fixed inset-0 hidden z-50 bg-black bg-opacity-70 flex items-center justify-center"
  63.        onclick="closeModal()"
  64.        aria-hidden="true">
  65.     <div class="relative max-w-3xl w-full bg-white p-4 rounded-lg shadow-lg dark:bg-neutral-900 transform transition-transform duration-300"
  66.          onclick="stopPropagation(event)">
  67.       <button class="absolute top-3 right-3 w-6 h-6 bg-gray-400 rounded-full flex items-center justify-center cursor-pointer transition-transform duration-300 hover:bg-gray-500"
  68.               onclick="closeModal()"
  69.               aria-label="Закрыть изображение">
  70.         <span class="block w-3 h-0.5 bg-white transform rotate-45"></span>
  71.         <span class="block w-3 h-0.5 bg-white transform -rotate-45"></span>
  72.       </button>
  73.       <img class="w-full h-auto max-h-[90vh] rounded-lg object-contain"
  74.            src=""
  75.            alt="Увеличенное изображение картины {{ photo.title }}">
  76.       <p class="mt-4 text-lg text-center font-semibold text-gray-800 dark:text-gray-100 modal-title"></p>
  77.     </div>
  78.   </div>
  80.   <script>
  81.     function openModal(imageSrc, imageTitle) {
  82.       const modal = document.querySelector('.fixed.inset-0');
  83.       const modalImage = modal.querySelector('img');
  84.       const modalTitle = modal.querySelector('.modal-title');
  85.       modalImage.src = imageSrc;
  86.       modalTitle.textContent = imageTitle;
  87.       modal.classList.remove('hidden');
  88.       document.body.style.overflow = 'hidden';
  89.     }
  91.     function closeModal() {
  92.       const modal = document.querySelector('.fixed.inset-0');
  93.       modal.classList.add('hidden');
  94.       document.body.style.overflow = '';
  95.     }
  97.     function stopPropagation(event) {
  98.       event.stopPropagation();
  99.     }
  100.   </script>
  101. {% endblock %}