templates_common/newsview.html.twig line 1

  1. {% extends 'layout.html.twig' %}
  3. {% block title %}
  4.     {{ post.title }}
  5. {% endblock title %}
  7. {% block content %}
  9.     {% include 'blocks/breadcrumbs.html.twig' with
  10.         {
  11.             items: [
  12.             [post.title|striptags|u.truncate(100, '...')|raw],
  13.         ]
  14.         } %}
  16.     <main>
  17.         <div class="container px-4">
  18.             <div class="w-[100%] mx-auto">
  20.                 <h1 class="text-center font-extrabold text-[24px] leading-[36px] lg:text-[36px] lg:leading-[62.4px]">
  21.                     {{ post.title }}</h1>
  22.                 <article
  23.                         class="{% if post.type == 'post' %}lg:border lg:border-gray-200 lg:rounded-lg lg:shadow-md my-6{% endif %}">
  25.                     {% if post.type == 'post' %}
  26.                         <div class="lg:max-w-[70%] mx-auto my-2 lg:my-6 text-[14px]">
  27.                             <time class="text-[#999fab] leading-[150%]" datetime="">
  28.                                 {% block time %}
  29.                                     {{ post.publishedAt ? post.publishedAt|date('d.m.Y') : '' }}
  30.                                 {% endblock time %}
  31.                             </time>
  32.                         </div>
  33.                     {% endif %}
  35.                     {# @TODO move to templates #}
  36.                     {% if post.id == 52 or post.id == 67 %}
  37.                     <div class="max-lg:px-4 lg:max-w-[85%] mx-auto my-2 lg:my-6 text-[14px]">
  38.                         {% else %}
  39.                         <div class="lg:max-w-[70%] mx-auto my-2 lg:my-6">
  40.                             {% endif %}
  42.                             {% if post.type == 'post' or post.isSliderActive == true %}
  43.                                 {% block slider %}
  44.                                     <div class="relative mb-6">
  45.                                         {% if post.attachments|length > 1 %}
  46.                                             <div id="news_slider_controls">
  47.                                                 <button class="w-[100px] h-[100px] absolute top-[calc(50%-50px)] z-10">
  48.                                                     <img class="w-[32px] mx-auto"
  49.                                                          src="data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23fff'%3e%3cpath d='M11.354 1.646a.5.5 0 0 1 0 .708L5.707 8l5.647 5.646a.5.5 0 0 1-.708.708l-6-6a.5.5 0 0 1 0-.708l6-6a.5.5 0 0 1 .708 0z'/%3e%3c/svg%3e"
  50.                                                          alt="">
  51.                                                 </button>
  52.                                                 <button class="w-[100px] h-[100px] absolute top-[calc(50%-50px)] right-0 z-10">
  53.                                                     <img class="w-[32px] mx-auto rotate-180"
  54.                                                          src="data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23fff'%3e%3cpath d='M11.354 1.646a.5.5 0 0 1 0 .708L5.707 8l5.647 5.646a.5.5 0 0 1-.708.708l-6-6a.5.5 0 0 1 0-.708l6-6a.5.5 0 0 1 .708 0z'/%3e%3c/svg%3e"
  55.                                                          alt="">
  56.                                                 </button>
  57.                                             </div>
  58.                                             <div id="news_slider">
  59.                                                 {% for image in post.attachments %}
  60.                                                     {% if image.path is not empty %}
  61.                                                         <img
  62.                                                                 srcset="{{ asset(image.path) | imagine_filter('slider_photo_mobile') }} 480w, {{ asset(image.path) | imagine_filter('slider_photo') }} 1280w"
  63.                                                                 sizes="(max-width: 600px) 480px, 1280px"
  64.                                                                 src="{{ asset(image.path) | imagine_filter('slider_photo') }}"
  65.                                                              alt="{{ post.title }} ">
  66.                                                     {% else %}
  67.                                                         {% if image.imageName matches '/\.(mp4|avi|webm|flv)$/' %}
  68.                                                             <div>
  69.                                                                 <video class="myVideo"
  70.                                                                        src="/images/attachments/{{ image.imageName }}"
  71.                                                                        style="display: inline-block;" controls
  72.                                                                        muted></video>
  73.                                                             </div>
  74.                                                         {% else %}
  75.                                                             <img
  76.                                                                     srcset="{{ asset('/images/attachments/' ~ image.imageName) | imagine_filter('slider_photo_mobile') }} 480w, {{ asset('/images/attachments/' ~ image.imageName) | imagine_filter('slider_photo') }} 1280w"
  77.                                                                     sizes="(max-width: 600px) 480px, 1280px"
  78.                                                                     src="{{ asset('/images/attachments/' ~ image.imageName) | imagine_filter('slider_photo') }}"
  79.                                                                     alt="{{ post.title }} ">
  80.                                                         {% endif %}
  81.                                                     {% endif %}
  82.                                                 {% endfor %}
  83.                                             </div>
  84.                                         {% elseif post.attachments|length == 1 %}
  86.                                             {% if post.attachments|first.imageName matches '/\.(mp4|avi|webm|flv)$/' %}
  87.                                                 <video class="myVideo"
  88.                                                        src="/images/attachments/{{ post.attachments|first.imageName }}"
  89.                                                        style="display: inline-block;" controls muted></video>
  90.                                             {% else %}
  93.                                                 {% if post.attachments|first.path is not empty %}
  94.                                                     <img class="mx-auto"
  95.                                                          src="{{ asset( post.attachments|first.path) }}"
  96.                                                          alt="{{ post.title }}">
  97.                                                 {% else %}
  98.                                                     <img class="mx-auto"
  99.                                                          src="{{ asset('/images/attachments/' ~ post.attachments|first.imageName) }}"
  100.                                                          alt="{{ post.title }}">
  101.                                                 {% endif %}
  103.                                             {% endif %}
  105.                                         {% endif %}
  106.                                     </div>
  107.                                 {% endblock slider %}
  108.                             {% endif %}
  110.                             {% block article %}
  111.                                 {{ post.content|raw }}
  112.                             {% endblock article %}
  114.                         </div>
  115.                 </article>
  117.                 {% if post.type == 'post' %}
  118.                     <div class="text-center my-12">
  119.                         <a class="inline-block mx-auto text-[#cda062] rounded-[28px] px-6 py-3 border-2 border-[#cda062] font-bold  hover:bg-[rgba(254,197,12,.16)]"
  120.                            href="{{ path('app_post_index', {'type': post.type}) }}">
  121.                             {{ 'Back to news'|trans }}
  122.                             <img class="inline rotate-[90deg] ml-4" src="/img/arrow-small-down.svg" alt="">
  123.                         </a>
  124.                     </div>
  125.                 {% endif %}
  127.             </div>
  129.         </div>
  131.     </main>
  133. {% endblock content %}