Template twig sous Symfony

**Eric_03** · 08/07/2019, 17h57

Bonjour,

j'ai récupéré les sources d'un espace membre sur : https://geekco.fr/blog/mini-serie-cr...-symfony-4-1-5

et ai changé le thème. Je n'arrive pas à obtenir un visuel identique sur l'ensemble des templates. Voici vers quoi je veux tendre:

Nom : connexion.JPG
Affichages : 720
Taille : 24,7 Ko

Nom : connexion.JPG
Affichages : 720
Taille : 24,7 Ko

mais voilà ce que j'obtiens sur un deuxième template

Nom : oubli.JPG
Affichages : 708
Taille : 20,9 Ko

le code de mon template base.html.twig:

Code twig :

Sélectionner tout - Visualiser dans une fenêtre à part

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
<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>
            {% block title %}
                DDFIP03
            {% endblock %}
        </title>
        {% block stylesheets %}
            <link rel="stylesheet" href="/css/bootstrap.min.css" />
        {% endblock %}
    </head>
    <body>
 
        {% block menu %}
			{{include('menu.html.twig')}}
        {% endblock %}
 
 
        {% block flash %}
            {{include('flash.html.twig')}} 
        {% endblock %}
 
        {% block body %}
        {% endblock %}
        <script src="/js/jquery.min.js"></script>
        <script src="/js/popper.min.js"></script>
        <script src="/js/bootstrap.min.js"></script>
        {% block javascripts %}
        {% endblock %}
    </body>
</html>

le code de mon template login.html.twig:

Code twig :

Sélectionner tout - Visualiser dans une fenêtre à part

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
{% extends('base.html.twig') %}
 
{% block body %}
    <p></p>
    <div class="container">
        <div class="row">
            <div class="col-md-3">&nbsp;</div>
                <div class="col-md-6">
                    <div class="bg-light py-3 px-3">
                        <h2 class="text-center">Veuillez vous connecter !</h2>
                        <form action="{{ path('connexion') }}" method="post">
                            <div class="form-group">
                                {% if error %}
                                    <div class="callout warning">{{ error.messageKey|trans(error.messageData, 'security') }}</div>
                                {% endif %}
                                <label for="username">Identifiant</label>
                                <input type="text" id="username" name="_username" class="form-control" value="{{ last_username }}" required/>
                            </div>
                            <div class="form-group">
                                <label for="password">Mot de passe:</label>
                                    <input type="password" id="password" name="_password" class="form-control" required/>
                                <p></p>
                                <p>
                                    <a href="{{path('request_resetting')}}">Mot de passe oublié ?</a>
                                </p> 
                            </div>
                            <div class="form-group">
                                <input type="hidden" name="_target_path" value="{{ path('account') }}"/>
                                <input type="hidden" name="_csrf_token" value="{{ csrf_token('authenticate') }}" >
                                <button type="submit" class="btn btn-success">Connexion</button>
                            </div>
                        </form>
                    </div>
                </div>
            </div>
        </div>
    </div>
{% endblock %}

le code de mon template request.html.twig qui me pose des problèmes:

Code twig :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
{% extends('base.html.twig') %}
 
{% block body %}
 <p></p>
    <div class="container">
            <div class="row">
                <div class="col-md-3">&nbsp;</div>
                    <div class="col-md-6">
                        <div class="bg-light py-3 px-3">
                            <h2>Mot de passe oublié ?</h2>
                            <p>Réinitialisez votre mot de passe en renseignant votre BALF.</p>
                            {#<div class="form-group">#}
                                {{form_start(form)}}
                                {{form_row(form.email)}} 
                                <p></p>                           
                                <button class="btn btn-success" type="submit">Envoyer</button>
                                {{form_end(form)}}
                            {#</div>#}
                        </div>
                    </div>
            </div>
        </div>
    </div>
{% endblock %}

J'ai été sur le site de Symfony https://symfony.com/doc/4.1/referenc...reference.html sans succès.

Pouvez vous SVP m'aiguiller dans ma démarche?

Merci

Eric

**_Thomas** · 08/07/2019, 20h47

Salut,

La différence semble venir du fait que le formulaire de login est écrit en HTML directement dans le template Twig, alors que le formulaire de mot de passe oublié utilise le composant Form de Symfony pour générer le HTML. A priori vu le résultat, ce dernier ne sait pas qu'il "doit" utiliser un "Form Theme" Boostrap pour générer les champs.

Pour remédier à cette situation : https://symfony.com/doc/current/form/bootstrap4.html
Soit de manière globale en modifiant le fichier config/packages.twig.yaml (ainsi tous les formulaires générés par Symfony utiliseront ce thème), soit de manière restreinte à ce formulaire précis en ajoutant {% form_theme form 'bootstrap_4_layout.html.twig' %} dans le ou les template(s) Twig souhaités.

**Eric_03** · 08/07/2019, 21h05

Cela fonctionne parfaitement

Eric

Template twig sous Symfony [4.x]

Symfony PHP

Discussions similaires

Partager

Partager