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

Open in your IDE?
  1. {% extends '@SyliusShop/layout.html.twig' %}
  3. {% block metatags %}
  4.     {% if article.categories[0].code == 'evenement' %}
  5.         <script>
  6.           window.location.href = "{{ path('odiseo_sylius_blog_plugin_shop_evenement_show', {'slug': article.translations.toArray()['fr_FR'].slug}) }}";
  7.         </script>
  8.     {% endif %}
  9.     {% if article.metaKeywords is not empty %}
  10.         <meta name="keywords" content="{{ article.metaKeywords }}"/>
  11.     {% endif %}
  12.     {% if article.metaDescription is not empty %}
  13.         <meta name="description" content="{{ article.metaDescription }}"/>
  14.     {% endif %}
  15. {% endblock %}
  17. {% block content %}
  18.     {% block blog_breadcrumb %}
  19.         <div id="link">
  20.             <div class="container-h">
  21.                <div class="link-row">
  22.                    <a href="{{ path('sylius_shop_homepage') }}" class="section">{{ 'sylius.ui.home'|trans }}</a>
  23.                    <div class="divider"> /</div>
  24.                    <a href="{{ path('odiseo_sylius_blog_plugin_shop_article_index') }}" class="section">{{ 'odiseo_sylius_blog_plugin.ui.blog.header'|trans }}</a>
  25.                    <div class="divider"> /</div>
  26.                    <div class="active section">
  27.                        {% if article.title|length > 12 %}
  28.                            {{ article.title|slice(0, 12)|raw }}...
  29.                        {% else %}
  30.                            {{ article.title|raw }}
  31.                        {% endif %}
  32. {#                       {{ article.title }}#}
  33.                    </div>
  34.                </div>
  35.             </div>
  36.         </div>
  37.     {% endblock %}
  39.     {% block blog_article %}
  40.         {% set month =  article.createdAt|date('F') %}
  41.         {% set translation = 'sylius.ui.' ~ month %}
  42.         <div class="container-h">
  43.                 <div class="ui grid" id="container-show-article">
  44.                     <div class="sixteen wide mobile twelve wide computer column">
  45.                         <div class="container-left">
  46.                             <div class="ui items">
  47.                                 <div class="item">
  48.                                     <div class="content">
  49.                                         <div class="description">
  50.                                             {% if article.images|length > 0 %}
  51.                                                 <div class="image-div">
  52.                                                     <img src="{{ article.images[0].path|imagine_filter(filter|default('sylius_large')) }}" class="ui image" alt="{{ article.images[0].path }}">
  53.                                                 </div>
  54.                                             {% endif %}
  55.                                             <div class="desc-date">
  56.                                                 <svg width="18" height="21" viewBox="0 0 18 21" fill="none" xmlns="http://www.w3.org/2000/svg">
  57.                                                     <path d="M5 12.5C4.71667 12.5 4.479 12.404 4.287 12.212C4.09567 12.0207 4 11.7833 4 11.5C4 11.2167 4.09567 10.979 4.287 10.787C4.479 10.5957 4.71667 10.5 5 10.5C5.28333 10.5 5.521 10.5957 5.713 10.787C5.90433 10.979 6 11.2167 6 11.5C6 11.7833 5.90433 12.0207 5.713 12.212C5.521 12.404 5.28333 12.5 5 12.5ZM9 12.5C8.71667 12.5 8.47933 12.404 8.288 12.212C8.096 12.0207 8 11.7833 8 11.5C8 11.2167 8.096 10.979 8.288 10.787C8.47933 10.5957 8.71667 10.5 9 10.5C9.28333 10.5 9.521 10.5957 9.713 10.787C9.90433 10.979 10 11.2167 10 11.5C10 11.7833 9.90433 12.0207 9.713 12.212C9.521 12.404 9.28333 12.5 9 12.5ZM13 12.5C12.7167 12.5 12.4793 12.404 12.288 12.212C12.096 12.0207 12 11.7833 12 11.5C12 11.2167 12.096 10.979 12.288 10.787C12.4793 10.5957 12.7167 10.5 13 10.5C13.2833 10.5 13.5207 10.5957 13.712 10.787C13.904 10.979 14 11.2167 14 11.5C14 11.7833 13.904 12.0207 13.712 12.212C13.5207 12.404 13.2833 12.5 13 12.5ZM2 20.5C1.45 20.5 0.979 20.3043 0.587 19.913C0.195667 19.521 0 19.05 0 18.5V4.5C0 3.95 0.195667 3.47933 0.587 3.088C0.979 2.696 1.45 2.5 2 2.5H3V0.5H5V2.5H13V0.5H15V2.5H16C16.55 2.5 17.021 2.696 17.413 3.088C17.8043 3.47933 18 3.95 18 4.5V18.5C18 19.05 17.8043 19.521 17.413 19.913C17.021 20.3043 16.55 20.5 16 20.5H2ZM2 18.5H16V8.5H2V18.5Z" fill="#858585"/>
  58.                                                 </svg>
  59.                                                 {{ article.createdAt|date('j') }} {{ translation|trans }}, {{ article.createdAt|date('Y') }}
  60.                                             </div>
  61.                                             <h1>{{ article.title }}</h1>
  62.                                             <p>{{ article.content|raw }}</p>
  63. {#                                            <div class="share-link-article">#}
  64. {#                                                Partager:#}
  65. {#                                                <svg width="20" height="19" viewBox="0 0 20 19" fill="none" xmlns="http://www.w3.org/2000/svg">#}
  66. {#                                                <path d="M18.9471 5.80496C18.937 5.04758 18.7952 4.29773 18.5281 3.58896C18.2964 2.99111 17.9426 2.44816 17.4892 1.99479C17.0359 1.54142 16.4929 1.18761 15.8951 0.955957C15.1954 0.693314 14.4562 0.551298 13.7091 0.535957C12.7471 0.492957 12.4421 0.480957 10.0001 0.480957C7.55807 0.480957 7.24507 0.480957 6.29007 0.535957C5.54323 0.551411 4.80442 0.693425 4.10507 0.955957C3.50713 1.18745 2.96409 1.5412 2.5107 1.99459C2.05732 2.44798 1.70356 2.99102 1.47207 3.58896C1.2089 4.28809 1.06719 5.02707 1.05307 5.77396C1.01007 6.73696 0.99707 7.04196 0.99707 9.48396C0.99707 11.926 0.99707 12.238 1.05307 13.194C1.06807 13.942 1.20907 14.68 1.47207 15.381C1.70395 15.9787 2.05797 16.5215 2.51151 16.9747C2.96505 17.4279 3.50813 17.7815 4.10607 18.013C4.8035 18.2862 5.54244 18.4383 6.29107 18.463C7.25407 18.506 7.55907 18.519 10.0011 18.519C12.4431 18.519 12.7561 18.519 13.7111 18.463C14.4582 18.4482 15.1974 18.3066 15.8971 18.044C16.4948 17.812 17.0376 17.4581 17.4909 17.0048C17.9442 16.5515 18.2982 16.0086 18.5301 15.411C18.7931 14.711 18.9341 13.973 18.9491 13.224C18.9921 12.262 19.0051 11.957 19.0051 9.51396C19.0031 7.07196 19.0031 6.76196 18.9471 5.80496ZM9.99407 14.102C7.44007 14.102 5.37107 12.033 5.37107 9.47896C5.37107 6.92496 7.44007 4.85596 9.99407 4.85596C11.2202 4.85596 12.396 5.34302 13.263 6.21C14.13 7.07698 14.6171 8.25286 14.6171 9.47896C14.6171 10.7051 14.13 11.8809 13.263 12.7479C12.396 13.6149 11.2202 14.102 9.99407 14.102ZM14.8011 5.76296C14.6595 5.76309 14.5192 5.7353 14.3884 5.68117C14.2575 5.62704 14.1386 5.54764 14.0385 5.44751C13.9384 5.34738 13.859 5.22849 13.8049 5.09765C13.7507 4.9668 13.7229 4.82656 13.7231 4.68496C13.7231 4.54346 13.7509 4.40334 13.8051 4.27262C13.8592 4.14189 13.9386 4.0231 14.0387 3.92305C14.1387 3.82299 14.2575 3.74363 14.3882 3.68948C14.519 3.63533 14.6591 3.60746 14.8006 3.60746C14.9421 3.60746 15.0822 3.63533 15.2129 3.68948C15.3436 3.74363 15.4624 3.82299 15.5625 3.92305C15.6625 4.0231 15.7419 4.14189 15.7961 4.27262C15.8502 4.40334 15.8781 4.54346 15.8781 4.68496C15.8781 5.28096 15.3961 5.76296 14.8011 5.76296Z" fill="#E35E31"/>#}
  67. {#                                                <path d="M9.99421 12.482C11.6527 12.482 12.9972 11.1375 12.9972 9.47895C12.9972 7.82044 11.6527 6.47595 9.99421 6.47595C8.3357 6.47595 6.99121 7.82044 6.99121 9.47895C6.99121 11.1375 8.3357 12.482 9.99421 12.482Z" fill="#E35E31"/>#}
  68. {#                                                </svg>#}
  69. {#                                                <svg width="20" height="17" viewBox="0 0 20 17" fill="none" xmlns="http://www.w3.org/2000/svg">#}
  70. {#                                                <path d="M20 2.29997C19.2483 2.62606 18.4534 2.84163 17.64 2.93997C18.4982 2.42729 19.1413 1.62075 19.45 0.669966C18.6436 1.15003 17.7608 1.48826 16.84 1.66997C16.2245 1.00254 15.405 0.558262 14.5098 0.406817C13.6147 0.255372 12.6945 0.405324 11.8938 0.833155C11.093 1.26099 10.4569 1.9425 10.0852 2.7708C9.71355 3.59911 9.62729 4.52736 9.84 5.40997C8.20943 5.32749 6.61444 4.90292 5.15865 4.16383C3.70287 3.42474 2.41885 2.38766 1.39 1.11997C1.02914 1.75013 0.839519 2.46379 0.84 3.18997C0.83872 3.86435 1.00422 4.52858 1.32176 5.12353C1.63929 5.71848 2.09902 6.22568 2.66 6.59997C2.00798 6.58222 1.36989 6.40726 0.8 6.08997V6.13997C0.804887 7.08486 1.13599 7.99906 1.73731 8.72793C2.33864 9.4568 3.17326 9.95561 4.1 10.14C3.74326 10.2485 3.37287 10.3058 3 10.31C2.74189 10.307 2.48442 10.2835 2.23 10.24C2.49391 11.0528 3.00462 11.7631 3.69107 12.2721C4.37753 12.7811 5.20558 13.0635 6.06 13.08C4.6172 14.2152 2.83588 14.8348 1 14.84C0.665735 14.8411 0.331736 14.821 0 14.78C1.87443 15.9902 4.05881 16.6327 6.29 16.63C7.82969 16.646 9.35714 16.355 10.7831 15.774C12.2091 15.1931 13.505 14.3338 14.5952 13.2465C15.6854 12.1591 16.548 10.8654 17.1326 9.44087C17.7172 8.01639 18.012 6.48969 18 4.94997V4.41997C18.7847 3.83478 19.4615 3.11739 20 2.29997Z" fill="#E35E31"/>#}
  71. {#                                                </svg>#}
  72. {#                                                <svg width="12" height="19" viewBox="0 0 12 19" fill="none" xmlns="http://www.w3.org/2000/svg">#}
  73. {#                                                <path d="M3.19776 19H7.19776V10.99H10.8018L11.1978 7.01H7.19776V5C7.19776 4.73478 7.30311 4.48043 7.49065 4.29289C7.67819 4.10536 7.93254 4 8.19776 4H11.1978V0H8.19776C6.87168 0 5.59991 0.526784 4.66222 1.46447C3.72454 2.40215 3.19776 3.67392 3.19776 5V7.01H1.19776L0.801758 10.99H3.19776V19Z" fill="#E35E31"/>#}
  74. {#                                                </svg>#}
  75. {#                                            </div>#}
  76.                                             <div>
  77.                                                 {{ render(url('odiseo_sylius_blog_plugin_shop_article_index_before_after', {'id': article.id})) }}
  78.                                             </div>
  79.                                         </div>
  80.                                     </div>
  81.                                 </div>
  82.                             </div>
  83.                         </div>
  84.                     </div>
  85.                     <div class="sixteen wide mobile four wide computer column">
  86.                         {% include '@OdiseoSyliusBlogPlugin/Shop/showSideBar.html.twig' %}
  87.                     </div>
  88.                 </div>
  89.         </div>
  90.     {% endblock %}
  91.     <style>
  92.         /*.mapboxgl-ctrl-bottom-left{*/
  93.         /*    display: none;*/
  94.         /*}*/
  95.         /*.share-link-article{*/
  96.         /*    display: flex;*/
  97.         /*    flex-direction: row;*/
  98.         /*    gap: 0.5rem;*/
  99.         /*    width: fit-content;*/
  100.         /*    align-items: center;*/
  101.         /*    margin-top: 4rem;*/
  102.         /*    margin-left: auto;*/
  103.         /*}*/
  104.         /*.description h1{*/
  105.         /*    margin: 1rem 0 !important;*/
  106.         /*}*/
  107.         /*.description-title h1{*/
  108.         /*    margin: 0 !important;*/
  109.         /*    font-size: 2rem !important;*/
  110.         /*}*/
  111.         /*.desc-date{*/
  112.         /*    display: inline-flex;*/
  113.         /*    gap: 1rem;*/
  114.         /*    align-items: flex-end;*/
  115.         /*    margin-top: 1rem;*/
  116.         /*}*/
  117.         /*.image-div{*/
  118.         /*    width: 100%;*/
  119.         /*    height: 500px;*/
  120.         /*    overflow: hidden;*/
  121.         /*}*/
  122.         /*.image-div img{*/
  123.         /*    width: 100%;*/
  124.         /*    height: 100%;*/
  125.         /*    object-fit: cover;*/
  126.         /*    position: center;*/
  127.         /*}*/
  128.         /*.content .description{*/
  129.         /*    margin: 0 !important;*/
  130.         /*}*/
  131.         /*#link {*/
  132.         /*    width: 100%;*/
  133.         /*    background-color: #f1f1f1 !important;*/
  134.         /*    padding: 3rem 0;*/
  135.         /*}*/
  136.         /*.container-h .link-row{*/
  137.         /*    display: inline-flex;*/
  138.         /*    font-size: 2rem !important;*/
  139.         /*    color: black;*/
  141.         /*}*/
  142.         /*.link-row a{*/
  143.         /*    color: black;*/
  144.         /*}*/
  145.         /*.link-row .active.section{*/
  146.         /*    font-weight: bold;*/
  147.         /*}*/
  148.         /*#container-show-article{*/
  149.         /*    margin-top: 1rem;*/
  150.         /*}*/
  151.         /*#container-show-evenement{*/
  152.         /*    display: flex;*/
  153.         /*    flex-direction: column;*/
  154.         /*    gap: 1rem;*/
  155.         /*    margin-top: 1rem;*/
  156.         /*}*/
  157.         /*.place-product-show{*/
  158.         /*    display: flex;*/
  159.         /*    flex-direction: row;*/
  160.         /*    align-items: center;*/
  161.         /*    gap: 5px;*/
  162.         /*}*/
  163.         /*.description-evenement{*/
  164.         /*    display: flex;*/
  165.         /*    flex-direction: column;*/
  167.         /*    gap: 2rem;*/
  168.         /*    width: 100%;*/
  169.         /*    padding-top: 2rem;*/
  170.         /*}*/
  171.         /*.description-text{*/
  172.         /*    display: flex;*/
  173.         /*    flex-direction: row;*/
  174.         /*    gap: 2rem;*/
  175.         /*    width: 100%;*/
  176.         /*    justify-content: space-between;*/
  177.         /*}*/
  178.         /*.description-text h4 {*/
  179.         /*    font-size: 1.75rem;*/
  180.         /*}*/
  181.         /*.description-evenement div:first-of-type{*/
  183.         /*}*/
  184.         /*.share-sm ul{*/
  185.         /*    display: inline-flex;*/
  186.         /*    gap: 1rem;*/
  187.         /*    align-items: center;*/
  188.         /*    padding: 0;*/
  189.         /*}*/
  190.         /*.share-sm ul li {*/
  191.         /*    list-style: none;*/
  192.         /*}*/
  193.         /*.container-image-evenement{*/
  194.         /*    display: grid;*/
  195.         /*    grid-template-columns: 3fr 2fr;*/
  196.         /*    grid-template-rows: 1fr 1fr;*/
  197.         /*    height: 550px;*/
  198.         /*    gap: 2rem 1rem;*/
  199.         /*}*/
  200.         /*.first-image-evenement{*/
  201.         /*    grid-column: 1;*/
  202.         /*    grid-row: 1 / 3;*/
  203.         /*}*/
  204.         /*.second-image-evenement{*/
  205.         /*    grid-column: 2;*/
  206.         /*    grid-row: 1;*/
  207.         /*}*/
  208.         /*.third-image-evenement{*/
  209.         /*    grid-column: 2;*/
  210.         /*    grid-row: 2;*/
  211.         /*}*/
  212.         /*.first-image-evenement, .second-image-evenement, .third-image-evenement{*/
  213.         /*    overflow: hidden;*/
  214.         /*}*/
  215.         /*.first-image-evenement img, .second-image-evenement img, .third-image-evenement img{*/
  216.         /*    width: 100%;*/
  217.         /*    height: 100%;*/
  218.         /*    object-fit: cover;*/
  219.         /*}*/
  220.     </style>
  221. {% endblock %}