templates/article/show.html.twig line 1

{% extends 'base.html.twig' %}

{% block title %}
    {% if article.metaTitle is defined and article.metaTitle is not null %}
        {{ article.metaTitle }}
    {% else %}
        {{ article.title }} - Blog Qwantic
    {% endif %}
{% endblock %}

{% block meta %}
    <meta name="description"
          content="
            {% if article.metaDescription is defined and article.metaDescription is not null %}
                {{ article.metaDescription }}
            {% else %}
                Découvrez notre article : {{ article.title }}.
            {% endif %}
"/>
{% endblock %}

{% block schemaOrg %}
    <script type="application/ld+json">
        {
            "@context": "https://schema.org",
            "@type": "BreadcrumbList",
            "itemListElement": [
                {
                    "@type": "ListItem",
                    "position": 1,
                    "name": "Accueil",
                    "item": "{{ url('home') }}"
                },
                {
                    "@type": "ListItem",
                    "position": 2,
                    "name": "Blog",
                    "item": "{{ url('all_articles') }}"
                },
                {
                    "@type": "ListItem",
                    "position": 3,
                    "name": "{{ article.title|e('html') }}",
                    "item": "{{ url('article_show', { slug: article.slug }) }}"
                }
            ]
        }
    </script>
{% endblock schemaOrg %}


{% block body %}
    <div class="relative">
        <div class="lg:hidden absolute bottom-0 bg-pink-500 bg-opacity-50 w-full z-30">&nbsp;</div>
        {{ component('sections:header_section' ,{
            isArticle: true,
            title: article.title ,
            url:"article.png",
            article: article
        }) }}
    </div>
    <section class="article">
        <div class="p-horizontal p-vertical flex flex-col gap-8 lg:gap-12">
            <p class="font-allerBold text-lg text-grey-200">{{ article.catchPhrase }}</p>
            <div class="flex flex-col gap-6 lg:gap-10">
                <div class="flex flex-col gap-4 [&>ul]:list-disc [&>ul]:list-inside">
                    {{ article.body|raw }}
                </div>
                {% if article.videoLink != null %}
                    <div class="video flex flex-col gap-4">
                        <div id="player" data-video-link="{{ article.videoLink }}"
                             class="w-full aspect-video rounded-lg"></div>
                        <script>
                            // 2. This code loads the IFrame Player API code asynchronously.
                            var tag = document.createElement('script');
                            let idVideo = document.querySelector('#player').dataset.videoLink;

                            tag.src = "https://www.youtube.com/iframe_api";
                            var firstScriptTag = document.getElementsByTagName('script')[0];
                            firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);

                            // 3. This function creates an <iframe> (and YouTube player)
                            //    after the API code downloads.
                            var player;

                            function onYouTubeIframeAPIReady() {
                                player = new YT.Player('player', {
                                    videoId: idVideo,
                                    events: {
                                        'onReady': onPlayerReady,
                                        'onStateChange': onPlayerStateChange
                                    }
                                });
                            }

                            // 4. The API will call this function when the video player is ready.
                            function onPlayerReady(event) {
                                event.target.playVideo();
                            }

                            // 5. The API calls this function when the player's state changes.
                            //    The function indicates that when playing a video (state=1),
                            //    the player should play for six seconds and then stop.
                            var done = false;

                            function onPlayerStateChange(event) {
                                if (event.data == YT.PlayerState.PLAYING && !done) {
                                    setTimeout(stopVideo, 6000);
                                    done = true;
                                }
                            }

                            function stopVideo() {
                                player.stopVideo();
                            }
                        </script>
                    </div>
                {% endif %}
                    {{ article.bodySecond|raw }}
                </div>
            </div>
            <div class="flex justify-center items-center w-full relative z-30">
                <a href="{{ article.ctaLink }}"
                   class="cta big-cta cta-pink !text-base w-full lg:w-auto">{{ article.ctaText }}</a>
            </div>

        </div>
    </section>

    <section id="blog" class="relative">

        <div class="p-horizontal p-vertical bg-[#EEEEEE] relative ">

            <svg class="hidden lg:block absolute top-0 left-0" xmlns="http://www.w3.org/2000/svg" width="269.148"
                 height="499.278"
                 viewBox="0 0 269.148 499.278">
                <path id="W" d="M1037.609,2176V1676.718L768.461,2176Z"
                      transform="translate(1037.609 2175.996) rotate(180)" fill="#fff"/>
            </svg>

            <svg class="absolute bottom-0 right-0" xmlns="http://www.w3.org/2000/svg" width="269.148" height="499.278"
                 viewBox="0 0 269.148 499.278">
                <path id="W" d="M1037.609,2176V1676.718L768.461,2176Z" transform="translate(-768.461 -1676.718)"
                      fill="#fff"/>
            </svg>


            <div class="relative z-10 flex flex-col gap-12">
                <h2 class="font-allerBold uppercase text-center text-2xl">Vous <span
                            class="text-blue-500">aimerez aussi</span></h2>
                <div class="grid grid-cols-1 gap-8 lg:grid-cols-3 justify-center xl:gap-20">
                    {{ component('cards:all_blog' , {limit : 3}) }}
                </div>
            </div>

        </div>
    </section>

{% endblock %}