templates/bundles/OdiseoSyliusBlogPlugin/Shop/Article/show.html.twig line 1

Open in your IDE?
  1. {% extends '@SyliusShop/layout.html.twig' %}
  3. {% set mainImage = null %}
  4. {% if article.images|length > 0 %}
  5.     {% for image in article.images %}
  6.         {% if image.type != "pdf" and mainImage is null %}
  7.             {% set mainImage = asset('media/image/' ~ image.path) %}
  8.         {% endif %}
  9.     {% endfor %}
  10. {% endif %}
  12. {% block head %}
  13.     {{ parent() }}
  15.     {% block stylesheets %}
  16.         {{ parent() }}
  17.     {% endblock %}
  19.     {% block metatags %}
  20.         {% if article.metaKeywords is not empty %}
  21.             <meta name="keywords" content="{{ article.metaKeywords|e('html_attr') }}"/>
  22.         {% endif %}
  23.         {% if article.metaDescription is not empty %}
  24.             <meta name="description" content="{{ article.metaDescription|e('html_attr') }}"/>
  25.         {% endif %}
  27.         <meta property="og:site_name" content="Mons Fromage" />
  28.         <meta property="og:locale" content="{{ sylius.localeCode }}" />
  29.         <meta property="og:title" content="{{ article.title|e('html_attr') }}" />
  30.         <meta property="og:url" content="{{ website_url ~ path(app.request.attributes.get('_route'), app.request.attributes.get('_route_params')) }}" />
  31.         <meta property="og:type" content="website" />
  32.         <meta property="og:description" content="{{ article.metaDescription|e('html_attr') }}" />
  33.         <meta property="og:image" content="{{ website_url ~ '/' ~ mainImage }}" />
  35.         <meta name="twitter:card" content="summary" />
  36.         <meta name="twitter:title" content="{{ article.title|e('html_attr') }}" />
  37.         <meta name="twitter:description" content="{{ article.metaDescription|e('html_attr') }}" />
  38.         <meta name="twitter:image" content="{{ website_url ~ '/' ~ mainImage }}" />
  39.     {% endblock %}
  40. {% endblock %}
  42. {% block title %}{{ article.title }} | {{ parent() }}{% endblock %}
  44. {% block content %}
  45.     {% block blog_breadcrumb %}
  46.         <div class="ui breadcrumb">
  47.             <a href="{{ path('sylius_shop_homepage') }}" class="section">{{ 'sylius.ui.home'|trans }}</a>
  48.             <div class="divider"> /</div>
  49.             <a href="{{ path('odiseo_sylius_blog_plugin_shop_article_index') }}" class="section">{{ 'odiseo_sylius_blog_plugin.ui.blog.header'|trans }}</a>
  50.             <div class="divider"> /</div>
  51.             <div class="active section">{{ article.title }}</div>
  52.         </div>
  53.     {% endblock %}
  55.     {% block blog_article %}
  56.         <div class="news-details">
  57.             <div class="news-details__columns">
  58.                 <div class="news-details__left" data-aos="fade-right">
  59.                     <span class="news-details__date">{{ 'sylius.news.posted_on'|trans({'%date%': article.createdAt|format_datetime("full", 'none', locale=app.request.locale|slice(0, 2))}) }}</span>
  60.                     <h1 class="news-details__title h2">{{ article.title }}</h1>
  61.                     <div class="news-details__description">
  62.                         {{ article.content|raw }}
  63.                     </div>
  64.                     {% if article.images|length > 0 %}
  65.                         {% for image in article.images %}
  66.                             {% if image.type == "pdf" %}
  67.                                 <a href="{{ asset('media/image/' ~ image.path) }}" class="button button--secondary button--small news-details__button" download>{{ 'sylius.news.download_file'|trans }}</a>
  68.                             {% endif %}
  69.                         {% endfor %}
  70.                     {% endif %}
  71.                     <div class="news-details__social">
  72.                         <a href="https://www.facebook.com/dialog/share?app_id=405817610847215&display=popup&href={{ (website_url ~ path(app.request.attributes.get('_route'), app.request.attributes.get('_route_params')))|url_encode }}" class="facebook" target="_blank"><i class="fab fa-facebook-f"></i>Facebook</a>
  73.                         <a href="https://www.linkedin.com/sharing/share-offsite/?url={{ (website_url ~ path(app.request.attributes.get('_route'), app.request.attributes.get('_route_params')))|url_encode }}" class="linkedin" target="_blank"><i class="fab fa-linkedin-in"></i>LinkedIn</a>
  74.                     </div>
  75.                 </div>
  76.                 {% if article.images|length > 0 %}
  77.                     <div class="news-details__right" data-aos="fade-left">
  78.                         <div class="news-details__slider-main produit">
  79.                             {% for image in article.images %}
  80.                                 {% if image.type != "pdf" %}
  81.                                     {% if loop.index0 == 0 %}
  82.                                         <img src="{{ image.path|imagine_filter(filter|default('mons_article_show')) }}" class="ui image centered" alt="{{ article.title|e('html_attr') }}">
  83.                                     {% else %}
  84.                                         <img src="{{ image.path|imagine_filter(filter|default('mons_article_show')) }}" alt="{{ article.title|e('html_attr') }}" />
  85.                                     {% endif %}
  86.                                 {% endif %}
  87.                             {% endfor %}
  88.                         </div>
  89.                         <div class="news-details__slider-navigation">
  90.                             {% for image in article.images %}
  91.                                 {% if image.type != "pdf" %}
  92.                                     <img src="{{ image.path|imagine_filter(filter|default('mons_article_show_thumbnail')) }}" alt="{{ article.title|e('html_attr') }}" />
  93.                                 {% endif %}
  94.                             {% endfor %}
  95.                         </div>
  96.                     </div>
  97.                 {% endif %}
  98.             </div>
  99.             <div class="news-details__back">
  100.                 <a href="/fr/blog/articles" class="button button--outline-red button--medium">{{ 'sylius.news.back_to_the_list'|trans }}</a>
  101.             </div>
  102.         </div>
  103.         <div class="citation" data-aos="fade-up">
  104.             <div class="container">
  105.                 <p>{{ 'sylius.news.information_inquiry'|trans|raw }}</p>
  106.                 <a href="{{ path('sylius_shop_contact_request') }}" class="button button--secondary" title="{{ 'sylius.ui.contact'|trans }}">{{ 'sylius.news.contact_us'|trans }}</a>
  107.             </div>
  108.         </div>
  109.     {% endblock %}
  110. {% endblock %}
  112. {% block javascripts %}
  113.     {{ parent() }}
  115.     <script type="text/javascript">
  116.         $(document).ready(function(){
  117.             $('.news-details__slider-main').slick({
  118.                 slidesToShow: 1,
  119.                 slidesToScroll: 1,
  120.                 arrows: true,
  121.                 fade: true,
  122.                 infinite: false,
  123.                 asNavFor: '.news-details__slider-navigation',
  124.                 autoplay: true,
  125.                 autoplaySpeed: 3000
  126.             });
  127.             $('.news-details__slider-navigation').slick({
  128.                 slidesToShow: 4,
  129.                 slidesToScroll: 1,
  130.                 asNavFor: '.news-details__slider-main',
  131.                 arrows: false,
  132.                 infinite: false,
  133.                 focusOnSelect: true,
  134.                 autoplay: true,
  135.                 autoplaySpeed: 3000
  136.             });
  137.         });
  138.     </script>
  139. {% endblock %}