{% extends 'Nordinfo/Main/base.html.twig' %}{% set show_btt = true %}{% block title %}{{ post.title }} - Nord Info{% endblock %}{% block body_class %}body-post-details{% endblock %}{% block header_epingles %} {{ include('Lenord/Main/parts/epingles.html.twig') }}{% endblock %}{% block header_breadcrumb %} {{ include('Nordinfo/Main/parts/breadcrumb.html.twig') }}{% endblock %}{% block body %} {% if post.dateDebut is defined and post.dateDebut != null %} {% set date_segments = post.dateDebut | split('/') %} {% set date = date_segments[1] ~ '/' ~ date_segments[0] ~ '/' ~ date_segments[2] %} {% else %} {% set date = "" %} {% endif %} {% if post.dateFin is defined and post.dateFin != null %} {% set date_segmentss = post.dateFin | split('/') %} {% set date_fin = date_segmentss[1] ~ '/' ~ date_segmentss[0] ~ '/' ~ date_segmentss[2] %} {% else %} {% set date_fin = "" %} {% endif %} {% if post.type.type == 'video' %} <main role="main" class="mainContent pt-5 pb-5" id="mainContent" tabindex="-1" {% if related_posts|length > 0 %}style="position:relative;"{% endif %}> {% if referer is not null %} {% set url_back = referer %} {% else %} {% set url_back = path('info') %} {% endif %} {% include 'Nordinfo/Main/parts/back_btn.html.twig' with {'back_btn_class':''} %} <div class="container containerPostExtraInfo"> <p class="text-center fsXs"> <span class="lsMd ttUppercase"> {% if post.topics|length > 1 %}{% for top in post.topics %}{% if loop.index != 1 %}, {% endif %}{{ top.displayName }}{% endfor %} {% else %}{% for top in post.topics %}{{ top.displayName }}{% endfor %}{% endif %} {% if post.territories|length > 0 and post.topics|length > 0 %}<span class="separator">|</span>{% endif %} {% if post.territories|length > 1 %}{% for t in post.territories %}{% if loop.last == false and post.territories|length > 1 %}{{ t.displayName ~", " }}{% else %}{{ t.displayName }}{% endif %}{% endfor %} {% else %}{% for t in post.territories %}{{ t.displayName }}{% endfor %}{% endif %} </span> <br> <span class="colorGrey">{{ date|format_datetime(locale='fr', pattern="d MMMM Y") }}</span> </p> </div> <article> <div class="container"> <h1 class="text-center">{{ post.title }}</h1> </div> <div class="videoWrapper __detailPost" style="scroll-margin-top: 120px;"> <p class="skipLinkWrapper __top"><a href="#bottomLink" id="topLink" class="sr-only sr-only-focusable bg-white">Passez la vidéo</a></p> <iframe allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen="allowfullscreen" height="315" src="https://www.youtube.com/embed/{{ youtube_video_id }}" width="560"></iframe> <p class="skipLinkWrapper __bottom"><a href="#topLink" id="bottomLink" class="sr-only sr-only-focusable bg-white no-after">Retour avant la vidéo</a></p> </div> <script> (function() { const topLink = document.getElementById('topLink'); const bottomLink = document.getElementById('bottomLink'); const mainContent = document.getElementById('mainContent'); function scrollToAnchor(anchor) { const target = document.querySelector(anchor); if (!target) return; // 1. Temporarily remove position relative because of a weird bug with content overflow mainContent.style.position = ''; // 2. Smooth scroll target.scrollIntoView({ behavior: 'smooth', block: 'start' }); target.focus({ preventScroll: true }); // 3. Restore after scroll finishes // Using a small delay to ensure scroll is done setTimeout(() => { mainContent.style.position = 'relative'; }, 500); } topLink.addEventListener('click', function(e) { e.preventDefault(); scrollToAnchor('#bottomLink'); }); bottomLink.addEventListener('click', function(e) { e.preventDefault(); scrollToAnchor('#topLink'); }); })(); </script> <div class="container pt-5"> <p class="containerContent pb-4"> {{ post.shortDescription|raw }} </p> <div class="containerContent">{{ content_post|raw }}</div> </div> <div class="container-sm pt-6"> {% if is_pdf != 1 %} {% if is_preview != 1 %} {% include 'Nordinfo/Main/parts/article-actions.html.twig' with {'post_title':post.title, 'post_id':post.id} %} {% endif %} {% include 'Nordinfo/Main/parts/cards-bottom.html.twig' %} {% if related_posts|length > 0 %} {% include 'Nordinfo/Main/parts/related_posts.html.twig' with {related_posts: related_posts, is_video_page: true} only %} {% endif %} {% endif %} </div> </article> {% if related_posts|length > 0 %} <div class="gradientRelatedPosts"></div> {% endif %} </main> {% elseif post.type.type == 'article' %} <main role="main" class="mainContent pt-0 pb-5" id="mainContent" tabindex="-1" {% if related_posts|length > 0 %}style="position:relative;"{% endif %}> <div class="headerBanner {% if post.type.type == 'article' %}--pageDetails{% endif %} placement{% if post.getPositionImage.id is defined %}{{ post.getPositionImage.id }}{% endif %}" {% if post.illustrationdetailName is null %} style="background-image: url('{{ asset('upload/images/'~post.illustrationfilName) | imagine_filter('banner_full_width') }}')" {% else %} style="background-image: url('{{ asset('upload/images/'~post.illustrationdetailName) | imagine_filter('banner_full_width') }}')" {% endif %}></div> <div class="container containerPostDetails {% if post.type.type == 'article' %}--pageDetails{% endif %}"> <article class="pt-5"> <p class="text-center fsXs"> <span class="lsMd ttUppercase"> {% if post.type.type == 'event' %}{% if post.eventType|length > 1 %}{% for top in post.eventType %}{% if loop.index != 1 %}, {% endif %}{{ top.displayName }}{% endfor %} {% else %}{% for top in post.eventType %}{{ top.displayName }}{% endfor %}{% endif %} {% else %}{% if post.topics|length > 1 %}{% for top in post.topics %}{% if loop.index != 1 %}, {% endif %}{{ top.displayName }}{% endfor %} {% else %}{% for top in post.topics %}{{ top.displayName }}{% endfor %}{% endif %} {% endif %}{% if (post.territories|length > 0 or post.eventType|length > 0) and post.topics|length > 0 %} <span class="separator">|</span>{% endif %} {% if post.territories|length > 1 %}{% for t in post.territories %}{% if loop.last == false and post.territories|length > 1 %}{{ t.displayName ~", " }}{% else %}{{ t.displayName }}{% endif %}{% endfor %} {% else %}{% for t in post.territories %}{{ t.displayName }}{% endfor %}{% endif %} </span> <br> {% if post.type.type == 'event' %} {% if date == date_fin %} Le {{ date|format_datetime(locale='fr', pattern="d MMMM Y") }} {% else %} Du {% if date_fin|format_datetime(locale='fr', pattern="Y") == date|format_datetime(locale='fr', pattern="Y") %} {% if date|format_datetime(locale='fr', pattern="m") == date_fin|format_datetime(locale='fr', pattern="m") %} {{ date|format_datetime(locale='fr', pattern="d") }} {% else %} {{ date|format_datetime(locale='fr', pattern="d MMMM") }} {% endif %} {% else %} {{ date|format_datetime(locale='fr', pattern="d MMMM Y") }} {% endif %} au {{ date_fin|format_datetime(locale='fr', pattern="d MMMM Y") }} {% endif %} {% else %} <span class="colorGrey">{{ date|format_datetime(locale='fr', pattern="d MMMM Y") }}</span> {% endif %} </p> <h1 class="text-center">{{ post.title }}</h1> <p class="font-weight-bold">{{ post.getShortDescription }}</p> <div class="containerContent pb-2">{{ content_post|raw }}</div> {% if post.credits is not null %} <p class="text-secondary font-italic fontWeightMedium fsXs pb-2">Crédits photo : {{ post.credits }} </p> {% endif %} </article> </div> <div class="container-sm --article pt-4"> <div> {% if is_pdf != 1 %} {% if is_preview != 1 %} {% include 'Nordinfo/Main/parts/article-actions.html.twig' with {'post_title':post.title, 'post_id':post.id} %} {% endif %} {% include 'Nordinfo/Main/parts/cards-bottom.html.twig' %} {% if related_posts|length > 0 %} {% include 'Nordinfo/Main/parts/related_posts.html.twig' with {related_posts: related_posts} only %} {% endif %} {% endif %} </div> </div> {% if related_posts|length > 0 %} <div class="gradientRelatedPosts"></div> {% endif %} </main> {% else %} <main role="main" class="mainContent pt-5 pb-5" id="mainContent" tabindex="-1" {% if related_posts|length > 0 %}style="position:relative;"{% endif %}> <div class="container containerPostExtraInfo"> {% if post.type.type == 'event' and post.eventType|length > 0 %} <p class="articleType ttUppercase"> {% if post.eventType|length > 1 %} {% for top in post.eventType %} {% if loop.index != 1 %}, {% endif %}{{ top.displayName }} {% endfor %} {% else %} {% for top in post.eventType %}{{ top.displayName }}{% endfor %} {% endif %} </p> {% endif %} <p class="text-center fsXs"> <span class="lsMd ttUppercase"> {% if post.type.type == 'event' %}{% if event_lieu|length > 0 %}{{ event_lieu }}{% endif %}{% if event_ville|length > 0 %}{% if event_lieu|length > 0 %} <span class="separator">|</span>{% endif %}{{ event_ville }}{% endif %} {% else %}{% if post.topics|length > 1 %}{% for top in post.topics %}{% if loop.index != 1 %}, {% endif %}{{ top.displayName }}{% endfor %}{% else %}{% for top in post.topics %}{{ top.displayName }}{% endfor %}{% endif %}{% if post.topics|length > 0 %} <span class="separator">|</span>{% endif %} {% endif %}{% if post.type.type != 'event' %}{% if post.territories|length > 1 %}{% for t in post.territories %}{% if loop.last == false and post.territories|length > 1 %}{{ t.displayName ~", " }}{% else %}{{ t.displayName }}{% endif %}{% endfor %}{% else %}{% for t in post.territories %}{{ t.displayName }}{% endfor %}{% endif %}{% endif %} </span> <br> {% if post.type.type == 'event' %}{% else %} <span class="colorGrey">{{ date|format_datetime(locale='fr', pattern="d MMMM Y") }}</span> {% endif %} </p> </div> <article> <div class="container"> <h1 class="text-center">{{ post.title }}</h1> <p class="article-subtitle">{{ short_description }}</p> {% if post.type.type == 'event' %} <p class="articleDate"> {{ event_date|raw }} </p> {% if post.horaires|length > 0 %} <div class="articleHours"><strong>Horaires :</strong><br/> {{ post.horaires|raw }} </div> {% elseif event_heures|length > 0 %} <div class="articleHours"><strong>Horaires :</strong><br/> {{ event_heures|raw }} </div> {% endif %} <hr class="articleSeparator"/> {% endif %} {% if post.organizedBy|length > 0 %} <div class="articleOrganizedBy"><strong>organisé par :</strong> {{ post.organizedBy }}</div> {% endif %} <div class="containerContent pt-2 pb-2"> {{ content_post|raw }} {% if post.type.type == 'quiz' %} <br/> {% include 'Nordinfo/Main/parts/quiz_block.html.twig' with {post: post, content_post, is_detail: true} only %} {% endif %} </div> <hr class="articleSeparator"/> {% if post.tarifs|length > 0 %} <div class="articlePrices"><strong>Tarif(s) :</strong> {{ post.tarifs }}</div> {% endif %} </div> </article> <div class="container-sm pt-5"> {% if is_pdf != 1 %} {% include 'Nordinfo/Main/parts/cards-bottom.html.twig' %} <div class="mb-5"> {% if is_pdf != 1 %} {% if post.getIllustrationFilName is defined and post.getIllustrationFilName|length > 0 %} <img src="{{ asset('/upload/images/'~post.getIllustrationFilName) }}" class="illustrationBottom mt-3" alt=""> {% endif %} {% endif %} {% if post.credits is not null %} <p class="text-secondary font-italic fontWeightMedium fsXs pb-2">Crédits photo : {{ post.credits }} </p> {% endif %} </div> {% if is_preview != 1 %} {% include 'Nordinfo/Main/parts/article-actions.html.twig' with {'post_title':post.title, 'post_id':post.id, 'is_event':true } %} {% endif %} {% endif %} {% if is_pdf != 1 %} {% if related_posts|length > 0 %} {% include 'Nordinfo/Main/parts/related_posts.html.twig' with {related_posts: related_posts} only %} {% endif %} {% endif %} </div> {% if related_posts|length > 0 %} <div class="gradientRelatedPosts"></div> {% endif %} </main> {% endif %} {{ include('Nordinfo/Main/parts/cookieManager.js.html.twig') }}{% endblock %}