templates/front_v4/mca/blog/single.html.twig line 1

Open in your IDE?
  1. {% extends 'front_v4/base.html.twig' %}
  3. {% block meta_title %}{{ blogPost.metaTitle }}{% endblock meta_title %}
  4. {% block meta_description %}{{ blogPost.metaDescription }}{% endblock meta_description %}
  6. {% block meta_custom %}
  7.     {% include '/front_v4/mca/blog/_balise_schema_org.html.twig' with {'post': blogPost} %}
  8. {% endblock meta_custom %}
  10. {# Add custom text (CTA + form) depend on theme of blogCategory #}
  11. {% set blogCategoryId = blogPost.blogCategory.id %}
  12. {% set isBlogCategoryThemeAudio = false %}
  13. {% if blogCategoryId == 3 or blogCategoryId == 4 or blogCategoryId == 5 %}
  14.     {% set isBlogCategoryThemeAudio = true %}
  15. {% endif %}
  18. {% block content %}
  19.     <main id="content" role="main">
  20.         <!-- Header Img BG -->
  21.         <div class="bg-img-center gradient-y-overlay-sm-gray-900"
  22.              style="background-image: url({% if blogPost.filename %} {{ vich_uploader_asset(blogPost, 'imageFile') | imagine_filter('blog_post_main') }}  {% endif %});">
  23.             <div class="container content-space-2 content-space-lg-3">
  24.                 <div class="w-lg-30 text-center mx-lg-auto">
  25.                     <div class="mb-4">
  26.                         <h1 class="h4 display-4 text-white mb-3">{{ blogPost.title }}</h1>
  27.                     </div>
  28.                 </div>
  29.             </div>
  30.         </div>
  31.         <!-- End Header Img BG -->
  32.         <!-- Content Article -->
  33.         <div class="row justify-content-end">
  34.             <div class="col-lg-9 my-2 my-md-7 mb-md-0">
  35.                 <!-- Article Description -->
  36.                 <div class="container-fluid content-space-t-1 content-space-b-lg-2">
  37.                     <div class="w-lg-85 mx-lg-auto">
  38.                         <div class="row align-items-sm-center mb-5">
  39.                             <div class="col-sm-7 mb-4 mb-sm-0">
  40.                                 <!-- Media -->
  41.                                 <div class="d-flex align-items-center">
  42.                                     <div class="flex-shrink-0">
  43.                                         <img class="avatar avatar-circle"
  44.                                              src="{% if blogPost.blogAuthor.filename %} {{ vich_uploader_asset(blogPost.blogAuthor, 'imageFile') | imagine_filter('author_image_small') }} {% endif %}"
  45.                                              alt="{{ blogPost.blogAuthor.firstname }}">
  46.                                     </div>
  47.                                     <div class="flex-grow-1 ms-3">
  48.                                         <h5 class="mb-0">
  49.                                             <a class="text-dark"
  50.                                                href="{{ path('blog_author_show', {'id': blogPost.blogAuthor.id }) }}">{{ blogPost.blogAuthor.firstname }}</a>
  51.                                         </h5>
  52.                                         <span class="d-block small">{{ blogPost.createdAt|format_date('medium') }}</span>
  53.                                     </div>
  54.                                 </div>
  55.                                 <!-- End Media -->
  56.                             </div>
  57.                             <!-- End Col -->
  58.                         </div>
  59.                         <!-- End Row -->
  60.                     </div>
  62.                     <!-- Body Content Main -->
  63.                     <div class="w-lg-85 mx-lg-auto">
  64.                         {{ blogPost.body|raw() }}
  65.                     </div>
  66.                     <!-- End Body Content Main -->
  68.                     <!-- CTA -->
  69.                     <div class="container py-5 mb-3">
  70.                         <div class="w-lg-75 mx-lg-auto">
  71.                             <div class="card card-sm overflow-hidden">
  72.                                 <!-- Card -->
  73.                                 <div class="card-body">
  74.                                     <div class="row justify-content-md-start align-items-md-center text-center text-md-start">
  75.                                         <div class="col-md offset-md-3 mb-3 mb-md-0">
  76.                                             <h4 class="card-title">
  77.                                                 {% if isBlogCategoryThemeAudio %}
  78.                                                     Testez vos futurs appareils auditifs
  79.                                                 {% else %}
  80.                                                     Réalisez votre bilan auditif<sup class="text-sm"> (1)</sup> gratuit
  81.                                                 {% endif %}
  82.                                             </h4>
  83.                                         </div>
  85.                                         <div class="col-md-auto">
  86.                                             <a class="btn btn-warning btn-transition" href="#bilan-test-gratuit">Réservez un RDV</a>
  87.                                         </div>
  88.                                     </div>
  90.                                     <!-- SVG Shape -->
  91.                                     <figure class="w-25 d-none d-md-block position-absolute top-0 start-0 mt-n2">
  92.                                         <svg viewBox="0 0 451 902" fill="none" xmlns="http://www.w3.org/2000/svg">
  93.                                             <path opacity="0.125" d="M0 82C203.8 82 369 247.2 369 451C369 654.8 203.8 820 0 820" stroke="url(#paint2_linear)" stroke-width="164" stroke-miterlimit="10"/>
  94.                                             <defs>
  95.                                                 <linearGradient id="paint2_linear" x1="323.205" y1="785.242" x2="-97.6164" y2="56.3589" gradientUnits="userSpaceOnUse">
  96.                                                     <stop offset="0" stop-color="white" stop-opacity="0"/>
  97.                                                     <stop offset="1" stop-color="#377dff"/>
  98.                                                 </linearGradient>
  99.                                             </defs>
  100.                                         </svg>
  101.                                     </figure>
  102.                                     <!-- End SVG Shape -->
  103.                                 </div>
  104.                                 <!-- End Card -->
  105.                             </div>
  106.                         </div>
  107.                     </div>
  108.                     <!-- End CTA -->
  110.                     <!-- Body Content Second -->
  111.                     <div class="w-lg-85 mx-lg-auto">
  112.                         {{ blogPost.bodySecond|raw() }}
  113.                     </div>
  114.                     <!-- End Body Content Second -->
  116.                     <div class="w-lg-85 mx-lg-auto">
  117.                         <!-- Card -->
  118.                         <div class="card bg-dark text-center my-4"
  119.                              style="background-image: url({{ asset('build/front_v4/svg/components/wave-pattern-light.svg') }});">
  120.                             <div class="card-body">
  121.                                 <h4 class="text-white">Vous avez aimé cette article ?</h4>
  122.                                 <p class="text-white mb-4">Suivez-nous sur <a class="link"
  123.                                                                               href="https://www.facebook.com/MonCentreAuditif/">Facebook</a>
  124.                                     et <a class="link"
  125.                                           href="https://www.linkedin.com/company/auditif/">Linkedin</a> pour rester
  126.                                     informé.
  127.                                 </p>
  128.                             </div>
  129.                         </div>
  130.                         <!-- End Card -->
  131.                     </div>
  132.                     <!-- Sticky Block End Point -->
  133.                     <div id="stickyBlockEndPoint"></div>
  134.                 </div>
  135.                 <!-- End Article Description -->
  136.             </div>
  137.             <div class="col-lg-3 position-relative zi-2 my-3 my-md-7 mb-md-0 px-4">
  138.                 <!-- Sticky Block Start Point -->
  139.                 <div id="stickyBlockStartPoint"></div>
  140.                 <div class="js-sticky-block"
  141.                      data-hs-sticky-block-options='{
  142.                  "parentSelector": "#stickyBlockStartPoint",
  143.                  "targetSelector": "#header",
  144.                  "breakpoint": "md",
  145.                  "startPoint": "#stickyBlockStartPoint",
  146.                  "endPoint": "#stickyBlockEndPoint",
  147.                  "stickyOffsetTop": 80
  148.                }'>
  149.                     <!-- CTA Card -->
  150.                     <div class="card my-3 my-lg-5">
  151.                         <div class="p-1">
  152.                             <a href="{{ app.request.schemeAndHttpHost ~ '/' ~ blogPost.ctaLinkPath }}">
  153.                                 <!-- Fancybox -->
  154.                                 <div class="bg-img-start text-center rounded-2 py-3 py-md-5 px-5 gradient-y-lg-white"
  155.                                      style="background-image: url({{ asset('build/front_v4/svg/components/card-11.svg') }});">
  156.                                     <span class="d-flex justify-content-center align-items-center"></span>
  157.                                     <span class="h3 text-primary">
  158.                                         {% if isBlogCategoryThemeAudio %}
  159.                                             Testez vos futurs appareils auditifs
  160.                                         {% else %}
  161.                                             Réalisez votre bilan auditif<sup class="text-sm"> (1)</sup>
  162.                                         {% endif %}
  163.                                     </span>
  164.                                     <p class="h2 text-primary fw-bold py-2">
  165.                                         100% gratuit
  166.                                     </p>
  167.                                 </div>
  168.                                 <!-- End Fancybox -->
  169.                             </a>
  170.                         </div>
  172.                         <!-- Card Body -->
  173.                         <div class="card-body">
  174.                             <div class="d-grid mb-2">
  175.                                 <a class="btn btn-warning btn-transition" href="#bilan-test-gratuit">Réservez un RDV</a>
  176.                             </div>
  177.                             <div class="text-center">
  178.                                 <p class="card-text small">Un test sans engagement et non médical.</p>
  179.                             </div>
  180.                         </div>
  181.                         <!-- End CTA Card Body -->
  182.                     </div>
  183.                     <!-- End Card -->
  184.                     {% if relatedCategoryPosts is defined and relatedCategoryPosts is not empty %}
  185.                         <div class="d-none d-lg-block my-5 my-lg-5">
  186.                             <div class="mb-3">
  187.                                 <h3>Articles similaires :</h3>
  188.                             </div>
  190.                             <div class="d-grid gap-2">
  191.                                 {% for post in relatedCategoryPosts %}
  192.                                     <!-- Card -->
  193.                                     <a class="d-block" href="{{ path('blog_post_show', {'slug': post.slug}) }}">
  194.                                         <div class="d-flex align-items-center">
  195.                                             <div class="flex-shrink-0">
  196.                                                 <div class="avatar avatar-lg">
  197.                                                     <img class="avatar-img"
  198.                                                          src="{% if post.filename %} {{ vich_uploader_asset(post, 'imageFile') | imagine_filter('blog_post_small') }} {% endif %}"
  199.                                                          alt="{{ post.title }}">
  200.                                                 </div>
  201.                                             </div>
  202.                                             <div class="flex-grow-1 ms-3">
  203.                                                 <h5 class="text-inherit mb-0">{{ post.title }}</h5>
  204.                                             </div>
  205.                                         </div>
  206.                                     </a>
  207.                                     <!-- End Card -->
  208.                                 {% endfor %}
  209.                             </div>
  210.                         </div>
  211.                     {% endif %}
  212.                 </div>
  213.                 <!-- End Sticky Block -->
  214.             </div>
  215.         </div>
  216.         <!-- Header Content Article -->
  218.         <div id="bilan-test-gratuit" class="bg-dark" style="background-image: url({{ asset('build/front_v4/svg/components/wave-pattern-light.svg') }});">
  219.             <div class="w-85 w-lg-65 w-xl-50 mx-auto py-5 py-lg-10">
  220.                 <div class="card">
  221.                     <div class="card-body">
  222.                         {% if isBlogCategoryThemeAudio %}
  223.                             {% set introText = '
  224.                              <div class="mb-4">
  225.                                 <p class="h2 text-primary fw-semibold text-center">Testez gratuitement vos futurs appareils auditifs</h1>
  226.                                 <p class="lead text-center" style="font-size: 1.125rem;">
  227.                                     Sans engagement, 100% gratuit. Découvrez le confort d’une meilleure audition.
  228.                                     <br>
  229.                                     <strong>Complétez le formulaire</strong> ci-dessous pour réserver votre essai.
  230.                                 </p>
  231.                             </div>
  232.                                 ' %}
  233.                         {% else %}
  234.                             {# respect SEO hn title and add text-center #}
  235.                             {% set introText = '
  236.                              <div class="mb-4">
  237.                                 <p class="h2 text-primary text-center fw-semibold text-center">Demandez votre bilan auditif<sup>(1)</sup> gratuit</h1>
  238.                                 <p class="lead text-center" style="font-size: 1.125rem;">
  239.                                     Un test non médical, 100% gratuit, pour évaluer votre audition près de chez vous.
  240.                                     <br>
  241.                                     <strong>Remplissez le formulaire</strong> ci-dessous pour en bénéficier.
  242.                                 </p>
  243.                             </div>
  244.                                 ' %}
  245.                         {% endif %}
  247.                         {% include 'front_v4/mca/landing_page/form/_wrapper_form_lp_prospect.html.twig' %}
  248.                     </div>
  249.                 </div>
  250.             </div>
  251.         </div>
  253.         <!-- Card Grid -->
  254.         <div class="container">
  255.             <div class="border-top content-space-2 mx-lg-auto">
  256.                 <!-- Heading -->
  257.                 <div class="mb-3 mb-sm-5">
  258.                     <h2>Notre sélection d'articles</h2>
  259.                 </div>
  260.                 <!-- End Heading -->
  261.                 <div class="row">
  262.                     {% for post in pilarPosts %}
  263.                         {% if loop.index is odd %}
  264.                             <div class="col-sm-6 col-lg-4 mb-4">
  265.                                 <a href="{{ path('blog_post_show', {'slug': post.slug}) }}">
  266.                                     <!-- Card -->
  267.                                     <div class="card h-100">
  268.                                         <div class="shape-container">
  269.                                             <img class="card-img-top"
  270.                                                  src="{% if blogPost.filename %}{{ vich_uploader_asset(post, 'imageFile') | imagine_filter('blog_post_medium') }}{% endif %}"
  271.                                                  alt="{{ post.title }}">
  272.                                             <!-- Shape -->
  273.                                             <div class="shape shape-bottom zi-1" style="margin-bottom: -.25rem">
  274.                                                 <svg xmlns="http://www.w3.org/2000/svg" x="0px" y="0px"
  275.                                                      viewBox="0 0 1920 100.1">
  276.                                                     <path fill="#fff"
  277.                                                           d="M0,0c0,0,934.4,93.4,1920,0v100.1H0L0,0z"></path>
  278.                                                 </svg>
  279.                                             </div>
  280.                                             <!-- End Shape -->
  281.                                         </div>
  283.                                         <!-- Card Body -->
  284.                                         <div class="card-body p-3">
  285.                                             <h4 class="card-title text-dark">{{ post.title }}</h4>
  286.                                             <p class="card-text">{{ post.body|striptags|truncate(80, true)|raw|nl2br }}</p>
  287.                                         </div>
  288.                                         <!-- End Card Body -->
  290.                                         <!-- Card Footer -->
  291.                                         <div class="card-footer">
  292.                                             <div class="d-flex align-items-center justify-content-between">
  293.                                                     <span class="avatar avatar-circle">
  294.                                                         <img class="avatar-img"
  295.                                                              src="{% if post.blogAuthor.filename %} {{ vich_uploader_asset(post.blogAuthor, 'imageFile') | imagine_filter('author_image_small') }} {% endif %}"
  296.                                                              alt="{{ post.blogAuthor.firstname }}">
  297.                                                     </span>
  298.                                                     <div class="flex-grow-1">
  299.                                                         <div class="d-flex justify-content-end">
  300.                                                             <p class="card-text">{{ post.createdAt|format_date('medium') }}</p>
  301.                                                         </div>
  302.                                                     </div>
  303.                                             </div>
  304.                                         </div>
  305.                                         <!-- End Card Footer -->
  306.                                     </div>
  307.                                     <!-- End Card -->
  308.                                 </a>
  309.                             </div>
  310.                             <!-- End Col -->
  311.                         {% else %}
  312.                             <div class="col-sm-6 col-lg-4 mb-4">
  313.                                 <a href="{{ path('blog_post_show', {'slug': post.slug}) }}">
  314.                                     <!-- Card -->
  315.                                     <div class="card bg-dark h-100"
  316.                                          style="background-image: url({{ asset('build/front_v4/svg/components/wave-pattern-light.svg') }});">
  317.                                         <!-- Card Body -->
  318.                                         <div class="card-body p-3 py-5">
  319.                                             <div class="mb-5">
  320.                                                 <span class="badge bg-primary">Sélection du mois</span>
  321.                                             </div>
  323.                                             <h3 class="card-title text-white">{{ post.title }}</h3>
  324.                                             <p class="text-white-70">{{ post.body|striptags|truncate(180, true)|raw|nl2br }}</p>
  325.                                         </div>
  326.                                         <!-- End Card Body -->
  328.                                         <!-- Card Footer -->
  329.                                         <div class="card-footer">
  330.                                             <div class="d-flex align-items-center">
  331.                                                 <div class="flex-shrink-0">
  332.                                                     <div class="avatar avatar-circle">
  333.                                                         <img class="avatar-img"
  334.                                                              src="{% if post.blogAuthor.filename %} {{ vich_uploader_asset(post.blogAuthor, 'imageFile') | imagine_filter('author_image_small') }} {% endif %}"
  335.                                                              alt="{{ post.blogAuthor.firstname }}">
  336.                                                     </div>
  337.                                                 </div>
  339.                                                 <div class="flex-grow-1">
  340.                                                     <div class="d-flex justify-content-end">
  341.                                                         <p class="card-text text-white-70">{{ post.createdAt|format_date('medium') }}</p>
  342.                                                     </div>
  343.                                                 </div>
  344.                                             </div>
  345.                                         </div>
  346.                                         <!-- End Card Footer -->
  347.                                     </div>
  348.                                     <!-- End Card -->
  349.                                 </a>
  350.                             </div>
  351.                             <!-- End Col -->
  352.                         {% endif %}
  353.                     {% endfor %}
  354.                 </div>
  355.                 <!-- End Row -->
  356.             </div>
  357.             <!-- End Card Grid -->
  358.         </div>
  359.         <!-- End Card Grid -->
  360.     </main>
  361.     <!-- ========== END MAIN CONTENT ========== -->
  362. {% endblock content %}
  364. {% block javascripts %}
  365.     <script
  366.             src="https://code.jquery.com/jquery-3.7.1.min.js"
  367.             integrity="sha256-/JqT3SQfawRcv/BIHPThkBvs0OEvtFFmqPF/lYI/Cxo="
  368.             crossorigin="anonymous"></script>
  369.     {{ encore_entry_script_tags('format_form_prospect') }}
  370.     {{ encore_entry_script_tags('blog_single') }}
  371. {% endblock javascripts %}