templates/bundles/SyliusShopBundle/Homepage/lastArticle.html.twig line 1

Open in your IDE?
  1. <div class="container-evenement">
  2.     {% set Articles = resources%}
  3.     <div class="ui three odd doubling cards" id="div-last-article-destock">
  4.         {% for article in Articles %}
  5.             {% set month =  article.createdAt|date('F') %}
  6.             {% set translation = 'sylius.ui.' ~ month %}
  7.             <div class="ui fluid card" id="card-last-article">
  8.                 <div class="">
  9.                     <a href="{{ path('odiseo_sylius_blog_plugin_shop_article_show', {'slug': article.slug}) }}">
  10.                         <img src="{{ article.images.toArray()[0].path|imagine_filter(filter|default('sylius_large')) }}" {{ sylius_test_html_attribute('main-image') }} alt="{{ article.translation.title }}" class="ui bordered image" />
  11.                     </a>
  12.                         <div class="text-article">
  13.                         <div class="place-times-event">
  14.                             <div>
  15.                                 <i class="calendar alternate outline icon"></i>
  16.                                 <span>
  17.                                       {{ article.createdAt|date('j') }} {{ translation|trans }}, {{ article.createdAt|date('Y') }}
  18.                                 </span>
  19.                             </div>
  20.                         </div>
  21.                         <a href="{{ path('odiseo_sylius_blog_plugin_shop_article_show', {'slug': article.slug}) }}">
  22.                             <h3>{{ article.translation.title}}</h3>
  23.                         </a>
  24.                         <div class="content-event">
  25.                             {% if article.content|striptags|length > 200 %}
  26.                                 {{ article.content|striptags|slice(0, 200)|raw }}...
  27.                             {% else %}
  28.                                 {{ article.content|striptags|raw }}
  29.                             {% endif %}
  30. {#                            {{ article.translation.content|raw }}#}
  31.                         </div>
  33.                     </div>
  35.                 </div>
  36.             </div>
  37.         {% endfor %}
  38.     </div>
  39.     <div class="points-last-article">
  40.         <span class="point active" onclick="changeImage(1)"></span>
  41.         <span class="point" onclick="changeImage(2)"></span>
  42.         <span class="point" onclick="changeImage(3)"></span>
  43.     </div>
  44. </div>
  46. <script>
  47.   function changeImage(index) {
  48.     // Récupérer toutes les images de la galerie
  49.     var images = document.querySelectorAll('#div-last-article-destock #card-last-article');
  51.     // Réinitialiser la classe "active" pour tous les points
  52.     var points = document.querySelectorAll('.point');
  53.     points.forEach(function(point) {
  54.       point.classList.remove('active');
  55.     });
  57.     // Cacher toutes les images de la galerie
  58.     images.forEach(function(image) {
  59.       image.style.display = 'none';
  60.     });
  62.     // Afficher l'image correspondante à l'index spécifié
  63.     images[index - 1].style.display = 'block';
  65.     // Ajouter la classe "active" au point correspondant à l'index spécifié
  66.     points[index - 1].classList.add('active');
  67.   }
  68. </script>