Gérer des images multiples pour un élément

Pour l'instant, on ne gère qu'une seule image par élément. Si plusieurs sont fournies, on prend la première, et on affiche que celle là. L'idée serait d'avoir un petit carousel d'images : des flèches à gauche et à droite pour aller d'une image à l'autre. Enfin, ça serait cool d'avoir la possibilité de cliquer sur une image pour l'agrandir !

Tu peux utiliser les data element-single.js, il contient déjà un attribut avec plusieurs images.

1) Déclaration de l'attribut dans classe Element

// src/js/classes/element/element-base.class.ts line 48
image : string; 
// transformer en -> images : string[]

2) Récupération de l'attribut "image" du Json

// src/js/modules/element/element-json-loader.module.ts line 81
element.image = elementJson.image;
if (!element.image && elementJson.images && elementJson.images.length > 0) element.image = elementJson.images[0];

3) Affichage

// src/views/components/element/element.html.njk line 35
{% if element.image %}
    <div class="img-container">
      <img src="{{ element.image }}" class="gogo-img"/>
    </div>
  {% endif %}

4) Du javascript pour la gestion des images

Pour inclure du javascript, il faut aller voir le component InfoBarComponent (ctrl + P et taper le nom de la classe dans sublime).

Il y a une méthode show qui exécute du javascript une fois que le template element.html.twig a été chargé

$('#element-info').html(element.component.render()); ligne 93

Tu peux voir qu'il existe déjà une fonction verticalAlignImages, qui permet de centrer l'image verticalement.

5) Mise en forme

Niveau css, une recherche de '.img-container' te montre que ça se passe dans src/scss/components/element/_element.scss ligne 324. Et aussi dans _element-list.scss

pixelhumain / GoGoCartoJs

Gérer des images multiples pour un élément #14