Theming drupal 8 avec bootstrap 4

Themes

Choix d’un theme

Liste de tous les thèmes disponibles pour d8.

Pour choisir, penser à "DMV" (Documentation, Mainteners, Versions)

.yml ou format YAML

Se prononce “yémel”
C’est un format de représentation de données qui est compatible avec json. Il sert à la configuration des thèmes et des modules de drupal mais aussi de beaucoup d'autres outils

Les éléments de syntaxes importants :

Double espace pour indiquer la hiérarchie (indentation)
{} comme en en json
- pour indiquer que l’on a affaire à un élément de tableau : attention, il ne faut pas oublier l’espace après le tiret

Twig

Introduction

C’est le langage utilisé par drupal 8 pour les templates. Il contient du html 5 et de la syntaxe twig :
{{ }} ou{% … %}
Les templates sont rendus du plus spécifique au moins spécifique (field.html.twig avant node.html.twig avant region.html.twig avant page.html.twig avant htm.html.twigl…)

Il y a 2 types de délimiteurs :

{% ... %} // exécute des expressions comme des boucles ou des conditions
{{ ... }} // affiche le résultat d’une expression

Ex :{{ content.body }}

Debug

Voir la page de référence

Voir la version de twig en cours

{{ constant('Twig_Environment::VERSION') }}

Afficher les champs disponibles

 {{ dump(_context["content"]|keys) }}

 {{ dump(node.field_xxx|keys) }}

Afficher certains champs

{{ content.content.node_title }}
{{ content.content.body }}
{{ content.content.field_festival }}

Filtres

Les filtres twig servent à renvoyer la donnée dans un format précis. Les filtres utilisent le caractère | et peuvent être chaînés.

Ex de filtre :

{{ "now"|date("m/d/Y") }}
{{ 'Home'|t }}
// join permet de concaténer
{{ [1, 2, 3]|join }}
//returns 123
//Remarquez ici que path est directement utilisés sans {{ }}
{% set facebook_url = ['http://www.facebook.com/', path('entity.node.canonical', {'node': content['#node'].id()  }) ]|join %}

Tester si la variable n'est pas vide

{% if not field_partnerships is empty %}
  <a href="#partnerships" class="anchor-show-full">Partenariats</a>
{% endif %}

Twig et visual studio code

Pour que Emmet fonctionne avec les fichiers twig : ajouter les lignes suivantes dans settings.json :

"emmet.includeLanguages": {
        "javascript": "javascriptreact",
        "twig": "html"
    }

Rewrite de fichiers twig

Pour voir dans le code source quel fichier twig est impliqué dans le rendu d’une page, il faut :

Aller sur sites/default
copier le fichier default.services.yml et le transformer en services.yml
```
sudo cp default.services.yml services.yml
```
Editer le fichier services.yml et changer le valeur "debug: false" à debug: true
```
sudo nano services.yml
```
```
debug: true
```

Le code source de la page indiquera alors les informations du type :


<!-- BEGIN OUTPUT from 'core/themes/stable/templates/content/node.html.twig' →

La dernière ligne indique où se trouve le fichier actuellement utilisé
La “x” indique le nom du fichier utilisé
Les “*” indique des suggestions de remplacement de la plus vers la moins spécifique

Rewrite de templates de vues (views)

Le schéma est le suivant : views-view-nomdelavue--nomdudisplaydelavue.html.twig

Plus d’infos sur le debugging de fichiers twig :

https://www.drupal.org/node/1903374
http://twig.sensiolabs.org/doc/functions/dump.html
18.4.3 Plus d’info sur les différents noms de fichiers twig possibles
https://www.drupal.org/node/2354645

Pour aller plus loin dans les options de debug.

fichier development.services.yml

parameters:
  http.response.debug_cacheability_headers: true
  twig.config:
    debug: true
    auto_reload: true
    cache: false
services:
    cache.backend.null:
      class: Drupal\Core\Cache\NullBackendFactory

Fichier composer.json

"drupal-scaffold": {
            "locations": {
                "web-root": "web/"
            },
            "file-mapping": {
                "[web-root]/sites/development.servervices.yml": "false"
            },
        },

Afficher des champs dans un fichier twig

Plus d'explications

La façon de faire appel à un champ dépend de la nature du champ

Body

The default body field on a content type is essentially a Text (formatted, long, with summary) field type.
Content (display): {{ content.body.0 }} This will display whatever is set up in Manage Display. If the body field is set to Summary or Trimmed, this will show that.

Content (value, formatted): {{ node.body.value|raw }} This shows the content of the text field itself, regardless of what is set in Manage Display. This will parse any HTML. Note: it is my understanding that the Twig filter raw can present security problems, but I haven’t found another way to do this. More on the Twig raw filter.

Content (value, unparsed HTML): {{ node.body.0.value }} Show the very raw value of the field, including unparsed HTML.

Content (value, plain text): {{ node.body.0.value|striptags }} As above, but will remove HTML, as if it were plain text.

