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

Open in your IDE?
  1. {% if resources|length > 0 %}
  2.     <div class="before-after-items">
  3.         {% set id = app.request.query.get('id') %}
  4.         {% set targetIndex = -1 %}
  6.         {% for index, article in resources %}
  7.             {% if article.id == id %}
  8.                 {% set targetIndex = index %}
  9.             {% endif %}
  10.         {% endfor %}
  12.         {% if targetIndex >= 0 %}
  13.             {% set previousIndex = targetIndex - 1 %}
  14.             {% set nextIndex = targetIndex + 1 %}
  16.             {% if previousIndex >= 0 %}
  17.                 {% set previousArticle = resources|slice(previousIndex, 1)|first %}
  18.                 <div class="previous-article">
  19.                     <a class="" href="{{ path('odiseo_sylius_blog_plugin_shop_article_show', {'slug' : previousArticle.slug}) }}">
  20.                         {% if previousArticle.images|length > 0 %}
  21.                             <div class="image">
  22.                                 <img src="{{ previousArticle.images[0].path|imagine_filter(filter|default('sylius_small')) }}" alt="{{ previousArticle.images[0].path }}">
  23.                             </div>
  24.                         {% endif %}
  25.                     </a>
  26.                     <div class="link-before-after">
  27.                         <span>
  28.                             <a href="{{ path('odiseo_sylius_blog_plugin_shop_article_show', {'slug' : previousArticle.slug}) }}" data-disqus-identifier="{{ url('odiseo_sylius_blog_plugin_shop_article_show', {'slug' : previousArticle.slug}) }}">
  29.                                 <svg width="8" height="15" viewBox="0 0 8 15" fill="none" xmlns="http://www.w3.org/2000/svg">
  30.                                 <path d="M6.66667 14.1666L0 7.49992L6.66667 0.833252L7.85 2.01659L2.36667 7.49992L7.85 12.9833L6.66667 14.1666Z" fill="#858585"/>
  31.                                 </svg>
  32.                                 Précédent
  33.                             </a>
  34.                         </span>
  35.                         <h3>
  36.                             <a href="{{ path('odiseo_sylius_blog_plugin_shop_article_show', {'slug' : previousArticle.slug}) }}">{{ previousArticle.translations['fr_FR'].title }}</a>
  37.                         </h3>
  38.                     </div>
  39.                 </div>
  40.             {% endif %}
  42.             {% if previousIndex >= 0 and nextIndex < articles|length%}
  43.                 <script>
  44.                     console.log('previousIndex');
  45.                 </script>
  46.                 <style>
  47.                     @media only screen and (max-width: 768px) {
  48.                         .previous-article {
  49.                             display: none !important;
  50.                         }
  51.                     }
  52.                 </style>
  53.                 {% endif %}
  54.             {% if nextIndex < articles|length %}
  55.                 {% set nextArticle = resources|slice(nextIndex, 1)|first %}
  56.                 <div class="next-article">
  57.                     <div class="link-before-after">
  58.                         <span>
  59.                             <a href="{{ path('odiseo_sylius_blog_plugin_shop_article_show', {'slug' : nextArticle.slug}) }}" data-disqus-identifier="{{ url('odiseo_sylius_blog_plugin_shop_article_show', {'slug' : nextArticle.slug}) }}">
  60.                                 Suivant
  61.                                 <svg width="9" height="15" viewBox="0 0 9 15" fill="none" xmlns="http://www.w3.org/2000/svg">
  62.                                 <path d="M1.35033 14.1666L0.166992 12.9833L5.65033 7.49992L0.166992 2.01659L1.35033 0.833252L8.01699 7.49992L1.35033 14.1666Z" fill="#858585"/>
  63.                                 </svg>
  65.                             </a>
  66.                         </span>
  67.                         <h3>
  68.                             <a href="{{ path('odiseo_sylius_blog_plugin_shop_article_show', {'slug' : nextArticle.slug}) }}">{{ nextArticle.translations['fr_FR'].title }}</a>
  69.                         </h3>
  70.                     </div>
  71.                     <a class="" href="{{ path('odiseo_sylius_blog_plugin_shop_article_show', {'slug' : nextArticle.slug}) }}">
  72.                         {% if nextArticle.images|length > 0 %}
  73.                             <div class="image">
  74.                                 <img src="{{ nextArticle.images[0].path|imagine_filter(filter|default('sylius_small')) }}" alt="{{ nextArticle.images[0].path }}">
  75.                             </div>
  76.                         {% endif %}
  77.                     </a>
  78.                 </div>
  79.             {% endif %}
  80.         {% endif %}
  81.     </div>
  82.     <style>
  83.         /*.before-after-items{*/
  84.         /*    display: flex;*/
  85.         /*    flex-direction: row;*/
  86.         /*    justify-content: space-between;*/
  87.         /*    padding-top: 4rem;*/
  88.         /*}*/
  89.         /*.before-after-items > * {*/
  90.         /*    display: flex;*/
  91.         /*    flex-direction: row;*/
  92.         /*    align-items: center;*/
  93.         /*    gap: 1rem;*/
  94.         /*}*/
  95.         /*.before-after-items > * > .link-before-after {*/
  96.         /*    display: flex;*/
  97.         /*    flex-direction: column;*/
  98.         /*    gap: 0.5rem;*/
  99.         /*    align-items: start;*/
  100.         /*}*/
  101.         /*.before-after-items > * > .link-before-after > span > a {*/
  102.         /*    display: flex;*/
  103.         /*    flex-direction: row;*/
  104.         /*    gap: 0.5rem;*/
  105.         /*    align-items: center;*/
  106.         /*    color: #858585;*/
  107.         /*}*/
  108.         /*.before-after-items > * > .link-before-after > h3 {*/
  109.         /*    margin: 0 !important;*/
  110.         /*}*/
  111.         /*.next-article{*/
  112.         /*    margin-left: auto;*/
  113.         /*}*/
  114.     </style>
  115. {% endif %}