templates/frontend/blog/article.html.twig line 1

Open in your IDE?
  1. {% extends 'frontend/base.html.twig' %}
  3. {% block metaTitle %}{{ article.metaTitle ?: article.title }}{% endblock %}
  4. {% block metaDescription %}{{ article.metaDescription ?: article.content|block_editor_render|striptags|html_entity_decode|slice(0, 200) }}...{% endblock %}
  5. {% block metaTags %}
  6.     <meta property="og:image" content="{{ app.request.schemeAndHttpHost }}{{ article.cover.publicUrl }}" />
  7.     <meta property="og:image:secure_url" content="{{ app.request.schemeAndHttpHost }}{{ article.cover.publicUrl }}" />
  8.     <meta property="og:type" content="website"/>
  9.     <meta property="og:title" content="{{ article.metaTitle ?: article.title }}">
  10.     <meta property="og:description" content="{{ article.metaDescription ?: article.content|block_editor_render|striptags|html_entity_decode|slice(0, 200) }}...">
  11.     <meta property="og:url" content="{{ app.request.schemeAndHttpHost }}{{ app.request.pathInfo }}">
  12.     <meta name="twitter:title" content="{{ article.metaTitle ?: article.title }}">
  13.     <meta name="twitter:description" content="{{ article.metaDescription ?: article.content|block_editor_render|striptags|html_entity_decode|slice(0, 200) }}...">
  14.     <meta name="twitter:image" content="{{ app.request.schemeAndHttpHost }}{{ article.cover.publicUrl }}">
  15.     <meta name="twitter:card" content="summary_large_image">
  16. {% endblock %}
  18. {% block body %}
  19.     <section class="space-1 border-top">
  20.         <div class="container">
  21.             <div>
  22.                 <a href="{{ path('frontend_blog') }}" class="fw-bold link text-primary link-animation" aria-label="{% trans %}Torna indietro{% endtrans %}">{% trans %}Torna indietro{% endtrans %}</a>
  23.             </div>
  24.             <h1 class="font-weight-bold mt-3">{{ article.title }}</h1>
  25.         </div>
  26.     </section>
  27.     <section class="min-vh-25 min-vh-lg-65 bg-img-center overlay-35 d-flex justify-content-center align-items-center" style="background-image: url('{{ article.cover.publicUrl }}')"></section>
  28.     {% if article.content %}
  29.     <section class="space-top-2 space-bottom-3 article-content">
  30.         <div class="container">
  31.             <div class="row">
  32.                 <div class="col-lg-8">
  33.                     {{ article.content|block_editor_render }}
  34.                 </div>
  35.                 <div class="col-lg-4">
  36.                     <div class="sticky-top" style="top: 180px">
  37.                         <div class="bg-light p-lg-4 p-3 rounded mb-4">
  38.                             <h5 class="mb-3 fw-bold">{% trans %}Condividi con{% endtrans %}</h5>
  39.                             <div class="d-flex w-100 justify-content-between">
  40.                                 <div>
  41.                                     <a href="https://facebook.com/sharer/sharer.php?u={{ app.request.schemeAndHttpHost }}{{ app.request.pathInfo }}" target="_blank">
  42.                                         <img src="{{ asset('images/blog/share/facebook.svg') }}" class="img-fluid" alt="share">
  43.                                     </a>
  44.                                 </div>
  45.                                 <div>
  46.                                     <a href="https://t.me/share/url?url={{ app.request.schemeAndHttpHost }}{{ app.request.pathInfo }}&text=Dai un'occhiata a questo articolo sul sito Astralpool!" target="_blank">
  47.                                         <img src="{{ asset('images/blog/share/telegram.svg') }}" class="img-fluid" alt="share">
  48.                                     </a>
  49.                                 </div>
  50.                                 <div>
  51.                                     <a href="https://twitter.com/share?url={{ app.request.schemeAndHttpHost }}{{ app.request.pathInfo }}" target="_blank">
  52.                                         <img src="{{ asset('images/blog/share/twitter.svg') }}" class="img-fluid" alt="share">
  53.                                     </a>
  54.                                 </div>
  55.                                 <div>
  56.                                     <a href="whatsapp://send?text=Dai un'occhiata a questo articolo sul sito Astralpool! {{ app.request.schemeAndHttpHost }}{{ app.request.pathInfo }}" target="_blank">
  57.                                         <img src="{{ asset('images/blog/share/whatsapp.svg') }}" class="img-fluid" alt="share">
  58.                                     </a>
  59.                                 </div>
  60.                                 <div>
  61.                                     <a href="mailto:?subject=Dai un'occhiata a questo articolo sul sito Astralpool!&amp;body=Leggi questo articolo {{ app.request.schemeAndHttpHost }}{{ app.request.pathInfo }}" target="_blank">
  62.                                         <img src="{{ asset('images/blog/share/mail.svg') }}" class="img-fluid" alt="share">
  63.                                     </a>
  64.                                 </div>
  65.                             </div>
  66.                         </div>
  67.                         {% if latest_articles(article) is not empty %}
  68.                         <div class="bg-light p-lg-4 p-3 rounded">
  69.                             <h5 class="mb-3 fw-bold">{% trans %}Ultimi articoli{% endtrans %}</h5>
  70.                             {% for latestArticle in latest_articles(article) %}
  71.                                 <div class="d-flex align-items-center mb-3">
  72.                                     <figure class="media equal-4-3 w-100 me-4" style="max-width: 80px">
  73.                                         <span style="background-image: url('{{ latestArticle.cover.publicUrl }}')"></span>
  74.                                     </figure>
  75.                                     <div>
  76.                                         <a href="{{ path('frontend_blog_article_read', {slug: latestArticle.slug}) }}" class="fw-bold mb-2">{{ latestArticle.title }}</a>
  77.                                         <p class="fs-sm text-muted">il {{ latestArticle.date|date('d/m/Y') }}</p>
  78.                                     </div>
  79.                                 </div>
  80.                             {% endfor %}
  81.                         </div>
  82.                         {% endif %}
  83.                     </div>
  84.                 </div>
  85.             </div>
  86.         </div>
  87.     </section>
  88.     {% endif %}
  89.     <section>
  90.         <div class="container">
  91.             <div class="row gx-1 space-bottom-1 space-bottom-lg-2">
  92.                 <div class="col-12 space-bottom-1">
  93.                     <h4 class="font-weight-bold">{% trans %}Potrebbe interessarti anche{% endtrans %}</h4>
  94.                 </div>
  95.                 {% for relatedArticle in related_articles(article) %}
  96.                     <div class="col-lg-4 mb-3">
  97.                         <div class="h-100 d-flex flex-column">
  98.                             <a href="{{ path('frontend_blog_article_read', {slug: relatedArticle.slug}) }}" class="small-section" aria-label="{{ relatedArticle.title }}">
  99.                                 <figure class="media equal-4-3">
  100.                                     <span style="background-image: url('{{ relatedArticle.cover.publicUrl }}')"></span>
  101.                                 </figure>
  102.                                 <div class="abs-text">
  103.                                     <span class="h3">{{ relatedArticle.title }}</span>
  104.                                 </div>
  105.                             </a>
  106.                             <div class="bg-primary pt-4 px-4 position-relative flex-grow-1">
  107.                                 <div class="abs-primary-overlay"></div>
  108.                                 <p class="text-white mb-0">
  109.                                     {{ relatedArticle.getContent()|block_editor_render|striptags|html_entity_decode|slice(0, 200) }}
  110.                                 </p>
  111.                             </div>
  112.                             <a href="{{ path('frontend_blog_article_read', {slug: relatedArticle.slug}) }}" aria-label="{% trans %}Leggi tutto{% endtrans %}" class="btn btn-secondary w-100 text-start fw-bold text-uppercase">
  113.                                 {% trans %}Leggi tutto{% endtrans %} <i data-feather="chevron-right" style="width: 20px"></i>
  114.                             </a>
  115.                         </div>
  116.                     </div>
  117.                 {% endfor %}
  118.             </div>
  119.         </div>
  120.     </section>
  121. {% endblock %}
  123. {% block javascripts %}
  124.     <script type="application/ld+json">
  125.         {
  126.             "@context": "https://schema.org/",
  127.             "@type": "Article",
  128.             "name": "{{ article.title }}",
  129.             "author": {
  130.                 "@type": "Person",
  131.                 "name": "Astralpool"
  132.             },
  133.             "articleBody": "{{ article.content|block_editor_render|html_entity_decode|striptags|e('js') }}",
  134.             {% if article.categories is not empty %}
  135.             "articleSection": "{{ article.categories.first.name }}",
  136.             {% endif %}
  137.             "wordCount": "{{ article.content|block_editor_render|html_entity_decode|striptags|word_count }}"
  138.         %}
  139. </script>
  140. {% endblock %}