Bonjour j'ai de nouveau besoin de vous, j'ai une boucle twig m'affichant toutes les couleurs disponible pour un produits et j'aimerai faire une modal qui ouvre l'image d'une couleur en grand quand on clique dessus.

Mon code :

<div class="coloursContainer container d-flex mx-auto text-center row">
            <h2 class="titleColoursAndPack mt-5 mb-5">Couleurs</h2>
                {% for makeupRefDetails in makeupColoursDetails %}
                        <div class="item-zoom card  m-3" style="width: 12rem; height: 12rem;">
                            <a type="button" class="" data-bs-toggle="modal" data-bs-target="#exampleModal">
                            <img src="{{ vich_uploader_asset(makeupRefDetails, 'imageFile') }}"
                                 class="mt-2" alt="colours picture">
                            </a>
                            <p class="refTexte card-body">{{ makeupRefDetails.name }}</p>
                        </div>




                    <!-- Modal -->
                    <div class="modal fade" id="exampleModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
                        <div class="modal-dialog">
                            <div class="modal-content">
                                <div class="modal-header">
                                    <h5 class="modal-title" id="exampleModalLabel">Modal title</h5>
                                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                                </div>
                                <div class="modal-body">
                                    <img src="{{ vich_uploader_asset(makeupRefDetails, 'imageFile') }}"
                                         class="mt-2" alt="colours picture">
                                </div>
                            </div>
                        </div>
                    </div>
                {% endfor %}
        </div>

en soit comme ci dessus le code est presque fonctionnel, ma modal s'ouvre mais elle m'affiche toujours la meme image, la première de la liste en question. 

merci d'avance.
 

Salut