Summary: {{ node.body.summary }}

Text

Text (plain) and Text (plain, long)

Content (display): {{ content.field_name }}

Content (value): {{content.field_name.0 }}

Text (formatted), Text (formatted, long), Text (formatted, long, with summary)

Content (display): {{ content.field_name.0 }} Again, this shows whatever is set up in Manage Display, which could be Default or Trimmed.

Content (value, formatted): {{ node.field_name.0.value|raw }}

Content (value, unparsed): {{ node.field_name.0.value }} Show the very raw value of the field, including unparsed HTML.

Content (value, plain text): {{ node.field_name.0.value|striptags }}

Summary: {{ node.field_name.summary }}

Responsive : changement d'image en fonction de la taille du navigateur

{% set media_uri = node.field_media_image|file_uri %}  
{% if media_uri is not null %}
      <picture>
        <source media="(max-width: 992px)" srcset="{{ media_uri|image_style('square') }}">
        <source media="(min-width: 992px)" srcset="{{ media_uri|image_style('banner') }}">
        <img src="{{ media_uri|image_style('square') }}" alt="">
      </picture>
 {% endif %}

Emmet et twig

Pour qu'Emmet fonctionne dans les fichiers twig, il faut ajouter dans le fichier ~/.config/Code/User/settings.json de visual studio code :

"files.associations": {
    "*.html": "twig"
  },
  "emmet.includeLanguages": {
    "twig": "html"
  }

Structure d’un theme

Mytheme.info.yml
name : nom du theme
type: theme
description: Description du theme ici
package: custom
core: 8.*
base theme: classy
libraries-extend:
core/drupal.user:
mytheme / user1
libraries-override:
# replace an entire library
core/drupal.collapse: mytheme/collapse
stylesheet-remove:
core/assets/vendor/normalize-css/normalize.css

Régions par défaut

page.header: Items for the header region.
page.primary_menu: Items for the primary menu region.
page.secondary_menu: Items for the secondary menu region.
page.highlighted: Items for the highlighted content region.
page.help: Dynamic help text, mostly for admin pages.
page.content: The main content of the current page.
page.sidebar_first: Items for the first sidebar.
page.sidebar_second: Items for the second sidebar.
page.footer: Items for the footer region.
page.breadcrumb: Items for the breadcrumb region.
Cf : https://api.drupal.org/api/drupal/core%21modules%21system%21templates%21page.html.twig/8.2.x

Comment déclarer et modifier des régions

On déclare les régions dans le fichier info.yml
On peut modifier le code html des région dans le fichier de template page.html.twig
Si l’on ne déclare aucune région, ceux sont celles par défaut de drupal qui sont prises en compte
Si l’on déclare une région, les régions par défaut n’existent plus (il faut donc déclarer toutes les régions ou aucune)

ATTENTION : les regions page_top et page_bottom sont des régions par défaut cachées mais utilisées par le coeur de drupal : il faut absolument les déclarer quand on crée son propre thème

Supports vidéos

Récupérer les bons fichiers sur github

Lancer le script d'installation du theme BootstrapBarrio

Attention en fin d'installation, ne pas oublier de changer le fichier scss/bootstrap/_root.scss

Comprendre le script d'installation du theme BootstrapBarrio

Pour comprendre en détail ce que fait le script 09 d'installation de BootstrapBarrio, vous pouvez visiter cette page.

Compiler le code scss

Modifier le logo

Glyphicon

Exemple de glyphicon facebook :

<i class="demo-icon icon-facebook"><span class="sr-only">Facebook</span></i>
<i class="demo-icon icon-twitter"><span class="sr-only">Twitter</span></i>
<i class="demo-icon icon-youtube-play"><span class="sr-only">Youtube</span></i>
<i class="demo-icon icon-tripadvisor"><span class="sr-only">Tripadvisor</span></i>

Exemple de code scss :

.demo-icon {
    &:hover:before {
        color: $primary !important;
        cursor: pointer;
    }
}

Les glyphicons sont des images générées à partir de polices de caractères.

Le principe de base est de récupérer une police de caractères (sur fontello.com par exemple) puis de les utiliser via les css et la pseudo class :before ou : after.

Voici comment s'y prendre :

Choisir les icônes qui vous intéressent (les logos des principaux réseaux sociaux par exemple) sur fontello.com puis télécharger le fichier compressé
Décompresser le fichier dans le répertoire /home/userxxx/dev/ddo/web/themes/custom/ddo/
Renommer le répertoire nouvellement créé en "fontello"

//Ajouter le code suivant dans le fichier ddo.libraries.yml
css:
    component:
      css/bootstrap.css: {}
      fontello/css/fontello.css: {}

//Tester en ajoutant du code html dans un contenu. Ex :

<div class="the-icons span3" title="Code: 0xf262"><i class="demo-icon icon-tripadvisor"></i> <span class="i-name">icon-tripadvisor</span><span class="i-code">0xf262</span></div>

coopernet Réussir son site web et ses applications de la conception à la réalisation