Bonjour à tous !
Et oui, c'est encore moi. Si je viens vers vous aujourd'hui, c'est pour des questions de pratiques auxquelles je n'ai pas trouvé mes réponses sur Internet (ou alors, j'ai mal cherché).
En premier lieu, j'aimerais savoir comment gérer les images avec les assets. J'ai trois images dans sous /assets/img/ : free_seat.png, reserved_seat.png et selected_seat.png. J'ai ensuite rajouté ceci dans le webpack.config.js :
1
2
3
| .addEntry('free_seat', './assets/img/free_seat.png')
.addEntry('reserved_seat', './assets/img/reserved_seat.png')
.addEntry('selected_seat', './assets/img/selected_seat.png') |
La compilation fonctionne bien mais le problème est que dans mon dossier public/build, j'ai un dossier image et dedans, j'ai des noms du genre free_seat.ea2bc3e2.png et en cherchant sur Internet, je suis tombé sur ça. Je l'ai fait et tout fonctionne, j'arrive à charger les images rien qu'en mettant le nom, par exemple, free_seat.png.
Là où cela se corse, c'est au niveau du JS.
En gros, l'utilisateur arrive sur une page de réservation où il peut sélectionner des sièges libres pour les réserver et avec JQuery, quand il clique sur le siège, l'image change et le siège devient "selected". Le problème vient du fait que pour prendre l'image, je suis obligé de prendre le nom avec cet espèce de hash :
(this).attr('src', 'build/images/free_seat.ea2bc3e2.png');
D'où ma question : est-il possible d'utiliser, comme dans Twig, une sorte de fonction asset pour charger les images dans le JS ? Et est-ce qu'il est possible d'ajouter directement un dossier au lieu de chaque fois faire addEntry pour chaque image ?
Ensuite, deuxième point sur lequel je bloque, toujours en rapport avec cet espace de réservation en ce qui concerne l'affichage des sièges. Pour faire court, les sièges sont stockés dans une BDD avec son rang et son numéro et une clé étrangère liée à la table user permettant de savoir si le siège est libre ou pas.
Voici le code de la vue :
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
| {% extends 'base.html.twig' %}
{% block body %}
<div class="row">
{% for seat in seats if seat.rank == 'A' %}
<div class="col">
{% if seat.user is null %}
<a href="#" data-toggle="popover" title="Informations" data-trigger="hover" data-content="Siège N°{{ seat.number }}, rang {{ seat.rank }}">
<img class="img-fluid seat" src="{{ asset('build/images/free_seat.png') }}" rel="siège non réservé" />
</a>
{% else %}
<img class="img-fluid" src="{{ asset('build/images/reserved_seat.png') }}" rel="siège non réservé" data-toggle="popover" title="Informations" data-trigger="hover" data-content="Siège N°{{ seat.number }}, rang {{ seat.rank }}" />
{% endif %}
</div>
{% endfor %}
</div>
<div class="row">
{% for seat in seats if seat.rank == 'B' %}
<div class="col">
{% if seat.user is null %}
<a href="#" data-toggle="popover" title="Informations" data-trigger="hover" data-content="Siège N°{{ seat.number }}, rang {{ seat.rank }}">
<img class="img-fluid seat" src="{{ asset('build/images/free_seat.png') }}" rel="siège non réservé" />
</a>
{% else %}
<img class="img-fluid" src="{{ asset('build/images/reserved_seat.png') }}" rel="siège non réservé" data-toggle="popover" title="Informations" data-trigger="hover" data-content="Siège N°{{ seat.number }}, rang {{ seat.rank }}" />
{% endif %}
</div>
{% endfor %}
</div>
<div class="row">
{% for seat in seats if seat.rank == 'C' %}
<div class="col">
{% if seat.user is null %}
<a href="#" data-toggle="popover" title="Informations" data-trigger="hover" data-content="Siège N°{{ seat.number }}, rang {{ seat.rank }}">
<img class="img-fluid seat" src="{{ asset('build/images/free_seat.png') }}" rel="siège non réservé" />
</a>
{% else %}
<img class="img-fluid" src="{{ asset('build/images/reserved_seat.png') }}" rel="siège non réservé" data-toggle="popover" title="Informations" data-trigger="hover" data-content="Siège N°{{ seat.number }}, rang {{ seat.rank }}" />
{% endif %}
</div>
{% endfor %}
</div>
<div class="row">
{% for seat in seats if seat.rank == 'D' %}
<div class="col">
{% if seat.user is null %}
<a href="#" data-toggle="popover" title="Informations" data-trigger="hover" data-content="Siège N°{{ seat.number }}, rang {{ seat.rank }}">
<img class="img-fluid seat" src="{{ asset('build/images/free_seat.png') }}" rel="siège non réservé" />
</a>
{% else %}
<img class="img-fluid" src="{{ asset('build/images/reserved_seat.png') }}" rel="siège non réservé" data-toggle="popover" title="Informations" data-trigger="hover" data-content="Siège N°{{ seat.number }}, rang {{ seat.rank }}" />
{% endif %}
</div>
{% endfor %}
</div>
{% endblock %} |
Je sais que ce n'est pas la solution et j'aimerais faire cela avec deux boucles. Le problème est que le faire en PHP, C++ ou autres, je n'ai aucun problème mais avec Twig, c'est une toute autre histoire. J'ai essayé tout ce qui me passait par la tête mais j'ai l'impression qu'il manque un truc (soit parce que ce n'est pas possible avec Twig, soit parce que je ne cherchais pas à la bonne place) pour pouvoir afficher tous les sièges avec deux boucles (une qui parcours les rang et une qui parcours les places).
Merci d'avance pour votre aide !
[Symfony 4] Gestion des images & boucle while dans Twig
Répondre avec citation
Partager