Cela vient de ce que, dans ta boucle, tu as défini ta modale avec un ID qui ne change absolument pas. Outre le fait que ce n'est pas valide du point de vue HTML parce qu'il y aura autant de fois l'ID exampleModal qu'il y a de couleurs (alors qu'un ID doit être unique), il y a un autre fait qui est que JavaScript (et que ce soit du vanilla ou jQuery) ne va prendre que la première occurrence de l'ID quand il va la chercher dans le DOM — c'est un peu une conséquence du premier point, en fait.

Ajoute lignes 5 et 16 quelque chose qui rendra l'ID unique par couleur.
Autre possibilité plus complexe : ne prévoir qu'une seule modale dans le code HTML résultant, et modifier en JavaScript la couleur lors de l'affichage.

-
Edité par Ymox 25 octobre 2021 à 23:36:02

Justement c'est ça ma question, je n'ai pas de JS et as tu une idée de ce que je pourrai écrire pour ça s'il te plait ?

Merci

Tu as forcément le JavaScript de Bootstrap, sans quoi la modale (même si c'est toujours la première) ne s'ouvrirait pas.

La première possibilité n'utilise pas de JavaScript additionnel, il s'agit, quitte à me répéter, d'ajouter quelque chose aux lignes 5 et 16 qui va faire en sorte que les IDs soient uniques dans le HTML que voit le client. On pourrait y concaténer l'ID de l'objet dans MakeupRefDetails, par exemple.

-
Edité par Mao Hervé 27 octobre 2021 à 10:07:49

Bonjour,

Ce que te dit Ymox est la solution que j'utilise régulièrement et la concaténation dans twig c'est  avec le signe ~

https://twig.symfony.com/doc/3.x/templates.html#other-operators

Par ailleurs pour récupérer dans une boucle l'indice de boucle tu peux utiliser la variable loop :

https://twig.symfony.com/doc/3.x/tags/for.html

Avec cela tu as tout pour faire que tes id soient différents et donc que tes modales fonctionnent.

a+

En fait je pensais faire quelque chose comme ça :

<img src="{{ vich_uploader_asset(makeupRefDetails, 'imageFile') }}"
class="mt-2" alt="colours picture"
onclick="window.open(this.src,'_blank','toolbar=0, location=0, directories=0, status=0, scrollbars=0, resizable=0, copyhistory=0, menuBar=0, width='+this.width+', height='+this.height);" />

Ceci m'ouvre l'image en plus grand dans un nouvelle onglet.

j'aimerai au mieux la mettre sur ma page avec un bouton pour fermer (comme une modal).

Ce que je fais fonctionne sans avoir à concaténer ou autre.

(non pas que votre solution ne soit pas efficace mais je ne la comprend pas du moins n'ai pas la méthode meme si les liens sont la pour ça mais je ne comprend pas)

-
Edité par Mao Hervé 27 octobre 2021 à 10:53:07

Il faut juste que dans ton Twig de départ, tu fasses en sorte que data-bs-target="#exampleModal" ligne 5 et id="exampleModal" ligne 16 ne soient pas les mêmes à chaque tour de boucle. Donc leur ajouter quelque chose pour que ces valeurs soient évidemment les mêmes, mais uniquement par tour de boucle. Il serait donc intéressant utiliser une des propriétés de l'objet MakeupRefDetails (en supposant que c'est bien le type d'objet sur lequel tu boucles à ce moment, mais là je pense que tu as compris), et je suppose que celui-ci comporte un champ qui sert d'ID et qui est donc par définition unique. Ce champ serait très pratique dans le cas qui nous occupe.

Pour ce qui est de la concaténation, je fais pour ma part volontiers l'amalgame entre la version purement Twig {{ truc-chose ~ ' ' ~ truc.bidule }} et la version "template" truc{{ chose.bidule }}, c'est à cette dernière que je pensais.

Ton dernier message n'est pas une question Symfony mais classique : si dans ton événement tu mets d'ouvrir avec _blank alors oui tu ouvres un nouvel onglet.

https://www.w3schools.com/tags/att_a_target.asp

A+

Voila ce que je comprend à ton message Ymox : 

{% for makeupRefDetails in makeupColoursDetails %}
                        <div class="item-zoom card  m-3" style="width: 12rem; height: 12rem;">
                            <a type="button" class="" data-bs-toggle="modal" data-bs-target="#{{ makeupRefDetails.id }}">
                            <img src="{{ vich_uploader_asset(makeupRefDetails, 'imageFile') }}"
                                 class="mt-2" alt="colours picture">
                            </a>
                            <p class="refTexte card-body">{{ makeupRefDetails.name }}</p>
                            <p>{{ makeupRefDetails.id }}</p>
                        </div>

                    
                    <!-- Modal -->
                    <div class="modal fade" id="exampleModal" tabindex="-1" aria-labelledby="{{ makeupRefDetails.id }}" aria-hidden="true">
                        <div class="modal-dialog">
                            <div class="modal-content">
                                <div class="modal-header">
                                    <h5 class="modal-title" id="exampleModalLabel">Modal title</h5>
                                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                                </div>
                                <div class="modal-body">
                                    <div class="item-zoom card  m-3" style="width: 12rem; height: 12rem;">
                                            <img src="{{ vich_uploader_asset(makeupRefDetails, 'imageFile')  }}"
                                                 class="mt-2" alt="colours picture">
                                        <p class="refTexte card-body">{{ makeupRefDetails.name }}</p>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                {% endfor %}

Je vois la logique mais n'arrive pas à le mettre en place 

Pourtant il ne faut à mon avis rien de plus, qu'est-ce qui ne va pas avec ça ?

Edit

Ah non, tu n'as pas changé id ligne 16 qui est devenue la 13.

-
Edité par Ymox 27 octobre 2021 à 13:31:39

Alors meme comme ça, ça ne marche pas, je n'ai rien qui s'ouvre 

<div class="coloursContainer container d-flex mx-auto text-center row">
            <h2 class="titleColoursAndPack mt-5 mb-5">Couleurs</h2>
                {% for makeupRefDetails in makeupColoursDetails %}
                        <div class="item-zoom card  m-3" style="width: 12rem; height: 12rem;">
                            <a type="button" class="" data-bs-toggle="modal" data-bs-target="#{{ makeupRefDetails.id }}">
                            <img src="{{ vich_uploader_asset(makeupRefDetails, 'imageFile') }}"
                                 class="mt-2" alt="colours picture">
                            </a>
                            <p class="refTexte card-body">{{ makeupRefDetails.name }}</p>
                            <p>{{ makeupRefDetails.id }}</p>
                        </div>


                    <!-- Modal -->
                    <div class="modal fade" id="{{ makeupRefDetails.id }}" tabindex="-1" aria-labelledby="{{ makeupRefDetails.id }}" aria-hidden="true">
                        <div class="modal-dialog">
                            <div class="modal-content">
                                <div class="modal-header">
                                    <h5 class="modal-title" id="exampleModalLabel">Modal title</h5>
                                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                                </div>
                                <div class="modal-body">
                                    <div class="item-zoom card  m-3" style="width: 12rem; height: 12rem;">
                                            <img src="{{ vich_uploader_asset(makeupRefDetails, 'imageFile')  }}"
                                                 class="mt-2" alt="colours picture">
                                        <p class="refTexte card-body">{{ makeupRefDetails.name }}</p>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                {% endfor %}

Et comment actives-tu ta modale ?

A+

S'il a bien embarqué le JavaScript de Bootstrap, normalement c'est géré automatiquement. La seule chose qui pourrait éventuellement poser problème, c'est si les standards ne sont pas implémentés assez "librement", à savoir que depuis je-ne-sais-quelle sous-version de HTML 5, tant qu'un ID HTML est unique, on s'en fiche du premier caractère, alors qu'avant, il fallait que ce soit un caractère ASCII. Donc si l'ID de l'objet est purement numérique, il faudrait peut-être juste ajouter une lettre avant.

Après, il y a plein d'autres facteurs, il serait intéressant de savoir si le HTML complet de la page résultante est correct, ainsi que s'il y a des erreurs JavaScript signalées.

-
Edité par Ymox 27 octobre 2021 à 14:03:22

{% extends 'layout.html.twig' %}

{% block main %}




<div class="packAndColoursContainer ">

    <div class="infoColoursAndPack">
        <h4 class="">Nos couleurs et conditionnements.</h4>
        <h4>Voici tous les conditionnements et les couleurs disponibles.</h4>

        <p>
            Retrouvez également les trios, les palettes de 6 fards, 10 fards et 36 fards !
            Pour les tarifs, nous consulter.
        </p>
    </div>

    <div class="containerColoursAndPack">

        <div class="coloursContainer container d-flex mx-auto text-center row">
            <h2 class="titleColoursAndPack mt-5 mb-5">Packaging</h2>
            {% if makeupPackagingDetails is not empty %}
                {% for makeupRefDetails in makeupPackagingDetails %}
                    <div class=" card m-3" style="width: 12rem; height: 12rem;">
                        <img src="{{ vich_uploader_asset(makeupRefDetails, 'imageFile') | imagine_filter('pack') }}"
                             class="" alt="packaging picture">
                        <p class="refTexte card-body">{{ makeupRefDetails.name }}</p>
                    </div>
                {% endfor %}
            {% endif %}
        </div>

        <div class="coloursContainer container d-flex mx-auto text-center row">
            <h2 class="titleColoursAndPack mt-5 mb-5">Couleurs</h2>
                {% for makeupRefDetails in makeupColoursDetails %}
                        <div class="item-zoom card  m-3" style="width: 12rem; height: 12rem;">
                            <a type="button" class="" data-bs-toggle="modal" data-bs-target="#{{ makeupRefDetails.id }}">
                            <img src="{{ vich_uploader_asset(makeupRefDetails, 'imageFile') }}"
                                 class="mt-2" alt="colours picture">
                            </a>
                            <p class="refTexte card-body">{{ makeupRefDetails.name }}</p>
                            <p>{{ makeupRefDetails.id }}</p>
                        </div>
                {% endfor %}



            {% for makeupRefDetails in makeupColoursDetails %}
                    <!-- Modal -->
                    <div class="modal fade" id="{{ makeupRefDetails.id }}" tabindex="-1" aria-labelledby="{{ makeupRefDetails.id }}" aria-hidden="true">
                        <div class="modal-dialog">
                            <div class="modal-content">
                                <div class="modal-header">
                                    <h5 class="modal-title" id="exampleModalLabel">Modal title</h5>
                                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                                </div>
                                <div class="modal-body">
                                    <div class="item-zoom card  m-3" style="width: 12rem; height: 12rem;">
                                            <img src="{{ vich_uploader_asset(makeupRefDetails, 'imageFile')  }}"
                                                 class="mt-2" alt="colours picture">
                                        <p class="refTexte card-body">{{ makeupRefDetails.name }}</p>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                {% endfor %}

        </div>
    </div>
</div>
{% endblock %}

Tu pouvais conserver une boucle unique pour les cartes et les modales, sachant que ces dernières ne s'affichent sauf erreur pas sans qu'on le demande.

As-tu aussi pris en compte ma remarque quand au fait de potentiels problème si l'ID de l'objet MakeupRefDetails est purement numérique ?

Edit

Ma dernière remarque ci-dessus implique uniquement un changement dans le template, si jamais.

Du point de vue HTML, le template fourni ci-dessus semble correct, du moins au niveau de la structure. Cependant, les boutons qui ont été transformés en liens ont des attributs un peu incohérents.

-
Edité par Ymox 27 octobre 2021 à 14:28:27

Ok tu as vu juste avec la lettre tout fonctionne, je n'aurai jamais réussi tout seul.

Merci de ton temps et talent que tu m'as partagé.

A+