templates/bundles/OdiseoSyliusBlogPlugin/Shop/Evenement/_latest.html.twig line 1

Open in your IDE?
  1. {% if resources|length > 0 %}
  2.     <div class="latest-items">
  3.         {% for article in resources %}
  4.             <div class="item" id="card-last-event-show">
  5.                 <div class="content">
  6.                     <a class="header" href="{{ path('odiseo_sylius_blog_plugin_shop_article_show', {'slug' : article.slug}) }}">
  7.                         {% if article.images|length > 0 %}
  8.                             <div class="image">
  9.                                 <img src="{{ article.images[0].path|imagine_filter(filter|default('sylius_large')) }}" {{ sylius_test_html_attribute('main-image') }} alt="" class="ui bordered image" />
  10.                             </div>
  11.                         {% endif %}
  12.                     </a>
  13.                     <div class="description">
  14.                         <div class="place-times-event">
  15.                             {% set month0 =  article.createdAt|date('F') %}
  16.                             {% set translation0 = 'sylius.ui.' ~ month0 %}
  17.                             <div>
  18.                                 <i class="calendar alternate outline icon"></i>
  19.                                 {{ article.DateEvenement|date('j') }} {{ translation0|trans }}, {{ article.DateEvenement|date('Y') }}
  20.                             </div>
  21.                             <div>
  22.                                 <i class="map marker alternate icon"></i>
  23.                                 {% if article.articleLocation.location|length > 16 %}
  24.                                     {{ article.articleLocation.location|slice(0, 16) }}...
  25.                                 {% else %}
  26.                                     {{ article.articleLocation.location }}
  27.                                 {% endif %}
  28.                             </div>
  29.                         </div>
  31. {#                        <div class="desc-date">#}
  32. {#                            {% set month =  article.DateEvenement|date('F') %}#}
  33. {#                            {% set translation = 'sylius.ui.' ~ month %}#}
  34. {#                            <i class="calendar alternate outline icon"></i>#}
  35. {#                            {{ article.DateEvenement|date('j') }} {{ translation|trans }}, {{ article.DateEvenement|date('Y') }}#}
  36. {#                            <div class="place-product-show">#}
  37. {#                                <i class="map marker alternate icon"></i>#}
  38. {#                                {% if article.articleLocation.location|length > 16 %}#}
  39. {#                                    <span>{{ article.articleLocation.location|slice(0, 16) }}...</span>#}
  40. {#                                {% else %}#}
  41. {#                                    <span>{{ article.articleLocation.location }}</span>#}
  42. {#                                {% endif %}#}
  43. {#                            </div>#}
  44. {#                            #}{#                            {% endif %}#}
  45. {#                        </div>#}
  46.                         <h3>
  47.                             <a href="{{ path('odiseo_sylius_blog_plugin_shop_article_show', {'slug' : article.slug}) }}" data-disqus-identifier="{{ url('odiseo_sylius_blog_plugin_shop_article_show', {'slug' : article.slug}) }}">
  48.                                 {{ article.translations['fr_FR'].title }}
  49.                             </a>
  50.                         </h3>
  51.                         <p>
  52.                             {% if article.content|striptags|length > 200 %}
  53.                                 {{ article.content|striptags|slice(0, 200)|raw }}...
  54.                             {% else %}
  55.                                 {{ article.content|striptags|raw }}
  56.                             {% endif %}
  57.                         </p>
  58.                     </div>
  59.                 </div>
  60.             </div>
  61.         {% endfor %}
  62.         <div class="points-last-article">
  63.             <span class="point-last active" onclick="changeImage(1)"></span>
  64.             <span class="point-last" onclick="changeImage(2)"></span>
  65.             <span class="point-last" onclick="changeImage(3)"></span>
  66.         </div>
  67.     </div>
  68. {% endif %}
  70. <script>
  71.   function changeImage(index) {
  72.     // Récupérer toutes les images de la galerie
  73.     var images = document.querySelectorAll('.latest-items .item');
  75.     // Réinitialiser la classe "active" pour tous les points
  76.     var points = document.querySelectorAll('.point-last');
  77.     points.forEach(function(point) {
  78.       point.classList.remove('active');
  79.     });
  81.     // Cacher toutes les images de la galerie
  82.     images.forEach(function(image) {
  83.       image.style.display = 'none';
  84.     });
  86.     // Afficher l'image correspondante à l'index spécifié
  87.     images[index - 1].style.display = 'block';
  89.     // Ajouter la classe "active" au point correspondant à l'index spécifié
  90.     points[index - 1].classList.add('active');
  91.   }
  92. </script>