Embed Size (px)
Citation preview
LE THEMINGDEacuteCOUVRIR DRUPAL
PREacuteSENTATION
QUI SUIS-JE
FLORIS MORICEAU
Une photo de moi
Deacuteveloppeur Front-End chez Lrsquoeacutequipetech (HTML CSS UI UX A11y)
Secreacutetaire de lrsquoassociation Drupal France
Lead dev Front-End de drupalfr
Bientocirct 10 ans de Fronthellip
Sur les Internets mondiales
Twitter FlorisMoriceau
Drupal FlorisMoriceau
PREacuteSENTATION
SOMMAIRE
1 - Anatomie drsquoun thegraveme
2 - Creacuteer son thegraveme
3 - Ajouter des assets (images fonts css jshellip)
4 - Les fichiers template
5 - TWIG
6 - Les Reacutegions
7 - Rendu du contenu
8 - Preprocess
9 - Javascript
10 - Questions Reacuteponses (Peut-ecirctre si on a le temps et crsquoest pas gagneacutehellip)
ANATOMIE DrsquoUN THEgraveME
1
1 ANATOMIE DrsquoUN THEgraveME
LES DOSSIERS amp FICHIERS |-THEMENAMEbreakpointsyml |-THEMENAMEinfoyml |-THEMENAMElibrariesyml |-THEMENAMEtheme |-config | |-install | | |-THEMENAMEsettingsyml | |-schema | | |-THEMENAMEschemayml |-css | |-stylecss |-js | |-scriptjs |-images | |-buttonspng |-logosvg |-screenshotpng |-faviconico |-templates | |-maintenance-pagehtmltwig | |-nodehtmltwig
1 ANATOMIE DrsquoUN THEgraveME
THEMENAMEINFOYML
Librairies chargeacutees avec le thegraveme
Reacutegions du thegraveme
Informations du thegraveme
Remarque Lorsque vous travaillez avec ce fichier un `drush cr` srsquoimpose agrave chaque modification
CETTE REacuteGION EST OBLIGATOIRE
1 ANATOMIE DrsquoUN THEgraveME
LES FICHIERS CSS
Les fichiers css contiennent les feuilles de styles du thegraveme Crsquoest agrave lrsquoauteur du thegraveme de creacuteer ses propres fichiers css et de les reacutefeacuterencer en les
deacuteclarant comme librairies dans le fichier THEMENAMElibrariesyml Les fichiers css peuvent ecirctre nommeacutes librement mais il est recommandeacute de
respecter les conventions en vigueur Mettre tous les fichiers css dans un reacutepertoire css Utiliser stylecss pour les styles geacuteneacuteraux layoutcss pour les styles lieacutes agrave la
structure de pagehellip (Meacutethodologie SMACSS)
1 ANATOMIE DrsquoUN THEgraveME
LES FICHIERS JS
Les fichiers js contiennent les scripts (javascript) du thegraveme Crsquoest agrave lrsquoauteur du thegraveme de creacuteer ses propres fichiers js et de les reacutefeacuterencer en les
deacuteclarant comme librairies dans le fichier THEMENAMElibrariesyml Les fichiers js peuvent ecirctre nommeacutes librement Par deacutefaut aucune librairie javascript nrsquoest chargeacutee pour les utilisateurs anonymes
pas mecircme jQuery
1 ANATOMIE DrsquoUN THEgraveME
FICHIERS DE TEMPLATE
Les fichiers avec lrsquoextension htmltwig sont les templates Un template contient un meacutelange de balises HTML et de code Twig Tout thegraveme Drupal contient geacuteneacuteralement ces 3 templates de base pagehtmltwig deacutefinit la structure geacuteneacuterale de toutes les pages
(emplacement des reacutegions) nodehtmltwig deacutefinit la structure des noeuds blockhtmltwig deacutefinit la structure des blocs
Par deacutefaut la template pagehtmltwig sert agrave afficher toutes les pages nodehtmltwig sert agrave afficher tous les noeuds Une modification dans un de ces templates impacte donc toutes les pages tous les noeuds Nous verrons plus tard comment creacuteer des templates plus speacutecifiques
Ces fichiers sont agrave placer dans le reacutepertoire templates
1 ANATOMIE DrsquoUN THEgraveME
THEMENAMETHEME
Le fichier monthemetheme permet drsquoajouter du code PHP additionnel speacutecifique au thegraveme
Ce fichier est facultatif mais il doit ecirctre obligatoirement placeacute agrave la racine du thegraveme srsquoil existe
Il contient des fonctions de preprocess que lrsquoon souhaite eacutetendre (voir plus loin) ainsi qursquoun certain nombre de fonctions de hook
Ce fichier est automatiquement reconnu et chargeacute par Drupal
1 ANATOMIE DrsquoUN THEgraveMETEXTE
FICHIERS IMAGE
Drupal nrsquoutilise pas de reacutepertoire speacutecifique pour stocker les images drsquoun thegraveme
La bonne pratique est de creacuteer un sous-dossier images (ou imghellip) dans le reacutepertoire du thegraveme mais on peut srsquoorganiser autrement si neacutecessaire
Dans tous les cas veiller agrave utiliser les bons chemins pour reacutefeacuterencer les images
CREacuteER SON THEgraveME (Agrave PARTIR DrsquoUN THEgraveME EXISTANT)
2
2 CREacuteER SON THEgraveME
OPTIONS DE PERSONNALISATION
Dans la section Apparence du back-office les personnalisations sont tregraves limiteacutees on peut seulement
Changer le logo
AfficherMasquer certains eacuteleacutements comme
Le Nom du site qui apparaicirct dans la reacutegion ldquoen-tecircteldquo
Les portraits utilisateur
Le slogan du site
Changer lrsquoicocircne de raccourcis
SI ON DEacuteSIRE PLUS DrsquoOUTILS DE PERSONNALISATION IL FAUT LES CODER
ET DONC CREacuteER SON PROPRE THEgraveME
2 CREacuteER SON THEgraveME
2 CREacuteER SON THEgraveME
POUR CREacuteER SON THEgraveME PLUSIEURS POSSIBILITEacuteS Partir de zeacutero
Possible mais fastidieux (Ne faites pas ccedila Ou alors seulement sur un side project personnel qui nrsquoa pas de deadline pour la beauteacute du geste et pour apprendre tous les rouages du templating)
Partir drsquoun thegraveme de base Un thegraveme de base est un thegraveme que lrsquoon va eacutetendre en heacuteritant de tout son code On dispose drsquoun systegraveme de thegravemes parentenfant Exemples Omega Zen Bootstraphellip ZURB Foundation
Partir drsquoun thegraveme ldquoprecirct-agrave-lrsquoemploildquo Par exemple un thegraveme acheteacute sur themeforestcom Lrsquoideacutee ici est de limiter au maximum les personnalisations afin de gagner du tempsAttention Sortir des fonctionnaliteacutes offertes par ce genre de thegraveme peut se reacuteveacuteler tregraves coucircteux
2 CREacuteER SON THEgraveME
MEacuteTHODE 1 VIA UN THEgraveME PREacuteSENT DANS LE CORE (BARTIK)
On fait une copie du thegraveme par deacutefaut Bartik (crsquoest-agrave-dire du reacutepertoire corethemesbartik)
On colle le reacutepertoire copieacute dans themescustom et on le renomme comme on le souhaiteAttention cependant Le thegraveme doit avoir un laquo nom machine raquo composeacute exclusivement de caractegraveres alphanumeacuteriques et de lsquo_rsquo (underscore)
Ici on choisira lsquoTHEMENAMErsquo
On renommez le fichier themescustomTHEMENAMEbartikinfoyml en themescustomTHEMENAMETHEMENAMEinfoyml (on nrsquooublie pas drsquoadapter eacutegalement le contenu du fichier infoyml)
On renomme tous les fichiers dont le nom comporte bartik par THEMENAME
Dans tous les fichiers on recherche les occurrences de la chaine lsquobartik et on les remplace par lsquoTHEMENAMErsquo
On vide TOUS les caches
Enfin on va dans Admin gt Apparence on active et deacutefini par deacutefaut notre nouveau thegraveme THEMENAME
On veacuterifie qursquoil nrsquoy a pas drsquoerreur en visitant par exemple la page drsquoaccueil
2 CREacuteER SON THEgraveME
MEacuteTHODE 2 VIA UN THEgraveME CONTIB AYANT UN STARTER (ZF) Certains thegravemes contrib proposent un laquo STARTER KIT raquo comme par exemple Bootstrap ou ZURB
Foundation
Dossier precirct a ecirctre copieacute colleacute pour faire un thegraveme enfant heacuteritant de ce dernier
On fait une copie du STARTER KIT
On colle le reacutepertoire copieacute dans themescustom et on le renomme comme on le souhaite
Etc
REMARQUE DANS LES DEUX CAS NE PAS OUBLIER DE PREacuteCISER LE lsquoBASE THEMErsquo DANS LE INFOYML
REMARQUE LE THEgraveME PARENT DOIT EcircTRE ACTIVEacute SI VOUS VOULEZ ACTIVER UN DE SES THEgraveMES ENFANT
JOBrsquoS DONE
Warcraft Human peon
2 CREacuteER SON THEgraveME
MAIShellip REVENONS SUR NOTRE FICHIER INFOYML
2 CREacuteER SON THEgraveME
THEMENAMEINFOYML
Librairies chargeacutees avec le thegraveme
Reacutegions du thegraveme
Informations du thegraveme
ET SUR LES FICHIERS DANS NOTRE DOSSIER lsquoTHEMENAMErsquo
2 CREacuteER SON THEgraveME gt THEMENAMEINFOYML
CONCREgraveTEMENT
NAMESCREENSHOTPNG
DESCRIPTION
1 ANATOMIE DrsquoUN THEgraveME gt _THEMENAME_INFOYML
CONCREgraveTEMENT
LOGOSVG
FAVICONICO
2 CREacuteER SON THEgraveME
DOCUMENTATION OFFICIELLEhttpswwwdrupalorgdocs8theming-drupal-8defining-a-theme-with-an-infoyml-file
Dans un fichier yml
LES POINTS Agrave RETENIR
libraries-override (optional) base theme (recommended) hidden (optional) engine (optional) logo (optional) screenshot (optional) regions (optional) regions_hidden (optional) features (optional) stylesheets-remove (deprecated) ckeditor_stylesheets (optional) name (required)
type (required) description (optional) package (optional) core (required) php (optional) version (optional) libraries (optional)
Mais surtout
Tabs are NOT allowed Use spaces ONLY
Properties and lists MUST be indented by two (2) spaces
AJOUTER DES ASSETS (CSSJS)
3
3 AJOUTER DES ASSETS
CHARGER DES FICHIERS CSS amp JSCe que dit la documentation
httpswwwdrupalorgdocs8themingadding-stylesheets-css-and-javascript-js-to-a-drupal-8-theme
1 Save the CSS or JS to a file using the proper naming conventions and file structure
2 Define a library which registers these CSSJS files with your theme
3 Attach the library to all pages to specific Twig templates or target specific pages via a render element in a preprocess function
3 AJOUTER DES ASSETS
EN PRATIQUE
Lrsquoajout de fichier de CSS et de JS se fait via un systegraveme de librairie (bibliothegraveque)
Il faut tout drsquoabord deacuteclarer une librairie (ou en utiliser une existante) dans le fichier THEMENAMElibrariesyml puis demander au systegraveme de la charger Ceci peut ecirctre fait depuis le fichier THEMENAMEinfoyml
3 AJOUTER DES ASSETS
CHARGER UNE LIBRAIRIE
Lorsqursquoune librairie est appeleacutee depuis le fichier THEMENAMEinfoyml alors elle est chargeacutee sur toutes les pages degraves lors que le thegraveme est utiliseacute
Il est possible de charger sous condition une bibliothegraveque Pour cela plusieurs techniques sont disponibles
depuis un fichier de template
en utilisant le hook_page_attachments_alter()
en utilisant une fonction de preprocess
3 AJOUTER DES ASSETS
CHARGER UNE LIBRAIRIE
Directement depuis un fichier de template directement par exemple dans le fichier geacuterant lrsquoaffichage des blocs
attach_library(lsquodrupal_franceblocksrsquo)
3 AJOUTER DES ASSETS
CHARGER UNE LIBRAIRIE
Chargement drsquoune librairie depuis le fichier themesTHEMENAMETHEMENAMEtheme en utilisant la fonction de hook hook_page_attachments_alter()
Implements hook_page_attachments_alter() function drupal_france_page_attachments_alter(array amp$attachments) $attachments[attached][library][] = drupal_franceglobal
3 AJOUTER DES ASSETS
CHARGER UNE LIBRAIRIE
Chargement drsquoune librairie depuis le fichier themesTHEMENAMETHEMENAMEtheme en utilisant une fonction de preprocess
Implements hook_preprocess_HOOK() for page templates function drupal_france_preprocess_page(array amp$variables) $variables[attached][library][] = drupal_franceglobal
LES FICHIERS TEMPLATES
4
4 LES TEMPLATES
Agrave QUOI CcedilA SERT
Les templates constituent la structure des pages du sitesEn fait de chacun des eacuteleacutements qui la composent
Ce sont des fichiers html (balises ltdivgt lth1gt ltagt) avec du code Twig permettant drsquoafficher les eacuteleacutements (sous forme de variables) creacuteeacutes par Drupal
Chaque type drsquoeacuteleacutement du site possegravede son propre template
4 LES TEMPLATES
PAR EXEMPLE (CrsquoEST DU VRAI CODE)
ltdiv class=l-main row expandedgt ltmain id=main class= main_grid role=maingt if pagehighlighted spaceless pagehighlighted endspaceless endif lta id=main-contentgtltagt if breadcrumb breadcrumb endif ltsectiongt pagecontent ltsectiongt ltmaingt if pagesidebar_first ltdiv id=sidebar-first class= sidebar_first_grid column sidebargt pagesidebar_first ltdivgt endif if pagesidebar_second ltdiv id=sidebar-second class= sidebar_sec_grid column sidebargt pagesidebar_second ltdivgt endif ltdivgt
4 LES TEMPLATES
IMBRICATION DES TEMPLATES
Imaginons lrsquoappel drsquoune page de billet de blog
Et maintenant imaginons le parcours drsquoimbrication de templates pour depuis la balise lthtmlgt jusqursquoagrave la ltdivgt contenant un commentaire sous ce billet de blog
4 LES TEMPLATES
FROM ltHTMLgt TO ltDIV CLASS=lsquoCOMMENTrsquogthtmlhtmltwig
pagehtmltwig
regionhtmltwig
blockhtmltwig
nodehtmltwig nodehtmltwig
fieldhtmltwig
comment-wrapperhtmltwig
commenthtmltwig
4 LES TEMPLATES
LES TEMPLATES DEacuteRIVEacuteES
Les templates deacuteriveacutees sont des templates utiliseacutees dans un contexte preacutecis
Crsquoest le nom de la template qui indique agrave Drupal quand lrsquoutiliser
Toutes ces templates sont optionnelles et reconnues automatiquement par Drupal en fonction de leurs noms
Si des templates ne sont pas preacutesentes dans le thegraveme alors Drupal utilise ceux par deacutefaut (corethemes)
On parle de ldquotemplate deacuteriveacuteeldquo de ldquosuggestion de templateldquo ou de ldquotemplates suggeacutereacuteesldquo
Il faut vider le cache de Drupal lorsque lrsquoon ajoute des templates au thegraveme
Documentation httpswwwdrupalorgdocs8themingtwigtwig-template-naming-conventions
4 LES TEMPLATES
EXEMPLE DE SUGGESTIONS DE TEMPLATES
Template de page pagehtmltwig page--chemin--internehtmltwig sera utiliseacute lorsque lrsquoon appelle chemininterne
Ex page--fronthtmltwig cible la page drsquoaccueil
Ex page--cheminhtmltwig cible toutes les pages dont le chemin commence par chemin
Ex page--node--240htmltwig cible la page du noeud portant lrsquoid 240
Template de noeud nodehtmltwig node--type-de-noeudhtmltwig cible les noeuds de type type-de-noeud
Ex node--articlehtmltwig cible tous les noeuds de type article
4 LES TEMPLATES
TROUVER LES SUGGESTIONS
Dans le fichier wwwsitesdevelopmentservicesyml
Local development services
parameters httpresponsedebug_cacheability_headers true twigconfig debug true services cachebackendnull class DrupalCoreCacheNullBackendFactory
TWIG5
5 TWIG
UN MOTEUR DE TEMPLATE
Twig est capable drsquoafficher le contenu de nrsquoimporte quel type de variable (chaine tableau ou objet)
Il est possible de faire des boucles des conditionshellip
Chaque variable peut ecirctre filtreacutee avant drsquoecirctre afficheacutee
Les chaines peuvent ecirctre rendues traduites (la traduction est alors faite via le back-office de Drupal)
5 TWIG
LES BASES
Affiche le contenu de la variable var var
Affiche le contenu de la proprieacuteteacute title de la variable node nodetitle
Conditions if var else endif
Commentaires commentaire
Traduction trans chaine endtrans
Fonctions speacutecifiques
url(lsquoroute_namersquo)
path(lsquoentitynodecanonicalrsquo lsquonodersquo nodeid)
Les modules Twig tweak ou encore Bamboo Twig proposent encore davantage de fonctions
5 TWIG
LES FILTRES Date date|format_date(lsquomediumrsquo)
Chaine
Echappement content (par deacutefaut)
Interpreacutetation du contenu de la variable texte|raw (attention )
Placeholder text|placeholder
Exclusion content|without(lsquolinksrsquo)
string|lower (upper eacutegalement)
class_name|clean_class
id_name|clean_id
Documentation httpswwwdrupalorgdocs8themingtwigfilters-modifying-variables-in-twig-templateshttpstwigsymfonycomdoc2x
5 TWIG
CONCREgraveTEMENT if pagefooter_first or pagefooter_middle or pagefooter_last ltdiv class=l-footer row expandedgt ltfooter class=row footer medium-up-2 large-up-3gt if pagefooter_first ltdiv id=footer-first class=columngt pagefooter_first ltdivgt endif if pagefooter_middle ltdiv id=footer-middle class=columngt pagefooter_middle ltdivgt endif if pagefooter_last ltdiv id=footer-last class=columngt pagefooter_last ltdivgt endif ltfootergt ltdivgt endif ltdiv class=bottom-bar panel hiddengt ltdiv class=rowgt ltdiv class=large-12 columngt ampcopy now|date(Y) site_name All rights reserved|t ltdivgt ltdivgt ltdivgt
LES REacuteGIONS6
6 LES REacuteGIONS
STRUCTURE DE LA PAGE
adminstructureblock gt Demonstrate block regions
6 LES REacuteGIONS
DEacuteFINITION ET RENDU DES REacuteGIONS
Les reacutegions doivent ecirctre deacutefinies dans le fichier THEMENAMEinfoyml
Elles doivent ecirctre appeleacutees obligatoirement dans pagehtmltwig
6 LES REacuteGIONS
THEMENAMEINFOYML
PAGEHTMLTWIG
LE RENDU DU CONTENU
7
7 RENDU DU CONTENU
LrsquoAFFICHAGE DES CHAMPS
Pour chaque type de contenu on peut reacutegler lrsquoaffichage des champs sur adminstructuretypesmanagecontent-typedisplay ougrave content-type est le nom machine du type de contenu
Il est possible de modifier lrsquoordre des champs lrsquoapparence des eacutetiquettes le format du champ
Les reacuteglages disponibles varient en fonction du type de champ
Les champs Texte peuvent ecirctre coupeacutes
Les champs Image peuvent ecirctre afficheacutes sous forme drsquoimage drsquoURL de fichier
Les champs Date peuvent utiliser un format diffeacuterent
Ces reacuteglages peuvent ecirctre diffeacuterents selon le mode drsquoaffichage (modes ldquoPar deacutefautldquo et ldquoAccrocheldquo) =gt Cela permet par exemple de masquer un champ en mode ldquoAccrocheldquo et de lrsquoafficher en mode ldquoPar deacutefautldquo (noeud inteacutegral)
7 RENDU DU CONTENU
LrsquoAFFICHAGE DES IMAGES
Les images transmises par les utilisateurs ne sont jamais aux bonnes dimensions
Le module Image (core) va nous permettre de preacutedeacutefinir des dimensions sous forme de styles drsquoimage par exemple
Vignette 70px x 110px (mise agrave lrsquoeacutechelle)
Normal 200px x 300px (mise agrave lrsquoeacutechelle et recadrage)
Ces dimensions pourront ensuite ecirctre appliqueacutees automatiquement aux champs Image depuis lrsquoeacutecran ldquogeacuterer lrsquoaffichageldquo vu preacuteceacutedemment
7 RENDU DU CONTENU
STYLE DrsquoIMAGE
7 RENDU DU CONTENU
STYLE DrsquoIMAGE
7 RENDU DU CONTENU
ALLER PLUS LOIN La gestion et la manipulation des champs est cependant
limiteacutee dans lrsquointerface drsquoadministration
On est parfois obligeacutes de modifier le code du template correspondant agrave notre champ ou type de contenu
Les reacuteglages de lrsquoadmin sont toujours pris en compte Par exemple les styles drsquoimage choisis seront ceux utiliseacutes mecircme si lrsquoon modifie le template
7 RENDU DU CONTENU
OUgrave SONT LES CHAMPS
Dans le fichier de template des noeuds (nodehtmltwig) on nrsquoa pas directement accegraves aux champs
Crsquoest la variable content qui contient tous les champs que lrsquoon affiche et en particulier ceux ajouteacutes via Field
Comment faire pour reacutecupeacuterer les champs un par un afin de les preacutesenter diffeacuteremment
7 RENDU DU CONTENU
LA VARIABLE lsquoCONTENTrsquo
Tout le contenu drsquoun noeud est afficheacute gracircce agrave la ligne content|without(comment links)
Pour connaitre le contenu de content on utilise la fonction kint() kint(content)
On deacutecouvre alors lrsquoensemble des champs et leurs proprieacuteteacutes qui sont afficheacutees en haut de page sous forme de var_dump()
On peut afficher seacutepareacutement chacun drsquoentre eux avec le code suivant contentnom_du_champ nodecreatedtime
7 RENDU DU CONTENU
NODE DE TYPE lsquoNEWSrsquo ET FORMAT lsquoTEASERrsquo
PREPROCESS8
8 PREPROCESS
FONCTIONS DE PREPROCESS
Pour chaque template on dispose de variables que lrsquoon affiche avec le formatage voulu
Ces variables sont creacuteeacutees en amont des templates dans lesquelles elles sont utiliseacutees
On dispose de fonctions dites de preprocess qui permettent de fabriquer les variables qui sont utiliseacutees dans les templates
Il est possible drsquoeacutetendre ces fonctions pour modifier les variables envoyeacutees aux templates ou en creacuteer de nouvelles
Pour ajouter une fonction de preprocess il faut la nommer comme suit THEMENAME_preprocess_HOOK() Par exemple drupal_france_preprocess_block()
8 PREPROCESS
FONCTIONS DE PREPROCESS
Pour chaque template on dispose de variables que lrsquoon affiche avec le formatage voulu
Ces variables sont creacuteeacutees en amont des templates dans lesquelles elles sont utiliseacutees
On dispose de fonctions dites de preprocess qui permettent de fabriquer les variables qui sont utiliseacutees dans les templates
Il est possible drsquoeacutetendre ces fonctions pour modifier les variables envoyeacutees aux templates ou en creacuteer de nouvelles
Pour ajouter une fonction de preprocess il faut la nommer comme suit THEMENAME_preprocess_HOOK() Par exemple drupal_france_preprocess_block()
8 PREPROCESS
LA VARIABLE lsquo$VARIABLESrsquo
Drupal
Preprocess en amont(core modules)
Preprocess du thegraveme
TemplateCreacuteation de $variables
$variables
$variables
$variables
$variables
En mode super simplifieacute
8 PREPROCESS
APPELLER UN PREPROCESS
Diffeacuterentes fonctions de preprocess peuvent ecirctre appeleacutees permettant agrave tous les modules et thegravemes de modifier les variables passeacutees aux templates Ces fonctions sont les suivantes pour le hook de thegraveme HOOK
template_preprocess_HOOK(array amp$variables)
MODULENAME_preprocess(array amp$variables $hook)
MODULENAME_preprocess_HOOK(array amp$variables)
THEMENAME_preprocess(array amp$variables $hook)
THEMENAME_preprocess_HOOK(array amp$variables)
8 PREPROCESS
CONCREgraveTEMENT Implements hook_preprocess_menu__account() function drupal_france_preprocess_menu__account(amp$variables) if (isset($variables[items][drupalfr_useraccountcompte])) $variables[items][drupalfr_useraccountcompte][attributes]-gtaddClass([ button primary button--user-account ])
$variables[items][drupalfr_useraccountcompte][title] = new FormattableMarkup( lti class=fa fa-user-circle-o aria-hidden=truegtltigtltspan class=sr-onlygtoriginal_titleltspangt [ original_title =gt $variables[items][drupalfr_useraccountcompte][title] ] )
JAVASCRIPT9
9 JAVASCRIPT
DRUPAL amp JAVASCRIPT Drupal integravegre de nombreuses libraries javascript (jQuery Modernizrhellip) et propose
eacutegalement des libraries drsquoutilitaires (coredrupal coredrupalSettings drupalajax drupalformhellip)
Par exemple Drupal 8 embarque
jQuery 321
jQuery UI 1121
Chaque librairie deacutefinit ses deacutependances jQuery UI deacutepend de jQuery par exemple
Lorsque lrsquoon utilise une librairie depuis un script custom il ne faut pas oublier de deacuteclarer cette deacutependance Pensez agrave tester en anonyme car aucune libraire nrsquoest chargeacutee par deacutefaut
Vous disposez de toutes les librairies deacutefinies dans le fichier corecorelibrairiesyml
9 JAVASCRIPT
CONCREgraveTEMENTPour pouvoir utiliser du code JS dans vos scripts avec Drupal la bonne pratique est drsquoencadrer votre code comme suit
file Shows status messages in a modal instead of inline (function ($ Drupal)
Displays status messages in a Foundation reveal modal DrupalbehaviorsfoundationStatusInReveal = attach function (context settings) $(status-messages)once(foundation-reveal)each(function() Move the status messages out of the highlighted region var $messages = $(this) var $region = $messagesparent() $messagesappendTo(body) $messagesfoundation(open)
This is required as this region will likely be empty after status messages are removed $regionhtml($regionhtml()replace(ng )) )
)(jQuery Drupal)
9 JAVASCRIPT
DRUPAL BEHAVIORS
Les scripts sont exeacutecuteacutes apregraves le chargement complet du DOM ($(document)ready() )Mais on a aussi parfois besoin de les reacute-exeacutecuter lorsque lrsquoon interagit avec la page (appel AJAX overlayhellip)
Pour ce faire il suffit drsquoattacher le script JS agrave lrsquoobjet Drupalbehaviors (librairie coredrupal) La fonction exeacutecuteacutee reccediloit 2 variables
context le DOM (le HTML chargeacute ou ajouteacute)
settings toutes les variables injecteacutees cocircteacute serveur
9 JAVASCRIPT
RAPPEL
Comme pour les fichiers de style les scripts JS doivent ecirctre deacuteclareacutes sous forme de bibliothegraveque via les fichiers THEMENAMEinfoyml et THEMENAMElibrariesyml
QUESTIONS 10
RTFM httpswwwdrupalorgdocs8theminghttpstwigsymfonycomdoc2x
MERCI Agrave VOUS
FlorisMoriceau
PREacuteSENTATION
QUI SUIS-JE
FLORIS MORICEAU
Une photo de moi
Deacuteveloppeur Front-End chez Lrsquoeacutequipetech (HTML CSS UI UX A11y)
Secreacutetaire de lrsquoassociation Drupal France
Lead dev Front-End de drupalfr
Bientocirct 10 ans de Fronthellip
Sur les Internets mondiales
Twitter FlorisMoriceau
Drupal FlorisMoriceau
PREacuteSENTATION
SOMMAIRE
1 - Anatomie drsquoun thegraveme
2 - Creacuteer son thegraveme
3 - Ajouter des assets (images fonts css jshellip)
4 - Les fichiers template
5 - TWIG
6 - Les Reacutegions
7 - Rendu du contenu
8 - Preprocess
9 - Javascript
10 - Questions Reacuteponses (Peut-ecirctre si on a le temps et crsquoest pas gagneacutehellip)
ANATOMIE DrsquoUN THEgraveME
1
1 ANATOMIE DrsquoUN THEgraveME
LES DOSSIERS amp FICHIERS |-THEMENAMEbreakpointsyml |-THEMENAMEinfoyml |-THEMENAMElibrariesyml |-THEMENAMEtheme |-config | |-install | | |-THEMENAMEsettingsyml | |-schema | | |-THEMENAMEschemayml |-css | |-stylecss |-js | |-scriptjs |-images | |-buttonspng |-logosvg |-screenshotpng |-faviconico |-templates | |-maintenance-pagehtmltwig | |-nodehtmltwig
1 ANATOMIE DrsquoUN THEgraveME
THEMENAMEINFOYML
Librairies chargeacutees avec le thegraveme
Reacutegions du thegraveme
Informations du thegraveme
Remarque Lorsque vous travaillez avec ce fichier un `drush cr` srsquoimpose agrave chaque modification
CETTE REacuteGION EST OBLIGATOIRE
1 ANATOMIE DrsquoUN THEgraveME
LES FICHIERS CSS
Les fichiers css contiennent les feuilles de styles du thegraveme Crsquoest agrave lrsquoauteur du thegraveme de creacuteer ses propres fichiers css et de les reacutefeacuterencer en les
deacuteclarant comme librairies dans le fichier THEMENAMElibrariesyml Les fichiers css peuvent ecirctre nommeacutes librement mais il est recommandeacute de
respecter les conventions en vigueur Mettre tous les fichiers css dans un reacutepertoire css Utiliser stylecss pour les styles geacuteneacuteraux layoutcss pour les styles lieacutes agrave la
structure de pagehellip (Meacutethodologie SMACSS)
1 ANATOMIE DrsquoUN THEgraveME
LES FICHIERS JS
Les fichiers js contiennent les scripts (javascript) du thegraveme Crsquoest agrave lrsquoauteur du thegraveme de creacuteer ses propres fichiers js et de les reacutefeacuterencer en les
deacuteclarant comme librairies dans le fichier THEMENAMElibrariesyml Les fichiers js peuvent ecirctre nommeacutes librement Par deacutefaut aucune librairie javascript nrsquoest chargeacutee pour les utilisateurs anonymes
pas mecircme jQuery
1 ANATOMIE DrsquoUN THEgraveME
FICHIERS DE TEMPLATE
Les fichiers avec lrsquoextension htmltwig sont les templates Un template contient un meacutelange de balises HTML et de code Twig Tout thegraveme Drupal contient geacuteneacuteralement ces 3 templates de base pagehtmltwig deacutefinit la structure geacuteneacuterale de toutes les pages
(emplacement des reacutegions) nodehtmltwig deacutefinit la structure des noeuds blockhtmltwig deacutefinit la structure des blocs
Par deacutefaut la template pagehtmltwig sert agrave afficher toutes les pages nodehtmltwig sert agrave afficher tous les noeuds Une modification dans un de ces templates impacte donc toutes les pages tous les noeuds Nous verrons plus tard comment creacuteer des templates plus speacutecifiques
Ces fichiers sont agrave placer dans le reacutepertoire templates
1 ANATOMIE DrsquoUN THEgraveME
THEMENAMETHEME
Le fichier monthemetheme permet drsquoajouter du code PHP additionnel speacutecifique au thegraveme
Ce fichier est facultatif mais il doit ecirctre obligatoirement placeacute agrave la racine du thegraveme srsquoil existe
Il contient des fonctions de preprocess que lrsquoon souhaite eacutetendre (voir plus loin) ainsi qursquoun certain nombre de fonctions de hook
Ce fichier est automatiquement reconnu et chargeacute par Drupal
1 ANATOMIE DrsquoUN THEgraveMETEXTE
FICHIERS IMAGE
Drupal nrsquoutilise pas de reacutepertoire speacutecifique pour stocker les images drsquoun thegraveme
La bonne pratique est de creacuteer un sous-dossier images (ou imghellip) dans le reacutepertoire du thegraveme mais on peut srsquoorganiser autrement si neacutecessaire
Dans tous les cas veiller agrave utiliser les bons chemins pour reacutefeacuterencer les images
CREacuteER SON THEgraveME (Agrave PARTIR DrsquoUN THEgraveME EXISTANT)
2
2 CREacuteER SON THEgraveME
OPTIONS DE PERSONNALISATION
Dans la section Apparence du back-office les personnalisations sont tregraves limiteacutees on peut seulement
Changer le logo
AfficherMasquer certains eacuteleacutements comme
Le Nom du site qui apparaicirct dans la reacutegion ldquoen-tecircteldquo
Les portraits utilisateur
Le slogan du site
Changer lrsquoicocircne de raccourcis
SI ON DEacuteSIRE PLUS DrsquoOUTILS DE PERSONNALISATION IL FAUT LES CODER
ET DONC CREacuteER SON PROPRE THEgraveME
2 CREacuteER SON THEgraveME
2 CREacuteER SON THEgraveME
POUR CREacuteER SON THEgraveME PLUSIEURS POSSIBILITEacuteS Partir de zeacutero
Possible mais fastidieux (Ne faites pas ccedila Ou alors seulement sur un side project personnel qui nrsquoa pas de deadline pour la beauteacute du geste et pour apprendre tous les rouages du templating)
Partir drsquoun thegraveme de base Un thegraveme de base est un thegraveme que lrsquoon va eacutetendre en heacuteritant de tout son code On dispose drsquoun systegraveme de thegravemes parentenfant Exemples Omega Zen Bootstraphellip ZURB Foundation
Partir drsquoun thegraveme ldquoprecirct-agrave-lrsquoemploildquo Par exemple un thegraveme acheteacute sur themeforestcom Lrsquoideacutee ici est de limiter au maximum les personnalisations afin de gagner du tempsAttention Sortir des fonctionnaliteacutes offertes par ce genre de thegraveme peut se reacuteveacuteler tregraves coucircteux
2 CREacuteER SON THEgraveME
MEacuteTHODE 1 VIA UN THEgraveME PREacuteSENT DANS LE CORE (BARTIK)
On fait une copie du thegraveme par deacutefaut Bartik (crsquoest-agrave-dire du reacutepertoire corethemesbartik)
On colle le reacutepertoire copieacute dans themescustom et on le renomme comme on le souhaiteAttention cependant Le thegraveme doit avoir un laquo nom machine raquo composeacute exclusivement de caractegraveres alphanumeacuteriques et de lsquo_rsquo (underscore)
Ici on choisira lsquoTHEMENAMErsquo
On renommez le fichier themescustomTHEMENAMEbartikinfoyml en themescustomTHEMENAMETHEMENAMEinfoyml (on nrsquooublie pas drsquoadapter eacutegalement le contenu du fichier infoyml)
On renomme tous les fichiers dont le nom comporte bartik par THEMENAME
Dans tous les fichiers on recherche les occurrences de la chaine lsquobartik et on les remplace par lsquoTHEMENAMErsquo
On vide TOUS les caches
Enfin on va dans Admin gt Apparence on active et deacutefini par deacutefaut notre nouveau thegraveme THEMENAME
On veacuterifie qursquoil nrsquoy a pas drsquoerreur en visitant par exemple la page drsquoaccueil
2 CREacuteER SON THEgraveME
MEacuteTHODE 2 VIA UN THEgraveME CONTIB AYANT UN STARTER (ZF) Certains thegravemes contrib proposent un laquo STARTER KIT raquo comme par exemple Bootstrap ou ZURB
Foundation
Dossier precirct a ecirctre copieacute colleacute pour faire un thegraveme enfant heacuteritant de ce dernier
On fait une copie du STARTER KIT
On colle le reacutepertoire copieacute dans themescustom et on le renomme comme on le souhaite
Etc
REMARQUE DANS LES DEUX CAS NE PAS OUBLIER DE PREacuteCISER LE lsquoBASE THEMErsquo DANS LE INFOYML
REMARQUE LE THEgraveME PARENT DOIT EcircTRE ACTIVEacute SI VOUS VOULEZ ACTIVER UN DE SES THEgraveMES ENFANT
JOBrsquoS DONE
Warcraft Human peon
2 CREacuteER SON THEgraveME
MAIShellip REVENONS SUR NOTRE FICHIER INFOYML
2 CREacuteER SON THEgraveME
THEMENAMEINFOYML
Librairies chargeacutees avec le thegraveme
Reacutegions du thegraveme
Informations du thegraveme
ET SUR LES FICHIERS DANS NOTRE DOSSIER lsquoTHEMENAMErsquo
2 CREacuteER SON THEgraveME gt THEMENAMEINFOYML
CONCREgraveTEMENT
NAMESCREENSHOTPNG
DESCRIPTION
1 ANATOMIE DrsquoUN THEgraveME gt _THEMENAME_INFOYML
CONCREgraveTEMENT
LOGOSVG
FAVICONICO
2 CREacuteER SON THEgraveME
DOCUMENTATION OFFICIELLEhttpswwwdrupalorgdocs8theming-drupal-8defining-a-theme-with-an-infoyml-file
Dans un fichier yml
LES POINTS Agrave RETENIR
libraries-override (optional) base theme (recommended) hidden (optional) engine (optional) logo (optional) screenshot (optional) regions (optional) regions_hidden (optional) features (optional) stylesheets-remove (deprecated) ckeditor_stylesheets (optional) name (required)
type (required) description (optional) package (optional) core (required) php (optional) version (optional) libraries (optional)
Mais surtout
Tabs are NOT allowed Use spaces ONLY
Properties and lists MUST be indented by two (2) spaces
AJOUTER DES ASSETS (CSSJS)
3
3 AJOUTER DES ASSETS
CHARGER DES FICHIERS CSS amp JSCe que dit la documentation
httpswwwdrupalorgdocs8themingadding-stylesheets-css-and-javascript-js-to-a-drupal-8-theme
1 Save the CSS or JS to a file using the proper naming conventions and file structure
2 Define a library which registers these CSSJS files with your theme
3 Attach the library to all pages to specific Twig templates or target specific pages via a render element in a preprocess function
3 AJOUTER DES ASSETS
EN PRATIQUE
Lrsquoajout de fichier de CSS et de JS se fait via un systegraveme de librairie (bibliothegraveque)
Il faut tout drsquoabord deacuteclarer une librairie (ou en utiliser une existante) dans le fichier THEMENAMElibrariesyml puis demander au systegraveme de la charger Ceci peut ecirctre fait depuis le fichier THEMENAMEinfoyml
3 AJOUTER DES ASSETS
CHARGER UNE LIBRAIRIE
Lorsqursquoune librairie est appeleacutee depuis le fichier THEMENAMEinfoyml alors elle est chargeacutee sur toutes les pages degraves lors que le thegraveme est utiliseacute
Il est possible de charger sous condition une bibliothegraveque Pour cela plusieurs techniques sont disponibles
depuis un fichier de template
en utilisant le hook_page_attachments_alter()
en utilisant une fonction de preprocess
3 AJOUTER DES ASSETS
CHARGER UNE LIBRAIRIE
Directement depuis un fichier de template directement par exemple dans le fichier geacuterant lrsquoaffichage des blocs
attach_library(lsquodrupal_franceblocksrsquo)
3 AJOUTER DES ASSETS
CHARGER UNE LIBRAIRIE
Chargement drsquoune librairie depuis le fichier themesTHEMENAMETHEMENAMEtheme en utilisant la fonction de hook hook_page_attachments_alter()
Implements hook_page_attachments_alter() function drupal_france_page_attachments_alter(array amp$attachments) $attachments[attached][library][] = drupal_franceglobal
3 AJOUTER DES ASSETS
CHARGER UNE LIBRAIRIE
Chargement drsquoune librairie depuis le fichier themesTHEMENAMETHEMENAMEtheme en utilisant une fonction de preprocess
Implements hook_preprocess_HOOK() for page templates function drupal_france_preprocess_page(array amp$variables) $variables[attached][library][] = drupal_franceglobal
LES FICHIERS TEMPLATES
4
4 LES TEMPLATES
Agrave QUOI CcedilA SERT
Les templates constituent la structure des pages du sitesEn fait de chacun des eacuteleacutements qui la composent
Ce sont des fichiers html (balises ltdivgt lth1gt ltagt) avec du code Twig permettant drsquoafficher les eacuteleacutements (sous forme de variables) creacuteeacutes par Drupal
Chaque type drsquoeacuteleacutement du site possegravede son propre template
4 LES TEMPLATES
PAR EXEMPLE (CrsquoEST DU VRAI CODE)
ltdiv class=l-main row expandedgt ltmain id=main class= main_grid role=maingt if pagehighlighted spaceless pagehighlighted endspaceless endif lta id=main-contentgtltagt if breadcrumb breadcrumb endif ltsectiongt pagecontent ltsectiongt ltmaingt if pagesidebar_first ltdiv id=sidebar-first class= sidebar_first_grid column sidebargt pagesidebar_first ltdivgt endif if pagesidebar_second ltdiv id=sidebar-second class= sidebar_sec_grid column sidebargt pagesidebar_second ltdivgt endif ltdivgt
4 LES TEMPLATES
IMBRICATION DES TEMPLATES
Imaginons lrsquoappel drsquoune page de billet de blog
Et maintenant imaginons le parcours drsquoimbrication de templates pour depuis la balise lthtmlgt jusqursquoagrave la ltdivgt contenant un commentaire sous ce billet de blog
4 LES TEMPLATES
FROM ltHTMLgt TO ltDIV CLASS=lsquoCOMMENTrsquogthtmlhtmltwig
pagehtmltwig
regionhtmltwig
blockhtmltwig
nodehtmltwig nodehtmltwig
fieldhtmltwig
comment-wrapperhtmltwig
commenthtmltwig
4 LES TEMPLATES
LES TEMPLATES DEacuteRIVEacuteES
Les templates deacuteriveacutees sont des templates utiliseacutees dans un contexte preacutecis
Crsquoest le nom de la template qui indique agrave Drupal quand lrsquoutiliser
Toutes ces templates sont optionnelles et reconnues automatiquement par Drupal en fonction de leurs noms
Si des templates ne sont pas preacutesentes dans le thegraveme alors Drupal utilise ceux par deacutefaut (corethemes)
On parle de ldquotemplate deacuteriveacuteeldquo de ldquosuggestion de templateldquo ou de ldquotemplates suggeacutereacuteesldquo
Il faut vider le cache de Drupal lorsque lrsquoon ajoute des templates au thegraveme
Documentation httpswwwdrupalorgdocs8themingtwigtwig-template-naming-conventions
4 LES TEMPLATES
EXEMPLE DE SUGGESTIONS DE TEMPLATES
Template de page pagehtmltwig page--chemin--internehtmltwig sera utiliseacute lorsque lrsquoon appelle chemininterne
Ex page--fronthtmltwig cible la page drsquoaccueil
Ex page--cheminhtmltwig cible toutes les pages dont le chemin commence par chemin
Ex page--node--240htmltwig cible la page du noeud portant lrsquoid 240
Template de noeud nodehtmltwig node--type-de-noeudhtmltwig cible les noeuds de type type-de-noeud
Ex node--articlehtmltwig cible tous les noeuds de type article
4 LES TEMPLATES
TROUVER LES SUGGESTIONS
Dans le fichier wwwsitesdevelopmentservicesyml
Local development services
parameters httpresponsedebug_cacheability_headers true twigconfig debug true services cachebackendnull class DrupalCoreCacheNullBackendFactory
TWIG5
5 TWIG
UN MOTEUR DE TEMPLATE
Twig est capable drsquoafficher le contenu de nrsquoimporte quel type de variable (chaine tableau ou objet)
Il est possible de faire des boucles des conditionshellip
Chaque variable peut ecirctre filtreacutee avant drsquoecirctre afficheacutee
Les chaines peuvent ecirctre rendues traduites (la traduction est alors faite via le back-office de Drupal)
5 TWIG
LES BASES
Affiche le contenu de la variable var var
Affiche le contenu de la proprieacuteteacute title de la variable node nodetitle
Conditions if var else endif
Commentaires commentaire
Traduction trans chaine endtrans
Fonctions speacutecifiques
url(lsquoroute_namersquo)
path(lsquoentitynodecanonicalrsquo lsquonodersquo nodeid)
Les modules Twig tweak ou encore Bamboo Twig proposent encore davantage de fonctions
5 TWIG
LES FILTRES Date date|format_date(lsquomediumrsquo)
Chaine
Echappement content (par deacutefaut)
Interpreacutetation du contenu de la variable texte|raw (attention )
Placeholder text|placeholder
Exclusion content|without(lsquolinksrsquo)
string|lower (upper eacutegalement)
class_name|clean_class
id_name|clean_id
Documentation httpswwwdrupalorgdocs8themingtwigfilters-modifying-variables-in-twig-templateshttpstwigsymfonycomdoc2x
5 TWIG
CONCREgraveTEMENT if pagefooter_first or pagefooter_middle or pagefooter_last ltdiv class=l-footer row expandedgt ltfooter class=row footer medium-up-2 large-up-3gt if pagefooter_first ltdiv id=footer-first class=columngt pagefooter_first ltdivgt endif if pagefooter_middle ltdiv id=footer-middle class=columngt pagefooter_middle ltdivgt endif if pagefooter_last ltdiv id=footer-last class=columngt pagefooter_last ltdivgt endif ltfootergt ltdivgt endif ltdiv class=bottom-bar panel hiddengt ltdiv class=rowgt ltdiv class=large-12 columngt ampcopy now|date(Y) site_name All rights reserved|t ltdivgt ltdivgt ltdivgt
LES REacuteGIONS6
6 LES REacuteGIONS
STRUCTURE DE LA PAGE
adminstructureblock gt Demonstrate block regions
6 LES REacuteGIONS
DEacuteFINITION ET RENDU DES REacuteGIONS
Les reacutegions doivent ecirctre deacutefinies dans le fichier THEMENAMEinfoyml
Elles doivent ecirctre appeleacutees obligatoirement dans pagehtmltwig
6 LES REacuteGIONS
THEMENAMEINFOYML
PAGEHTMLTWIG
LE RENDU DU CONTENU
7
7 RENDU DU CONTENU
LrsquoAFFICHAGE DES CHAMPS
Pour chaque type de contenu on peut reacutegler lrsquoaffichage des champs sur adminstructuretypesmanagecontent-typedisplay ougrave content-type est le nom machine du type de contenu
Il est possible de modifier lrsquoordre des champs lrsquoapparence des eacutetiquettes le format du champ
Les reacuteglages disponibles varient en fonction du type de champ
Les champs Texte peuvent ecirctre coupeacutes
Les champs Image peuvent ecirctre afficheacutes sous forme drsquoimage drsquoURL de fichier
Les champs Date peuvent utiliser un format diffeacuterent
Ces reacuteglages peuvent ecirctre diffeacuterents selon le mode drsquoaffichage (modes ldquoPar deacutefautldquo et ldquoAccrocheldquo) =gt Cela permet par exemple de masquer un champ en mode ldquoAccrocheldquo et de lrsquoafficher en mode ldquoPar deacutefautldquo (noeud inteacutegral)
7 RENDU DU CONTENU
LrsquoAFFICHAGE DES IMAGES
Les images transmises par les utilisateurs ne sont jamais aux bonnes dimensions
Le module Image (core) va nous permettre de preacutedeacutefinir des dimensions sous forme de styles drsquoimage par exemple
Vignette 70px x 110px (mise agrave lrsquoeacutechelle)
Normal 200px x 300px (mise agrave lrsquoeacutechelle et recadrage)
Ces dimensions pourront ensuite ecirctre appliqueacutees automatiquement aux champs Image depuis lrsquoeacutecran ldquogeacuterer lrsquoaffichageldquo vu preacuteceacutedemment
7 RENDU DU CONTENU
STYLE DrsquoIMAGE
7 RENDU DU CONTENU
STYLE DrsquoIMAGE
7 RENDU DU CONTENU
ALLER PLUS LOIN La gestion et la manipulation des champs est cependant
limiteacutee dans lrsquointerface drsquoadministration
On est parfois obligeacutes de modifier le code du template correspondant agrave notre champ ou type de contenu
Les reacuteglages de lrsquoadmin sont toujours pris en compte Par exemple les styles drsquoimage choisis seront ceux utiliseacutes mecircme si lrsquoon modifie le template
7 RENDU DU CONTENU
OUgrave SONT LES CHAMPS
Dans le fichier de template des noeuds (nodehtmltwig) on nrsquoa pas directement accegraves aux champs
Crsquoest la variable content qui contient tous les champs que lrsquoon affiche et en particulier ceux ajouteacutes via Field
Comment faire pour reacutecupeacuterer les champs un par un afin de les preacutesenter diffeacuteremment
7 RENDU DU CONTENU
LA VARIABLE lsquoCONTENTrsquo
Tout le contenu drsquoun noeud est afficheacute gracircce agrave la ligne content|without(comment links)
Pour connaitre le contenu de content on utilise la fonction kint() kint(content)
On deacutecouvre alors lrsquoensemble des champs et leurs proprieacuteteacutes qui sont afficheacutees en haut de page sous forme de var_dump()
On peut afficher seacutepareacutement chacun drsquoentre eux avec le code suivant contentnom_du_champ nodecreatedtime
7 RENDU DU CONTENU
NODE DE TYPE lsquoNEWSrsquo ET FORMAT lsquoTEASERrsquo
PREPROCESS8
8 PREPROCESS
FONCTIONS DE PREPROCESS
Pour chaque template on dispose de variables que lrsquoon affiche avec le formatage voulu
Ces variables sont creacuteeacutees en amont des templates dans lesquelles elles sont utiliseacutees
On dispose de fonctions dites de preprocess qui permettent de fabriquer les variables qui sont utiliseacutees dans les templates
Il est possible drsquoeacutetendre ces fonctions pour modifier les variables envoyeacutees aux templates ou en creacuteer de nouvelles
Pour ajouter une fonction de preprocess il faut la nommer comme suit THEMENAME_preprocess_HOOK() Par exemple drupal_france_preprocess_block()
8 PREPROCESS
FONCTIONS DE PREPROCESS
Pour chaque template on dispose de variables que lrsquoon affiche avec le formatage voulu
Ces variables sont creacuteeacutees en amont des templates dans lesquelles elles sont utiliseacutees
On dispose de fonctions dites de preprocess qui permettent de fabriquer les variables qui sont utiliseacutees dans les templates
Il est possible drsquoeacutetendre ces fonctions pour modifier les variables envoyeacutees aux templates ou en creacuteer de nouvelles
Pour ajouter une fonction de preprocess il faut la nommer comme suit THEMENAME_preprocess_HOOK() Par exemple drupal_france_preprocess_block()
8 PREPROCESS
LA VARIABLE lsquo$VARIABLESrsquo
Drupal
Preprocess en amont(core modules)
Preprocess du thegraveme
TemplateCreacuteation de $variables
$variables
$variables
$variables
$variables
En mode super simplifieacute
8 PREPROCESS
APPELLER UN PREPROCESS
Diffeacuterentes fonctions de preprocess peuvent ecirctre appeleacutees permettant agrave tous les modules et thegravemes de modifier les variables passeacutees aux templates Ces fonctions sont les suivantes pour le hook de thegraveme HOOK
template_preprocess_HOOK(array amp$variables)
MODULENAME_preprocess(array amp$variables $hook)
MODULENAME_preprocess_HOOK(array amp$variables)
THEMENAME_preprocess(array amp$variables $hook)
THEMENAME_preprocess_HOOK(array amp$variables)
8 PREPROCESS
CONCREgraveTEMENT Implements hook_preprocess_menu__account() function drupal_france_preprocess_menu__account(amp$variables) if (isset($variables[items][drupalfr_useraccountcompte])) $variables[items][drupalfr_useraccountcompte][attributes]-gtaddClass([ button primary button--user-account ])
$variables[items][drupalfr_useraccountcompte][title] = new FormattableMarkup( lti class=fa fa-user-circle-o aria-hidden=truegtltigtltspan class=sr-onlygtoriginal_titleltspangt [ original_title =gt $variables[items][drupalfr_useraccountcompte][title] ] )
JAVASCRIPT9
9 JAVASCRIPT
DRUPAL amp JAVASCRIPT Drupal integravegre de nombreuses libraries javascript (jQuery Modernizrhellip) et propose
eacutegalement des libraries drsquoutilitaires (coredrupal coredrupalSettings drupalajax drupalformhellip)
Par exemple Drupal 8 embarque
jQuery 321
jQuery UI 1121
Chaque librairie deacutefinit ses deacutependances jQuery UI deacutepend de jQuery par exemple
Lorsque lrsquoon utilise une librairie depuis un script custom il ne faut pas oublier de deacuteclarer cette deacutependance Pensez agrave tester en anonyme car aucune libraire nrsquoest chargeacutee par deacutefaut
Vous disposez de toutes les librairies deacutefinies dans le fichier corecorelibrairiesyml
9 JAVASCRIPT
CONCREgraveTEMENTPour pouvoir utiliser du code JS dans vos scripts avec Drupal la bonne pratique est drsquoencadrer votre code comme suit
file Shows status messages in a modal instead of inline (function ($ Drupal)
Displays status messages in a Foundation reveal modal DrupalbehaviorsfoundationStatusInReveal = attach function (context settings) $(status-messages)once(foundation-reveal)each(function() Move the status messages out of the highlighted region var $messages = $(this) var $region = $messagesparent() $messagesappendTo(body) $messagesfoundation(open)
This is required as this region will likely be empty after status messages are removed $regionhtml($regionhtml()replace(ng )) )
)(jQuery Drupal)
9 JAVASCRIPT
DRUPAL BEHAVIORS
Les scripts sont exeacutecuteacutes apregraves le chargement complet du DOM ($(document)ready() )Mais on a aussi parfois besoin de les reacute-exeacutecuter lorsque lrsquoon interagit avec la page (appel AJAX overlayhellip)
Pour ce faire il suffit drsquoattacher le script JS agrave lrsquoobjet Drupalbehaviors (librairie coredrupal) La fonction exeacutecuteacutee reccediloit 2 variables
context le DOM (le HTML chargeacute ou ajouteacute)
settings toutes les variables injecteacutees cocircteacute serveur
9 JAVASCRIPT
RAPPEL
Comme pour les fichiers de style les scripts JS doivent ecirctre deacuteclareacutes sous forme de bibliothegraveque via les fichiers THEMENAMEinfoyml et THEMENAMElibrariesyml
QUESTIONS 10
RTFM httpswwwdrupalorgdocs8theminghttpstwigsymfonycomdoc2x
MERCI Agrave VOUS
FlorisMoriceau
PREacuteSENTATION
SOMMAIRE
1 - Anatomie drsquoun thegraveme
2 - Creacuteer son thegraveme
3 - Ajouter des assets (images fonts css jshellip)
4 - Les fichiers template
5 - TWIG
6 - Les Reacutegions
7 - Rendu du contenu
8 - Preprocess
9 - Javascript
10 - Questions Reacuteponses (Peut-ecirctre si on a le temps et crsquoest pas gagneacutehellip)
ANATOMIE DrsquoUN THEgraveME
1
1 ANATOMIE DrsquoUN THEgraveME
LES DOSSIERS amp FICHIERS |-THEMENAMEbreakpointsyml |-THEMENAMEinfoyml |-THEMENAMElibrariesyml |-THEMENAMEtheme |-config | |-install | | |-THEMENAMEsettingsyml | |-schema | | |-THEMENAMEschemayml |-css | |-stylecss |-js | |-scriptjs |-images | |-buttonspng |-logosvg |-screenshotpng |-faviconico |-templates | |-maintenance-pagehtmltwig | |-nodehtmltwig
1 ANATOMIE DrsquoUN THEgraveME
THEMENAMEINFOYML
Librairies chargeacutees avec le thegraveme
Reacutegions du thegraveme
Informations du thegraveme
Remarque Lorsque vous travaillez avec ce fichier un `drush cr` srsquoimpose agrave chaque modification
CETTE REacuteGION EST OBLIGATOIRE
1 ANATOMIE DrsquoUN THEgraveME
LES FICHIERS CSS
Les fichiers css contiennent les feuilles de styles du thegraveme Crsquoest agrave lrsquoauteur du thegraveme de creacuteer ses propres fichiers css et de les reacutefeacuterencer en les
deacuteclarant comme librairies dans le fichier THEMENAMElibrariesyml Les fichiers css peuvent ecirctre nommeacutes librement mais il est recommandeacute de
respecter les conventions en vigueur Mettre tous les fichiers css dans un reacutepertoire css Utiliser stylecss pour les styles geacuteneacuteraux layoutcss pour les styles lieacutes agrave la
structure de pagehellip (Meacutethodologie SMACSS)
1 ANATOMIE DrsquoUN THEgraveME
LES FICHIERS JS
Les fichiers js contiennent les scripts (javascript) du thegraveme Crsquoest agrave lrsquoauteur du thegraveme de creacuteer ses propres fichiers js et de les reacutefeacuterencer en les
deacuteclarant comme librairies dans le fichier THEMENAMElibrariesyml Les fichiers js peuvent ecirctre nommeacutes librement Par deacutefaut aucune librairie javascript nrsquoest chargeacutee pour les utilisateurs anonymes
pas mecircme jQuery
1 ANATOMIE DrsquoUN THEgraveME
FICHIERS DE TEMPLATE
Les fichiers avec lrsquoextension htmltwig sont les templates Un template contient un meacutelange de balises HTML et de code Twig Tout thegraveme Drupal contient geacuteneacuteralement ces 3 templates de base pagehtmltwig deacutefinit la structure geacuteneacuterale de toutes les pages
(emplacement des reacutegions) nodehtmltwig deacutefinit la structure des noeuds blockhtmltwig deacutefinit la structure des blocs
Par deacutefaut la template pagehtmltwig sert agrave afficher toutes les pages nodehtmltwig sert agrave afficher tous les noeuds Une modification dans un de ces templates impacte donc toutes les pages tous les noeuds Nous verrons plus tard comment creacuteer des templates plus speacutecifiques
Ces fichiers sont agrave placer dans le reacutepertoire templates
1 ANATOMIE DrsquoUN THEgraveME
THEMENAMETHEME
Le fichier monthemetheme permet drsquoajouter du code PHP additionnel speacutecifique au thegraveme
Ce fichier est facultatif mais il doit ecirctre obligatoirement placeacute agrave la racine du thegraveme srsquoil existe
Il contient des fonctions de preprocess que lrsquoon souhaite eacutetendre (voir plus loin) ainsi qursquoun certain nombre de fonctions de hook
Ce fichier est automatiquement reconnu et chargeacute par Drupal
1 ANATOMIE DrsquoUN THEgraveMETEXTE
FICHIERS IMAGE
Drupal nrsquoutilise pas de reacutepertoire speacutecifique pour stocker les images drsquoun thegraveme
La bonne pratique est de creacuteer un sous-dossier images (ou imghellip) dans le reacutepertoire du thegraveme mais on peut srsquoorganiser autrement si neacutecessaire
Dans tous les cas veiller agrave utiliser les bons chemins pour reacutefeacuterencer les images
CREacuteER SON THEgraveME (Agrave PARTIR DrsquoUN THEgraveME EXISTANT)
2
2 CREacuteER SON THEgraveME
OPTIONS DE PERSONNALISATION
Dans la section Apparence du back-office les personnalisations sont tregraves limiteacutees on peut seulement
Changer le logo
AfficherMasquer certains eacuteleacutements comme
Le Nom du site qui apparaicirct dans la reacutegion ldquoen-tecircteldquo
Les portraits utilisateur
Le slogan du site
Changer lrsquoicocircne de raccourcis
SI ON DEacuteSIRE PLUS DrsquoOUTILS DE PERSONNALISATION IL FAUT LES CODER
ET DONC CREacuteER SON PROPRE THEgraveME
2 CREacuteER SON THEgraveME
2 CREacuteER SON THEgraveME
POUR CREacuteER SON THEgraveME PLUSIEURS POSSIBILITEacuteS Partir de zeacutero
Possible mais fastidieux (Ne faites pas ccedila Ou alors seulement sur un side project personnel qui nrsquoa pas de deadline pour la beauteacute du geste et pour apprendre tous les rouages du templating)
Partir drsquoun thegraveme de base Un thegraveme de base est un thegraveme que lrsquoon va eacutetendre en heacuteritant de tout son code On dispose drsquoun systegraveme de thegravemes parentenfant Exemples Omega Zen Bootstraphellip ZURB Foundation
Partir drsquoun thegraveme ldquoprecirct-agrave-lrsquoemploildquo Par exemple un thegraveme acheteacute sur themeforestcom Lrsquoideacutee ici est de limiter au maximum les personnalisations afin de gagner du tempsAttention Sortir des fonctionnaliteacutes offertes par ce genre de thegraveme peut se reacuteveacuteler tregraves coucircteux
2 CREacuteER SON THEgraveME
MEacuteTHODE 1 VIA UN THEgraveME PREacuteSENT DANS LE CORE (BARTIK)
On fait une copie du thegraveme par deacutefaut Bartik (crsquoest-agrave-dire du reacutepertoire corethemesbartik)
On colle le reacutepertoire copieacute dans themescustom et on le renomme comme on le souhaiteAttention cependant Le thegraveme doit avoir un laquo nom machine raquo composeacute exclusivement de caractegraveres alphanumeacuteriques et de lsquo_rsquo (underscore)
Ici on choisira lsquoTHEMENAMErsquo
On renommez le fichier themescustomTHEMENAMEbartikinfoyml en themescustomTHEMENAMETHEMENAMEinfoyml (on nrsquooublie pas drsquoadapter eacutegalement le contenu du fichier infoyml)
On renomme tous les fichiers dont le nom comporte bartik par THEMENAME
Dans tous les fichiers on recherche les occurrences de la chaine lsquobartik et on les remplace par lsquoTHEMENAMErsquo
On vide TOUS les caches
Enfin on va dans Admin gt Apparence on active et deacutefini par deacutefaut notre nouveau thegraveme THEMENAME
On veacuterifie qursquoil nrsquoy a pas drsquoerreur en visitant par exemple la page drsquoaccueil
2 CREacuteER SON THEgraveME
MEacuteTHODE 2 VIA UN THEgraveME CONTIB AYANT UN STARTER (ZF) Certains thegravemes contrib proposent un laquo STARTER KIT raquo comme par exemple Bootstrap ou ZURB
Foundation
Dossier precirct a ecirctre copieacute colleacute pour faire un thegraveme enfant heacuteritant de ce dernier
On fait une copie du STARTER KIT
On colle le reacutepertoire copieacute dans themescustom et on le renomme comme on le souhaite
Etc
REMARQUE DANS LES DEUX CAS NE PAS OUBLIER DE PREacuteCISER LE lsquoBASE THEMErsquo DANS LE INFOYML
REMARQUE LE THEgraveME PARENT DOIT EcircTRE ACTIVEacute SI VOUS VOULEZ ACTIVER UN DE SES THEgraveMES ENFANT
JOBrsquoS DONE
Warcraft Human peon
2 CREacuteER SON THEgraveME
MAIShellip REVENONS SUR NOTRE FICHIER INFOYML
2 CREacuteER SON THEgraveME
THEMENAMEINFOYML
Librairies chargeacutees avec le thegraveme
Reacutegions du thegraveme
Informations du thegraveme
ET SUR LES FICHIERS DANS NOTRE DOSSIER lsquoTHEMENAMErsquo
2 CREacuteER SON THEgraveME gt THEMENAMEINFOYML
CONCREgraveTEMENT
NAMESCREENSHOTPNG
DESCRIPTION
1 ANATOMIE DrsquoUN THEgraveME gt _THEMENAME_INFOYML
CONCREgraveTEMENT
LOGOSVG
FAVICONICO
2 CREacuteER SON THEgraveME
DOCUMENTATION OFFICIELLEhttpswwwdrupalorgdocs8theming-drupal-8defining-a-theme-with-an-infoyml-file
Dans un fichier yml
LES POINTS Agrave RETENIR
libraries-override (optional) base theme (recommended) hidden (optional) engine (optional) logo (optional) screenshot (optional) regions (optional) regions_hidden (optional) features (optional) stylesheets-remove (deprecated) ckeditor_stylesheets (optional) name (required)
type (required) description (optional) package (optional) core (required) php (optional) version (optional) libraries (optional)
Mais surtout
Tabs are NOT allowed Use spaces ONLY
Properties and lists MUST be indented by two (2) spaces
AJOUTER DES ASSETS (CSSJS)
3
3 AJOUTER DES ASSETS
CHARGER DES FICHIERS CSS amp JSCe que dit la documentation
httpswwwdrupalorgdocs8themingadding-stylesheets-css-and-javascript-js-to-a-drupal-8-theme
1 Save the CSS or JS to a file using the proper naming conventions and file structure
2 Define a library which registers these CSSJS files with your theme
3 Attach the library to all pages to specific Twig templates or target specific pages via a render element in a preprocess function
3 AJOUTER DES ASSETS
EN PRATIQUE
Lrsquoajout de fichier de CSS et de JS se fait via un systegraveme de librairie (bibliothegraveque)
Il faut tout drsquoabord deacuteclarer une librairie (ou en utiliser une existante) dans le fichier THEMENAMElibrariesyml puis demander au systegraveme de la charger Ceci peut ecirctre fait depuis le fichier THEMENAMEinfoyml
3 AJOUTER DES ASSETS
CHARGER UNE LIBRAIRIE
Lorsqursquoune librairie est appeleacutee depuis le fichier THEMENAMEinfoyml alors elle est chargeacutee sur toutes les pages degraves lors que le thegraveme est utiliseacute
Il est possible de charger sous condition une bibliothegraveque Pour cela plusieurs techniques sont disponibles
depuis un fichier de template
en utilisant le hook_page_attachments_alter()
en utilisant une fonction de preprocess
3 AJOUTER DES ASSETS
CHARGER UNE LIBRAIRIE
Directement depuis un fichier de template directement par exemple dans le fichier geacuterant lrsquoaffichage des blocs
attach_library(lsquodrupal_franceblocksrsquo)
3 AJOUTER DES ASSETS
CHARGER UNE LIBRAIRIE
Chargement drsquoune librairie depuis le fichier themesTHEMENAMETHEMENAMEtheme en utilisant la fonction de hook hook_page_attachments_alter()
Implements hook_page_attachments_alter() function drupal_france_page_attachments_alter(array amp$attachments) $attachments[attached][library][] = drupal_franceglobal
3 AJOUTER DES ASSETS
CHARGER UNE LIBRAIRIE
Chargement drsquoune librairie depuis le fichier themesTHEMENAMETHEMENAMEtheme en utilisant une fonction de preprocess
Implements hook_preprocess_HOOK() for page templates function drupal_france_preprocess_page(array amp$variables) $variables[attached][library][] = drupal_franceglobal
LES FICHIERS TEMPLATES
4
4 LES TEMPLATES
Agrave QUOI CcedilA SERT
Les templates constituent la structure des pages du sitesEn fait de chacun des eacuteleacutements qui la composent
Ce sont des fichiers html (balises ltdivgt lth1gt ltagt) avec du code Twig permettant drsquoafficher les eacuteleacutements (sous forme de variables) creacuteeacutes par Drupal
Chaque type drsquoeacuteleacutement du site possegravede son propre template
4 LES TEMPLATES
PAR EXEMPLE (CrsquoEST DU VRAI CODE)
ltdiv class=l-main row expandedgt ltmain id=main class= main_grid role=maingt if pagehighlighted spaceless pagehighlighted endspaceless endif lta id=main-contentgtltagt if breadcrumb breadcrumb endif ltsectiongt pagecontent ltsectiongt ltmaingt if pagesidebar_first ltdiv id=sidebar-first class= sidebar_first_grid column sidebargt pagesidebar_first ltdivgt endif if pagesidebar_second ltdiv id=sidebar-second class= sidebar_sec_grid column sidebargt pagesidebar_second ltdivgt endif ltdivgt
4 LES TEMPLATES
IMBRICATION DES TEMPLATES
Imaginons lrsquoappel drsquoune page de billet de blog
Et maintenant imaginons le parcours drsquoimbrication de templates pour depuis la balise lthtmlgt jusqursquoagrave la ltdivgt contenant un commentaire sous ce billet de blog
4 LES TEMPLATES
FROM ltHTMLgt TO ltDIV CLASS=lsquoCOMMENTrsquogthtmlhtmltwig
pagehtmltwig
regionhtmltwig
blockhtmltwig
nodehtmltwig nodehtmltwig
fieldhtmltwig
comment-wrapperhtmltwig
commenthtmltwig
4 LES TEMPLATES
LES TEMPLATES DEacuteRIVEacuteES
Les templates deacuteriveacutees sont des templates utiliseacutees dans un contexte preacutecis
Crsquoest le nom de la template qui indique agrave Drupal quand lrsquoutiliser
Toutes ces templates sont optionnelles et reconnues automatiquement par Drupal en fonction de leurs noms
Si des templates ne sont pas preacutesentes dans le thegraveme alors Drupal utilise ceux par deacutefaut (corethemes)
On parle de ldquotemplate deacuteriveacuteeldquo de ldquosuggestion de templateldquo ou de ldquotemplates suggeacutereacuteesldquo
Il faut vider le cache de Drupal lorsque lrsquoon ajoute des templates au thegraveme
Documentation httpswwwdrupalorgdocs8themingtwigtwig-template-naming-conventions
4 LES TEMPLATES
EXEMPLE DE SUGGESTIONS DE TEMPLATES
Template de page pagehtmltwig page--chemin--internehtmltwig sera utiliseacute lorsque lrsquoon appelle chemininterne
Ex page--fronthtmltwig cible la page drsquoaccueil
Ex page--cheminhtmltwig cible toutes les pages dont le chemin commence par chemin
Ex page--node--240htmltwig cible la page du noeud portant lrsquoid 240
Template de noeud nodehtmltwig node--type-de-noeudhtmltwig cible les noeuds de type type-de-noeud
Ex node--articlehtmltwig cible tous les noeuds de type article
4 LES TEMPLATES
TROUVER LES SUGGESTIONS
Dans le fichier wwwsitesdevelopmentservicesyml
Local development services
parameters httpresponsedebug_cacheability_headers true twigconfig debug true services cachebackendnull class DrupalCoreCacheNullBackendFactory
TWIG5
5 TWIG
UN MOTEUR DE TEMPLATE
Twig est capable drsquoafficher le contenu de nrsquoimporte quel type de variable (chaine tableau ou objet)
Il est possible de faire des boucles des conditionshellip
Chaque variable peut ecirctre filtreacutee avant drsquoecirctre afficheacutee
Les chaines peuvent ecirctre rendues traduites (la traduction est alors faite via le back-office de Drupal)
5 TWIG
LES BASES
Affiche le contenu de la variable var var
Affiche le contenu de la proprieacuteteacute title de la variable node nodetitle
Conditions if var else endif
Commentaires commentaire
Traduction trans chaine endtrans
Fonctions speacutecifiques
url(lsquoroute_namersquo)
path(lsquoentitynodecanonicalrsquo lsquonodersquo nodeid)
Les modules Twig tweak ou encore Bamboo Twig proposent encore davantage de fonctions
5 TWIG
LES FILTRES Date date|format_date(lsquomediumrsquo)
Chaine
Echappement content (par deacutefaut)
Interpreacutetation du contenu de la variable texte|raw (attention )
Placeholder text|placeholder
Exclusion content|without(lsquolinksrsquo)
string|lower (upper eacutegalement)
class_name|clean_class
id_name|clean_id
Documentation httpswwwdrupalorgdocs8themingtwigfilters-modifying-variables-in-twig-templateshttpstwigsymfonycomdoc2x
5 TWIG
CONCREgraveTEMENT if pagefooter_first or pagefooter_middle or pagefooter_last ltdiv class=l-footer row expandedgt ltfooter class=row footer medium-up-2 large-up-3gt if pagefooter_first ltdiv id=footer-first class=columngt pagefooter_first ltdivgt endif if pagefooter_middle ltdiv id=footer-middle class=columngt pagefooter_middle ltdivgt endif if pagefooter_last ltdiv id=footer-last class=columngt pagefooter_last ltdivgt endif ltfootergt ltdivgt endif ltdiv class=bottom-bar panel hiddengt ltdiv class=rowgt ltdiv class=large-12 columngt ampcopy now|date(Y) site_name All rights reserved|t ltdivgt ltdivgt ltdivgt
LES REacuteGIONS6
6 LES REacuteGIONS
STRUCTURE DE LA PAGE
adminstructureblock gt Demonstrate block regions
6 LES REacuteGIONS
DEacuteFINITION ET RENDU DES REacuteGIONS
Les reacutegions doivent ecirctre deacutefinies dans le fichier THEMENAMEinfoyml
Elles doivent ecirctre appeleacutees obligatoirement dans pagehtmltwig
6 LES REacuteGIONS
THEMENAMEINFOYML
PAGEHTMLTWIG
LE RENDU DU CONTENU
7
7 RENDU DU CONTENU
LrsquoAFFICHAGE DES CHAMPS
Pour chaque type de contenu on peut reacutegler lrsquoaffichage des champs sur adminstructuretypesmanagecontent-typedisplay ougrave content-type est le nom machine du type de contenu
Il est possible de modifier lrsquoordre des champs lrsquoapparence des eacutetiquettes le format du champ
Les reacuteglages disponibles varient en fonction du type de champ
Les champs Texte peuvent ecirctre coupeacutes
Les champs Image peuvent ecirctre afficheacutes sous forme drsquoimage drsquoURL de fichier
Les champs Date peuvent utiliser un format diffeacuterent
Ces reacuteglages peuvent ecirctre diffeacuterents selon le mode drsquoaffichage (modes ldquoPar deacutefautldquo et ldquoAccrocheldquo) =gt Cela permet par exemple de masquer un champ en mode ldquoAccrocheldquo et de lrsquoafficher en mode ldquoPar deacutefautldquo (noeud inteacutegral)
7 RENDU DU CONTENU
LrsquoAFFICHAGE DES IMAGES
Les images transmises par les utilisateurs ne sont jamais aux bonnes dimensions
Le module Image (core) va nous permettre de preacutedeacutefinir des dimensions sous forme de styles drsquoimage par exemple
Vignette 70px x 110px (mise agrave lrsquoeacutechelle)
Normal 200px x 300px (mise agrave lrsquoeacutechelle et recadrage)
Ces dimensions pourront ensuite ecirctre appliqueacutees automatiquement aux champs Image depuis lrsquoeacutecran ldquogeacuterer lrsquoaffichageldquo vu preacuteceacutedemment
7 RENDU DU CONTENU
STYLE DrsquoIMAGE
7 RENDU DU CONTENU
STYLE DrsquoIMAGE
7 RENDU DU CONTENU
ALLER PLUS LOIN La gestion et la manipulation des champs est cependant
limiteacutee dans lrsquointerface drsquoadministration
On est parfois obligeacutes de modifier le code du template correspondant agrave notre champ ou type de contenu
Les reacuteglages de lrsquoadmin sont toujours pris en compte Par exemple les styles drsquoimage choisis seront ceux utiliseacutes mecircme si lrsquoon modifie le template
7 RENDU DU CONTENU
OUgrave SONT LES CHAMPS
Dans le fichier de template des noeuds (nodehtmltwig) on nrsquoa pas directement accegraves aux champs
Crsquoest la variable content qui contient tous les champs que lrsquoon affiche et en particulier ceux ajouteacutes via Field
Comment faire pour reacutecupeacuterer les champs un par un afin de les preacutesenter diffeacuteremment
7 RENDU DU CONTENU
LA VARIABLE lsquoCONTENTrsquo
Tout le contenu drsquoun noeud est afficheacute gracircce agrave la ligne content|without(comment links)
Pour connaitre le contenu de content on utilise la fonction kint() kint(content)
On deacutecouvre alors lrsquoensemble des champs et leurs proprieacuteteacutes qui sont afficheacutees en haut de page sous forme de var_dump()
On peut afficher seacutepareacutement chacun drsquoentre eux avec le code suivant contentnom_du_champ nodecreatedtime
7 RENDU DU CONTENU
NODE DE TYPE lsquoNEWSrsquo ET FORMAT lsquoTEASERrsquo
PREPROCESS8
8 PREPROCESS
FONCTIONS DE PREPROCESS
Pour chaque template on dispose de variables que lrsquoon affiche avec le formatage voulu
Ces variables sont creacuteeacutees en amont des templates dans lesquelles elles sont utiliseacutees
On dispose de fonctions dites de preprocess qui permettent de fabriquer les variables qui sont utiliseacutees dans les templates
Il est possible drsquoeacutetendre ces fonctions pour modifier les variables envoyeacutees aux templates ou en creacuteer de nouvelles
Pour ajouter une fonction de preprocess il faut la nommer comme suit THEMENAME_preprocess_HOOK() Par exemple drupal_france_preprocess_block()
8 PREPROCESS
FONCTIONS DE PREPROCESS
Pour chaque template on dispose de variables que lrsquoon affiche avec le formatage voulu
Ces variables sont creacuteeacutees en amont des templates dans lesquelles elles sont utiliseacutees
On dispose de fonctions dites de preprocess qui permettent de fabriquer les variables qui sont utiliseacutees dans les templates
Il est possible drsquoeacutetendre ces fonctions pour modifier les variables envoyeacutees aux templates ou en creacuteer de nouvelles
Pour ajouter une fonction de preprocess il faut la nommer comme suit THEMENAME_preprocess_HOOK() Par exemple drupal_france_preprocess_block()
8 PREPROCESS
LA VARIABLE lsquo$VARIABLESrsquo
Drupal
Preprocess en amont(core modules)
Preprocess du thegraveme
TemplateCreacuteation de $variables
$variables
$variables
$variables
$variables
En mode super simplifieacute
8 PREPROCESS
APPELLER UN PREPROCESS
Diffeacuterentes fonctions de preprocess peuvent ecirctre appeleacutees permettant agrave tous les modules et thegravemes de modifier les variables passeacutees aux templates Ces fonctions sont les suivantes pour le hook de thegraveme HOOK
template_preprocess_HOOK(array amp$variables)
MODULENAME_preprocess(array amp$variables $hook)
MODULENAME_preprocess_HOOK(array amp$variables)
THEMENAME_preprocess(array amp$variables $hook)
THEMENAME_preprocess_HOOK(array amp$variables)
8 PREPROCESS
CONCREgraveTEMENT Implements hook_preprocess_menu__account() function drupal_france_preprocess_menu__account(amp$variables) if (isset($variables[items][drupalfr_useraccountcompte])) $variables[items][drupalfr_useraccountcompte][attributes]-gtaddClass([ button primary button--user-account ])
$variables[items][drupalfr_useraccountcompte][title] = new FormattableMarkup( lti class=fa fa-user-circle-o aria-hidden=truegtltigtltspan class=sr-onlygtoriginal_titleltspangt [ original_title =gt $variables[items][drupalfr_useraccountcompte][title] ] )
JAVASCRIPT9
9 JAVASCRIPT
DRUPAL amp JAVASCRIPT Drupal integravegre de nombreuses libraries javascript (jQuery Modernizrhellip) et propose
eacutegalement des libraries drsquoutilitaires (coredrupal coredrupalSettings drupalajax drupalformhellip)
Par exemple Drupal 8 embarque
jQuery 321
jQuery UI 1121
Chaque librairie deacutefinit ses deacutependances jQuery UI deacutepend de jQuery par exemple
Lorsque lrsquoon utilise une librairie depuis un script custom il ne faut pas oublier de deacuteclarer cette deacutependance Pensez agrave tester en anonyme car aucune libraire nrsquoest chargeacutee par deacutefaut
Vous disposez de toutes les librairies deacutefinies dans le fichier corecorelibrairiesyml
9 JAVASCRIPT
CONCREgraveTEMENTPour pouvoir utiliser du code JS dans vos scripts avec Drupal la bonne pratique est drsquoencadrer votre code comme suit
file Shows status messages in a modal instead of inline (function ($ Drupal)
Displays status messages in a Foundation reveal modal DrupalbehaviorsfoundationStatusInReveal = attach function (context settings) $(status-messages)once(foundation-reveal)each(function() Move the status messages out of the highlighted region var $messages = $(this) var $region = $messagesparent() $messagesappendTo(body) $messagesfoundation(open)
This is required as this region will likely be empty after status messages are removed $regionhtml($regionhtml()replace(ng )) )
)(jQuery Drupal)
9 JAVASCRIPT
DRUPAL BEHAVIORS
Les scripts sont exeacutecuteacutes apregraves le chargement complet du DOM ($(document)ready() )Mais on a aussi parfois besoin de les reacute-exeacutecuter lorsque lrsquoon interagit avec la page (appel AJAX overlayhellip)
Pour ce faire il suffit drsquoattacher le script JS agrave lrsquoobjet Drupalbehaviors (librairie coredrupal) La fonction exeacutecuteacutee reccediloit 2 variables
context le DOM (le HTML chargeacute ou ajouteacute)
settings toutes les variables injecteacutees cocircteacute serveur
9 JAVASCRIPT
RAPPEL
Comme pour les fichiers de style les scripts JS doivent ecirctre deacuteclareacutes sous forme de bibliothegraveque via les fichiers THEMENAMEinfoyml et THEMENAMElibrariesyml
QUESTIONS 10
RTFM httpswwwdrupalorgdocs8theminghttpstwigsymfonycomdoc2x
MERCI Agrave VOUS
FlorisMoriceau
ANATOMIE DrsquoUN THEgraveME
1
1 ANATOMIE DrsquoUN THEgraveME
LES DOSSIERS amp FICHIERS |-THEMENAMEbreakpointsyml |-THEMENAMEinfoyml |-THEMENAMElibrariesyml |-THEMENAMEtheme |-config | |-install | | |-THEMENAMEsettingsyml | |-schema | | |-THEMENAMEschemayml |-css | |-stylecss |-js | |-scriptjs |-images | |-buttonspng |-logosvg |-screenshotpng |-faviconico |-templates | |-maintenance-pagehtmltwig | |-nodehtmltwig
1 ANATOMIE DrsquoUN THEgraveME
THEMENAMEINFOYML
Librairies chargeacutees avec le thegraveme
Reacutegions du thegraveme
Informations du thegraveme
Remarque Lorsque vous travaillez avec ce fichier un `drush cr` srsquoimpose agrave chaque modification
CETTE REacuteGION EST OBLIGATOIRE
1 ANATOMIE DrsquoUN THEgraveME
LES FICHIERS CSS
Les fichiers css contiennent les feuilles de styles du thegraveme Crsquoest agrave lrsquoauteur du thegraveme de creacuteer ses propres fichiers css et de les reacutefeacuterencer en les
deacuteclarant comme librairies dans le fichier THEMENAMElibrariesyml Les fichiers css peuvent ecirctre nommeacutes librement mais il est recommandeacute de
respecter les conventions en vigueur Mettre tous les fichiers css dans un reacutepertoire css Utiliser stylecss pour les styles geacuteneacuteraux layoutcss pour les styles lieacutes agrave la
structure de pagehellip (Meacutethodologie SMACSS)
1 ANATOMIE DrsquoUN THEgraveME
LES FICHIERS JS
Les fichiers js contiennent les scripts (javascript) du thegraveme Crsquoest agrave lrsquoauteur du thegraveme de creacuteer ses propres fichiers js et de les reacutefeacuterencer en les
deacuteclarant comme librairies dans le fichier THEMENAMElibrariesyml Les fichiers js peuvent ecirctre nommeacutes librement Par deacutefaut aucune librairie javascript nrsquoest chargeacutee pour les utilisateurs anonymes
pas mecircme jQuery
1 ANATOMIE DrsquoUN THEgraveME
FICHIERS DE TEMPLATE
Les fichiers avec lrsquoextension htmltwig sont les templates Un template contient un meacutelange de balises HTML et de code Twig Tout thegraveme Drupal contient geacuteneacuteralement ces 3 templates de base pagehtmltwig deacutefinit la structure geacuteneacuterale de toutes les pages
(emplacement des reacutegions) nodehtmltwig deacutefinit la structure des noeuds blockhtmltwig deacutefinit la structure des blocs
Par deacutefaut la template pagehtmltwig sert agrave afficher toutes les pages nodehtmltwig sert agrave afficher tous les noeuds Une modification dans un de ces templates impacte donc toutes les pages tous les noeuds Nous verrons plus tard comment creacuteer des templates plus speacutecifiques
Ces fichiers sont agrave placer dans le reacutepertoire templates
1 ANATOMIE DrsquoUN THEgraveME
THEMENAMETHEME
Le fichier monthemetheme permet drsquoajouter du code PHP additionnel speacutecifique au thegraveme
Ce fichier est facultatif mais il doit ecirctre obligatoirement placeacute agrave la racine du thegraveme srsquoil existe
Il contient des fonctions de preprocess que lrsquoon souhaite eacutetendre (voir plus loin) ainsi qursquoun certain nombre de fonctions de hook
Ce fichier est automatiquement reconnu et chargeacute par Drupal
1 ANATOMIE DrsquoUN THEgraveMETEXTE
FICHIERS IMAGE
Drupal nrsquoutilise pas de reacutepertoire speacutecifique pour stocker les images drsquoun thegraveme
La bonne pratique est de creacuteer un sous-dossier images (ou imghellip) dans le reacutepertoire du thegraveme mais on peut srsquoorganiser autrement si neacutecessaire
Dans tous les cas veiller agrave utiliser les bons chemins pour reacutefeacuterencer les images
CREacuteER SON THEgraveME (Agrave PARTIR DrsquoUN THEgraveME EXISTANT)
2
2 CREacuteER SON THEgraveME
OPTIONS DE PERSONNALISATION
Dans la section Apparence du back-office les personnalisations sont tregraves limiteacutees on peut seulement
Changer le logo
AfficherMasquer certains eacuteleacutements comme
Le Nom du site qui apparaicirct dans la reacutegion ldquoen-tecircteldquo
Les portraits utilisateur
Le slogan du site
Changer lrsquoicocircne de raccourcis
SI ON DEacuteSIRE PLUS DrsquoOUTILS DE PERSONNALISATION IL FAUT LES CODER
ET DONC CREacuteER SON PROPRE THEgraveME
2 CREacuteER SON THEgraveME
2 CREacuteER SON THEgraveME
POUR CREacuteER SON THEgraveME PLUSIEURS POSSIBILITEacuteS Partir de zeacutero
Possible mais fastidieux (Ne faites pas ccedila Ou alors seulement sur un side project personnel qui nrsquoa pas de deadline pour la beauteacute du geste et pour apprendre tous les rouages du templating)
Partir drsquoun thegraveme de base Un thegraveme de base est un thegraveme que lrsquoon va eacutetendre en heacuteritant de tout son code On dispose drsquoun systegraveme de thegravemes parentenfant Exemples Omega Zen Bootstraphellip ZURB Foundation
Partir drsquoun thegraveme ldquoprecirct-agrave-lrsquoemploildquo Par exemple un thegraveme acheteacute sur themeforestcom Lrsquoideacutee ici est de limiter au maximum les personnalisations afin de gagner du tempsAttention Sortir des fonctionnaliteacutes offertes par ce genre de thegraveme peut se reacuteveacuteler tregraves coucircteux
2 CREacuteER SON THEgraveME
MEacuteTHODE 1 VIA UN THEgraveME PREacuteSENT DANS LE CORE (BARTIK)
On fait une copie du thegraveme par deacutefaut Bartik (crsquoest-agrave-dire du reacutepertoire corethemesbartik)
On colle le reacutepertoire copieacute dans themescustom et on le renomme comme on le souhaiteAttention cependant Le thegraveme doit avoir un laquo nom machine raquo composeacute exclusivement de caractegraveres alphanumeacuteriques et de lsquo_rsquo (underscore)
Ici on choisira lsquoTHEMENAMErsquo
On renommez le fichier themescustomTHEMENAMEbartikinfoyml en themescustomTHEMENAMETHEMENAMEinfoyml (on nrsquooublie pas drsquoadapter eacutegalement le contenu du fichier infoyml)
On renomme tous les fichiers dont le nom comporte bartik par THEMENAME
Dans tous les fichiers on recherche les occurrences de la chaine lsquobartik et on les remplace par lsquoTHEMENAMErsquo
On vide TOUS les caches
Enfin on va dans Admin gt Apparence on active et deacutefini par deacutefaut notre nouveau thegraveme THEMENAME
On veacuterifie qursquoil nrsquoy a pas drsquoerreur en visitant par exemple la page drsquoaccueil
2 CREacuteER SON THEgraveME
MEacuteTHODE 2 VIA UN THEgraveME CONTIB AYANT UN STARTER (ZF) Certains thegravemes contrib proposent un laquo STARTER KIT raquo comme par exemple Bootstrap ou ZURB
Foundation
Dossier precirct a ecirctre copieacute colleacute pour faire un thegraveme enfant heacuteritant de ce dernier
On fait une copie du STARTER KIT
On colle le reacutepertoire copieacute dans themescustom et on le renomme comme on le souhaite
Etc
REMARQUE DANS LES DEUX CAS NE PAS OUBLIER DE PREacuteCISER LE lsquoBASE THEMErsquo DANS LE INFOYML
REMARQUE LE THEgraveME PARENT DOIT EcircTRE ACTIVEacute SI VOUS VOULEZ ACTIVER UN DE SES THEgraveMES ENFANT
JOBrsquoS DONE
Warcraft Human peon
2 CREacuteER SON THEgraveME
MAIShellip REVENONS SUR NOTRE FICHIER INFOYML
2 CREacuteER SON THEgraveME
THEMENAMEINFOYML
Librairies chargeacutees avec le thegraveme
Reacutegions du thegraveme
Informations du thegraveme
ET SUR LES FICHIERS DANS NOTRE DOSSIER lsquoTHEMENAMErsquo
2 CREacuteER SON THEgraveME gt THEMENAMEINFOYML
CONCREgraveTEMENT
NAMESCREENSHOTPNG
DESCRIPTION
1 ANATOMIE DrsquoUN THEgraveME gt _THEMENAME_INFOYML
CONCREgraveTEMENT
LOGOSVG
FAVICONICO
2 CREacuteER SON THEgraveME
DOCUMENTATION OFFICIELLEhttpswwwdrupalorgdocs8theming-drupal-8defining-a-theme-with-an-infoyml-file
Dans un fichier yml
LES POINTS Agrave RETENIR
libraries-override (optional) base theme (recommended) hidden (optional) engine (optional) logo (optional) screenshot (optional) regions (optional) regions_hidden (optional) features (optional) stylesheets-remove (deprecated) ckeditor_stylesheets (optional) name (required)
type (required) description (optional) package (optional) core (required) php (optional) version (optional) libraries (optional)
Mais surtout
Tabs are NOT allowed Use spaces ONLY
Properties and lists MUST be indented by two (2) spaces
AJOUTER DES ASSETS (CSSJS)
3
3 AJOUTER DES ASSETS
CHARGER DES FICHIERS CSS amp JSCe que dit la documentation
httpswwwdrupalorgdocs8themingadding-stylesheets-css-and-javascript-js-to-a-drupal-8-theme
1 Save the CSS or JS to a file using the proper naming conventions and file structure
2 Define a library which registers these CSSJS files with your theme
3 Attach the library to all pages to specific Twig templates or target specific pages via a render element in a preprocess function
3 AJOUTER DES ASSETS
EN PRATIQUE
Lrsquoajout de fichier de CSS et de JS se fait via un systegraveme de librairie (bibliothegraveque)
Il faut tout drsquoabord deacuteclarer une librairie (ou en utiliser une existante) dans le fichier THEMENAMElibrariesyml puis demander au systegraveme de la charger Ceci peut ecirctre fait depuis le fichier THEMENAMEinfoyml
3 AJOUTER DES ASSETS
CHARGER UNE LIBRAIRIE
Lorsqursquoune librairie est appeleacutee depuis le fichier THEMENAMEinfoyml alors elle est chargeacutee sur toutes les pages degraves lors que le thegraveme est utiliseacute
Il est possible de charger sous condition une bibliothegraveque Pour cela plusieurs techniques sont disponibles
depuis un fichier de template
en utilisant le hook_page_attachments_alter()
en utilisant une fonction de preprocess
3 AJOUTER DES ASSETS
CHARGER UNE LIBRAIRIE
Directement depuis un fichier de template directement par exemple dans le fichier geacuterant lrsquoaffichage des blocs
attach_library(lsquodrupal_franceblocksrsquo)
3 AJOUTER DES ASSETS
CHARGER UNE LIBRAIRIE
Chargement drsquoune librairie depuis le fichier themesTHEMENAMETHEMENAMEtheme en utilisant la fonction de hook hook_page_attachments_alter()
Implements hook_page_attachments_alter() function drupal_france_page_attachments_alter(array amp$attachments) $attachments[attached][library][] = drupal_franceglobal
3 AJOUTER DES ASSETS
CHARGER UNE LIBRAIRIE
Chargement drsquoune librairie depuis le fichier themesTHEMENAMETHEMENAMEtheme en utilisant une fonction de preprocess
Implements hook_preprocess_HOOK() for page templates function drupal_france_preprocess_page(array amp$variables) $variables[attached][library][] = drupal_franceglobal
LES FICHIERS TEMPLATES
4
4 LES TEMPLATES
Agrave QUOI CcedilA SERT
Les templates constituent la structure des pages du sitesEn fait de chacun des eacuteleacutements qui la composent
Ce sont des fichiers html (balises ltdivgt lth1gt ltagt) avec du code Twig permettant drsquoafficher les eacuteleacutements (sous forme de variables) creacuteeacutes par Drupal
Chaque type drsquoeacuteleacutement du site possegravede son propre template
4 LES TEMPLATES
PAR EXEMPLE (CrsquoEST DU VRAI CODE)
ltdiv class=l-main row expandedgt ltmain id=main class= main_grid role=maingt if pagehighlighted spaceless pagehighlighted endspaceless endif lta id=main-contentgtltagt if breadcrumb breadcrumb endif ltsectiongt pagecontent ltsectiongt ltmaingt if pagesidebar_first ltdiv id=sidebar-first class= sidebar_first_grid column sidebargt pagesidebar_first ltdivgt endif if pagesidebar_second ltdiv id=sidebar-second class= sidebar_sec_grid column sidebargt pagesidebar_second ltdivgt endif ltdivgt
4 LES TEMPLATES
IMBRICATION DES TEMPLATES
Imaginons lrsquoappel drsquoune page de billet de blog
Et maintenant imaginons le parcours drsquoimbrication de templates pour depuis la balise lthtmlgt jusqursquoagrave la ltdivgt contenant un commentaire sous ce billet de blog
4 LES TEMPLATES
FROM ltHTMLgt TO ltDIV CLASS=lsquoCOMMENTrsquogthtmlhtmltwig
pagehtmltwig
regionhtmltwig
blockhtmltwig
nodehtmltwig nodehtmltwig
fieldhtmltwig
comment-wrapperhtmltwig
commenthtmltwig
4 LES TEMPLATES
LES TEMPLATES DEacuteRIVEacuteES
Les templates deacuteriveacutees sont des templates utiliseacutees dans un contexte preacutecis
Crsquoest le nom de la template qui indique agrave Drupal quand lrsquoutiliser
Toutes ces templates sont optionnelles et reconnues automatiquement par Drupal en fonction de leurs noms
Si des templates ne sont pas preacutesentes dans le thegraveme alors Drupal utilise ceux par deacutefaut (corethemes)
On parle de ldquotemplate deacuteriveacuteeldquo de ldquosuggestion de templateldquo ou de ldquotemplates suggeacutereacuteesldquo
Il faut vider le cache de Drupal lorsque lrsquoon ajoute des templates au thegraveme
Documentation httpswwwdrupalorgdocs8themingtwigtwig-template-naming-conventions
4 LES TEMPLATES
EXEMPLE DE SUGGESTIONS DE TEMPLATES
Template de page pagehtmltwig page--chemin--internehtmltwig sera utiliseacute lorsque lrsquoon appelle chemininterne
Ex page--fronthtmltwig cible la page drsquoaccueil
Ex page--cheminhtmltwig cible toutes les pages dont le chemin commence par chemin
Ex page--node--240htmltwig cible la page du noeud portant lrsquoid 240
Template de noeud nodehtmltwig node--type-de-noeudhtmltwig cible les noeuds de type type-de-noeud
Ex node--articlehtmltwig cible tous les noeuds de type article
4 LES TEMPLATES
TROUVER LES SUGGESTIONS
Dans le fichier wwwsitesdevelopmentservicesyml
Local development services
parameters httpresponsedebug_cacheability_headers true twigconfig debug true services cachebackendnull class DrupalCoreCacheNullBackendFactory
TWIG5
5 TWIG
UN MOTEUR DE TEMPLATE
Twig est capable drsquoafficher le contenu de nrsquoimporte quel type de variable (chaine tableau ou objet)
Il est possible de faire des boucles des conditionshellip
Chaque variable peut ecirctre filtreacutee avant drsquoecirctre afficheacutee
Les chaines peuvent ecirctre rendues traduites (la traduction est alors faite via le back-office de Drupal)
5 TWIG
LES BASES
Affiche le contenu de la variable var var
Affiche le contenu de la proprieacuteteacute title de la variable node nodetitle
Conditions if var else endif
Commentaires commentaire
Traduction trans chaine endtrans
Fonctions speacutecifiques
url(lsquoroute_namersquo)
path(lsquoentitynodecanonicalrsquo lsquonodersquo nodeid)
Les modules Twig tweak ou encore Bamboo Twig proposent encore davantage de fonctions
5 TWIG
LES FILTRES Date date|format_date(lsquomediumrsquo)
Chaine
Echappement content (par deacutefaut)
Interpreacutetation du contenu de la variable texte|raw (attention )
Placeholder text|placeholder
Exclusion content|without(lsquolinksrsquo)
string|lower (upper eacutegalement)
class_name|clean_class
id_name|clean_id
Documentation httpswwwdrupalorgdocs8themingtwigfilters-modifying-variables-in-twig-templateshttpstwigsymfonycomdoc2x
5 TWIG
CONCREgraveTEMENT if pagefooter_first or pagefooter_middle or pagefooter_last ltdiv class=l-footer row expandedgt ltfooter class=row footer medium-up-2 large-up-3gt if pagefooter_first ltdiv id=footer-first class=columngt pagefooter_first ltdivgt endif if pagefooter_middle ltdiv id=footer-middle class=columngt pagefooter_middle ltdivgt endif if pagefooter_last ltdiv id=footer-last class=columngt pagefooter_last ltdivgt endif ltfootergt ltdivgt endif ltdiv class=bottom-bar panel hiddengt ltdiv class=rowgt ltdiv class=large-12 columngt ampcopy now|date(Y) site_name All rights reserved|t ltdivgt ltdivgt ltdivgt
LES REacuteGIONS6
6 LES REacuteGIONS
STRUCTURE DE LA PAGE
adminstructureblock gt Demonstrate block regions
6 LES REacuteGIONS
DEacuteFINITION ET RENDU DES REacuteGIONS
Les reacutegions doivent ecirctre deacutefinies dans le fichier THEMENAMEinfoyml
Elles doivent ecirctre appeleacutees obligatoirement dans pagehtmltwig
6 LES REacuteGIONS
THEMENAMEINFOYML
PAGEHTMLTWIG
LE RENDU DU CONTENU
7
7 RENDU DU CONTENU
LrsquoAFFICHAGE DES CHAMPS
Pour chaque type de contenu on peut reacutegler lrsquoaffichage des champs sur adminstructuretypesmanagecontent-typedisplay ougrave content-type est le nom machine du type de contenu
Il est possible de modifier lrsquoordre des champs lrsquoapparence des eacutetiquettes le format du champ
Les reacuteglages disponibles varient en fonction du type de champ
Les champs Texte peuvent ecirctre coupeacutes
Les champs Image peuvent ecirctre afficheacutes sous forme drsquoimage drsquoURL de fichier
Les champs Date peuvent utiliser un format diffeacuterent
Ces reacuteglages peuvent ecirctre diffeacuterents selon le mode drsquoaffichage (modes ldquoPar deacutefautldquo et ldquoAccrocheldquo) =gt Cela permet par exemple de masquer un champ en mode ldquoAccrocheldquo et de lrsquoafficher en mode ldquoPar deacutefautldquo (noeud inteacutegral)
7 RENDU DU CONTENU
LrsquoAFFICHAGE DES IMAGES
Les images transmises par les utilisateurs ne sont jamais aux bonnes dimensions
Le module Image (core) va nous permettre de preacutedeacutefinir des dimensions sous forme de styles drsquoimage par exemple
Vignette 70px x 110px (mise agrave lrsquoeacutechelle)
Normal 200px x 300px (mise agrave lrsquoeacutechelle et recadrage)
Ces dimensions pourront ensuite ecirctre appliqueacutees automatiquement aux champs Image depuis lrsquoeacutecran ldquogeacuterer lrsquoaffichageldquo vu preacuteceacutedemment
7 RENDU DU CONTENU
STYLE DrsquoIMAGE
7 RENDU DU CONTENU
STYLE DrsquoIMAGE
7 RENDU DU CONTENU
ALLER PLUS LOIN La gestion et la manipulation des champs est cependant
limiteacutee dans lrsquointerface drsquoadministration
On est parfois obligeacutes de modifier le code du template correspondant agrave notre champ ou type de contenu
Les reacuteglages de lrsquoadmin sont toujours pris en compte Par exemple les styles drsquoimage choisis seront ceux utiliseacutes mecircme si lrsquoon modifie le template
7 RENDU DU CONTENU
OUgrave SONT LES CHAMPS
Dans le fichier de template des noeuds (nodehtmltwig) on nrsquoa pas directement accegraves aux champs
Crsquoest la variable content qui contient tous les champs que lrsquoon affiche et en particulier ceux ajouteacutes via Field
Comment faire pour reacutecupeacuterer les champs un par un afin de les preacutesenter diffeacuteremment
7 RENDU DU CONTENU
LA VARIABLE lsquoCONTENTrsquo
Tout le contenu drsquoun noeud est afficheacute gracircce agrave la ligne content|without(comment links)
Pour connaitre le contenu de content on utilise la fonction kint() kint(content)
On deacutecouvre alors lrsquoensemble des champs et leurs proprieacuteteacutes qui sont afficheacutees en haut de page sous forme de var_dump()
On peut afficher seacutepareacutement chacun drsquoentre eux avec le code suivant contentnom_du_champ nodecreatedtime
7 RENDU DU CONTENU
NODE DE TYPE lsquoNEWSrsquo ET FORMAT lsquoTEASERrsquo
PREPROCESS8
8 PREPROCESS
FONCTIONS DE PREPROCESS
Pour chaque template on dispose de variables que lrsquoon affiche avec le formatage voulu
Ces variables sont creacuteeacutees en amont des templates dans lesquelles elles sont utiliseacutees
On dispose de fonctions dites de preprocess qui permettent de fabriquer les variables qui sont utiliseacutees dans les templates
Il est possible drsquoeacutetendre ces fonctions pour modifier les variables envoyeacutees aux templates ou en creacuteer de nouvelles
Pour ajouter une fonction de preprocess il faut la nommer comme suit THEMENAME_preprocess_HOOK() Par exemple drupal_france_preprocess_block()
8 PREPROCESS
FONCTIONS DE PREPROCESS
Pour chaque template on dispose de variables que lrsquoon affiche avec le formatage voulu
Ces variables sont creacuteeacutees en amont des templates dans lesquelles elles sont utiliseacutees
On dispose de fonctions dites de preprocess qui permettent de fabriquer les variables qui sont utiliseacutees dans les templates
Il est possible drsquoeacutetendre ces fonctions pour modifier les variables envoyeacutees aux templates ou en creacuteer de nouvelles
Pour ajouter une fonction de preprocess il faut la nommer comme suit THEMENAME_preprocess_HOOK() Par exemple drupal_france_preprocess_block()
8 PREPROCESS
LA VARIABLE lsquo$VARIABLESrsquo
Drupal
Preprocess en amont(core modules)
Preprocess du thegraveme
TemplateCreacuteation de $variables
$variables
$variables
$variables
$variables
En mode super simplifieacute
8 PREPROCESS
APPELLER UN PREPROCESS
Diffeacuterentes fonctions de preprocess peuvent ecirctre appeleacutees permettant agrave tous les modules et thegravemes de modifier les variables passeacutees aux templates Ces fonctions sont les suivantes pour le hook de thegraveme HOOK
template_preprocess_HOOK(array amp$variables)
MODULENAME_preprocess(array amp$variables $hook)
MODULENAME_preprocess_HOOK(array amp$variables)
THEMENAME_preprocess(array amp$variables $hook)
THEMENAME_preprocess_HOOK(array amp$variables)
8 PREPROCESS
CONCREgraveTEMENT Implements hook_preprocess_menu__account() function drupal_france_preprocess_menu__account(amp$variables) if (isset($variables[items][drupalfr_useraccountcompte])) $variables[items][drupalfr_useraccountcompte][attributes]-gtaddClass([ button primary button--user-account ])
$variables[items][drupalfr_useraccountcompte][title] = new FormattableMarkup( lti class=fa fa-user-circle-o aria-hidden=truegtltigtltspan class=sr-onlygtoriginal_titleltspangt [ original_title =gt $variables[items][drupalfr_useraccountcompte][title] ] )
JAVASCRIPT9
9 JAVASCRIPT
DRUPAL amp JAVASCRIPT Drupal integravegre de nombreuses libraries javascript (jQuery Modernizrhellip) et propose
eacutegalement des libraries drsquoutilitaires (coredrupal coredrupalSettings drupalajax drupalformhellip)
Par exemple Drupal 8 embarque
jQuery 321
jQuery UI 1121
Chaque librairie deacutefinit ses deacutependances jQuery UI deacutepend de jQuery par exemple
Lorsque lrsquoon utilise une librairie depuis un script custom il ne faut pas oublier de deacuteclarer cette deacutependance Pensez agrave tester en anonyme car aucune libraire nrsquoest chargeacutee par deacutefaut
Vous disposez de toutes les librairies deacutefinies dans le fichier corecorelibrairiesyml
9 JAVASCRIPT
CONCREgraveTEMENTPour pouvoir utiliser du code JS dans vos scripts avec Drupal la bonne pratique est drsquoencadrer votre code comme suit
file Shows status messages in a modal instead of inline (function ($ Drupal)
Displays status messages in a Foundation reveal modal DrupalbehaviorsfoundationStatusInReveal = attach function (context settings) $(status-messages)once(foundation-reveal)each(function() Move the status messages out of the highlighted region var $messages = $(this) var $region = $messagesparent() $messagesappendTo(body) $messagesfoundation(open)
This is required as this region will likely be empty after status messages are removed $regionhtml($regionhtml()replace(ng )) )
)(jQuery Drupal)
9 JAVASCRIPT
DRUPAL BEHAVIORS
Les scripts sont exeacutecuteacutes apregraves le chargement complet du DOM ($(document)ready() )Mais on a aussi parfois besoin de les reacute-exeacutecuter lorsque lrsquoon interagit avec la page (appel AJAX overlayhellip)
Pour ce faire il suffit drsquoattacher le script JS agrave lrsquoobjet Drupalbehaviors (librairie coredrupal) La fonction exeacutecuteacutee reccediloit 2 variables
context le DOM (le HTML chargeacute ou ajouteacute)
settings toutes les variables injecteacutees cocircteacute serveur
9 JAVASCRIPT
RAPPEL
Comme pour les fichiers de style les scripts JS doivent ecirctre deacuteclareacutes sous forme de bibliothegraveque via les fichiers THEMENAMEinfoyml et THEMENAMElibrariesyml
QUESTIONS 10
RTFM httpswwwdrupalorgdocs8theminghttpstwigsymfonycomdoc2x
MERCI Agrave VOUS
FlorisMoriceau
1 ANATOMIE DrsquoUN THEgraveME
LES DOSSIERS amp FICHIERS |-THEMENAMEbreakpointsyml |-THEMENAMEinfoyml |-THEMENAMElibrariesyml |-THEMENAMEtheme |-config | |-install | | |-THEMENAMEsettingsyml | |-schema | | |-THEMENAMEschemayml |-css | |-stylecss |-js | |-scriptjs |-images | |-buttonspng |-logosvg |-screenshotpng |-faviconico |-templates | |-maintenance-pagehtmltwig | |-nodehtmltwig
1 ANATOMIE DrsquoUN THEgraveME
THEMENAMEINFOYML
Librairies chargeacutees avec le thegraveme
Reacutegions du thegraveme
Informations du thegraveme
Remarque Lorsque vous travaillez avec ce fichier un `drush cr` srsquoimpose agrave chaque modification
CETTE REacuteGION EST OBLIGATOIRE
1 ANATOMIE DrsquoUN THEgraveME
LES FICHIERS CSS
Les fichiers css contiennent les feuilles de styles du thegraveme Crsquoest agrave lrsquoauteur du thegraveme de creacuteer ses propres fichiers css et de les reacutefeacuterencer en les
deacuteclarant comme librairies dans le fichier THEMENAMElibrariesyml Les fichiers css peuvent ecirctre nommeacutes librement mais il est recommandeacute de
respecter les conventions en vigueur Mettre tous les fichiers css dans un reacutepertoire css Utiliser stylecss pour les styles geacuteneacuteraux layoutcss pour les styles lieacutes agrave la
structure de pagehellip (Meacutethodologie SMACSS)
1 ANATOMIE DrsquoUN THEgraveME
LES FICHIERS JS
Les fichiers js contiennent les scripts (javascript) du thegraveme Crsquoest agrave lrsquoauteur du thegraveme de creacuteer ses propres fichiers js et de les reacutefeacuterencer en les
deacuteclarant comme librairies dans le fichier THEMENAMElibrariesyml Les fichiers js peuvent ecirctre nommeacutes librement Par deacutefaut aucune librairie javascript nrsquoest chargeacutee pour les utilisateurs anonymes
pas mecircme jQuery
1 ANATOMIE DrsquoUN THEgraveME
FICHIERS DE TEMPLATE
Les fichiers avec lrsquoextension htmltwig sont les templates Un template contient un meacutelange de balises HTML et de code Twig Tout thegraveme Drupal contient geacuteneacuteralement ces 3 templates de base pagehtmltwig deacutefinit la structure geacuteneacuterale de toutes les pages
(emplacement des reacutegions) nodehtmltwig deacutefinit la structure des noeuds blockhtmltwig deacutefinit la structure des blocs
Par deacutefaut la template pagehtmltwig sert agrave afficher toutes les pages nodehtmltwig sert agrave afficher tous les noeuds Une modification dans un de ces templates impacte donc toutes les pages tous les noeuds Nous verrons plus tard comment creacuteer des templates plus speacutecifiques
Ces fichiers sont agrave placer dans le reacutepertoire templates
1 ANATOMIE DrsquoUN THEgraveME
THEMENAMETHEME
Le fichier monthemetheme permet drsquoajouter du code PHP additionnel speacutecifique au thegraveme
Ce fichier est facultatif mais il doit ecirctre obligatoirement placeacute agrave la racine du thegraveme srsquoil existe
Il contient des fonctions de preprocess que lrsquoon souhaite eacutetendre (voir plus loin) ainsi qursquoun certain nombre de fonctions de hook
Ce fichier est automatiquement reconnu et chargeacute par Drupal
1 ANATOMIE DrsquoUN THEgraveMETEXTE
FICHIERS IMAGE
Drupal nrsquoutilise pas de reacutepertoire speacutecifique pour stocker les images drsquoun thegraveme
La bonne pratique est de creacuteer un sous-dossier images (ou imghellip) dans le reacutepertoire du thegraveme mais on peut srsquoorganiser autrement si neacutecessaire
Dans tous les cas veiller agrave utiliser les bons chemins pour reacutefeacuterencer les images
CREacuteER SON THEgraveME (Agrave PARTIR DrsquoUN THEgraveME EXISTANT)
2
2 CREacuteER SON THEgraveME
OPTIONS DE PERSONNALISATION
Dans la section Apparence du back-office les personnalisations sont tregraves limiteacutees on peut seulement
Changer le logo
AfficherMasquer certains eacuteleacutements comme
Le Nom du site qui apparaicirct dans la reacutegion ldquoen-tecircteldquo
Les portraits utilisateur
Le slogan du site
Changer lrsquoicocircne de raccourcis
SI ON DEacuteSIRE PLUS DrsquoOUTILS DE PERSONNALISATION IL FAUT LES CODER
ET DONC CREacuteER SON PROPRE THEgraveME
2 CREacuteER SON THEgraveME
2 CREacuteER SON THEgraveME
POUR CREacuteER SON THEgraveME PLUSIEURS POSSIBILITEacuteS Partir de zeacutero
Possible mais fastidieux (Ne faites pas ccedila Ou alors seulement sur un side project personnel qui nrsquoa pas de deadline pour la beauteacute du geste et pour apprendre tous les rouages du templating)
Partir drsquoun thegraveme de base Un thegraveme de base est un thegraveme que lrsquoon va eacutetendre en heacuteritant de tout son code On dispose drsquoun systegraveme de thegravemes parentenfant Exemples Omega Zen Bootstraphellip ZURB Foundation
Partir drsquoun thegraveme ldquoprecirct-agrave-lrsquoemploildquo Par exemple un thegraveme acheteacute sur themeforestcom Lrsquoideacutee ici est de limiter au maximum les personnalisations afin de gagner du tempsAttention Sortir des fonctionnaliteacutes offertes par ce genre de thegraveme peut se reacuteveacuteler tregraves coucircteux
2 CREacuteER SON THEgraveME
MEacuteTHODE 1 VIA UN THEgraveME PREacuteSENT DANS LE CORE (BARTIK)
On fait une copie du thegraveme par deacutefaut Bartik (crsquoest-agrave-dire du reacutepertoire corethemesbartik)
On colle le reacutepertoire copieacute dans themescustom et on le renomme comme on le souhaiteAttention cependant Le thegraveme doit avoir un laquo nom machine raquo composeacute exclusivement de caractegraveres alphanumeacuteriques et de lsquo_rsquo (underscore)
Ici on choisira lsquoTHEMENAMErsquo
On renommez le fichier themescustomTHEMENAMEbartikinfoyml en themescustomTHEMENAMETHEMENAMEinfoyml (on nrsquooublie pas drsquoadapter eacutegalement le contenu du fichier infoyml)
On renomme tous les fichiers dont le nom comporte bartik par THEMENAME
Dans tous les fichiers on recherche les occurrences de la chaine lsquobartik et on les remplace par lsquoTHEMENAMErsquo
On vide TOUS les caches
Enfin on va dans Admin gt Apparence on active et deacutefini par deacutefaut notre nouveau thegraveme THEMENAME
On veacuterifie qursquoil nrsquoy a pas drsquoerreur en visitant par exemple la page drsquoaccueil
2 CREacuteER SON THEgraveME
MEacuteTHODE 2 VIA UN THEgraveME CONTIB AYANT UN STARTER (ZF) Certains thegravemes contrib proposent un laquo STARTER KIT raquo comme par exemple Bootstrap ou ZURB
Foundation
Dossier precirct a ecirctre copieacute colleacute pour faire un thegraveme enfant heacuteritant de ce dernier
On fait une copie du STARTER KIT
On colle le reacutepertoire copieacute dans themescustom et on le renomme comme on le souhaite
Etc
REMARQUE DANS LES DEUX CAS NE PAS OUBLIER DE PREacuteCISER LE lsquoBASE THEMErsquo DANS LE INFOYML
REMARQUE LE THEgraveME PARENT DOIT EcircTRE ACTIVEacute SI VOUS VOULEZ ACTIVER UN DE SES THEgraveMES ENFANT
JOBrsquoS DONE
Warcraft Human peon
2 CREacuteER SON THEgraveME
MAIShellip REVENONS SUR NOTRE FICHIER INFOYML
2 CREacuteER SON THEgraveME
THEMENAMEINFOYML
Librairies chargeacutees avec le thegraveme
Reacutegions du thegraveme
Informations du thegraveme
ET SUR LES FICHIERS DANS NOTRE DOSSIER lsquoTHEMENAMErsquo
2 CREacuteER SON THEgraveME gt THEMENAMEINFOYML
CONCREgraveTEMENT
NAMESCREENSHOTPNG
DESCRIPTION
1 ANATOMIE DrsquoUN THEgraveME gt _THEMENAME_INFOYML
CONCREgraveTEMENT
LOGOSVG
FAVICONICO
2 CREacuteER SON THEgraveME
DOCUMENTATION OFFICIELLEhttpswwwdrupalorgdocs8theming-drupal-8defining-a-theme-with-an-infoyml-file
Dans un fichier yml
LES POINTS Agrave RETENIR
libraries-override (optional) base theme (recommended) hidden (optional) engine (optional) logo (optional) screenshot (optional) regions (optional) regions_hidden (optional) features (optional) stylesheets-remove (deprecated) ckeditor_stylesheets (optional) name (required)
type (required) description (optional) package (optional) core (required) php (optional) version (optional) libraries (optional)
Mais surtout
Tabs are NOT allowed Use spaces ONLY
Properties and lists MUST be indented by two (2) spaces
AJOUTER DES ASSETS (CSSJS)
3
3 AJOUTER DES ASSETS
CHARGER DES FICHIERS CSS amp JSCe que dit la documentation
httpswwwdrupalorgdocs8themingadding-stylesheets-css-and-javascript-js-to-a-drupal-8-theme
1 Save the CSS or JS to a file using the proper naming conventions and file structure
2 Define a library which registers these CSSJS files with your theme
3 Attach the library to all pages to specific Twig templates or target specific pages via a render element in a preprocess function
3 AJOUTER DES ASSETS
EN PRATIQUE
Lrsquoajout de fichier de CSS et de JS se fait via un systegraveme de librairie (bibliothegraveque)
Il faut tout drsquoabord deacuteclarer une librairie (ou en utiliser une existante) dans le fichier THEMENAMElibrariesyml puis demander au systegraveme de la charger Ceci peut ecirctre fait depuis le fichier THEMENAMEinfoyml
3 AJOUTER DES ASSETS
CHARGER UNE LIBRAIRIE
Lorsqursquoune librairie est appeleacutee depuis le fichier THEMENAMEinfoyml alors elle est chargeacutee sur toutes les pages degraves lors que le thegraveme est utiliseacute
Il est possible de charger sous condition une bibliothegraveque Pour cela plusieurs techniques sont disponibles
depuis un fichier de template
en utilisant le hook_page_attachments_alter()
en utilisant une fonction de preprocess
3 AJOUTER DES ASSETS
CHARGER UNE LIBRAIRIE
Directement depuis un fichier de template directement par exemple dans le fichier geacuterant lrsquoaffichage des blocs
attach_library(lsquodrupal_franceblocksrsquo)
3 AJOUTER DES ASSETS
CHARGER UNE LIBRAIRIE
Chargement drsquoune librairie depuis le fichier themesTHEMENAMETHEMENAMEtheme en utilisant la fonction de hook hook_page_attachments_alter()
Implements hook_page_attachments_alter() function drupal_france_page_attachments_alter(array amp$attachments) $attachments[attached][library][] = drupal_franceglobal
3 AJOUTER DES ASSETS
CHARGER UNE LIBRAIRIE
Chargement drsquoune librairie depuis le fichier themesTHEMENAMETHEMENAMEtheme en utilisant une fonction de preprocess
Implements hook_preprocess_HOOK() for page templates function drupal_france_preprocess_page(array amp$variables) $variables[attached][library][] = drupal_franceglobal
LES FICHIERS TEMPLATES
4
4 LES TEMPLATES
Agrave QUOI CcedilA SERT
Les templates constituent la structure des pages du sitesEn fait de chacun des eacuteleacutements qui la composent
Ce sont des fichiers html (balises ltdivgt lth1gt ltagt) avec du code Twig permettant drsquoafficher les eacuteleacutements (sous forme de variables) creacuteeacutes par Drupal
Chaque type drsquoeacuteleacutement du site possegravede son propre template
4 LES TEMPLATES
PAR EXEMPLE (CrsquoEST DU VRAI CODE)
ltdiv class=l-main row expandedgt ltmain id=main class= main_grid role=maingt if pagehighlighted spaceless pagehighlighted endspaceless endif lta id=main-contentgtltagt if breadcrumb breadcrumb endif ltsectiongt pagecontent ltsectiongt ltmaingt if pagesidebar_first ltdiv id=sidebar-first class= sidebar_first_grid column sidebargt pagesidebar_first ltdivgt endif if pagesidebar_second ltdiv id=sidebar-second class= sidebar_sec_grid column sidebargt pagesidebar_second ltdivgt endif ltdivgt
4 LES TEMPLATES
IMBRICATION DES TEMPLATES
Imaginons lrsquoappel drsquoune page de billet de blog
Et maintenant imaginons le parcours drsquoimbrication de templates pour depuis la balise lthtmlgt jusqursquoagrave la ltdivgt contenant un commentaire sous ce billet de blog
4 LES TEMPLATES
FROM ltHTMLgt TO ltDIV CLASS=lsquoCOMMENTrsquogthtmlhtmltwig
pagehtmltwig
regionhtmltwig
blockhtmltwig
nodehtmltwig nodehtmltwig
fieldhtmltwig
comment-wrapperhtmltwig
commenthtmltwig
4 LES TEMPLATES
LES TEMPLATES DEacuteRIVEacuteES
Les templates deacuteriveacutees sont des templates utiliseacutees dans un contexte preacutecis
Crsquoest le nom de la template qui indique agrave Drupal quand lrsquoutiliser
Toutes ces templates sont optionnelles et reconnues automatiquement par Drupal en fonction de leurs noms
Si des templates ne sont pas preacutesentes dans le thegraveme alors Drupal utilise ceux par deacutefaut (corethemes)
On parle de ldquotemplate deacuteriveacuteeldquo de ldquosuggestion de templateldquo ou de ldquotemplates suggeacutereacuteesldquo
Il faut vider le cache de Drupal lorsque lrsquoon ajoute des templates au thegraveme
Documentation httpswwwdrupalorgdocs8themingtwigtwig-template-naming-conventions
4 LES TEMPLATES
EXEMPLE DE SUGGESTIONS DE TEMPLATES
Template de page pagehtmltwig page--chemin--internehtmltwig sera utiliseacute lorsque lrsquoon appelle chemininterne
Ex page--fronthtmltwig cible la page drsquoaccueil
Ex page--cheminhtmltwig cible toutes les pages dont le chemin commence par chemin
Ex page--node--240htmltwig cible la page du noeud portant lrsquoid 240
Template de noeud nodehtmltwig node--type-de-noeudhtmltwig cible les noeuds de type type-de-noeud
Ex node--articlehtmltwig cible tous les noeuds de type article
4 LES TEMPLATES
TROUVER LES SUGGESTIONS
Dans le fichier wwwsitesdevelopmentservicesyml
Local development services
parameters httpresponsedebug_cacheability_headers true twigconfig debug true services cachebackendnull class DrupalCoreCacheNullBackendFactory
TWIG5
5 TWIG
UN MOTEUR DE TEMPLATE
Twig est capable drsquoafficher le contenu de nrsquoimporte quel type de variable (chaine tableau ou objet)
Il est possible de faire des boucles des conditionshellip
Chaque variable peut ecirctre filtreacutee avant drsquoecirctre afficheacutee
Les chaines peuvent ecirctre rendues traduites (la traduction est alors faite via le back-office de Drupal)
5 TWIG
LES BASES
Affiche le contenu de la variable var var
Affiche le contenu de la proprieacuteteacute title de la variable node nodetitle
Conditions if var else endif
Commentaires commentaire
Traduction trans chaine endtrans
Fonctions speacutecifiques
url(lsquoroute_namersquo)
path(lsquoentitynodecanonicalrsquo lsquonodersquo nodeid)
Les modules Twig tweak ou encore Bamboo Twig proposent encore davantage de fonctions
5 TWIG
LES FILTRES Date date|format_date(lsquomediumrsquo)
Chaine
Echappement content (par deacutefaut)
Interpreacutetation du contenu de la variable texte|raw (attention )
Placeholder text|placeholder
Exclusion content|without(lsquolinksrsquo)
string|lower (upper eacutegalement)
class_name|clean_class
id_name|clean_id
Documentation httpswwwdrupalorgdocs8themingtwigfilters-modifying-variables-in-twig-templateshttpstwigsymfonycomdoc2x
5 TWIG
CONCREgraveTEMENT if pagefooter_first or pagefooter_middle or pagefooter_last ltdiv class=l-footer row expandedgt ltfooter class=row footer medium-up-2 large-up-3gt if pagefooter_first ltdiv id=footer-first class=columngt pagefooter_first ltdivgt endif if pagefooter_middle ltdiv id=footer-middle class=columngt pagefooter_middle ltdivgt endif if pagefooter_last ltdiv id=footer-last class=columngt pagefooter_last ltdivgt endif ltfootergt ltdivgt endif ltdiv class=bottom-bar panel hiddengt ltdiv class=rowgt ltdiv class=large-12 columngt ampcopy now|date(Y) site_name All rights reserved|t ltdivgt ltdivgt ltdivgt
LES REacuteGIONS6
6 LES REacuteGIONS
STRUCTURE DE LA PAGE
adminstructureblock gt Demonstrate block regions
6 LES REacuteGIONS
DEacuteFINITION ET RENDU DES REacuteGIONS
Les reacutegions doivent ecirctre deacutefinies dans le fichier THEMENAMEinfoyml
Elles doivent ecirctre appeleacutees obligatoirement dans pagehtmltwig
6 LES REacuteGIONS
THEMENAMEINFOYML
PAGEHTMLTWIG
LE RENDU DU CONTENU
7
7 RENDU DU CONTENU
LrsquoAFFICHAGE DES CHAMPS
Pour chaque type de contenu on peut reacutegler lrsquoaffichage des champs sur adminstructuretypesmanagecontent-typedisplay ougrave content-type est le nom machine du type de contenu
Il est possible de modifier lrsquoordre des champs lrsquoapparence des eacutetiquettes le format du champ
Les reacuteglages disponibles varient en fonction du type de champ
Les champs Texte peuvent ecirctre coupeacutes
Les champs Image peuvent ecirctre afficheacutes sous forme drsquoimage drsquoURL de fichier
Les champs Date peuvent utiliser un format diffeacuterent
Ces reacuteglages peuvent ecirctre diffeacuterents selon le mode drsquoaffichage (modes ldquoPar deacutefautldquo et ldquoAccrocheldquo) =gt Cela permet par exemple de masquer un champ en mode ldquoAccrocheldquo et de lrsquoafficher en mode ldquoPar deacutefautldquo (noeud inteacutegral)
7 RENDU DU CONTENU
LrsquoAFFICHAGE DES IMAGES
Les images transmises par les utilisateurs ne sont jamais aux bonnes dimensions
Le module Image (core) va nous permettre de preacutedeacutefinir des dimensions sous forme de styles drsquoimage par exemple
Vignette 70px x 110px (mise agrave lrsquoeacutechelle)
Normal 200px x 300px (mise agrave lrsquoeacutechelle et recadrage)
Ces dimensions pourront ensuite ecirctre appliqueacutees automatiquement aux champs Image depuis lrsquoeacutecran ldquogeacuterer lrsquoaffichageldquo vu preacuteceacutedemment
7 RENDU DU CONTENU
STYLE DrsquoIMAGE
7 RENDU DU CONTENU
STYLE DrsquoIMAGE
7 RENDU DU CONTENU
ALLER PLUS LOIN La gestion et la manipulation des champs est cependant
limiteacutee dans lrsquointerface drsquoadministration
On est parfois obligeacutes de modifier le code du template correspondant agrave notre champ ou type de contenu
Les reacuteglages de lrsquoadmin sont toujours pris en compte Par exemple les styles drsquoimage choisis seront ceux utiliseacutes mecircme si lrsquoon modifie le template
7 RENDU DU CONTENU
OUgrave SONT LES CHAMPS
Dans le fichier de template des noeuds (nodehtmltwig) on nrsquoa pas directement accegraves aux champs
Crsquoest la variable content qui contient tous les champs que lrsquoon affiche et en particulier ceux ajouteacutes via Field
Comment faire pour reacutecupeacuterer les champs un par un afin de les preacutesenter diffeacuteremment
7 RENDU DU CONTENU
LA VARIABLE lsquoCONTENTrsquo
Tout le contenu drsquoun noeud est afficheacute gracircce agrave la ligne content|without(comment links)
Pour connaitre le contenu de content on utilise la fonction kint() kint(content)
On deacutecouvre alors lrsquoensemble des champs et leurs proprieacuteteacutes qui sont afficheacutees en haut de page sous forme de var_dump()
On peut afficher seacutepareacutement chacun drsquoentre eux avec le code suivant contentnom_du_champ nodecreatedtime
7 RENDU DU CONTENU
NODE DE TYPE lsquoNEWSrsquo ET FORMAT lsquoTEASERrsquo
PREPROCESS8
8 PREPROCESS
FONCTIONS DE PREPROCESS
Pour chaque template on dispose de variables que lrsquoon affiche avec le formatage voulu
Ces variables sont creacuteeacutees en amont des templates dans lesquelles elles sont utiliseacutees
On dispose de fonctions dites de preprocess qui permettent de fabriquer les variables qui sont utiliseacutees dans les templates
Il est possible drsquoeacutetendre ces fonctions pour modifier les variables envoyeacutees aux templates ou en creacuteer de nouvelles
Pour ajouter une fonction de preprocess il faut la nommer comme suit THEMENAME_preprocess_HOOK() Par exemple drupal_france_preprocess_block()
8 PREPROCESS
FONCTIONS DE PREPROCESS
Pour chaque template on dispose de variables que lrsquoon affiche avec le formatage voulu
Ces variables sont creacuteeacutees en amont des templates dans lesquelles elles sont utiliseacutees
On dispose de fonctions dites de preprocess qui permettent de fabriquer les variables qui sont utiliseacutees dans les templates
Il est possible drsquoeacutetendre ces fonctions pour modifier les variables envoyeacutees aux templates ou en creacuteer de nouvelles
Pour ajouter une fonction de preprocess il faut la nommer comme suit THEMENAME_preprocess_HOOK() Par exemple drupal_france_preprocess_block()
8 PREPROCESS
LA VARIABLE lsquo$VARIABLESrsquo
Drupal
Preprocess en amont(core modules)
Preprocess du thegraveme
TemplateCreacuteation de $variables
$variables
$variables
$variables
$variables
En mode super simplifieacute
8 PREPROCESS
APPELLER UN PREPROCESS
Diffeacuterentes fonctions de preprocess peuvent ecirctre appeleacutees permettant agrave tous les modules et thegravemes de modifier les variables passeacutees aux templates Ces fonctions sont les suivantes pour le hook de thegraveme HOOK
template_preprocess_HOOK(array amp$variables)
MODULENAME_preprocess(array amp$variables $hook)
MODULENAME_preprocess_HOOK(array amp$variables)
THEMENAME_preprocess(array amp$variables $hook)
THEMENAME_preprocess_HOOK(array amp$variables)
8 PREPROCESS
CONCREgraveTEMENT Implements hook_preprocess_menu__account() function drupal_france_preprocess_menu__account(amp$variables) if (isset($variables[items][drupalfr_useraccountcompte])) $variables[items][drupalfr_useraccountcompte][attributes]-gtaddClass([ button primary button--user-account ])
$variables[items][drupalfr_useraccountcompte][title] = new FormattableMarkup( lti class=fa fa-user-circle-o aria-hidden=truegtltigtltspan class=sr-onlygtoriginal_titleltspangt [ original_title =gt $variables[items][drupalfr_useraccountcompte][title] ] )
JAVASCRIPT9
9 JAVASCRIPT
DRUPAL amp JAVASCRIPT Drupal integravegre de nombreuses libraries javascript (jQuery Modernizrhellip) et propose
eacutegalement des libraries drsquoutilitaires (coredrupal coredrupalSettings drupalajax drupalformhellip)
Par exemple Drupal 8 embarque
jQuery 321
jQuery UI 1121
Chaque librairie deacutefinit ses deacutependances jQuery UI deacutepend de jQuery par exemple
Lorsque lrsquoon utilise une librairie depuis un script custom il ne faut pas oublier de deacuteclarer cette deacutependance Pensez agrave tester en anonyme car aucune libraire nrsquoest chargeacutee par deacutefaut
Vous disposez de toutes les librairies deacutefinies dans le fichier corecorelibrairiesyml
9 JAVASCRIPT
CONCREgraveTEMENTPour pouvoir utiliser du code JS dans vos scripts avec Drupal la bonne pratique est drsquoencadrer votre code comme suit
file Shows status messages in a modal instead of inline (function ($ Drupal)
Displays status messages in a Foundation reveal modal DrupalbehaviorsfoundationStatusInReveal = attach function (context settings) $(status-messages)once(foundation-reveal)each(function() Move the status messages out of the highlighted region var $messages = $(this) var $region = $messagesparent() $messagesappendTo(body) $messagesfoundation(open)
This is required as this region will likely be empty after status messages are removed $regionhtml($regionhtml()replace(ng )) )
)(jQuery Drupal)
9 JAVASCRIPT
DRUPAL BEHAVIORS
Les scripts sont exeacutecuteacutes apregraves le chargement complet du DOM ($(document)ready() )Mais on a aussi parfois besoin de les reacute-exeacutecuter lorsque lrsquoon interagit avec la page (appel AJAX overlayhellip)
Pour ce faire il suffit drsquoattacher le script JS agrave lrsquoobjet Drupalbehaviors (librairie coredrupal) La fonction exeacutecuteacutee reccediloit 2 variables
context le DOM (le HTML chargeacute ou ajouteacute)
settings toutes les variables injecteacutees cocircteacute serveur
9 JAVASCRIPT
RAPPEL
Comme pour les fichiers de style les scripts JS doivent ecirctre deacuteclareacutes sous forme de bibliothegraveque via les fichiers THEMENAMEinfoyml et THEMENAMElibrariesyml
QUESTIONS 10
RTFM httpswwwdrupalorgdocs8theminghttpstwigsymfonycomdoc2x
MERCI Agrave VOUS
FlorisMoriceau
1 ANATOMIE DrsquoUN THEgraveME
THEMENAMEINFOYML
Librairies chargeacutees avec le thegraveme
Reacutegions du thegraveme
Informations du thegraveme
Remarque Lorsque vous travaillez avec ce fichier un `drush cr` srsquoimpose agrave chaque modification
CETTE REacuteGION EST OBLIGATOIRE
1 ANATOMIE DrsquoUN THEgraveME
LES FICHIERS CSS
Les fichiers css contiennent les feuilles de styles du thegraveme Crsquoest agrave lrsquoauteur du thegraveme de creacuteer ses propres fichiers css et de les reacutefeacuterencer en les
deacuteclarant comme librairies dans le fichier THEMENAMElibrariesyml Les fichiers css peuvent ecirctre nommeacutes librement mais il est recommandeacute de
respecter les conventions en vigueur Mettre tous les fichiers css dans un reacutepertoire css Utiliser stylecss pour les styles geacuteneacuteraux layoutcss pour les styles lieacutes agrave la
structure de pagehellip (Meacutethodologie SMACSS)
1 ANATOMIE DrsquoUN THEgraveME
LES FICHIERS JS
Les fichiers js contiennent les scripts (javascript) du thegraveme Crsquoest agrave lrsquoauteur du thegraveme de creacuteer ses propres fichiers js et de les reacutefeacuterencer en les
deacuteclarant comme librairies dans le fichier THEMENAMElibrariesyml Les fichiers js peuvent ecirctre nommeacutes librement Par deacutefaut aucune librairie javascript nrsquoest chargeacutee pour les utilisateurs anonymes
pas mecircme jQuery
1 ANATOMIE DrsquoUN THEgraveME
FICHIERS DE TEMPLATE
Les fichiers avec lrsquoextension htmltwig sont les templates Un template contient un meacutelange de balises HTML et de code Twig Tout thegraveme Drupal contient geacuteneacuteralement ces 3 templates de base pagehtmltwig deacutefinit la structure geacuteneacuterale de toutes les pages
(emplacement des reacutegions) nodehtmltwig deacutefinit la structure des noeuds blockhtmltwig deacutefinit la structure des blocs
Par deacutefaut la template pagehtmltwig sert agrave afficher toutes les pages nodehtmltwig sert agrave afficher tous les noeuds Une modification dans un de ces templates impacte donc toutes les pages tous les noeuds Nous verrons plus tard comment creacuteer des templates plus speacutecifiques
Ces fichiers sont agrave placer dans le reacutepertoire templates
1 ANATOMIE DrsquoUN THEgraveME
THEMENAMETHEME
Le fichier monthemetheme permet drsquoajouter du code PHP additionnel speacutecifique au thegraveme
Ce fichier est facultatif mais il doit ecirctre obligatoirement placeacute agrave la racine du thegraveme srsquoil existe
Il contient des fonctions de preprocess que lrsquoon souhaite eacutetendre (voir plus loin) ainsi qursquoun certain nombre de fonctions de hook
Ce fichier est automatiquement reconnu et chargeacute par Drupal
1 ANATOMIE DrsquoUN THEgraveMETEXTE
FICHIERS IMAGE
Drupal nrsquoutilise pas de reacutepertoire speacutecifique pour stocker les images drsquoun thegraveme
La bonne pratique est de creacuteer un sous-dossier images (ou imghellip) dans le reacutepertoire du thegraveme mais on peut srsquoorganiser autrement si neacutecessaire
Dans tous les cas veiller agrave utiliser les bons chemins pour reacutefeacuterencer les images
CREacuteER SON THEgraveME (Agrave PARTIR DrsquoUN THEgraveME EXISTANT)
2
2 CREacuteER SON THEgraveME
OPTIONS DE PERSONNALISATION
Dans la section Apparence du back-office les personnalisations sont tregraves limiteacutees on peut seulement
Changer le logo
AfficherMasquer certains eacuteleacutements comme
Le Nom du site qui apparaicirct dans la reacutegion ldquoen-tecircteldquo
Les portraits utilisateur
Le slogan du site
Changer lrsquoicocircne de raccourcis
SI ON DEacuteSIRE PLUS DrsquoOUTILS DE PERSONNALISATION IL FAUT LES CODER
ET DONC CREacuteER SON PROPRE THEgraveME
2 CREacuteER SON THEgraveME
2 CREacuteER SON THEgraveME
POUR CREacuteER SON THEgraveME PLUSIEURS POSSIBILITEacuteS Partir de zeacutero
Possible mais fastidieux (Ne faites pas ccedila Ou alors seulement sur un side project personnel qui nrsquoa pas de deadline pour la beauteacute du geste et pour apprendre tous les rouages du templating)
Partir drsquoun thegraveme de base Un thegraveme de base est un thegraveme que lrsquoon va eacutetendre en heacuteritant de tout son code On dispose drsquoun systegraveme de thegravemes parentenfant Exemples Omega Zen Bootstraphellip ZURB Foundation
Partir drsquoun thegraveme ldquoprecirct-agrave-lrsquoemploildquo Par exemple un thegraveme acheteacute sur themeforestcom Lrsquoideacutee ici est de limiter au maximum les personnalisations afin de gagner du tempsAttention Sortir des fonctionnaliteacutes offertes par ce genre de thegraveme peut se reacuteveacuteler tregraves coucircteux
2 CREacuteER SON THEgraveME
MEacuteTHODE 1 VIA UN THEgraveME PREacuteSENT DANS LE CORE (BARTIK)
On fait une copie du thegraveme par deacutefaut Bartik (crsquoest-agrave-dire du reacutepertoire corethemesbartik)
On colle le reacutepertoire copieacute dans themescustom et on le renomme comme on le souhaiteAttention cependant Le thegraveme doit avoir un laquo nom machine raquo composeacute exclusivement de caractegraveres alphanumeacuteriques et de lsquo_rsquo (underscore)
Ici on choisira lsquoTHEMENAMErsquo
On renommez le fichier themescustomTHEMENAMEbartikinfoyml en themescustomTHEMENAMETHEMENAMEinfoyml (on nrsquooublie pas drsquoadapter eacutegalement le contenu du fichier infoyml)
On renomme tous les fichiers dont le nom comporte bartik par THEMENAME
Dans tous les fichiers on recherche les occurrences de la chaine lsquobartik et on les remplace par lsquoTHEMENAMErsquo
On vide TOUS les caches
Enfin on va dans Admin gt Apparence on active et deacutefini par deacutefaut notre nouveau thegraveme THEMENAME
On veacuterifie qursquoil nrsquoy a pas drsquoerreur en visitant par exemple la page drsquoaccueil
2 CREacuteER SON THEgraveME
MEacuteTHODE 2 VIA UN THEgraveME CONTIB AYANT UN STARTER (ZF) Certains thegravemes contrib proposent un laquo STARTER KIT raquo comme par exemple Bootstrap ou ZURB
Foundation
Dossier precirct a ecirctre copieacute colleacute pour faire un thegraveme enfant heacuteritant de ce dernier
On fait une copie du STARTER KIT
On colle le reacutepertoire copieacute dans themescustom et on le renomme comme on le souhaite
Etc
REMARQUE DANS LES DEUX CAS NE PAS OUBLIER DE PREacuteCISER LE lsquoBASE THEMErsquo DANS LE INFOYML
REMARQUE LE THEgraveME PARENT DOIT EcircTRE ACTIVEacute SI VOUS VOULEZ ACTIVER UN DE SES THEgraveMES ENFANT
JOBrsquoS DONE
Warcraft Human peon
2 CREacuteER SON THEgraveME
MAIShellip REVENONS SUR NOTRE FICHIER INFOYML
2 CREacuteER SON THEgraveME
THEMENAMEINFOYML
Librairies chargeacutees avec le thegraveme
Reacutegions du thegraveme
Informations du thegraveme
ET SUR LES FICHIERS DANS NOTRE DOSSIER lsquoTHEMENAMErsquo
2 CREacuteER SON THEgraveME gt THEMENAMEINFOYML
CONCREgraveTEMENT
NAMESCREENSHOTPNG
DESCRIPTION
1 ANATOMIE DrsquoUN THEgraveME gt _THEMENAME_INFOYML
CONCREgraveTEMENT
LOGOSVG
FAVICONICO
2 CREacuteER SON THEgraveME
DOCUMENTATION OFFICIELLEhttpswwwdrupalorgdocs8theming-drupal-8defining-a-theme-with-an-infoyml-file
Dans un fichier yml
LES POINTS Agrave RETENIR
libraries-override (optional) base theme (recommended) hidden (optional) engine (optional) logo (optional) screenshot (optional) regions (optional) regions_hidden (optional) features (optional) stylesheets-remove (deprecated) ckeditor_stylesheets (optional) name (required)
type (required) description (optional) package (optional) core (required) php (optional) version (optional) libraries (optional)
Mais surtout
Tabs are NOT allowed Use spaces ONLY
Properties and lists MUST be indented by two (2) spaces
AJOUTER DES ASSETS (CSSJS)
3
3 AJOUTER DES ASSETS
CHARGER DES FICHIERS CSS amp JSCe que dit la documentation
httpswwwdrupalorgdocs8themingadding-stylesheets-css-and-javascript-js-to-a-drupal-8-theme
1 Save the CSS or JS to a file using the proper naming conventions and file structure
2 Define a library which registers these CSSJS files with your theme
3 Attach the library to all pages to specific Twig templates or target specific pages via a render element in a preprocess function
3 AJOUTER DES ASSETS
EN PRATIQUE
Lrsquoajout de fichier de CSS et de JS se fait via un systegraveme de librairie (bibliothegraveque)
Il faut tout drsquoabord deacuteclarer une librairie (ou en utiliser une existante) dans le fichier THEMENAMElibrariesyml puis demander au systegraveme de la charger Ceci peut ecirctre fait depuis le fichier THEMENAMEinfoyml
3 AJOUTER DES ASSETS
CHARGER UNE LIBRAIRIE
Lorsqursquoune librairie est appeleacutee depuis le fichier THEMENAMEinfoyml alors elle est chargeacutee sur toutes les pages degraves lors que le thegraveme est utiliseacute
Il est possible de charger sous condition une bibliothegraveque Pour cela plusieurs techniques sont disponibles
depuis un fichier de template
en utilisant le hook_page_attachments_alter()
en utilisant une fonction de preprocess
3 AJOUTER DES ASSETS
CHARGER UNE LIBRAIRIE
Directement depuis un fichier de template directement par exemple dans le fichier geacuterant lrsquoaffichage des blocs
attach_library(lsquodrupal_franceblocksrsquo)
3 AJOUTER DES ASSETS
CHARGER UNE LIBRAIRIE
Chargement drsquoune librairie depuis le fichier themesTHEMENAMETHEMENAMEtheme en utilisant la fonction de hook hook_page_attachments_alter()
Implements hook_page_attachments_alter() function drupal_france_page_attachments_alter(array amp$attachments) $attachments[attached][library][] = drupal_franceglobal
3 AJOUTER DES ASSETS
CHARGER UNE LIBRAIRIE
Chargement drsquoune librairie depuis le fichier themesTHEMENAMETHEMENAMEtheme en utilisant une fonction de preprocess
Implements hook_preprocess_HOOK() for page templates function drupal_france_preprocess_page(array amp$variables) $variables[attached][library][] = drupal_franceglobal
LES FICHIERS TEMPLATES
4
4 LES TEMPLATES
Agrave QUOI CcedilA SERT
Les templates constituent la structure des pages du sitesEn fait de chacun des eacuteleacutements qui la composent
Ce sont des fichiers html (balises ltdivgt lth1gt ltagt) avec du code Twig permettant drsquoafficher les eacuteleacutements (sous forme de variables) creacuteeacutes par Drupal
Chaque type drsquoeacuteleacutement du site possegravede son propre template
4 LES TEMPLATES
PAR EXEMPLE (CrsquoEST DU VRAI CODE)
ltdiv class=l-main row expandedgt ltmain id=main class= main_grid role=maingt if pagehighlighted spaceless pagehighlighted endspaceless endif lta id=main-contentgtltagt if breadcrumb breadcrumb endif ltsectiongt pagecontent ltsectiongt ltmaingt if pagesidebar_first ltdiv id=sidebar-first class= sidebar_first_grid column sidebargt pagesidebar_first ltdivgt endif if pagesidebar_second ltdiv id=sidebar-second class= sidebar_sec_grid column sidebargt pagesidebar_second ltdivgt endif ltdivgt
4 LES TEMPLATES
IMBRICATION DES TEMPLATES
Imaginons lrsquoappel drsquoune page de billet de blog
Et maintenant imaginons le parcours drsquoimbrication de templates pour depuis la balise lthtmlgt jusqursquoagrave la ltdivgt contenant un commentaire sous ce billet de blog
4 LES TEMPLATES
FROM ltHTMLgt TO ltDIV CLASS=lsquoCOMMENTrsquogthtmlhtmltwig
pagehtmltwig
regionhtmltwig
blockhtmltwig
nodehtmltwig nodehtmltwig
fieldhtmltwig
comment-wrapperhtmltwig
commenthtmltwig
4 LES TEMPLATES
LES TEMPLATES DEacuteRIVEacuteES
Les templates deacuteriveacutees sont des templates utiliseacutees dans un contexte preacutecis
Crsquoest le nom de la template qui indique agrave Drupal quand lrsquoutiliser
Toutes ces templates sont optionnelles et reconnues automatiquement par Drupal en fonction de leurs noms
Si des templates ne sont pas preacutesentes dans le thegraveme alors Drupal utilise ceux par deacutefaut (corethemes)
On parle de ldquotemplate deacuteriveacuteeldquo de ldquosuggestion de templateldquo ou de ldquotemplates suggeacutereacuteesldquo
Il faut vider le cache de Drupal lorsque lrsquoon ajoute des templates au thegraveme
Documentation httpswwwdrupalorgdocs8themingtwigtwig-template-naming-conventions
4 LES TEMPLATES
EXEMPLE DE SUGGESTIONS DE TEMPLATES
Template de page pagehtmltwig page--chemin--internehtmltwig sera utiliseacute lorsque lrsquoon appelle chemininterne
Ex page--fronthtmltwig cible la page drsquoaccueil
Ex page--cheminhtmltwig cible toutes les pages dont le chemin commence par chemin
Ex page--node--240htmltwig cible la page du noeud portant lrsquoid 240
Template de noeud nodehtmltwig node--type-de-noeudhtmltwig cible les noeuds de type type-de-noeud
Ex node--articlehtmltwig cible tous les noeuds de type article
4 LES TEMPLATES
TROUVER LES SUGGESTIONS
Dans le fichier wwwsitesdevelopmentservicesyml
Local development services
parameters httpresponsedebug_cacheability_headers true twigconfig debug true services cachebackendnull class DrupalCoreCacheNullBackendFactory
TWIG5
5 TWIG
UN MOTEUR DE TEMPLATE
Twig est capable drsquoafficher le contenu de nrsquoimporte quel type de variable (chaine tableau ou objet)
Il est possible de faire des boucles des conditionshellip
Chaque variable peut ecirctre filtreacutee avant drsquoecirctre afficheacutee
Les chaines peuvent ecirctre rendues traduites (la traduction est alors faite via le back-office de Drupal)
5 TWIG
LES BASES
Affiche le contenu de la variable var var
Affiche le contenu de la proprieacuteteacute title de la variable node nodetitle
Conditions if var else endif
Commentaires commentaire
Traduction trans chaine endtrans
Fonctions speacutecifiques
url(lsquoroute_namersquo)
path(lsquoentitynodecanonicalrsquo lsquonodersquo nodeid)
Les modules Twig tweak ou encore Bamboo Twig proposent encore davantage de fonctions
5 TWIG
LES FILTRES Date date|format_date(lsquomediumrsquo)
Chaine
Echappement content (par deacutefaut)
Interpreacutetation du contenu de la variable texte|raw (attention )
Placeholder text|placeholder
Exclusion content|without(lsquolinksrsquo)
string|lower (upper eacutegalement)
class_name|clean_class
id_name|clean_id
Documentation httpswwwdrupalorgdocs8themingtwigfilters-modifying-variables-in-twig-templateshttpstwigsymfonycomdoc2x
5 TWIG
CONCREgraveTEMENT if pagefooter_first or pagefooter_middle or pagefooter_last ltdiv class=l-footer row expandedgt ltfooter class=row footer medium-up-2 large-up-3gt if pagefooter_first ltdiv id=footer-first class=columngt pagefooter_first ltdivgt endif if pagefooter_middle ltdiv id=footer-middle class=columngt pagefooter_middle ltdivgt endif if pagefooter_last ltdiv id=footer-last class=columngt pagefooter_last ltdivgt endif ltfootergt ltdivgt endif ltdiv class=bottom-bar panel hiddengt ltdiv class=rowgt ltdiv class=large-12 columngt ampcopy now|date(Y) site_name All rights reserved|t ltdivgt ltdivgt ltdivgt
LES REacuteGIONS6
6 LES REacuteGIONS
STRUCTURE DE LA PAGE
adminstructureblock gt Demonstrate block regions
6 LES REacuteGIONS
DEacuteFINITION ET RENDU DES REacuteGIONS
Les reacutegions doivent ecirctre deacutefinies dans le fichier THEMENAMEinfoyml
Elles doivent ecirctre appeleacutees obligatoirement dans pagehtmltwig
6 LES REacuteGIONS
THEMENAMEINFOYML
PAGEHTMLTWIG
LE RENDU DU CONTENU
7
7 RENDU DU CONTENU
LrsquoAFFICHAGE DES CHAMPS
Pour chaque type de contenu on peut reacutegler lrsquoaffichage des champs sur adminstructuretypesmanagecontent-typedisplay ougrave content-type est le nom machine du type de contenu
Il est possible de modifier lrsquoordre des champs lrsquoapparence des eacutetiquettes le format du champ
Les reacuteglages disponibles varient en fonction du type de champ
Les champs Texte peuvent ecirctre coupeacutes
Les champs Image peuvent ecirctre afficheacutes sous forme drsquoimage drsquoURL de fichier
Les champs Date peuvent utiliser un format diffeacuterent
Ces reacuteglages peuvent ecirctre diffeacuterents selon le mode drsquoaffichage (modes ldquoPar deacutefautldquo et ldquoAccrocheldquo) =gt Cela permet par exemple de masquer un champ en mode ldquoAccrocheldquo et de lrsquoafficher en mode ldquoPar deacutefautldquo (noeud inteacutegral)
7 RENDU DU CONTENU
LrsquoAFFICHAGE DES IMAGES
Les images transmises par les utilisateurs ne sont jamais aux bonnes dimensions
Le module Image (core) va nous permettre de preacutedeacutefinir des dimensions sous forme de styles drsquoimage par exemple
Vignette 70px x 110px (mise agrave lrsquoeacutechelle)
Normal 200px x 300px (mise agrave lrsquoeacutechelle et recadrage)
Ces dimensions pourront ensuite ecirctre appliqueacutees automatiquement aux champs Image depuis lrsquoeacutecran ldquogeacuterer lrsquoaffichageldquo vu preacuteceacutedemment
7 RENDU DU CONTENU
STYLE DrsquoIMAGE
7 RENDU DU CONTENU
STYLE DrsquoIMAGE
7 RENDU DU CONTENU
ALLER PLUS LOIN La gestion et la manipulation des champs est cependant
limiteacutee dans lrsquointerface drsquoadministration
On est parfois obligeacutes de modifier le code du template correspondant agrave notre champ ou type de contenu
Les reacuteglages de lrsquoadmin sont toujours pris en compte Par exemple les styles drsquoimage choisis seront ceux utiliseacutes mecircme si lrsquoon modifie le template
7 RENDU DU CONTENU
OUgrave SONT LES CHAMPS
Dans le fichier de template des noeuds (nodehtmltwig) on nrsquoa pas directement accegraves aux champs
Crsquoest la variable content qui contient tous les champs que lrsquoon affiche et en particulier ceux ajouteacutes via Field
Comment faire pour reacutecupeacuterer les champs un par un afin de les preacutesenter diffeacuteremment
7 RENDU DU CONTENU
LA VARIABLE lsquoCONTENTrsquo
Tout le contenu drsquoun noeud est afficheacute gracircce agrave la ligne content|without(comment links)
Pour connaitre le contenu de content on utilise la fonction kint() kint(content)
On deacutecouvre alors lrsquoensemble des champs et leurs proprieacuteteacutes qui sont afficheacutees en haut de page sous forme de var_dump()
On peut afficher seacutepareacutement chacun drsquoentre eux avec le code suivant contentnom_du_champ nodecreatedtime
7 RENDU DU CONTENU
NODE DE TYPE lsquoNEWSrsquo ET FORMAT lsquoTEASERrsquo
PREPROCESS8
8 PREPROCESS
FONCTIONS DE PREPROCESS
Pour chaque template on dispose de variables que lrsquoon affiche avec le formatage voulu
Ces variables sont creacuteeacutees en amont des templates dans lesquelles elles sont utiliseacutees
On dispose de fonctions dites de preprocess qui permettent de fabriquer les variables qui sont utiliseacutees dans les templates
Il est possible drsquoeacutetendre ces fonctions pour modifier les variables envoyeacutees aux templates ou en creacuteer de nouvelles
Pour ajouter une fonction de preprocess il faut la nommer comme suit THEMENAME_preprocess_HOOK() Par exemple drupal_france_preprocess_block()
8 PREPROCESS
FONCTIONS DE PREPROCESS
Pour chaque template on dispose de variables que lrsquoon affiche avec le formatage voulu
Ces variables sont creacuteeacutees en amont des templates dans lesquelles elles sont utiliseacutees
On dispose de fonctions dites de preprocess qui permettent de fabriquer les variables qui sont utiliseacutees dans les templates
Il est possible drsquoeacutetendre ces fonctions pour modifier les variables envoyeacutees aux templates ou en creacuteer de nouvelles
Pour ajouter une fonction de preprocess il faut la nommer comme suit THEMENAME_preprocess_HOOK() Par exemple drupal_france_preprocess_block()
8 PREPROCESS
LA VARIABLE lsquo$VARIABLESrsquo
Drupal
Preprocess en amont(core modules)
Preprocess du thegraveme
TemplateCreacuteation de $variables
$variables
$variables
$variables
$variables
En mode super simplifieacute
8 PREPROCESS
APPELLER UN PREPROCESS
Diffeacuterentes fonctions de preprocess peuvent ecirctre appeleacutees permettant agrave tous les modules et thegravemes de modifier les variables passeacutees aux templates Ces fonctions sont les suivantes pour le hook de thegraveme HOOK
template_preprocess_HOOK(array amp$variables)
MODULENAME_preprocess(array amp$variables $hook)
MODULENAME_preprocess_HOOK(array amp$variables)
THEMENAME_preprocess(array amp$variables $hook)
THEMENAME_preprocess_HOOK(array amp$variables)
8 PREPROCESS
CONCREgraveTEMENT Implements hook_preprocess_menu__account() function drupal_france_preprocess_menu__account(amp$variables) if (isset($variables[items][drupalfr_useraccountcompte])) $variables[items][drupalfr_useraccountcompte][attributes]-gtaddClass([ button primary button--user-account ])
$variables[items][drupalfr_useraccountcompte][title] = new FormattableMarkup( lti class=fa fa-user-circle-o aria-hidden=truegtltigtltspan class=sr-onlygtoriginal_titleltspangt [ original_title =gt $variables[items][drupalfr_useraccountcompte][title] ] )
JAVASCRIPT9
9 JAVASCRIPT
DRUPAL amp JAVASCRIPT Drupal integravegre de nombreuses libraries javascript (jQuery Modernizrhellip) et propose
eacutegalement des libraries drsquoutilitaires (coredrupal coredrupalSettings drupalajax drupalformhellip)
Par exemple Drupal 8 embarque
jQuery 321
jQuery UI 1121
Chaque librairie deacutefinit ses deacutependances jQuery UI deacutepend de jQuery par exemple
Lorsque lrsquoon utilise une librairie depuis un script custom il ne faut pas oublier de deacuteclarer cette deacutependance Pensez agrave tester en anonyme car aucune libraire nrsquoest chargeacutee par deacutefaut
Vous disposez de toutes les librairies deacutefinies dans le fichier corecorelibrairiesyml
9 JAVASCRIPT
CONCREgraveTEMENTPour pouvoir utiliser du code JS dans vos scripts avec Drupal la bonne pratique est drsquoencadrer votre code comme suit
file Shows status messages in a modal instead of inline (function ($ Drupal)
Displays status messages in a Foundation reveal modal DrupalbehaviorsfoundationStatusInReveal = attach function (context settings) $(status-messages)once(foundation-reveal)each(function() Move the status messages out of the highlighted region var $messages = $(this) var $region = $messagesparent() $messagesappendTo(body) $messagesfoundation(open)
This is required as this region will likely be empty after status messages are removed $regionhtml($regionhtml()replace(ng )) )
)(jQuery Drupal)
9 JAVASCRIPT
DRUPAL BEHAVIORS
Les scripts sont exeacutecuteacutes apregraves le chargement complet du DOM ($(document)ready() )Mais on a aussi parfois besoin de les reacute-exeacutecuter lorsque lrsquoon interagit avec la page (appel AJAX overlayhellip)
Pour ce faire il suffit drsquoattacher le script JS agrave lrsquoobjet Drupalbehaviors (librairie coredrupal) La fonction exeacutecuteacutee reccediloit 2 variables
context le DOM (le HTML chargeacute ou ajouteacute)
settings toutes les variables injecteacutees cocircteacute serveur
9 JAVASCRIPT
RAPPEL
Comme pour les fichiers de style les scripts JS doivent ecirctre deacuteclareacutes sous forme de bibliothegraveque via les fichiers THEMENAMEinfoyml et THEMENAMElibrariesyml
QUESTIONS 10
RTFM httpswwwdrupalorgdocs8theminghttpstwigsymfonycomdoc2x
MERCI Agrave VOUS
FlorisMoriceau
1 ANATOMIE DrsquoUN THEgraveME
LES FICHIERS CSS
Les fichiers css contiennent les feuilles de styles du thegraveme Crsquoest agrave lrsquoauteur du thegraveme de creacuteer ses propres fichiers css et de les reacutefeacuterencer en les
deacuteclarant comme librairies dans le fichier THEMENAMElibrariesyml Les fichiers css peuvent ecirctre nommeacutes librement mais il est recommandeacute de
respecter les conventions en vigueur Mettre tous les fichiers css dans un reacutepertoire css Utiliser stylecss pour les styles geacuteneacuteraux layoutcss pour les styles lieacutes agrave la
structure de pagehellip (Meacutethodologie SMACSS)
1 ANATOMIE DrsquoUN THEgraveME
LES FICHIERS JS
Les fichiers js contiennent les scripts (javascript) du thegraveme Crsquoest agrave lrsquoauteur du thegraveme de creacuteer ses propres fichiers js et de les reacutefeacuterencer en les
deacuteclarant comme librairies dans le fichier THEMENAMElibrariesyml Les fichiers js peuvent ecirctre nommeacutes librement Par deacutefaut aucune librairie javascript nrsquoest chargeacutee pour les utilisateurs anonymes
pas mecircme jQuery
1 ANATOMIE DrsquoUN THEgraveME
FICHIERS DE TEMPLATE
Les fichiers avec lrsquoextension htmltwig sont les templates Un template contient un meacutelange de balises HTML et de code Twig Tout thegraveme Drupal contient geacuteneacuteralement ces 3 templates de base pagehtmltwig deacutefinit la structure geacuteneacuterale de toutes les pages
(emplacement des reacutegions) nodehtmltwig deacutefinit la structure des noeuds blockhtmltwig deacutefinit la structure des blocs
Par deacutefaut la template pagehtmltwig sert agrave afficher toutes les pages nodehtmltwig sert agrave afficher tous les noeuds Une modification dans un de ces templates impacte donc toutes les pages tous les noeuds Nous verrons plus tard comment creacuteer des templates plus speacutecifiques
Ces fichiers sont agrave placer dans le reacutepertoire templates
1 ANATOMIE DrsquoUN THEgraveME
THEMENAMETHEME
Le fichier monthemetheme permet drsquoajouter du code PHP additionnel speacutecifique au thegraveme
Ce fichier est facultatif mais il doit ecirctre obligatoirement placeacute agrave la racine du thegraveme srsquoil existe
Il contient des fonctions de preprocess que lrsquoon souhaite eacutetendre (voir plus loin) ainsi qursquoun certain nombre de fonctions de hook
Ce fichier est automatiquement reconnu et chargeacute par Drupal
1 ANATOMIE DrsquoUN THEgraveMETEXTE
FICHIERS IMAGE
Drupal nrsquoutilise pas de reacutepertoire speacutecifique pour stocker les images drsquoun thegraveme
La bonne pratique est de creacuteer un sous-dossier images (ou imghellip) dans le reacutepertoire du thegraveme mais on peut srsquoorganiser autrement si neacutecessaire
Dans tous les cas veiller agrave utiliser les bons chemins pour reacutefeacuterencer les images
CREacuteER SON THEgraveME (Agrave PARTIR DrsquoUN THEgraveME EXISTANT)
2
2 CREacuteER SON THEgraveME
OPTIONS DE PERSONNALISATION
Dans la section Apparence du back-office les personnalisations sont tregraves limiteacutees on peut seulement
Changer le logo
AfficherMasquer certains eacuteleacutements comme
Le Nom du site qui apparaicirct dans la reacutegion ldquoen-tecircteldquo
Les portraits utilisateur
Le slogan du site
Changer lrsquoicocircne de raccourcis
SI ON DEacuteSIRE PLUS DrsquoOUTILS DE PERSONNALISATION IL FAUT LES CODER
ET DONC CREacuteER SON PROPRE THEgraveME
2 CREacuteER SON THEgraveME
2 CREacuteER SON THEgraveME
POUR CREacuteER SON THEgraveME PLUSIEURS POSSIBILITEacuteS Partir de zeacutero
Possible mais fastidieux (Ne faites pas ccedila Ou alors seulement sur un side project personnel qui nrsquoa pas de deadline pour la beauteacute du geste et pour apprendre tous les rouages du templating)
Partir drsquoun thegraveme de base Un thegraveme de base est un thegraveme que lrsquoon va eacutetendre en heacuteritant de tout son code On dispose drsquoun systegraveme de thegravemes parentenfant Exemples Omega Zen Bootstraphellip ZURB Foundation
Partir drsquoun thegraveme ldquoprecirct-agrave-lrsquoemploildquo Par exemple un thegraveme acheteacute sur themeforestcom Lrsquoideacutee ici est de limiter au maximum les personnalisations afin de gagner du tempsAttention Sortir des fonctionnaliteacutes offertes par ce genre de thegraveme peut se reacuteveacuteler tregraves coucircteux
2 CREacuteER SON THEgraveME
MEacuteTHODE 1 VIA UN THEgraveME PREacuteSENT DANS LE CORE (BARTIK)
On fait une copie du thegraveme par deacutefaut Bartik (crsquoest-agrave-dire du reacutepertoire corethemesbartik)
On colle le reacutepertoire copieacute dans themescustom et on le renomme comme on le souhaiteAttention cependant Le thegraveme doit avoir un laquo nom machine raquo composeacute exclusivement de caractegraveres alphanumeacuteriques et de lsquo_rsquo (underscore)
Ici on choisira lsquoTHEMENAMErsquo
On renommez le fichier themescustomTHEMENAMEbartikinfoyml en themescustomTHEMENAMETHEMENAMEinfoyml (on nrsquooublie pas drsquoadapter eacutegalement le contenu du fichier infoyml)
On renomme tous les fichiers dont le nom comporte bartik par THEMENAME
Dans tous les fichiers on recherche les occurrences de la chaine lsquobartik et on les remplace par lsquoTHEMENAMErsquo
On vide TOUS les caches
Enfin on va dans Admin gt Apparence on active et deacutefini par deacutefaut notre nouveau thegraveme THEMENAME
On veacuterifie qursquoil nrsquoy a pas drsquoerreur en visitant par exemple la page drsquoaccueil
2 CREacuteER SON THEgraveME
MEacuteTHODE 2 VIA UN THEgraveME CONTIB AYANT UN STARTER (ZF) Certains thegravemes contrib proposent un laquo STARTER KIT raquo comme par exemple Bootstrap ou ZURB
Foundation
Dossier precirct a ecirctre copieacute colleacute pour faire un thegraveme enfant heacuteritant de ce dernier
On fait une copie du STARTER KIT
On colle le reacutepertoire copieacute dans themescustom et on le renomme comme on le souhaite
Etc
REMARQUE DANS LES DEUX CAS NE PAS OUBLIER DE PREacuteCISER LE lsquoBASE THEMErsquo DANS LE INFOYML
REMARQUE LE THEgraveME PARENT DOIT EcircTRE ACTIVEacute SI VOUS VOULEZ ACTIVER UN DE SES THEgraveMES ENFANT
JOBrsquoS DONE
Warcraft Human peon
2 CREacuteER SON THEgraveME
MAIShellip REVENONS SUR NOTRE FICHIER INFOYML
2 CREacuteER SON THEgraveME
THEMENAMEINFOYML
Librairies chargeacutees avec le thegraveme
Reacutegions du thegraveme
Informations du thegraveme
ET SUR LES FICHIERS DANS NOTRE DOSSIER lsquoTHEMENAMErsquo
2 CREacuteER SON THEgraveME gt THEMENAMEINFOYML
CONCREgraveTEMENT
NAMESCREENSHOTPNG
DESCRIPTION
1 ANATOMIE DrsquoUN THEgraveME gt _THEMENAME_INFOYML
CONCREgraveTEMENT
LOGOSVG
FAVICONICO
2 CREacuteER SON THEgraveME
DOCUMENTATION OFFICIELLEhttpswwwdrupalorgdocs8theming-drupal-8defining-a-theme-with-an-infoyml-file
Dans un fichier yml
LES POINTS Agrave RETENIR
libraries-override (optional) base theme (recommended) hidden (optional) engine (optional) logo (optional) screenshot (optional) regions (optional) regions_hidden (optional) features (optional) stylesheets-remove (deprecated) ckeditor_stylesheets (optional) name (required)
type (required) description (optional) package (optional) core (required) php (optional) version (optional) libraries (optional)
Mais surtout
Tabs are NOT allowed Use spaces ONLY
Properties and lists MUST be indented by two (2) spaces
AJOUTER DES ASSETS (CSSJS)
3
3 AJOUTER DES ASSETS
CHARGER DES FICHIERS CSS amp JSCe que dit la documentation
httpswwwdrupalorgdocs8themingadding-stylesheets-css-and-javascript-js-to-a-drupal-8-theme
1 Save the CSS or JS to a file using the proper naming conventions and file structure
2 Define a library which registers these CSSJS files with your theme
3 Attach the library to all pages to specific Twig templates or target specific pages via a render element in a preprocess function
3 AJOUTER DES ASSETS
EN PRATIQUE
Lrsquoajout de fichier de CSS et de JS se fait via un systegraveme de librairie (bibliothegraveque)
Il faut tout drsquoabord deacuteclarer une librairie (ou en utiliser une existante) dans le fichier THEMENAMElibrariesyml puis demander au systegraveme de la charger Ceci peut ecirctre fait depuis le fichier THEMENAMEinfoyml
3 AJOUTER DES ASSETS
CHARGER UNE LIBRAIRIE
Lorsqursquoune librairie est appeleacutee depuis le fichier THEMENAMEinfoyml alors elle est chargeacutee sur toutes les pages degraves lors que le thegraveme est utiliseacute
Il est possible de charger sous condition une bibliothegraveque Pour cela plusieurs techniques sont disponibles
depuis un fichier de template
en utilisant le hook_page_attachments_alter()
en utilisant une fonction de preprocess
3 AJOUTER DES ASSETS
CHARGER UNE LIBRAIRIE
Directement depuis un fichier de template directement par exemple dans le fichier geacuterant lrsquoaffichage des blocs
attach_library(lsquodrupal_franceblocksrsquo)
3 AJOUTER DES ASSETS
CHARGER UNE LIBRAIRIE
Chargement drsquoune librairie depuis le fichier themesTHEMENAMETHEMENAMEtheme en utilisant la fonction de hook hook_page_attachments_alter()
Implements hook_page_attachments_alter() function drupal_france_page_attachments_alter(array amp$attachments) $attachments[attached][library][] = drupal_franceglobal
3 AJOUTER DES ASSETS
CHARGER UNE LIBRAIRIE
Chargement drsquoune librairie depuis le fichier themesTHEMENAMETHEMENAMEtheme en utilisant une fonction de preprocess
Implements hook_preprocess_HOOK() for page templates function drupal_france_preprocess_page(array amp$variables) $variables[attached][library][] = drupal_franceglobal
LES FICHIERS TEMPLATES
4
4 LES TEMPLATES
Agrave QUOI CcedilA SERT
Les templates constituent la structure des pages du sitesEn fait de chacun des eacuteleacutements qui la composent
Ce sont des fichiers html (balises ltdivgt lth1gt ltagt) avec du code Twig permettant drsquoafficher les eacuteleacutements (sous forme de variables) creacuteeacutes par Drupal
Chaque type drsquoeacuteleacutement du site possegravede son propre template
4 LES TEMPLATES
PAR EXEMPLE (CrsquoEST DU VRAI CODE)
ltdiv class=l-main row expandedgt ltmain id=main class= main_grid role=maingt if pagehighlighted spaceless pagehighlighted endspaceless endif lta id=main-contentgtltagt if breadcrumb breadcrumb endif ltsectiongt pagecontent ltsectiongt ltmaingt if pagesidebar_first ltdiv id=sidebar-first class= sidebar_first_grid column sidebargt pagesidebar_first ltdivgt endif if pagesidebar_second ltdiv id=sidebar-second class= sidebar_sec_grid column sidebargt pagesidebar_second ltdivgt endif ltdivgt
4 LES TEMPLATES
IMBRICATION DES TEMPLATES
Imaginons lrsquoappel drsquoune page de billet de blog
Et maintenant imaginons le parcours drsquoimbrication de templates pour depuis la balise lthtmlgt jusqursquoagrave la ltdivgt contenant un commentaire sous ce billet de blog
4 LES TEMPLATES
FROM ltHTMLgt TO ltDIV CLASS=lsquoCOMMENTrsquogthtmlhtmltwig
pagehtmltwig
regionhtmltwig
blockhtmltwig
nodehtmltwig nodehtmltwig
fieldhtmltwig
comment-wrapperhtmltwig
commenthtmltwig
4 LES TEMPLATES
LES TEMPLATES DEacuteRIVEacuteES
Les templates deacuteriveacutees sont des templates utiliseacutees dans un contexte preacutecis
Crsquoest le nom de la template qui indique agrave Drupal quand lrsquoutiliser
Toutes ces templates sont optionnelles et reconnues automatiquement par Drupal en fonction de leurs noms
Si des templates ne sont pas preacutesentes dans le thegraveme alors Drupal utilise ceux par deacutefaut (corethemes)
On parle de ldquotemplate deacuteriveacuteeldquo de ldquosuggestion de templateldquo ou de ldquotemplates suggeacutereacuteesldquo
Il faut vider le cache de Drupal lorsque lrsquoon ajoute des templates au thegraveme
Documentation httpswwwdrupalorgdocs8themingtwigtwig-template-naming-conventions
4 LES TEMPLATES
EXEMPLE DE SUGGESTIONS DE TEMPLATES
Template de page pagehtmltwig page--chemin--internehtmltwig sera utiliseacute lorsque lrsquoon appelle chemininterne
Ex page--fronthtmltwig cible la page drsquoaccueil
Ex page--cheminhtmltwig cible toutes les pages dont le chemin commence par chemin
Ex page--node--240htmltwig cible la page du noeud portant lrsquoid 240
Template de noeud nodehtmltwig node--type-de-noeudhtmltwig cible les noeuds de type type-de-noeud
Ex node--articlehtmltwig cible tous les noeuds de type article
4 LES TEMPLATES
TROUVER LES SUGGESTIONS
Dans le fichier wwwsitesdevelopmentservicesyml
Local development services
parameters httpresponsedebug_cacheability_headers true twigconfig debug true services cachebackendnull class DrupalCoreCacheNullBackendFactory
TWIG5
5 TWIG
UN MOTEUR DE TEMPLATE
Twig est capable drsquoafficher le contenu de nrsquoimporte quel type de variable (chaine tableau ou objet)
Il est possible de faire des boucles des conditionshellip
Chaque variable peut ecirctre filtreacutee avant drsquoecirctre afficheacutee
Les chaines peuvent ecirctre rendues traduites (la traduction est alors faite via le back-office de Drupal)
5 TWIG
LES BASES
Affiche le contenu de la variable var var
Affiche le contenu de la proprieacuteteacute title de la variable node nodetitle
Conditions if var else endif
Commentaires commentaire
Traduction trans chaine endtrans
Fonctions speacutecifiques
url(lsquoroute_namersquo)
path(lsquoentitynodecanonicalrsquo lsquonodersquo nodeid)
Les modules Twig tweak ou encore Bamboo Twig proposent encore davantage de fonctions
5 TWIG
LES FILTRES Date date|format_date(lsquomediumrsquo)
Chaine
Echappement content (par deacutefaut)
Interpreacutetation du contenu de la variable texte|raw (attention )
Placeholder text|placeholder
Exclusion content|without(lsquolinksrsquo)
string|lower (upper eacutegalement)
class_name|clean_class
id_name|clean_id
Documentation httpswwwdrupalorgdocs8themingtwigfilters-modifying-variables-in-twig-templateshttpstwigsymfonycomdoc2x
5 TWIG
CONCREgraveTEMENT if pagefooter_first or pagefooter_middle or pagefooter_last ltdiv class=l-footer row expandedgt ltfooter class=row footer medium-up-2 large-up-3gt if pagefooter_first ltdiv id=footer-first class=columngt pagefooter_first ltdivgt endif if pagefooter_middle ltdiv id=footer-middle class=columngt pagefooter_middle ltdivgt endif if pagefooter_last ltdiv id=footer-last class=columngt pagefooter_last ltdivgt endif ltfootergt ltdivgt endif ltdiv class=bottom-bar panel hiddengt ltdiv class=rowgt ltdiv class=large-12 columngt ampcopy now|date(Y) site_name All rights reserved|t ltdivgt ltdivgt ltdivgt
LES REacuteGIONS6
6 LES REacuteGIONS
STRUCTURE DE LA PAGE
adminstructureblock gt Demonstrate block regions
6 LES REacuteGIONS
DEacuteFINITION ET RENDU DES REacuteGIONS
Les reacutegions doivent ecirctre deacutefinies dans le fichier THEMENAMEinfoyml
Elles doivent ecirctre appeleacutees obligatoirement dans pagehtmltwig
6 LES REacuteGIONS
THEMENAMEINFOYML
PAGEHTMLTWIG
LE RENDU DU CONTENU
7
7 RENDU DU CONTENU
LrsquoAFFICHAGE DES CHAMPS
Pour chaque type de contenu on peut reacutegler lrsquoaffichage des champs sur adminstructuretypesmanagecontent-typedisplay ougrave content-type est le nom machine du type de contenu
Il est possible de modifier lrsquoordre des champs lrsquoapparence des eacutetiquettes le format du champ
Les reacuteglages disponibles varient en fonction du type de champ
Les champs Texte peuvent ecirctre coupeacutes
Les champs Image peuvent ecirctre afficheacutes sous forme drsquoimage drsquoURL de fichier
Les champs Date peuvent utiliser un format diffeacuterent
Ces reacuteglages peuvent ecirctre diffeacuterents selon le mode drsquoaffichage (modes ldquoPar deacutefautldquo et ldquoAccrocheldquo) =gt Cela permet par exemple de masquer un champ en mode ldquoAccrocheldquo et de lrsquoafficher en mode ldquoPar deacutefautldquo (noeud inteacutegral)
7 RENDU DU CONTENU
LrsquoAFFICHAGE DES IMAGES
Les images transmises par les utilisateurs ne sont jamais aux bonnes dimensions
Le module Image (core) va nous permettre de preacutedeacutefinir des dimensions sous forme de styles drsquoimage par exemple
Vignette 70px x 110px (mise agrave lrsquoeacutechelle)
Normal 200px x 300px (mise agrave lrsquoeacutechelle et recadrage)
Ces dimensions pourront ensuite ecirctre appliqueacutees automatiquement aux champs Image depuis lrsquoeacutecran ldquogeacuterer lrsquoaffichageldquo vu preacuteceacutedemment
7 RENDU DU CONTENU
STYLE DrsquoIMAGE
7 RENDU DU CONTENU
STYLE DrsquoIMAGE
7 RENDU DU CONTENU
ALLER PLUS LOIN La gestion et la manipulation des champs est cependant
limiteacutee dans lrsquointerface drsquoadministration
On est parfois obligeacutes de modifier le code du template correspondant agrave notre champ ou type de contenu
Les reacuteglages de lrsquoadmin sont toujours pris en compte Par exemple les styles drsquoimage choisis seront ceux utiliseacutes mecircme si lrsquoon modifie le template
7 RENDU DU CONTENU
OUgrave SONT LES CHAMPS
Dans le fichier de template des noeuds (nodehtmltwig) on nrsquoa pas directement accegraves aux champs
Crsquoest la variable content qui contient tous les champs que lrsquoon affiche et en particulier ceux ajouteacutes via Field
Comment faire pour reacutecupeacuterer les champs un par un afin de les preacutesenter diffeacuteremment
7 RENDU DU CONTENU
LA VARIABLE lsquoCONTENTrsquo
Tout le contenu drsquoun noeud est afficheacute gracircce agrave la ligne content|without(comment links)
Pour connaitre le contenu de content on utilise la fonction kint() kint(content)
On deacutecouvre alors lrsquoensemble des champs et leurs proprieacuteteacutes qui sont afficheacutees en haut de page sous forme de var_dump()
On peut afficher seacutepareacutement chacun drsquoentre eux avec le code suivant contentnom_du_champ nodecreatedtime
7 RENDU DU CONTENU
NODE DE TYPE lsquoNEWSrsquo ET FORMAT lsquoTEASERrsquo
PREPROCESS8
8 PREPROCESS
FONCTIONS DE PREPROCESS
Pour chaque template on dispose de variables que lrsquoon affiche avec le formatage voulu
Ces variables sont creacuteeacutees en amont des templates dans lesquelles elles sont utiliseacutees
On dispose de fonctions dites de preprocess qui permettent de fabriquer les variables qui sont utiliseacutees dans les templates
Il est possible drsquoeacutetendre ces fonctions pour modifier les variables envoyeacutees aux templates ou en creacuteer de nouvelles
Pour ajouter une fonction de preprocess il faut la nommer comme suit THEMENAME_preprocess_HOOK() Par exemple drupal_france_preprocess_block()
8 PREPROCESS
FONCTIONS DE PREPROCESS
Pour chaque template on dispose de variables que lrsquoon affiche avec le formatage voulu
Ces variables sont creacuteeacutees en amont des templates dans lesquelles elles sont utiliseacutees
On dispose de fonctions dites de preprocess qui permettent de fabriquer les variables qui sont utiliseacutees dans les templates
Il est possible drsquoeacutetendre ces fonctions pour modifier les variables envoyeacutees aux templates ou en creacuteer de nouvelles
Pour ajouter une fonction de preprocess il faut la nommer comme suit THEMENAME_preprocess_HOOK() Par exemple drupal_france_preprocess_block()
8 PREPROCESS
LA VARIABLE lsquo$VARIABLESrsquo
Drupal
Preprocess en amont(core modules)
Preprocess du thegraveme
TemplateCreacuteation de $variables
$variables
$variables
$variables
$variables
En mode super simplifieacute
8 PREPROCESS
APPELLER UN PREPROCESS
Diffeacuterentes fonctions de preprocess peuvent ecirctre appeleacutees permettant agrave tous les modules et thegravemes de modifier les variables passeacutees aux templates Ces fonctions sont les suivantes pour le hook de thegraveme HOOK
template_preprocess_HOOK(array amp$variables)
MODULENAME_preprocess(array amp$variables $hook)
MODULENAME_preprocess_HOOK(array amp$variables)
THEMENAME_preprocess(array amp$variables $hook)
THEMENAME_preprocess_HOOK(array amp$variables)
8 PREPROCESS
CONCREgraveTEMENT Implements hook_preprocess_menu__account() function drupal_france_preprocess_menu__account(amp$variables) if (isset($variables[items][drupalfr_useraccountcompte])) $variables[items][drupalfr_useraccountcompte][attributes]-gtaddClass([ button primary button--user-account ])
$variables[items][drupalfr_useraccountcompte][title] = new FormattableMarkup( lti class=fa fa-user-circle-o aria-hidden=truegtltigtltspan class=sr-onlygtoriginal_titleltspangt [ original_title =gt $variables[items][drupalfr_useraccountcompte][title] ] )
JAVASCRIPT9
9 JAVASCRIPT
DRUPAL amp JAVASCRIPT Drupal integravegre de nombreuses libraries javascript (jQuery Modernizrhellip) et propose
eacutegalement des libraries drsquoutilitaires (coredrupal coredrupalSettings drupalajax drupalformhellip)
Par exemple Drupal 8 embarque
jQuery 321
jQuery UI 1121
Chaque librairie deacutefinit ses deacutependances jQuery UI deacutepend de jQuery par exemple
Lorsque lrsquoon utilise une librairie depuis un script custom il ne faut pas oublier de deacuteclarer cette deacutependance Pensez agrave tester en anonyme car aucune libraire nrsquoest chargeacutee par deacutefaut
Vous disposez de toutes les librairies deacutefinies dans le fichier corecorelibrairiesyml
9 JAVASCRIPT
CONCREgraveTEMENTPour pouvoir utiliser du code JS dans vos scripts avec Drupal la bonne pratique est drsquoencadrer votre code comme suit
file Shows status messages in a modal instead of inline (function ($ Drupal)
Displays status messages in a Foundation reveal modal DrupalbehaviorsfoundationStatusInReveal = attach function (context settings) $(status-messages)once(foundation-reveal)each(function() Move the status messages out of the highlighted region var $messages = $(this) var $region = $messagesparent() $messagesappendTo(body) $messagesfoundation(open)
This is required as this region will likely be empty after status messages are removed $regionhtml($regionhtml()replace(ng )) )
)(jQuery Drupal)
9 JAVASCRIPT
DRUPAL BEHAVIORS
Les scripts sont exeacutecuteacutes apregraves le chargement complet du DOM ($(document)ready() )Mais on a aussi parfois besoin de les reacute-exeacutecuter lorsque lrsquoon interagit avec la page (appel AJAX overlayhellip)
Pour ce faire il suffit drsquoattacher le script JS agrave lrsquoobjet Drupalbehaviors (librairie coredrupal) La fonction exeacutecuteacutee reccediloit 2 variables
context le DOM (le HTML chargeacute ou ajouteacute)
settings toutes les variables injecteacutees cocircteacute serveur
9 JAVASCRIPT
RAPPEL
Comme pour les fichiers de style les scripts JS doivent ecirctre deacuteclareacutes sous forme de bibliothegraveque via les fichiers THEMENAMEinfoyml et THEMENAMElibrariesyml
QUESTIONS 10
RTFM httpswwwdrupalorgdocs8theminghttpstwigsymfonycomdoc2x
MERCI Agrave VOUS
FlorisMoriceau
1 ANATOMIE DrsquoUN THEgraveME
LES FICHIERS JS
Les fichiers js contiennent les scripts (javascript) du thegraveme Crsquoest agrave lrsquoauteur du thegraveme de creacuteer ses propres fichiers js et de les reacutefeacuterencer en les
deacuteclarant comme librairies dans le fichier THEMENAMElibrariesyml Les fichiers js peuvent ecirctre nommeacutes librement Par deacutefaut aucune librairie javascript nrsquoest chargeacutee pour les utilisateurs anonymes
pas mecircme jQuery
1 ANATOMIE DrsquoUN THEgraveME
FICHIERS DE TEMPLATE
Les fichiers avec lrsquoextension htmltwig sont les templates Un template contient un meacutelange de balises HTML et de code Twig Tout thegraveme Drupal contient geacuteneacuteralement ces 3 templates de base pagehtmltwig deacutefinit la structure geacuteneacuterale de toutes les pages
(emplacement des reacutegions) nodehtmltwig deacutefinit la structure des noeuds blockhtmltwig deacutefinit la structure des blocs
Par deacutefaut la template pagehtmltwig sert agrave afficher toutes les pages nodehtmltwig sert agrave afficher tous les noeuds Une modification dans un de ces templates impacte donc toutes les pages tous les noeuds Nous verrons plus tard comment creacuteer des templates plus speacutecifiques
Ces fichiers sont agrave placer dans le reacutepertoire templates
1 ANATOMIE DrsquoUN THEgraveME
THEMENAMETHEME
Le fichier monthemetheme permet drsquoajouter du code PHP additionnel speacutecifique au thegraveme
Ce fichier est facultatif mais il doit ecirctre obligatoirement placeacute agrave la racine du thegraveme srsquoil existe
Il contient des fonctions de preprocess que lrsquoon souhaite eacutetendre (voir plus loin) ainsi qursquoun certain nombre de fonctions de hook
Ce fichier est automatiquement reconnu et chargeacute par Drupal
1 ANATOMIE DrsquoUN THEgraveMETEXTE
FICHIERS IMAGE
Drupal nrsquoutilise pas de reacutepertoire speacutecifique pour stocker les images drsquoun thegraveme
La bonne pratique est de creacuteer un sous-dossier images (ou imghellip) dans le reacutepertoire du thegraveme mais on peut srsquoorganiser autrement si neacutecessaire
Dans tous les cas veiller agrave utiliser les bons chemins pour reacutefeacuterencer les images
CREacuteER SON THEgraveME (Agrave PARTIR DrsquoUN THEgraveME EXISTANT)
2
2 CREacuteER SON THEgraveME
OPTIONS DE PERSONNALISATION
Dans la section Apparence du back-office les personnalisations sont tregraves limiteacutees on peut seulement
Changer le logo
AfficherMasquer certains eacuteleacutements comme
Le Nom du site qui apparaicirct dans la reacutegion ldquoen-tecircteldquo
Les portraits utilisateur
Le slogan du site
Changer lrsquoicocircne de raccourcis
SI ON DEacuteSIRE PLUS DrsquoOUTILS DE PERSONNALISATION IL FAUT LES CODER
ET DONC CREacuteER SON PROPRE THEgraveME
2 CREacuteER SON THEgraveME
2 CREacuteER SON THEgraveME
POUR CREacuteER SON THEgraveME PLUSIEURS POSSIBILITEacuteS Partir de zeacutero
Possible mais fastidieux (Ne faites pas ccedila Ou alors seulement sur un side project personnel qui nrsquoa pas de deadline pour la beauteacute du geste et pour apprendre tous les rouages du templating)
Partir drsquoun thegraveme de base Un thegraveme de base est un thegraveme que lrsquoon va eacutetendre en heacuteritant de tout son code On dispose drsquoun systegraveme de thegravemes parentenfant Exemples Omega Zen Bootstraphellip ZURB Foundation
Partir drsquoun thegraveme ldquoprecirct-agrave-lrsquoemploildquo Par exemple un thegraveme acheteacute sur themeforestcom Lrsquoideacutee ici est de limiter au maximum les personnalisations afin de gagner du tempsAttention Sortir des fonctionnaliteacutes offertes par ce genre de thegraveme peut se reacuteveacuteler tregraves coucircteux
2 CREacuteER SON THEgraveME
MEacuteTHODE 1 VIA UN THEgraveME PREacuteSENT DANS LE CORE (BARTIK)
On fait une copie du thegraveme par deacutefaut Bartik (crsquoest-agrave-dire du reacutepertoire corethemesbartik)
On colle le reacutepertoire copieacute dans themescustom et on le renomme comme on le souhaiteAttention cependant Le thegraveme doit avoir un laquo nom machine raquo composeacute exclusivement de caractegraveres alphanumeacuteriques et de lsquo_rsquo (underscore)
Ici on choisira lsquoTHEMENAMErsquo
On renommez le fichier themescustomTHEMENAMEbartikinfoyml en themescustomTHEMENAMETHEMENAMEinfoyml (on nrsquooublie pas drsquoadapter eacutegalement le contenu du fichier infoyml)
On renomme tous les fichiers dont le nom comporte bartik par THEMENAME
Dans tous les fichiers on recherche les occurrences de la chaine lsquobartik et on les remplace par lsquoTHEMENAMErsquo
On vide TOUS les caches
Enfin on va dans Admin gt Apparence on active et deacutefini par deacutefaut notre nouveau thegraveme THEMENAME
On veacuterifie qursquoil nrsquoy a pas drsquoerreur en visitant par exemple la page drsquoaccueil
2 CREacuteER SON THEgraveME
MEacuteTHODE 2 VIA UN THEgraveME CONTIB AYANT UN STARTER (ZF) Certains thegravemes contrib proposent un laquo STARTER KIT raquo comme par exemple Bootstrap ou ZURB
Foundation
Dossier precirct a ecirctre copieacute colleacute pour faire un thegraveme enfant heacuteritant de ce dernier
On fait une copie du STARTER KIT
On colle le reacutepertoire copieacute dans themescustom et on le renomme comme on le souhaite
Etc
REMARQUE DANS LES DEUX CAS NE PAS OUBLIER DE PREacuteCISER LE lsquoBASE THEMErsquo DANS LE INFOYML
REMARQUE LE THEgraveME PARENT DOIT EcircTRE ACTIVEacute SI VOUS VOULEZ ACTIVER UN DE SES THEgraveMES ENFANT
JOBrsquoS DONE
Warcraft Human peon
2 CREacuteER SON THEgraveME
MAIShellip REVENONS SUR NOTRE FICHIER INFOYML
2 CREacuteER SON THEgraveME
THEMENAMEINFOYML
Librairies chargeacutees avec le thegraveme
Reacutegions du thegraveme
Informations du thegraveme
ET SUR LES FICHIERS DANS NOTRE DOSSIER lsquoTHEMENAMErsquo
2 CREacuteER SON THEgraveME gt THEMENAMEINFOYML
CONCREgraveTEMENT
NAMESCREENSHOTPNG
DESCRIPTION
1 ANATOMIE DrsquoUN THEgraveME gt _THEMENAME_INFOYML
CONCREgraveTEMENT
LOGOSVG
FAVICONICO
2 CREacuteER SON THEgraveME
DOCUMENTATION OFFICIELLEhttpswwwdrupalorgdocs8theming-drupal-8defining-a-theme-with-an-infoyml-file
Dans un fichier yml
LES POINTS Agrave RETENIR
libraries-override (optional) base theme (recommended) hidden (optional) engine (optional) logo (optional) screenshot (optional) regions (optional) regions_hidden (optional) features (optional) stylesheets-remove (deprecated) ckeditor_stylesheets (optional) name (required)
type (required) description (optional) package (optional) core (required) php (optional) version (optional) libraries (optional)
Mais surtout
Tabs are NOT allowed Use spaces ONLY
Properties and lists MUST be indented by two (2) spaces
AJOUTER DES ASSETS (CSSJS)
3
3 AJOUTER DES ASSETS
CHARGER DES FICHIERS CSS amp JSCe que dit la documentation
httpswwwdrupalorgdocs8themingadding-stylesheets-css-and-javascript-js-to-a-drupal-8-theme
1 Save the CSS or JS to a file using the proper naming conventions and file structure
2 Define a library which registers these CSSJS files with your theme
3 Attach the library to all pages to specific Twig templates or target specific pages via a render element in a preprocess function
3 AJOUTER DES ASSETS
EN PRATIQUE
Lrsquoajout de fichier de CSS et de JS se fait via un systegraveme de librairie (bibliothegraveque)
Il faut tout drsquoabord deacuteclarer une librairie (ou en utiliser une existante) dans le fichier THEMENAMElibrariesyml puis demander au systegraveme de la charger Ceci peut ecirctre fait depuis le fichier THEMENAMEinfoyml
3 AJOUTER DES ASSETS
CHARGER UNE LIBRAIRIE
Lorsqursquoune librairie est appeleacutee depuis le fichier THEMENAMEinfoyml alors elle est chargeacutee sur toutes les pages degraves lors que le thegraveme est utiliseacute
Il est possible de charger sous condition une bibliothegraveque Pour cela plusieurs techniques sont disponibles
depuis un fichier de template
en utilisant le hook_page_attachments_alter()
en utilisant une fonction de preprocess
3 AJOUTER DES ASSETS
CHARGER UNE LIBRAIRIE
Directement depuis un fichier de template directement par exemple dans le fichier geacuterant lrsquoaffichage des blocs
attach_library(lsquodrupal_franceblocksrsquo)
3 AJOUTER DES ASSETS
CHARGER UNE LIBRAIRIE
Chargement drsquoune librairie depuis le fichier themesTHEMENAMETHEMENAMEtheme en utilisant la fonction de hook hook_page_attachments_alter()
Implements hook_page_attachments_alter() function drupal_france_page_attachments_alter(array amp$attachments) $attachments[attached][library][] = drupal_franceglobal
3 AJOUTER DES ASSETS
CHARGER UNE LIBRAIRIE
Chargement drsquoune librairie depuis le fichier themesTHEMENAMETHEMENAMEtheme en utilisant une fonction de preprocess
Implements hook_preprocess_HOOK() for page templates function drupal_france_preprocess_page(array amp$variables) $variables[attached][library][] = drupal_franceglobal
LES FICHIERS TEMPLATES
4
4 LES TEMPLATES
Agrave QUOI CcedilA SERT
Les templates constituent la structure des pages du sitesEn fait de chacun des eacuteleacutements qui la composent
Ce sont des fichiers html (balises ltdivgt lth1gt ltagt) avec du code Twig permettant drsquoafficher les eacuteleacutements (sous forme de variables) creacuteeacutes par Drupal
Chaque type drsquoeacuteleacutement du site possegravede son propre template
4 LES TEMPLATES
PAR EXEMPLE (CrsquoEST DU VRAI CODE)
ltdiv class=l-main row expandedgt ltmain id=main class= main_grid role=maingt if pagehighlighted spaceless pagehighlighted endspaceless endif lta id=main-contentgtltagt if breadcrumb breadcrumb endif ltsectiongt pagecontent ltsectiongt ltmaingt if pagesidebar_first ltdiv id=sidebar-first class= sidebar_first_grid column sidebargt pagesidebar_first ltdivgt endif if pagesidebar_second ltdiv id=sidebar-second class= sidebar_sec_grid column sidebargt pagesidebar_second ltdivgt endif ltdivgt
4 LES TEMPLATES
IMBRICATION DES TEMPLATES
Imaginons lrsquoappel drsquoune page de billet de blog
Et maintenant imaginons le parcours drsquoimbrication de templates pour depuis la balise lthtmlgt jusqursquoagrave la ltdivgt contenant un commentaire sous ce billet de blog
4 LES TEMPLATES
FROM ltHTMLgt TO ltDIV CLASS=lsquoCOMMENTrsquogthtmlhtmltwig
pagehtmltwig
regionhtmltwig
blockhtmltwig
nodehtmltwig nodehtmltwig
fieldhtmltwig
comment-wrapperhtmltwig
commenthtmltwig
4 LES TEMPLATES
LES TEMPLATES DEacuteRIVEacuteES
Les templates deacuteriveacutees sont des templates utiliseacutees dans un contexte preacutecis
Crsquoest le nom de la template qui indique agrave Drupal quand lrsquoutiliser
Toutes ces templates sont optionnelles et reconnues automatiquement par Drupal en fonction de leurs noms
Si des templates ne sont pas preacutesentes dans le thegraveme alors Drupal utilise ceux par deacutefaut (corethemes)
On parle de ldquotemplate deacuteriveacuteeldquo de ldquosuggestion de templateldquo ou de ldquotemplates suggeacutereacuteesldquo
Il faut vider le cache de Drupal lorsque lrsquoon ajoute des templates au thegraveme
Documentation httpswwwdrupalorgdocs8themingtwigtwig-template-naming-conventions
4 LES TEMPLATES
EXEMPLE DE SUGGESTIONS DE TEMPLATES
Template de page pagehtmltwig page--chemin--internehtmltwig sera utiliseacute lorsque lrsquoon appelle chemininterne
Ex page--fronthtmltwig cible la page drsquoaccueil
Ex page--cheminhtmltwig cible toutes les pages dont le chemin commence par chemin
Ex page--node--240htmltwig cible la page du noeud portant lrsquoid 240
Template de noeud nodehtmltwig node--type-de-noeudhtmltwig cible les noeuds de type type-de-noeud
Ex node--articlehtmltwig cible tous les noeuds de type article
4 LES TEMPLATES
TROUVER LES SUGGESTIONS
Dans le fichier wwwsitesdevelopmentservicesyml
Local development services
parameters httpresponsedebug_cacheability_headers true twigconfig debug true services cachebackendnull class DrupalCoreCacheNullBackendFactory
TWIG5
5 TWIG
UN MOTEUR DE TEMPLATE
Twig est capable drsquoafficher le contenu de nrsquoimporte quel type de variable (chaine tableau ou objet)
Il est possible de faire des boucles des conditionshellip
Chaque variable peut ecirctre filtreacutee avant drsquoecirctre afficheacutee
Les chaines peuvent ecirctre rendues traduites (la traduction est alors faite via le back-office de Drupal)
5 TWIG
LES BASES
Affiche le contenu de la variable var var
Affiche le contenu de la proprieacuteteacute title de la variable node nodetitle
Conditions if var else endif
Commentaires commentaire
Traduction trans chaine endtrans
Fonctions speacutecifiques
url(lsquoroute_namersquo)
path(lsquoentitynodecanonicalrsquo lsquonodersquo nodeid)
Les modules Twig tweak ou encore Bamboo Twig proposent encore davantage de fonctions
5 TWIG
LES FILTRES Date date|format_date(lsquomediumrsquo)
Chaine
Echappement content (par deacutefaut)
Interpreacutetation du contenu de la variable texte|raw (attention )
Placeholder text|placeholder
Exclusion content|without(lsquolinksrsquo)
string|lower (upper eacutegalement)
class_name|clean_class
id_name|clean_id
Documentation httpswwwdrupalorgdocs8themingtwigfilters-modifying-variables-in-twig-templateshttpstwigsymfonycomdoc2x
5 TWIG
CONCREgraveTEMENT if pagefooter_first or pagefooter_middle or pagefooter_last ltdiv class=l-footer row expandedgt ltfooter class=row footer medium-up-2 large-up-3gt if pagefooter_first ltdiv id=footer-first class=columngt pagefooter_first ltdivgt endif if pagefooter_middle ltdiv id=footer-middle class=columngt pagefooter_middle ltdivgt endif if pagefooter_last ltdiv id=footer-last class=columngt pagefooter_last ltdivgt endif ltfootergt ltdivgt endif ltdiv class=bottom-bar panel hiddengt ltdiv class=rowgt ltdiv class=large-12 columngt ampcopy now|date(Y) site_name All rights reserved|t ltdivgt ltdivgt ltdivgt
LES REacuteGIONS6
6 LES REacuteGIONS
STRUCTURE DE LA PAGE
adminstructureblock gt Demonstrate block regions
6 LES REacuteGIONS
DEacuteFINITION ET RENDU DES REacuteGIONS
Les reacutegions doivent ecirctre deacutefinies dans le fichier THEMENAMEinfoyml
Elles doivent ecirctre appeleacutees obligatoirement dans pagehtmltwig
6 LES REacuteGIONS
THEMENAMEINFOYML
PAGEHTMLTWIG
LE RENDU DU CONTENU
7
7 RENDU DU CONTENU
LrsquoAFFICHAGE DES CHAMPS
Pour chaque type de contenu on peut reacutegler lrsquoaffichage des champs sur adminstructuretypesmanagecontent-typedisplay ougrave content-type est le nom machine du type de contenu
Il est possible de modifier lrsquoordre des champs lrsquoapparence des eacutetiquettes le format du champ
Les reacuteglages disponibles varient en fonction du type de champ
Les champs Texte peuvent ecirctre coupeacutes
Les champs Image peuvent ecirctre afficheacutes sous forme drsquoimage drsquoURL de fichier
Les champs Date peuvent utiliser un format diffeacuterent
Ces reacuteglages peuvent ecirctre diffeacuterents selon le mode drsquoaffichage (modes ldquoPar deacutefautldquo et ldquoAccrocheldquo) =gt Cela permet par exemple de masquer un champ en mode ldquoAccrocheldquo et de lrsquoafficher en mode ldquoPar deacutefautldquo (noeud inteacutegral)
7 RENDU DU CONTENU
LrsquoAFFICHAGE DES IMAGES
Les images transmises par les utilisateurs ne sont jamais aux bonnes dimensions
Le module Image (core) va nous permettre de preacutedeacutefinir des dimensions sous forme de styles drsquoimage par exemple
Vignette 70px x 110px (mise agrave lrsquoeacutechelle)
Normal 200px x 300px (mise agrave lrsquoeacutechelle et recadrage)
Ces dimensions pourront ensuite ecirctre appliqueacutees automatiquement aux champs Image depuis lrsquoeacutecran ldquogeacuterer lrsquoaffichageldquo vu preacuteceacutedemment
7 RENDU DU CONTENU
STYLE DrsquoIMAGE
7 RENDU DU CONTENU
STYLE DrsquoIMAGE
7 RENDU DU CONTENU
ALLER PLUS LOIN La gestion et la manipulation des champs est cependant
limiteacutee dans lrsquointerface drsquoadministration
On est parfois obligeacutes de modifier le code du template correspondant agrave notre champ ou type de contenu
Les reacuteglages de lrsquoadmin sont toujours pris en compte Par exemple les styles drsquoimage choisis seront ceux utiliseacutes mecircme si lrsquoon modifie le template
7 RENDU DU CONTENU
OUgrave SONT LES CHAMPS
Dans le fichier de template des noeuds (nodehtmltwig) on nrsquoa pas directement accegraves aux champs
Crsquoest la variable content qui contient tous les champs que lrsquoon affiche et en particulier ceux ajouteacutes via Field
Comment faire pour reacutecupeacuterer les champs un par un afin de les preacutesenter diffeacuteremment
7 RENDU DU CONTENU
LA VARIABLE lsquoCONTENTrsquo
Tout le contenu drsquoun noeud est afficheacute gracircce agrave la ligne content|without(comment links)
Pour connaitre le contenu de content on utilise la fonction kint() kint(content)
On deacutecouvre alors lrsquoensemble des champs et leurs proprieacuteteacutes qui sont afficheacutees en haut de page sous forme de var_dump()
On peut afficher seacutepareacutement chacun drsquoentre eux avec le code suivant contentnom_du_champ nodecreatedtime
7 RENDU DU CONTENU
NODE DE TYPE lsquoNEWSrsquo ET FORMAT lsquoTEASERrsquo
PREPROCESS8
8 PREPROCESS
FONCTIONS DE PREPROCESS
Pour chaque template on dispose de variables que lrsquoon affiche avec le formatage voulu
Ces variables sont creacuteeacutees en amont des templates dans lesquelles elles sont utiliseacutees
On dispose de fonctions dites de preprocess qui permettent de fabriquer les variables qui sont utiliseacutees dans les templates
Il est possible drsquoeacutetendre ces fonctions pour modifier les variables envoyeacutees aux templates ou en creacuteer de nouvelles
Pour ajouter une fonction de preprocess il faut la nommer comme suit THEMENAME_preprocess_HOOK() Par exemple drupal_france_preprocess_block()
8 PREPROCESS
FONCTIONS DE PREPROCESS
Pour chaque template on dispose de variables que lrsquoon affiche avec le formatage voulu
Ces variables sont creacuteeacutees en amont des templates dans lesquelles elles sont utiliseacutees
On dispose de fonctions dites de preprocess qui permettent de fabriquer les variables qui sont utiliseacutees dans les templates
Il est possible drsquoeacutetendre ces fonctions pour modifier les variables envoyeacutees aux templates ou en creacuteer de nouvelles
Pour ajouter une fonction de preprocess il faut la nommer comme suit THEMENAME_preprocess_HOOK() Par exemple drupal_france_preprocess_block()
8 PREPROCESS
LA VARIABLE lsquo$VARIABLESrsquo
Drupal
Preprocess en amont(core modules)
Preprocess du thegraveme
TemplateCreacuteation de $variables
$variables
$variables
$variables
$variables
En mode super simplifieacute
8 PREPROCESS
APPELLER UN PREPROCESS
Diffeacuterentes fonctions de preprocess peuvent ecirctre appeleacutees permettant agrave tous les modules et thegravemes de modifier les variables passeacutees aux templates Ces fonctions sont les suivantes pour le hook de thegraveme HOOK
template_preprocess_HOOK(array amp$variables)
MODULENAME_preprocess(array amp$variables $hook)
MODULENAME_preprocess_HOOK(array amp$variables)
THEMENAME_preprocess(array amp$variables $hook)
THEMENAME_preprocess_HOOK(array amp$variables)
8 PREPROCESS
CONCREgraveTEMENT Implements hook_preprocess_menu__account() function drupal_france_preprocess_menu__account(amp$variables) if (isset($variables[items][drupalfr_useraccountcompte])) $variables[items][drupalfr_useraccountcompte][attributes]-gtaddClass([ button primary button--user-account ])
$variables[items][drupalfr_useraccountcompte][title] = new FormattableMarkup( lti class=fa fa-user-circle-o aria-hidden=truegtltigtltspan class=sr-onlygtoriginal_titleltspangt [ original_title =gt $variables[items][drupalfr_useraccountcompte][title] ] )
JAVASCRIPT9
9 JAVASCRIPT
DRUPAL amp JAVASCRIPT Drupal integravegre de nombreuses libraries javascript (jQuery Modernizrhellip) et propose
eacutegalement des libraries drsquoutilitaires (coredrupal coredrupalSettings drupalajax drupalformhellip)
Par exemple Drupal 8 embarque
jQuery 321
jQuery UI 1121
Chaque librairie deacutefinit ses deacutependances jQuery UI deacutepend de jQuery par exemple
Lorsque lrsquoon utilise une librairie depuis un script custom il ne faut pas oublier de deacuteclarer cette deacutependance Pensez agrave tester en anonyme car aucune libraire nrsquoest chargeacutee par deacutefaut
Vous disposez de toutes les librairies deacutefinies dans le fichier corecorelibrairiesyml
9 JAVASCRIPT
CONCREgraveTEMENTPour pouvoir utiliser du code JS dans vos scripts avec Drupal la bonne pratique est drsquoencadrer votre code comme suit
file Shows status messages in a modal instead of inline (function ($ Drupal)
Displays status messages in a Foundation reveal modal DrupalbehaviorsfoundationStatusInReveal = attach function (context settings) $(status-messages)once(foundation-reveal)each(function() Move the status messages out of the highlighted region var $messages = $(this) var $region = $messagesparent() $messagesappendTo(body) $messagesfoundation(open)
This is required as this region will likely be empty after status messages are removed $regionhtml($regionhtml()replace(ng )) )
)(jQuery Drupal)
9 JAVASCRIPT
DRUPAL BEHAVIORS
Les scripts sont exeacutecuteacutes apregraves le chargement complet du DOM ($(document)ready() )Mais on a aussi parfois besoin de les reacute-exeacutecuter lorsque lrsquoon interagit avec la page (appel AJAX overlayhellip)
Pour ce faire il suffit drsquoattacher le script JS agrave lrsquoobjet Drupalbehaviors (librairie coredrupal) La fonction exeacutecuteacutee reccediloit 2 variables
context le DOM (le HTML chargeacute ou ajouteacute)
settings toutes les variables injecteacutees cocircteacute serveur
9 JAVASCRIPT
RAPPEL
Comme pour les fichiers de style les scripts JS doivent ecirctre deacuteclareacutes sous forme de bibliothegraveque via les fichiers THEMENAMEinfoyml et THEMENAMElibrariesyml
QUESTIONS 10
RTFM httpswwwdrupalorgdocs8theminghttpstwigsymfonycomdoc2x
MERCI Agrave VOUS
FlorisMoriceau
1 ANATOMIE DrsquoUN THEgraveME
FICHIERS DE TEMPLATE
Les fichiers avec lrsquoextension htmltwig sont les templates Un template contient un meacutelange de balises HTML et de code Twig Tout thegraveme Drupal contient geacuteneacuteralement ces 3 templates de base pagehtmltwig deacutefinit la structure geacuteneacuterale de toutes les pages
(emplacement des reacutegions) nodehtmltwig deacutefinit la structure des noeuds blockhtmltwig deacutefinit la structure des blocs
Par deacutefaut la template pagehtmltwig sert agrave afficher toutes les pages nodehtmltwig sert agrave afficher tous les noeuds Une modification dans un de ces templates impacte donc toutes les pages tous les noeuds Nous verrons plus tard comment creacuteer des templates plus speacutecifiques
Ces fichiers sont agrave placer dans le reacutepertoire templates
1 ANATOMIE DrsquoUN THEgraveME
THEMENAMETHEME
Le fichier monthemetheme permet drsquoajouter du code PHP additionnel speacutecifique au thegraveme
Ce fichier est facultatif mais il doit ecirctre obligatoirement placeacute agrave la racine du thegraveme srsquoil existe
Il contient des fonctions de preprocess que lrsquoon souhaite eacutetendre (voir plus loin) ainsi qursquoun certain nombre de fonctions de hook
Ce fichier est automatiquement reconnu et chargeacute par Drupal
1 ANATOMIE DrsquoUN THEgraveMETEXTE
FICHIERS IMAGE
Drupal nrsquoutilise pas de reacutepertoire speacutecifique pour stocker les images drsquoun thegraveme
La bonne pratique est de creacuteer un sous-dossier images (ou imghellip) dans le reacutepertoire du thegraveme mais on peut srsquoorganiser autrement si neacutecessaire
Dans tous les cas veiller agrave utiliser les bons chemins pour reacutefeacuterencer les images
CREacuteER SON THEgraveME (Agrave PARTIR DrsquoUN THEgraveME EXISTANT)
2
2 CREacuteER SON THEgraveME
OPTIONS DE PERSONNALISATION
Dans la section Apparence du back-office les personnalisations sont tregraves limiteacutees on peut seulement
Changer le logo
AfficherMasquer certains eacuteleacutements comme
Le Nom du site qui apparaicirct dans la reacutegion ldquoen-tecircteldquo
Les portraits utilisateur
Le slogan du site
Changer lrsquoicocircne de raccourcis
SI ON DEacuteSIRE PLUS DrsquoOUTILS DE PERSONNALISATION IL FAUT LES CODER
ET DONC CREacuteER SON PROPRE THEgraveME
2 CREacuteER SON THEgraveME
2 CREacuteER SON THEgraveME
POUR CREacuteER SON THEgraveME PLUSIEURS POSSIBILITEacuteS Partir de zeacutero
Possible mais fastidieux (Ne faites pas ccedila Ou alors seulement sur un side project personnel qui nrsquoa pas de deadline pour la beauteacute du geste et pour apprendre tous les rouages du templating)
Partir drsquoun thegraveme de base Un thegraveme de base est un thegraveme que lrsquoon va eacutetendre en heacuteritant de tout son code On dispose drsquoun systegraveme de thegravemes parentenfant Exemples Omega Zen Bootstraphellip ZURB Foundation
Partir drsquoun thegraveme ldquoprecirct-agrave-lrsquoemploildquo Par exemple un thegraveme acheteacute sur themeforestcom Lrsquoideacutee ici est de limiter au maximum les personnalisations afin de gagner du tempsAttention Sortir des fonctionnaliteacutes offertes par ce genre de thegraveme peut se reacuteveacuteler tregraves coucircteux
2 CREacuteER SON THEgraveME
MEacuteTHODE 1 VIA UN THEgraveME PREacuteSENT DANS LE CORE (BARTIK)
On fait une copie du thegraveme par deacutefaut Bartik (crsquoest-agrave-dire du reacutepertoire corethemesbartik)
On colle le reacutepertoire copieacute dans themescustom et on le renomme comme on le souhaiteAttention cependant Le thegraveme doit avoir un laquo nom machine raquo composeacute exclusivement de caractegraveres alphanumeacuteriques et de lsquo_rsquo (underscore)
Ici on choisira lsquoTHEMENAMErsquo
On renommez le fichier themescustomTHEMENAMEbartikinfoyml en themescustomTHEMENAMETHEMENAMEinfoyml (on nrsquooublie pas drsquoadapter eacutegalement le contenu du fichier infoyml)
On renomme tous les fichiers dont le nom comporte bartik par THEMENAME
Dans tous les fichiers on recherche les occurrences de la chaine lsquobartik et on les remplace par lsquoTHEMENAMErsquo
On vide TOUS les caches
Enfin on va dans Admin gt Apparence on active et deacutefini par deacutefaut notre nouveau thegraveme THEMENAME
On veacuterifie qursquoil nrsquoy a pas drsquoerreur en visitant par exemple la page drsquoaccueil
2 CREacuteER SON THEgraveME
MEacuteTHODE 2 VIA UN THEgraveME CONTIB AYANT UN STARTER (ZF) Certains thegravemes contrib proposent un laquo STARTER KIT raquo comme par exemple Bootstrap ou ZURB
Foundation
Dossier precirct a ecirctre copieacute colleacute pour faire un thegraveme enfant heacuteritant de ce dernier
On fait une copie du STARTER KIT
On colle le reacutepertoire copieacute dans themescustom et on le renomme comme on le souhaite
Etc
REMARQUE DANS LES DEUX CAS NE PAS OUBLIER DE PREacuteCISER LE lsquoBASE THEMErsquo DANS LE INFOYML
REMARQUE LE THEgraveME PARENT DOIT EcircTRE ACTIVEacute SI VOUS VOULEZ ACTIVER UN DE SES THEgraveMES ENFANT
JOBrsquoS DONE
Warcraft Human peon
2 CREacuteER SON THEgraveME
MAIShellip REVENONS SUR NOTRE FICHIER INFOYML
2 CREacuteER SON THEgraveME
THEMENAMEINFOYML
Librairies chargeacutees avec le thegraveme
Reacutegions du thegraveme
Informations du thegraveme
ET SUR LES FICHIERS DANS NOTRE DOSSIER lsquoTHEMENAMErsquo
2 CREacuteER SON THEgraveME gt THEMENAMEINFOYML
CONCREgraveTEMENT
NAMESCREENSHOTPNG
DESCRIPTION
1 ANATOMIE DrsquoUN THEgraveME gt _THEMENAME_INFOYML
CONCREgraveTEMENT
LOGOSVG
FAVICONICO
2 CREacuteER SON THEgraveME
DOCUMENTATION OFFICIELLEhttpswwwdrupalorgdocs8theming-drupal-8defining-a-theme-with-an-infoyml-file
Dans un fichier yml
LES POINTS Agrave RETENIR
libraries-override (optional) base theme (recommended) hidden (optional) engine (optional) logo (optional) screenshot (optional) regions (optional) regions_hidden (optional) features (optional) stylesheets-remove (deprecated) ckeditor_stylesheets (optional) name (required)
type (required) description (optional) package (optional) core (required) php (optional) version (optional) libraries (optional)
Mais surtout
Tabs are NOT allowed Use spaces ONLY
Properties and lists MUST be indented by two (2) spaces
AJOUTER DES ASSETS (CSSJS)
3
3 AJOUTER DES ASSETS
CHARGER DES FICHIERS CSS amp JSCe que dit la documentation
httpswwwdrupalorgdocs8themingadding-stylesheets-css-and-javascript-js-to-a-drupal-8-theme
1 Save the CSS or JS to a file using the proper naming conventions and file structure
2 Define a library which registers these CSSJS files with your theme
3 Attach the library to all pages to specific Twig templates or target specific pages via a render element in a preprocess function
3 AJOUTER DES ASSETS
EN PRATIQUE
Lrsquoajout de fichier de CSS et de JS se fait via un systegraveme de librairie (bibliothegraveque)
Il faut tout drsquoabord deacuteclarer une librairie (ou en utiliser une existante) dans le fichier THEMENAMElibrariesyml puis demander au systegraveme de la charger Ceci peut ecirctre fait depuis le fichier THEMENAMEinfoyml
3 AJOUTER DES ASSETS
CHARGER UNE LIBRAIRIE
Lorsqursquoune librairie est appeleacutee depuis le fichier THEMENAMEinfoyml alors elle est chargeacutee sur toutes les pages degraves lors que le thegraveme est utiliseacute
Il est possible de charger sous condition une bibliothegraveque Pour cela plusieurs techniques sont disponibles
depuis un fichier de template
en utilisant le hook_page_attachments_alter()
en utilisant une fonction de preprocess
3 AJOUTER DES ASSETS
CHARGER UNE LIBRAIRIE
Directement depuis un fichier de template directement par exemple dans le fichier geacuterant lrsquoaffichage des blocs
attach_library(lsquodrupal_franceblocksrsquo)
3 AJOUTER DES ASSETS
CHARGER UNE LIBRAIRIE
Chargement drsquoune librairie depuis le fichier themesTHEMENAMETHEMENAMEtheme en utilisant la fonction de hook hook_page_attachments_alter()
Implements hook_page_attachments_alter() function drupal_france_page_attachments_alter(array amp$attachments) $attachments[attached][library][] = drupal_franceglobal
3 AJOUTER DES ASSETS
CHARGER UNE LIBRAIRIE
Chargement drsquoune librairie depuis le fichier themesTHEMENAMETHEMENAMEtheme en utilisant une fonction de preprocess
Implements hook_preprocess_HOOK() for page templates function drupal_france_preprocess_page(array amp$variables) $variables[attached][library][] = drupal_franceglobal
LES FICHIERS TEMPLATES
4
4 LES TEMPLATES
Agrave QUOI CcedilA SERT
Les templates constituent la structure des pages du sitesEn fait de chacun des eacuteleacutements qui la composent
Ce sont des fichiers html (balises ltdivgt lth1gt ltagt) avec du code Twig permettant drsquoafficher les eacuteleacutements (sous forme de variables) creacuteeacutes par Drupal
Chaque type drsquoeacuteleacutement du site possegravede son propre template
4 LES TEMPLATES
PAR EXEMPLE (CrsquoEST DU VRAI CODE)
ltdiv class=l-main row expandedgt ltmain id=main class= main_grid role=maingt if pagehighlighted spaceless pagehighlighted endspaceless endif lta id=main-contentgtltagt if breadcrumb breadcrumb endif ltsectiongt pagecontent ltsectiongt ltmaingt if pagesidebar_first ltdiv id=sidebar-first class= sidebar_first_grid column sidebargt pagesidebar_first ltdivgt endif if pagesidebar_second ltdiv id=sidebar-second class= sidebar_sec_grid column sidebargt pagesidebar_second ltdivgt endif ltdivgt
4 LES TEMPLATES
IMBRICATION DES TEMPLATES
Imaginons lrsquoappel drsquoune page de billet de blog
Et maintenant imaginons le parcours drsquoimbrication de templates pour depuis la balise lthtmlgt jusqursquoagrave la ltdivgt contenant un commentaire sous ce billet de blog
4 LES TEMPLATES
FROM ltHTMLgt TO ltDIV CLASS=lsquoCOMMENTrsquogthtmlhtmltwig
pagehtmltwig
regionhtmltwig
blockhtmltwig
nodehtmltwig nodehtmltwig
fieldhtmltwig
comment-wrapperhtmltwig
commenthtmltwig
4 LES TEMPLATES
LES TEMPLATES DEacuteRIVEacuteES
Les templates deacuteriveacutees sont des templates utiliseacutees dans un contexte preacutecis
Crsquoest le nom de la template qui indique agrave Drupal quand lrsquoutiliser
Toutes ces templates sont optionnelles et reconnues automatiquement par Drupal en fonction de leurs noms
Si des templates ne sont pas preacutesentes dans le thegraveme alors Drupal utilise ceux par deacutefaut (corethemes)
On parle de ldquotemplate deacuteriveacuteeldquo de ldquosuggestion de templateldquo ou de ldquotemplates suggeacutereacuteesldquo
Il faut vider le cache de Drupal lorsque lrsquoon ajoute des templates au thegraveme
Documentation httpswwwdrupalorgdocs8themingtwigtwig-template-naming-conventions
4 LES TEMPLATES
EXEMPLE DE SUGGESTIONS DE TEMPLATES
Template de page pagehtmltwig page--chemin--internehtmltwig sera utiliseacute lorsque lrsquoon appelle chemininterne
Ex page--fronthtmltwig cible la page drsquoaccueil
Ex page--cheminhtmltwig cible toutes les pages dont le chemin commence par chemin
Ex page--node--240htmltwig cible la page du noeud portant lrsquoid 240
Template de noeud nodehtmltwig node--type-de-noeudhtmltwig cible les noeuds de type type-de-noeud
Ex node--articlehtmltwig cible tous les noeuds de type article
4 LES TEMPLATES
TROUVER LES SUGGESTIONS
Dans le fichier wwwsitesdevelopmentservicesyml
Local development services
parameters httpresponsedebug_cacheability_headers true twigconfig debug true services cachebackendnull class DrupalCoreCacheNullBackendFactory
TWIG5
5 TWIG
UN MOTEUR DE TEMPLATE
Twig est capable drsquoafficher le contenu de nrsquoimporte quel type de variable (chaine tableau ou objet)
Il est possible de faire des boucles des conditionshellip
Chaque variable peut ecirctre filtreacutee avant drsquoecirctre afficheacutee
Les chaines peuvent ecirctre rendues traduites (la traduction est alors faite via le back-office de Drupal)
5 TWIG
LES BASES
Affiche le contenu de la variable var var
Affiche le contenu de la proprieacuteteacute title de la variable node nodetitle
Conditions if var else endif
Commentaires commentaire
Traduction trans chaine endtrans
Fonctions speacutecifiques
url(lsquoroute_namersquo)
path(lsquoentitynodecanonicalrsquo lsquonodersquo nodeid)
Les modules Twig tweak ou encore Bamboo Twig proposent encore davantage de fonctions
5 TWIG
LES FILTRES Date date|format_date(lsquomediumrsquo)
Chaine
Echappement content (par deacutefaut)
Interpreacutetation du contenu de la variable texte|raw (attention )
Placeholder text|placeholder
Exclusion content|without(lsquolinksrsquo)
string|lower (upper eacutegalement)
class_name|clean_class
id_name|clean_id
Documentation httpswwwdrupalorgdocs8themingtwigfilters-modifying-variables-in-twig-templateshttpstwigsymfonycomdoc2x
5 TWIG
CONCREgraveTEMENT if pagefooter_first or pagefooter_middle or pagefooter_last ltdiv class=l-footer row expandedgt ltfooter class=row footer medium-up-2 large-up-3gt if pagefooter_first ltdiv id=footer-first class=columngt pagefooter_first ltdivgt endif if pagefooter_middle ltdiv id=footer-middle class=columngt pagefooter_middle ltdivgt endif if pagefooter_last ltdiv id=footer-last class=columngt pagefooter_last ltdivgt endif ltfootergt ltdivgt endif ltdiv class=bottom-bar panel hiddengt ltdiv class=rowgt ltdiv class=large-12 columngt ampcopy now|date(Y) site_name All rights reserved|t ltdivgt ltdivgt ltdivgt
LES REacuteGIONS6
6 LES REacuteGIONS
STRUCTURE DE LA PAGE
adminstructureblock gt Demonstrate block regions
6 LES REacuteGIONS
DEacuteFINITION ET RENDU DES REacuteGIONS
Les reacutegions doivent ecirctre deacutefinies dans le fichier THEMENAMEinfoyml
Elles doivent ecirctre appeleacutees obligatoirement dans pagehtmltwig
6 LES REacuteGIONS
THEMENAMEINFOYML
PAGEHTMLTWIG
LE RENDU DU CONTENU
7
7 RENDU DU CONTENU
LrsquoAFFICHAGE DES CHAMPS
Pour chaque type de contenu on peut reacutegler lrsquoaffichage des champs sur adminstructuretypesmanagecontent-typedisplay ougrave content-type est le nom machine du type de contenu
Il est possible de modifier lrsquoordre des champs lrsquoapparence des eacutetiquettes le format du champ
Les reacuteglages disponibles varient en fonction du type de champ
Les champs Texte peuvent ecirctre coupeacutes
Les champs Image peuvent ecirctre afficheacutes sous forme drsquoimage drsquoURL de fichier
Les champs Date peuvent utiliser un format diffeacuterent
Ces reacuteglages peuvent ecirctre diffeacuterents selon le mode drsquoaffichage (modes ldquoPar deacutefautldquo et ldquoAccrocheldquo) =gt Cela permet par exemple de masquer un champ en mode ldquoAccrocheldquo et de lrsquoafficher en mode ldquoPar deacutefautldquo (noeud inteacutegral)
7 RENDU DU CONTENU
LrsquoAFFICHAGE DES IMAGES
Les images transmises par les utilisateurs ne sont jamais aux bonnes dimensions
Le module Image (core) va nous permettre de preacutedeacutefinir des dimensions sous forme de styles drsquoimage par exemple
Vignette 70px x 110px (mise agrave lrsquoeacutechelle)
Normal 200px x 300px (mise agrave lrsquoeacutechelle et recadrage)
Ces dimensions pourront ensuite ecirctre appliqueacutees automatiquement aux champs Image depuis lrsquoeacutecran ldquogeacuterer lrsquoaffichageldquo vu preacuteceacutedemment
7 RENDU DU CONTENU
STYLE DrsquoIMAGE
7 RENDU DU CONTENU
STYLE DrsquoIMAGE
7 RENDU DU CONTENU
ALLER PLUS LOIN La gestion et la manipulation des champs est cependant
limiteacutee dans lrsquointerface drsquoadministration
On est parfois obligeacutes de modifier le code du template correspondant agrave notre champ ou type de contenu
Les reacuteglages de lrsquoadmin sont toujours pris en compte Par exemple les styles drsquoimage choisis seront ceux utiliseacutes mecircme si lrsquoon modifie le template
7 RENDU DU CONTENU
OUgrave SONT LES CHAMPS
Dans le fichier de template des noeuds (nodehtmltwig) on nrsquoa pas directement accegraves aux champs
Crsquoest la variable content qui contient tous les champs que lrsquoon affiche et en particulier ceux ajouteacutes via Field
Comment faire pour reacutecupeacuterer les champs un par un afin de les preacutesenter diffeacuteremment
7 RENDU DU CONTENU
LA VARIABLE lsquoCONTENTrsquo
Tout le contenu drsquoun noeud est afficheacute gracircce agrave la ligne content|without(comment links)
Pour connaitre le contenu de content on utilise la fonction kint() kint(content)
On deacutecouvre alors lrsquoensemble des champs et leurs proprieacuteteacutes qui sont afficheacutees en haut de page sous forme de var_dump()
On peut afficher seacutepareacutement chacun drsquoentre eux avec le code suivant contentnom_du_champ nodecreatedtime
7 RENDU DU CONTENU
NODE DE TYPE lsquoNEWSrsquo ET FORMAT lsquoTEASERrsquo
PREPROCESS8
8 PREPROCESS
FONCTIONS DE PREPROCESS
Pour chaque template on dispose de variables que lrsquoon affiche avec le formatage voulu
Ces variables sont creacuteeacutees en amont des templates dans lesquelles elles sont utiliseacutees
On dispose de fonctions dites de preprocess qui permettent de fabriquer les variables qui sont utiliseacutees dans les templates
Il est possible drsquoeacutetendre ces fonctions pour modifier les variables envoyeacutees aux templates ou en creacuteer de nouvelles
Pour ajouter une fonction de preprocess il faut la nommer comme suit THEMENAME_preprocess_HOOK() Par exemple drupal_france_preprocess_block()
8 PREPROCESS
FONCTIONS DE PREPROCESS
Pour chaque template on dispose de variables que lrsquoon affiche avec le formatage voulu
Ces variables sont creacuteeacutees en amont des templates dans lesquelles elles sont utiliseacutees
On dispose de fonctions dites de preprocess qui permettent de fabriquer les variables qui sont utiliseacutees dans les templates
Il est possible drsquoeacutetendre ces fonctions pour modifier les variables envoyeacutees aux templates ou en creacuteer de nouvelles
Pour ajouter une fonction de preprocess il faut la nommer comme suit THEMENAME_preprocess_HOOK() Par exemple drupal_france_preprocess_block()
8 PREPROCESS
LA VARIABLE lsquo$VARIABLESrsquo
Drupal
Preprocess en amont(core modules)
Preprocess du thegraveme
TemplateCreacuteation de $variables
$variables
$variables
$variables
$variables
En mode super simplifieacute
8 PREPROCESS
APPELLER UN PREPROCESS
Diffeacuterentes fonctions de preprocess peuvent ecirctre appeleacutees permettant agrave tous les modules et thegravemes de modifier les variables passeacutees aux templates Ces fonctions sont les suivantes pour le hook de thegraveme HOOK
template_preprocess_HOOK(array amp$variables)
MODULENAME_preprocess(array amp$variables $hook)
MODULENAME_preprocess_HOOK(array amp$variables)
THEMENAME_preprocess(array amp$variables $hook)
THEMENAME_preprocess_HOOK(array amp$variables)
8 PREPROCESS
CONCREgraveTEMENT Implements hook_preprocess_menu__account() function drupal_france_preprocess_menu__account(amp$variables) if (isset($variables[items][drupalfr_useraccountcompte])) $variables[items][drupalfr_useraccountcompte][attributes]-gtaddClass([ button primary button--user-account ])
$variables[items][drupalfr_useraccountcompte][title] = new FormattableMarkup( lti class=fa fa-user-circle-o aria-hidden=truegtltigtltspan class=sr-onlygtoriginal_titleltspangt [ original_title =gt $variables[items][drupalfr_useraccountcompte][title] ] )
JAVASCRIPT9
9 JAVASCRIPT
DRUPAL amp JAVASCRIPT Drupal integravegre de nombreuses libraries javascript (jQuery Modernizrhellip) et propose
eacutegalement des libraries drsquoutilitaires (coredrupal coredrupalSettings drupalajax drupalformhellip)
Par exemple Drupal 8 embarque
jQuery 321
jQuery UI 1121
Chaque librairie deacutefinit ses deacutependances jQuery UI deacutepend de jQuery par exemple
Lorsque lrsquoon utilise une librairie depuis un script custom il ne faut pas oublier de deacuteclarer cette deacutependance Pensez agrave tester en anonyme car aucune libraire nrsquoest chargeacutee par deacutefaut
Vous disposez de toutes les librairies deacutefinies dans le fichier corecorelibrairiesyml
9 JAVASCRIPT
CONCREgraveTEMENTPour pouvoir utiliser du code JS dans vos scripts avec Drupal la bonne pratique est drsquoencadrer votre code comme suit
file Shows status messages in a modal instead of inline (function ($ Drupal)
Displays status messages in a Foundation reveal modal DrupalbehaviorsfoundationStatusInReveal = attach function (context settings) $(status-messages)once(foundation-reveal)each(function() Move the status messages out of the highlighted region var $messages = $(this) var $region = $messagesparent() $messagesappendTo(body) $messagesfoundation(open)
This is required as this region will likely be empty after status messages are removed $regionhtml($regionhtml()replace(ng )) )
)(jQuery Drupal)
9 JAVASCRIPT
DRUPAL BEHAVIORS
Les scripts sont exeacutecuteacutes apregraves le chargement complet du DOM ($(document)ready() )Mais on a aussi parfois besoin de les reacute-exeacutecuter lorsque lrsquoon interagit avec la page (appel AJAX overlayhellip)
Pour ce faire il suffit drsquoattacher le script JS agrave lrsquoobjet Drupalbehaviors (librairie coredrupal) La fonction exeacutecuteacutee reccediloit 2 variables
context le DOM (le HTML chargeacute ou ajouteacute)
settings toutes les variables injecteacutees cocircteacute serveur
9 JAVASCRIPT
RAPPEL
Comme pour les fichiers de style les scripts JS doivent ecirctre deacuteclareacutes sous forme de bibliothegraveque via les fichiers THEMENAMEinfoyml et THEMENAMElibrariesyml
QUESTIONS 10
RTFM httpswwwdrupalorgdocs8theminghttpstwigsymfonycomdoc2x
MERCI Agrave VOUS
FlorisMoriceau
1 ANATOMIE DrsquoUN THEgraveME
THEMENAMETHEME
Le fichier monthemetheme permet drsquoajouter du code PHP additionnel speacutecifique au thegraveme
Ce fichier est facultatif mais il doit ecirctre obligatoirement placeacute agrave la racine du thegraveme srsquoil existe
Il contient des fonctions de preprocess que lrsquoon souhaite eacutetendre (voir plus loin) ainsi qursquoun certain nombre de fonctions de hook
Ce fichier est automatiquement reconnu et chargeacute par Drupal
1 ANATOMIE DrsquoUN THEgraveMETEXTE
FICHIERS IMAGE
Drupal nrsquoutilise pas de reacutepertoire speacutecifique pour stocker les images drsquoun thegraveme
La bonne pratique est de creacuteer un sous-dossier images (ou imghellip) dans le reacutepertoire du thegraveme mais on peut srsquoorganiser autrement si neacutecessaire
Dans tous les cas veiller agrave utiliser les bons chemins pour reacutefeacuterencer les images
CREacuteER SON THEgraveME (Agrave PARTIR DrsquoUN THEgraveME EXISTANT)
2
2 CREacuteER SON THEgraveME
OPTIONS DE PERSONNALISATION
Dans la section Apparence du back-office les personnalisations sont tregraves limiteacutees on peut seulement
Changer le logo
AfficherMasquer certains eacuteleacutements comme
Le Nom du site qui apparaicirct dans la reacutegion ldquoen-tecircteldquo
Les portraits utilisateur
Le slogan du site
Changer lrsquoicocircne de raccourcis
SI ON DEacuteSIRE PLUS DrsquoOUTILS DE PERSONNALISATION IL FAUT LES CODER
ET DONC CREacuteER SON PROPRE THEgraveME
2 CREacuteER SON THEgraveME
2 CREacuteER SON THEgraveME
POUR CREacuteER SON THEgraveME PLUSIEURS POSSIBILITEacuteS Partir de zeacutero
Possible mais fastidieux (Ne faites pas ccedila Ou alors seulement sur un side project personnel qui nrsquoa pas de deadline pour la beauteacute du geste et pour apprendre tous les rouages du templating)
Partir drsquoun thegraveme de base Un thegraveme de base est un thegraveme que lrsquoon va eacutetendre en heacuteritant de tout son code On dispose drsquoun systegraveme de thegravemes parentenfant Exemples Omega Zen Bootstraphellip ZURB Foundation
Partir drsquoun thegraveme ldquoprecirct-agrave-lrsquoemploildquo Par exemple un thegraveme acheteacute sur themeforestcom Lrsquoideacutee ici est de limiter au maximum les personnalisations afin de gagner du tempsAttention Sortir des fonctionnaliteacutes offertes par ce genre de thegraveme peut se reacuteveacuteler tregraves coucircteux
2 CREacuteER SON THEgraveME
MEacuteTHODE 1 VIA UN THEgraveME PREacuteSENT DANS LE CORE (BARTIK)
On fait une copie du thegraveme par deacutefaut Bartik (crsquoest-agrave-dire du reacutepertoire corethemesbartik)
On colle le reacutepertoire copieacute dans themescustom et on le renomme comme on le souhaiteAttention cependant Le thegraveme doit avoir un laquo nom machine raquo composeacute exclusivement de caractegraveres alphanumeacuteriques et de lsquo_rsquo (underscore)
Ici on choisira lsquoTHEMENAMErsquo
On renommez le fichier themescustomTHEMENAMEbartikinfoyml en themescustomTHEMENAMETHEMENAMEinfoyml (on nrsquooublie pas drsquoadapter eacutegalement le contenu du fichier infoyml)
On renomme tous les fichiers dont le nom comporte bartik par THEMENAME
Dans tous les fichiers on recherche les occurrences de la chaine lsquobartik et on les remplace par lsquoTHEMENAMErsquo
On vide TOUS les caches
Enfin on va dans Admin gt Apparence on active et deacutefini par deacutefaut notre nouveau thegraveme THEMENAME
On veacuterifie qursquoil nrsquoy a pas drsquoerreur en visitant par exemple la page drsquoaccueil
2 CREacuteER SON THEgraveME
MEacuteTHODE 2 VIA UN THEgraveME CONTIB AYANT UN STARTER (ZF) Certains thegravemes contrib proposent un laquo STARTER KIT raquo comme par exemple Bootstrap ou ZURB
Foundation
Dossier precirct a ecirctre copieacute colleacute pour faire un thegraveme enfant heacuteritant de ce dernier
On fait une copie du STARTER KIT
On colle le reacutepertoire copieacute dans themescustom et on le renomme comme on le souhaite
Etc
REMARQUE DANS LES DEUX CAS NE PAS OUBLIER DE PREacuteCISER LE lsquoBASE THEMErsquo DANS LE INFOYML
REMARQUE LE THEgraveME PARENT DOIT EcircTRE ACTIVEacute SI VOUS VOULEZ ACTIVER UN DE SES THEgraveMES ENFANT
JOBrsquoS DONE
Warcraft Human peon
2 CREacuteER SON THEgraveME
MAIShellip REVENONS SUR NOTRE FICHIER INFOYML
2 CREacuteER SON THEgraveME
THEMENAMEINFOYML
Librairies chargeacutees avec le thegraveme
Reacutegions du thegraveme
Informations du thegraveme
ET SUR LES FICHIERS DANS NOTRE DOSSIER lsquoTHEMENAMErsquo
2 CREacuteER SON THEgraveME gt THEMENAMEINFOYML
CONCREgraveTEMENT
NAMESCREENSHOTPNG
DESCRIPTION
1 ANATOMIE DrsquoUN THEgraveME gt _THEMENAME_INFOYML
CONCREgraveTEMENT
LOGOSVG
FAVICONICO
2 CREacuteER SON THEgraveME
DOCUMENTATION OFFICIELLEhttpswwwdrupalorgdocs8theming-drupal-8defining-a-theme-with-an-infoyml-file
Dans un fichier yml
LES POINTS Agrave RETENIR
libraries-override (optional) base theme (recommended) hidden (optional) engine (optional) logo (optional) screenshot (optional) regions (optional) regions_hidden (optional) features (optional) stylesheets-remove (deprecated) ckeditor_stylesheets (optional) name (required)
type (required) description (optional) package (optional) core (required) php (optional) version (optional) libraries (optional)
Mais surtout
Tabs are NOT allowed Use spaces ONLY
Properties and lists MUST be indented by two (2) spaces
AJOUTER DES ASSETS (CSSJS)
3
3 AJOUTER DES ASSETS
CHARGER DES FICHIERS CSS amp JSCe que dit la documentation
httpswwwdrupalorgdocs8themingadding-stylesheets-css-and-javascript-js-to-a-drupal-8-theme
1 Save the CSS or JS to a file using the proper naming conventions and file structure
2 Define a library which registers these CSSJS files with your theme
3 Attach the library to all pages to specific Twig templates or target specific pages via a render element in a preprocess function
3 AJOUTER DES ASSETS
EN PRATIQUE
Lrsquoajout de fichier de CSS et de JS se fait via un systegraveme de librairie (bibliothegraveque)
Il faut tout drsquoabord deacuteclarer une librairie (ou en utiliser une existante) dans le fichier THEMENAMElibrariesyml puis demander au systegraveme de la charger Ceci peut ecirctre fait depuis le fichier THEMENAMEinfoyml
3 AJOUTER DES ASSETS
CHARGER UNE LIBRAIRIE
Lorsqursquoune librairie est appeleacutee depuis le fichier THEMENAMEinfoyml alors elle est chargeacutee sur toutes les pages degraves lors que le thegraveme est utiliseacute
Il est possible de charger sous condition une bibliothegraveque Pour cela plusieurs techniques sont disponibles
depuis un fichier de template
en utilisant le hook_page_attachments_alter()
en utilisant une fonction de preprocess
3 AJOUTER DES ASSETS
CHARGER UNE LIBRAIRIE
Directement depuis un fichier de template directement par exemple dans le fichier geacuterant lrsquoaffichage des blocs
attach_library(lsquodrupal_franceblocksrsquo)
3 AJOUTER DES ASSETS
CHARGER UNE LIBRAIRIE
Chargement drsquoune librairie depuis le fichier themesTHEMENAMETHEMENAMEtheme en utilisant la fonction de hook hook_page_attachments_alter()
Implements hook_page_attachments_alter() function drupal_france_page_attachments_alter(array amp$attachments) $attachments[attached][library][] = drupal_franceglobal
3 AJOUTER DES ASSETS
CHARGER UNE LIBRAIRIE
Chargement drsquoune librairie depuis le fichier themesTHEMENAMETHEMENAMEtheme en utilisant une fonction de preprocess
Implements hook_preprocess_HOOK() for page templates function drupal_france_preprocess_page(array amp$variables) $variables[attached][library][] = drupal_franceglobal
LES FICHIERS TEMPLATES
4
4 LES TEMPLATES
Agrave QUOI CcedilA SERT
Les templates constituent la structure des pages du sitesEn fait de chacun des eacuteleacutements qui la composent
Ce sont des fichiers html (balises ltdivgt lth1gt ltagt) avec du code Twig permettant drsquoafficher les eacuteleacutements (sous forme de variables) creacuteeacutes par Drupal
Chaque type drsquoeacuteleacutement du site possegravede son propre template
4 LES TEMPLATES
PAR EXEMPLE (CrsquoEST DU VRAI CODE)
ltdiv class=l-main row expandedgt ltmain id=main class= main_grid role=maingt if pagehighlighted spaceless pagehighlighted endspaceless endif lta id=main-contentgtltagt if breadcrumb breadcrumb endif ltsectiongt pagecontent ltsectiongt ltmaingt if pagesidebar_first ltdiv id=sidebar-first class= sidebar_first_grid column sidebargt pagesidebar_first ltdivgt endif if pagesidebar_second ltdiv id=sidebar-second class= sidebar_sec_grid column sidebargt pagesidebar_second ltdivgt endif ltdivgt
4 LES TEMPLATES
IMBRICATION DES TEMPLATES
Imaginons lrsquoappel drsquoune page de billet de blog
Et maintenant imaginons le parcours drsquoimbrication de templates pour depuis la balise lthtmlgt jusqursquoagrave la ltdivgt contenant un commentaire sous ce billet de blog
4 LES TEMPLATES
FROM ltHTMLgt TO ltDIV CLASS=lsquoCOMMENTrsquogthtmlhtmltwig
pagehtmltwig
regionhtmltwig
blockhtmltwig
nodehtmltwig nodehtmltwig
fieldhtmltwig
comment-wrapperhtmltwig
commenthtmltwig
4 LES TEMPLATES
LES TEMPLATES DEacuteRIVEacuteES
Les templates deacuteriveacutees sont des templates utiliseacutees dans un contexte preacutecis
Crsquoest le nom de la template qui indique agrave Drupal quand lrsquoutiliser
Toutes ces templates sont optionnelles et reconnues automatiquement par Drupal en fonction de leurs noms
Si des templates ne sont pas preacutesentes dans le thegraveme alors Drupal utilise ceux par deacutefaut (corethemes)
On parle de ldquotemplate deacuteriveacuteeldquo de ldquosuggestion de templateldquo ou de ldquotemplates suggeacutereacuteesldquo
Il faut vider le cache de Drupal lorsque lrsquoon ajoute des templates au thegraveme
Documentation httpswwwdrupalorgdocs8themingtwigtwig-template-naming-conventions
4 LES TEMPLATES
EXEMPLE DE SUGGESTIONS DE TEMPLATES
Template de page pagehtmltwig page--chemin--internehtmltwig sera utiliseacute lorsque lrsquoon appelle chemininterne
Ex page--fronthtmltwig cible la page drsquoaccueil
Ex page--cheminhtmltwig cible toutes les pages dont le chemin commence par chemin
Ex page--node--240htmltwig cible la page du noeud portant lrsquoid 240
Template de noeud nodehtmltwig node--type-de-noeudhtmltwig cible les noeuds de type type-de-noeud
Ex node--articlehtmltwig cible tous les noeuds de type article
4 LES TEMPLATES
TROUVER LES SUGGESTIONS
Dans le fichier wwwsitesdevelopmentservicesyml
Local development services
parameters httpresponsedebug_cacheability_headers true twigconfig debug true services cachebackendnull class DrupalCoreCacheNullBackendFactory
TWIG5
5 TWIG
UN MOTEUR DE TEMPLATE
Twig est capable drsquoafficher le contenu de nrsquoimporte quel type de variable (chaine tableau ou objet)
Il est possible de faire des boucles des conditionshellip
Chaque variable peut ecirctre filtreacutee avant drsquoecirctre afficheacutee
Les chaines peuvent ecirctre rendues traduites (la traduction est alors faite via le back-office de Drupal)
5 TWIG
LES BASES
Affiche le contenu de la variable var var
Affiche le contenu de la proprieacuteteacute title de la variable node nodetitle
Conditions if var else endif
Commentaires commentaire
Traduction trans chaine endtrans
Fonctions speacutecifiques
url(lsquoroute_namersquo)
path(lsquoentitynodecanonicalrsquo lsquonodersquo nodeid)
Les modules Twig tweak ou encore Bamboo Twig proposent encore davantage de fonctions
5 TWIG
LES FILTRES Date date|format_date(lsquomediumrsquo)
Chaine
Echappement content (par deacutefaut)
Interpreacutetation du contenu de la variable texte|raw (attention )
Placeholder text|placeholder
Exclusion content|without(lsquolinksrsquo)
string|lower (upper eacutegalement)
class_name|clean_class
id_name|clean_id
Documentation httpswwwdrupalorgdocs8themingtwigfilters-modifying-variables-in-twig-templateshttpstwigsymfonycomdoc2x
5 TWIG
CONCREgraveTEMENT if pagefooter_first or pagefooter_middle or pagefooter_last ltdiv class=l-footer row expandedgt ltfooter class=row footer medium-up-2 large-up-3gt if pagefooter_first ltdiv id=footer-first class=columngt pagefooter_first ltdivgt endif if pagefooter_middle ltdiv id=footer-middle class=columngt pagefooter_middle ltdivgt endif if pagefooter_last ltdiv id=footer-last class=columngt pagefooter_last ltdivgt endif ltfootergt ltdivgt endif ltdiv class=bottom-bar panel hiddengt ltdiv class=rowgt ltdiv class=large-12 columngt ampcopy now|date(Y) site_name All rights reserved|t ltdivgt ltdivgt ltdivgt
LES REacuteGIONS6
6 LES REacuteGIONS
STRUCTURE DE LA PAGE
adminstructureblock gt Demonstrate block regions
6 LES REacuteGIONS
DEacuteFINITION ET RENDU DES REacuteGIONS
Les reacutegions doivent ecirctre deacutefinies dans le fichier THEMENAMEinfoyml
Elles doivent ecirctre appeleacutees obligatoirement dans pagehtmltwig
6 LES REacuteGIONS
THEMENAMEINFOYML
PAGEHTMLTWIG
LE RENDU DU CONTENU
7
7 RENDU DU CONTENU
LrsquoAFFICHAGE DES CHAMPS
Pour chaque type de contenu on peut reacutegler lrsquoaffichage des champs sur adminstructuretypesmanagecontent-typedisplay ougrave content-type est le nom machine du type de contenu
Il est possible de modifier lrsquoordre des champs lrsquoapparence des eacutetiquettes le format du champ
Les reacuteglages disponibles varient en fonction du type de champ
Les champs Texte peuvent ecirctre coupeacutes
Les champs Image peuvent ecirctre afficheacutes sous forme drsquoimage drsquoURL de fichier
Les champs Date peuvent utiliser un format diffeacuterent
Ces reacuteglages peuvent ecirctre diffeacuterents selon le mode drsquoaffichage (modes ldquoPar deacutefautldquo et ldquoAccrocheldquo) =gt Cela permet par exemple de masquer un champ en mode ldquoAccrocheldquo et de lrsquoafficher en mode ldquoPar deacutefautldquo (noeud inteacutegral)
7 RENDU DU CONTENU
LrsquoAFFICHAGE DES IMAGES
Les images transmises par les utilisateurs ne sont jamais aux bonnes dimensions
Le module Image (core) va nous permettre de preacutedeacutefinir des dimensions sous forme de styles drsquoimage par exemple
Vignette 70px x 110px (mise agrave lrsquoeacutechelle)
Normal 200px x 300px (mise agrave lrsquoeacutechelle et recadrage)
Ces dimensions pourront ensuite ecirctre appliqueacutees automatiquement aux champs Image depuis lrsquoeacutecran ldquogeacuterer lrsquoaffichageldquo vu preacuteceacutedemment
7 RENDU DU CONTENU
STYLE DrsquoIMAGE
7 RENDU DU CONTENU
STYLE DrsquoIMAGE
7 RENDU DU CONTENU
ALLER PLUS LOIN La gestion et la manipulation des champs est cependant
limiteacutee dans lrsquointerface drsquoadministration
On est parfois obligeacutes de modifier le code du template correspondant agrave notre champ ou type de contenu
Les reacuteglages de lrsquoadmin sont toujours pris en compte Par exemple les styles drsquoimage choisis seront ceux utiliseacutes mecircme si lrsquoon modifie le template
7 RENDU DU CONTENU
OUgrave SONT LES CHAMPS
Dans le fichier de template des noeuds (nodehtmltwig) on nrsquoa pas directement accegraves aux champs
Crsquoest la variable content qui contient tous les champs que lrsquoon affiche et en particulier ceux ajouteacutes via Field
Comment faire pour reacutecupeacuterer les champs un par un afin de les preacutesenter diffeacuteremment
7 RENDU DU CONTENU
LA VARIABLE lsquoCONTENTrsquo
Tout le contenu drsquoun noeud est afficheacute gracircce agrave la ligne content|without(comment links)
Pour connaitre le contenu de content on utilise la fonction kint() kint(content)
On deacutecouvre alors lrsquoensemble des champs et leurs proprieacuteteacutes qui sont afficheacutees en haut de page sous forme de var_dump()
On peut afficher seacutepareacutement chacun drsquoentre eux avec le code suivant contentnom_du_champ nodecreatedtime
7 RENDU DU CONTENU
NODE DE TYPE lsquoNEWSrsquo ET FORMAT lsquoTEASERrsquo
PREPROCESS8
8 PREPROCESS
FONCTIONS DE PREPROCESS
Pour chaque template on dispose de variables que lrsquoon affiche avec le formatage voulu
Ces variables sont creacuteeacutees en amont des templates dans lesquelles elles sont utiliseacutees
On dispose de fonctions dites de preprocess qui permettent de fabriquer les variables qui sont utiliseacutees dans les templates
Il est possible drsquoeacutetendre ces fonctions pour modifier les variables envoyeacutees aux templates ou en creacuteer de nouvelles
Pour ajouter une fonction de preprocess il faut la nommer comme suit THEMENAME_preprocess_HOOK() Par exemple drupal_france_preprocess_block()
8 PREPROCESS
FONCTIONS DE PREPROCESS
Pour chaque template on dispose de variables que lrsquoon affiche avec le formatage voulu
Ces variables sont creacuteeacutees en amont des templates dans lesquelles elles sont utiliseacutees
On dispose de fonctions dites de preprocess qui permettent de fabriquer les variables qui sont utiliseacutees dans les templates
Il est possible drsquoeacutetendre ces fonctions pour modifier les variables envoyeacutees aux templates ou en creacuteer de nouvelles
Pour ajouter une fonction de preprocess il faut la nommer comme suit THEMENAME_preprocess_HOOK() Par exemple drupal_france_preprocess_block()
8 PREPROCESS
LA VARIABLE lsquo$VARIABLESrsquo
Drupal
Preprocess en amont(core modules)
Preprocess du thegraveme
TemplateCreacuteation de $variables
$variables
$variables
$variables
$variables
En mode super simplifieacute
8 PREPROCESS
APPELLER UN PREPROCESS
Diffeacuterentes fonctions de preprocess peuvent ecirctre appeleacutees permettant agrave tous les modules et thegravemes de modifier les variables passeacutees aux templates Ces fonctions sont les suivantes pour le hook de thegraveme HOOK
template_preprocess_HOOK(array amp$variables)
MODULENAME_preprocess(array amp$variables $hook)
MODULENAME_preprocess_HOOK(array amp$variables)
THEMENAME_preprocess(array amp$variables $hook)
THEMENAME_preprocess_HOOK(array amp$variables)
8 PREPROCESS
CONCREgraveTEMENT Implements hook_preprocess_menu__account() function drupal_france_preprocess_menu__account(amp$variables) if (isset($variables[items][drupalfr_useraccountcompte])) $variables[items][drupalfr_useraccountcompte][attributes]-gtaddClass([ button primary button--user-account ])
$variables[items][drupalfr_useraccountcompte][title] = new FormattableMarkup( lti class=fa fa-user-circle-o aria-hidden=truegtltigtltspan class=sr-onlygtoriginal_titleltspangt [ original_title =gt $variables[items][drupalfr_useraccountcompte][title] ] )
JAVASCRIPT9
9 JAVASCRIPT
DRUPAL amp JAVASCRIPT Drupal integravegre de nombreuses libraries javascript (jQuery Modernizrhellip) et propose
eacutegalement des libraries drsquoutilitaires (coredrupal coredrupalSettings drupalajax drupalformhellip)
Par exemple Drupal 8 embarque
jQuery 321
jQuery UI 1121
Chaque librairie deacutefinit ses deacutependances jQuery UI deacutepend de jQuery par exemple
Lorsque lrsquoon utilise une librairie depuis un script custom il ne faut pas oublier de deacuteclarer cette deacutependance Pensez agrave tester en anonyme car aucune libraire nrsquoest chargeacutee par deacutefaut
Vous disposez de toutes les librairies deacutefinies dans le fichier corecorelibrairiesyml
9 JAVASCRIPT
CONCREgraveTEMENTPour pouvoir utiliser du code JS dans vos scripts avec Drupal la bonne pratique est drsquoencadrer votre code comme suit
file Shows status messages in a modal instead of inline (function ($ Drupal)
Displays status messages in a Foundation reveal modal DrupalbehaviorsfoundationStatusInReveal = attach function (context settings) $(status-messages)once(foundation-reveal)each(function() Move the status messages out of the highlighted region var $messages = $(this) var $region = $messagesparent() $messagesappendTo(body) $messagesfoundation(open)
This is required as this region will likely be empty after status messages are removed $regionhtml($regionhtml()replace(ng )) )
)(jQuery Drupal)
9 JAVASCRIPT
DRUPAL BEHAVIORS
Les scripts sont exeacutecuteacutes apregraves le chargement complet du DOM ($(document)ready() )Mais on a aussi parfois besoin de les reacute-exeacutecuter lorsque lrsquoon interagit avec la page (appel AJAX overlayhellip)
Pour ce faire il suffit drsquoattacher le script JS agrave lrsquoobjet Drupalbehaviors (librairie coredrupal) La fonction exeacutecuteacutee reccediloit 2 variables
context le DOM (le HTML chargeacute ou ajouteacute)
settings toutes les variables injecteacutees cocircteacute serveur
9 JAVASCRIPT
RAPPEL
Comme pour les fichiers de style les scripts JS doivent ecirctre deacuteclareacutes sous forme de bibliothegraveque via les fichiers THEMENAMEinfoyml et THEMENAMElibrariesyml
QUESTIONS 10
RTFM httpswwwdrupalorgdocs8theminghttpstwigsymfonycomdoc2x
MERCI Agrave VOUS
FlorisMoriceau
1 ANATOMIE DrsquoUN THEgraveMETEXTE
FICHIERS IMAGE
Drupal nrsquoutilise pas de reacutepertoire speacutecifique pour stocker les images drsquoun thegraveme
La bonne pratique est de creacuteer un sous-dossier images (ou imghellip) dans le reacutepertoire du thegraveme mais on peut srsquoorganiser autrement si neacutecessaire
Dans tous les cas veiller agrave utiliser les bons chemins pour reacutefeacuterencer les images
CREacuteER SON THEgraveME (Agrave PARTIR DrsquoUN THEgraveME EXISTANT)
2
2 CREacuteER SON THEgraveME
OPTIONS DE PERSONNALISATION
Dans la section Apparence du back-office les personnalisations sont tregraves limiteacutees on peut seulement
Changer le logo
AfficherMasquer certains eacuteleacutements comme
Le Nom du site qui apparaicirct dans la reacutegion ldquoen-tecircteldquo
Les portraits utilisateur
Le slogan du site
Changer lrsquoicocircne de raccourcis
SI ON DEacuteSIRE PLUS DrsquoOUTILS DE PERSONNALISATION IL FAUT LES CODER
ET DONC CREacuteER SON PROPRE THEgraveME
2 CREacuteER SON THEgraveME
2 CREacuteER SON THEgraveME
POUR CREacuteER SON THEgraveME PLUSIEURS POSSIBILITEacuteS Partir de zeacutero
Possible mais fastidieux (Ne faites pas ccedila Ou alors seulement sur un side project personnel qui nrsquoa pas de deadline pour la beauteacute du geste et pour apprendre tous les rouages du templating)
Partir drsquoun thegraveme de base Un thegraveme de base est un thegraveme que lrsquoon va eacutetendre en heacuteritant de tout son code On dispose drsquoun systegraveme de thegravemes parentenfant Exemples Omega Zen Bootstraphellip ZURB Foundation
Partir drsquoun thegraveme ldquoprecirct-agrave-lrsquoemploildquo Par exemple un thegraveme acheteacute sur themeforestcom Lrsquoideacutee ici est de limiter au maximum les personnalisations afin de gagner du tempsAttention Sortir des fonctionnaliteacutes offertes par ce genre de thegraveme peut se reacuteveacuteler tregraves coucircteux
2 CREacuteER SON THEgraveME
MEacuteTHODE 1 VIA UN THEgraveME PREacuteSENT DANS LE CORE (BARTIK)
On fait une copie du thegraveme par deacutefaut Bartik (crsquoest-agrave-dire du reacutepertoire corethemesbartik)
On colle le reacutepertoire copieacute dans themescustom et on le renomme comme on le souhaiteAttention cependant Le thegraveme doit avoir un laquo nom machine raquo composeacute exclusivement de caractegraveres alphanumeacuteriques et de lsquo_rsquo (underscore)
Ici on choisira lsquoTHEMENAMErsquo
On renommez le fichier themescustomTHEMENAMEbartikinfoyml en themescustomTHEMENAMETHEMENAMEinfoyml (on nrsquooublie pas drsquoadapter eacutegalement le contenu du fichier infoyml)
On renomme tous les fichiers dont le nom comporte bartik par THEMENAME
Dans tous les fichiers on recherche les occurrences de la chaine lsquobartik et on les remplace par lsquoTHEMENAMErsquo
On vide TOUS les caches
Enfin on va dans Admin gt Apparence on active et deacutefini par deacutefaut notre nouveau thegraveme THEMENAME
On veacuterifie qursquoil nrsquoy a pas drsquoerreur en visitant par exemple la page drsquoaccueil
2 CREacuteER SON THEgraveME
MEacuteTHODE 2 VIA UN THEgraveME CONTIB AYANT UN STARTER (ZF) Certains thegravemes contrib proposent un laquo STARTER KIT raquo comme par exemple Bootstrap ou ZURB
Foundation
Dossier precirct a ecirctre copieacute colleacute pour faire un thegraveme enfant heacuteritant de ce dernier
On fait une copie du STARTER KIT
On colle le reacutepertoire copieacute dans themescustom et on le renomme comme on le souhaite
Etc
REMARQUE DANS LES DEUX CAS NE PAS OUBLIER DE PREacuteCISER LE lsquoBASE THEMErsquo DANS LE INFOYML
REMARQUE LE THEgraveME PARENT DOIT EcircTRE ACTIVEacute SI VOUS VOULEZ ACTIVER UN DE SES THEgraveMES ENFANT
JOBrsquoS DONE
Warcraft Human peon
2 CREacuteER SON THEgraveME
MAIShellip REVENONS SUR NOTRE FICHIER INFOYML
2 CREacuteER SON THEgraveME
THEMENAMEINFOYML
Librairies chargeacutees avec le thegraveme
Reacutegions du thegraveme
Informations du thegraveme
ET SUR LES FICHIERS DANS NOTRE DOSSIER lsquoTHEMENAMErsquo
2 CREacuteER SON THEgraveME gt THEMENAMEINFOYML
CONCREgraveTEMENT
NAMESCREENSHOTPNG
DESCRIPTION
1 ANATOMIE DrsquoUN THEgraveME gt _THEMENAME_INFOYML
CONCREgraveTEMENT
LOGOSVG
FAVICONICO
2 CREacuteER SON THEgraveME
DOCUMENTATION OFFICIELLEhttpswwwdrupalorgdocs8theming-drupal-8defining-a-theme-with-an-infoyml-file
Dans un fichier yml
LES POINTS Agrave RETENIR
libraries-override (optional) base theme (recommended) hidden (optional) engine (optional) logo (optional) screenshot (optional) regions (optional) regions_hidden (optional) features (optional) stylesheets-remove (deprecated) ckeditor_stylesheets (optional) name (required)
type (required) description (optional) package (optional) core (required) php (optional) version (optional) libraries (optional)
Mais surtout
Tabs are NOT allowed Use spaces ONLY
Properties and lists MUST be indented by two (2) spaces
AJOUTER DES ASSETS (CSSJS)
3
3 AJOUTER DES ASSETS
CHARGER DES FICHIERS CSS amp JSCe que dit la documentation
httpswwwdrupalorgdocs8themingadding-stylesheets-css-and-javascript-js-to-a-drupal-8-theme
1 Save the CSS or JS to a file using the proper naming conventions and file structure
2 Define a library which registers these CSSJS files with your theme
3 Attach the library to all pages to specific Twig templates or target specific pages via a render element in a preprocess function
3 AJOUTER DES ASSETS
EN PRATIQUE
Lrsquoajout de fichier de CSS et de JS se fait via un systegraveme de librairie (bibliothegraveque)
Il faut tout drsquoabord deacuteclarer une librairie (ou en utiliser une existante) dans le fichier THEMENAMElibrariesyml puis demander au systegraveme de la charger Ceci peut ecirctre fait depuis le fichier THEMENAMEinfoyml
3 AJOUTER DES ASSETS
CHARGER UNE LIBRAIRIE
Lorsqursquoune librairie est appeleacutee depuis le fichier THEMENAMEinfoyml alors elle est chargeacutee sur toutes les pages degraves lors que le thegraveme est utiliseacute
Il est possible de charger sous condition une bibliothegraveque Pour cela plusieurs techniques sont disponibles
depuis un fichier de template
en utilisant le hook_page_attachments_alter()
en utilisant une fonction de preprocess
3 AJOUTER DES ASSETS
CHARGER UNE LIBRAIRIE
Directement depuis un fichier de template directement par exemple dans le fichier geacuterant lrsquoaffichage des blocs
attach_library(lsquodrupal_franceblocksrsquo)
3 AJOUTER DES ASSETS
CHARGER UNE LIBRAIRIE
Chargement drsquoune librairie depuis le fichier themesTHEMENAMETHEMENAMEtheme en utilisant la fonction de hook hook_page_attachments_alter()
Implements hook_page_attachments_alter() function drupal_france_page_attachments_alter(array amp$attachments) $attachments[attached][library][] = drupal_franceglobal
3 AJOUTER DES ASSETS
CHARGER UNE LIBRAIRIE
Chargement drsquoune librairie depuis le fichier themesTHEMENAMETHEMENAMEtheme en utilisant une fonction de preprocess
Implements hook_preprocess_HOOK() for page templates function drupal_france_preprocess_page(array amp$variables) $variables[attached][library][] = drupal_franceglobal
LES FICHIERS TEMPLATES
4
4 LES TEMPLATES
Agrave QUOI CcedilA SERT
Les templates constituent la structure des pages du sitesEn fait de chacun des eacuteleacutements qui la composent
Ce sont des fichiers html (balises ltdivgt lth1gt ltagt) avec du code Twig permettant drsquoafficher les eacuteleacutements (sous forme de variables) creacuteeacutes par Drupal
Chaque type drsquoeacuteleacutement du site possegravede son propre template
4 LES TEMPLATES
PAR EXEMPLE (CrsquoEST DU VRAI CODE)
ltdiv class=l-main row expandedgt ltmain id=main class= main_grid role=maingt if pagehighlighted spaceless pagehighlighted endspaceless endif lta id=main-contentgtltagt if breadcrumb breadcrumb endif ltsectiongt pagecontent ltsectiongt ltmaingt if pagesidebar_first ltdiv id=sidebar-first class= sidebar_first_grid column sidebargt pagesidebar_first ltdivgt endif if pagesidebar_second ltdiv id=sidebar-second class= sidebar_sec_grid column sidebargt pagesidebar_second ltdivgt endif ltdivgt
4 LES TEMPLATES
IMBRICATION DES TEMPLATES
Imaginons lrsquoappel drsquoune page de billet de blog
Et maintenant imaginons le parcours drsquoimbrication de templates pour depuis la balise lthtmlgt jusqursquoagrave la ltdivgt contenant un commentaire sous ce billet de blog
4 LES TEMPLATES
FROM ltHTMLgt TO ltDIV CLASS=lsquoCOMMENTrsquogthtmlhtmltwig
pagehtmltwig
regionhtmltwig
blockhtmltwig
nodehtmltwig nodehtmltwig
fieldhtmltwig
comment-wrapperhtmltwig
commenthtmltwig
4 LES TEMPLATES
LES TEMPLATES DEacuteRIVEacuteES
Les templates deacuteriveacutees sont des templates utiliseacutees dans un contexte preacutecis
Crsquoest le nom de la template qui indique agrave Drupal quand lrsquoutiliser
Toutes ces templates sont optionnelles et reconnues automatiquement par Drupal en fonction de leurs noms
Si des templates ne sont pas preacutesentes dans le thegraveme alors Drupal utilise ceux par deacutefaut (corethemes)
On parle de ldquotemplate deacuteriveacuteeldquo de ldquosuggestion de templateldquo ou de ldquotemplates suggeacutereacuteesldquo
Il faut vider le cache de Drupal lorsque lrsquoon ajoute des templates au thegraveme
Documentation httpswwwdrupalorgdocs8themingtwigtwig-template-naming-conventions
4 LES TEMPLATES
EXEMPLE DE SUGGESTIONS DE TEMPLATES
Template de page pagehtmltwig page--chemin--internehtmltwig sera utiliseacute lorsque lrsquoon appelle chemininterne
Ex page--fronthtmltwig cible la page drsquoaccueil
Ex page--cheminhtmltwig cible toutes les pages dont le chemin commence par chemin
Ex page--node--240htmltwig cible la page du noeud portant lrsquoid 240
Template de noeud nodehtmltwig node--type-de-noeudhtmltwig cible les noeuds de type type-de-noeud
Ex node--articlehtmltwig cible tous les noeuds de type article
4 LES TEMPLATES
TROUVER LES SUGGESTIONS
Dans le fichier wwwsitesdevelopmentservicesyml
Local development services
parameters httpresponsedebug_cacheability_headers true twigconfig debug true services cachebackendnull class DrupalCoreCacheNullBackendFactory
TWIG5
5 TWIG
UN MOTEUR DE TEMPLATE
Twig est capable drsquoafficher le contenu de nrsquoimporte quel type de variable (chaine tableau ou objet)
Il est possible de faire des boucles des conditionshellip
Chaque variable peut ecirctre filtreacutee avant drsquoecirctre afficheacutee
Les chaines peuvent ecirctre rendues traduites (la traduction est alors faite via le back-office de Drupal)
5 TWIG
LES BASES
Affiche le contenu de la variable var var
Affiche le contenu de la proprieacuteteacute title de la variable node nodetitle
Conditions if var else endif
Commentaires commentaire
Traduction trans chaine endtrans
Fonctions speacutecifiques
url(lsquoroute_namersquo)
path(lsquoentitynodecanonicalrsquo lsquonodersquo nodeid)
Les modules Twig tweak ou encore Bamboo Twig proposent encore davantage de fonctions
5 TWIG
LES FILTRES Date date|format_date(lsquomediumrsquo)
Chaine
Echappement content (par deacutefaut)
Interpreacutetation du contenu de la variable texte|raw (attention )
Placeholder text|placeholder
Exclusion content|without(lsquolinksrsquo)
string|lower (upper eacutegalement)
class_name|clean_class
id_name|clean_id
Documentation httpswwwdrupalorgdocs8themingtwigfilters-modifying-variables-in-twig-templateshttpstwigsymfonycomdoc2x
5 TWIG
CONCREgraveTEMENT if pagefooter_first or pagefooter_middle or pagefooter_last ltdiv class=l-footer row expandedgt ltfooter class=row footer medium-up-2 large-up-3gt if pagefooter_first ltdiv id=footer-first class=columngt pagefooter_first ltdivgt endif if pagefooter_middle ltdiv id=footer-middle class=columngt pagefooter_middle ltdivgt endif if pagefooter_last ltdiv id=footer-last class=columngt pagefooter_last ltdivgt endif ltfootergt ltdivgt endif ltdiv class=bottom-bar panel hiddengt ltdiv class=rowgt ltdiv class=large-12 columngt ampcopy now|date(Y) site_name All rights reserved|t ltdivgt ltdivgt ltdivgt
LES REacuteGIONS6
6 LES REacuteGIONS
STRUCTURE DE LA PAGE
adminstructureblock gt Demonstrate block regions
6 LES REacuteGIONS
DEacuteFINITION ET RENDU DES REacuteGIONS
Les reacutegions doivent ecirctre deacutefinies dans le fichier THEMENAMEinfoyml
Elles doivent ecirctre appeleacutees obligatoirement dans pagehtmltwig
6 LES REacuteGIONS
THEMENAMEINFOYML
PAGEHTMLTWIG
LE RENDU DU CONTENU
7
7 RENDU DU CONTENU
LrsquoAFFICHAGE DES CHAMPS
Pour chaque type de contenu on peut reacutegler lrsquoaffichage des champs sur adminstructuretypesmanagecontent-typedisplay ougrave content-type est le nom machine du type de contenu
Il est possible de modifier lrsquoordre des champs lrsquoapparence des eacutetiquettes le format du champ
Les reacuteglages disponibles varient en fonction du type de champ
Les champs Texte peuvent ecirctre coupeacutes
Les champs Image peuvent ecirctre afficheacutes sous forme drsquoimage drsquoURL de fichier
Les champs Date peuvent utiliser un format diffeacuterent
Ces reacuteglages peuvent ecirctre diffeacuterents selon le mode drsquoaffichage (modes ldquoPar deacutefautldquo et ldquoAccrocheldquo) =gt Cela permet par exemple de masquer un champ en mode ldquoAccrocheldquo et de lrsquoafficher en mode ldquoPar deacutefautldquo (noeud inteacutegral)
7 RENDU DU CONTENU
LrsquoAFFICHAGE DES IMAGES
Les images transmises par les utilisateurs ne sont jamais aux bonnes dimensions
Le module Image (core) va nous permettre de preacutedeacutefinir des dimensions sous forme de styles drsquoimage par exemple
Vignette 70px x 110px (mise agrave lrsquoeacutechelle)
Normal 200px x 300px (mise agrave lrsquoeacutechelle et recadrage)
Ces dimensions pourront ensuite ecirctre appliqueacutees automatiquement aux champs Image depuis lrsquoeacutecran ldquogeacuterer lrsquoaffichageldquo vu preacuteceacutedemment
7 RENDU DU CONTENU
STYLE DrsquoIMAGE
7 RENDU DU CONTENU
STYLE DrsquoIMAGE
7 RENDU DU CONTENU
ALLER PLUS LOIN La gestion et la manipulation des champs est cependant
limiteacutee dans lrsquointerface drsquoadministration
On est parfois obligeacutes de modifier le code du template correspondant agrave notre champ ou type de contenu
Les reacuteglages de lrsquoadmin sont toujours pris en compte Par exemple les styles drsquoimage choisis seront ceux utiliseacutes mecircme si lrsquoon modifie le template
7 RENDU DU CONTENU
OUgrave SONT LES CHAMPS
Dans le fichier de template des noeuds (nodehtmltwig) on nrsquoa pas directement accegraves aux champs
Crsquoest la variable content qui contient tous les champs que lrsquoon affiche et en particulier ceux ajouteacutes via Field
Comment faire pour reacutecupeacuterer les champs un par un afin de les preacutesenter diffeacuteremment
7 RENDU DU CONTENU
LA VARIABLE lsquoCONTENTrsquo
Tout le contenu drsquoun noeud est afficheacute gracircce agrave la ligne content|without(comment links)
Pour connaitre le contenu de content on utilise la fonction kint() kint(content)
On deacutecouvre alors lrsquoensemble des champs et leurs proprieacuteteacutes qui sont afficheacutees en haut de page sous forme de var_dump()
On peut afficher seacutepareacutement chacun drsquoentre eux avec le code suivant contentnom_du_champ nodecreatedtime
7 RENDU DU CONTENU
NODE DE TYPE lsquoNEWSrsquo ET FORMAT lsquoTEASERrsquo
PREPROCESS8
8 PREPROCESS
FONCTIONS DE PREPROCESS
Pour chaque template on dispose de variables que lrsquoon affiche avec le formatage voulu
Ces variables sont creacuteeacutees en amont des templates dans lesquelles elles sont utiliseacutees
On dispose de fonctions dites de preprocess qui permettent de fabriquer les variables qui sont utiliseacutees dans les templates
Il est possible drsquoeacutetendre ces fonctions pour modifier les variables envoyeacutees aux templates ou en creacuteer de nouvelles
Pour ajouter une fonction de preprocess il faut la nommer comme suit THEMENAME_preprocess_HOOK() Par exemple drupal_france_preprocess_block()
8 PREPROCESS
FONCTIONS DE PREPROCESS
Pour chaque template on dispose de variables que lrsquoon affiche avec le formatage voulu
Ces variables sont creacuteeacutees en amont des templates dans lesquelles elles sont utiliseacutees
On dispose de fonctions dites de preprocess qui permettent de fabriquer les variables qui sont utiliseacutees dans les templates
Il est possible drsquoeacutetendre ces fonctions pour modifier les variables envoyeacutees aux templates ou en creacuteer de nouvelles
Pour ajouter une fonction de preprocess il faut la nommer comme suit THEMENAME_preprocess_HOOK() Par exemple drupal_france_preprocess_block()
8 PREPROCESS
LA VARIABLE lsquo$VARIABLESrsquo
Drupal
Preprocess en amont(core modules)
Preprocess du thegraveme
TemplateCreacuteation de $variables
$variables
$variables
$variables
$variables
En mode super simplifieacute
8 PREPROCESS
APPELLER UN PREPROCESS
Diffeacuterentes fonctions de preprocess peuvent ecirctre appeleacutees permettant agrave tous les modules et thegravemes de modifier les variables passeacutees aux templates Ces fonctions sont les suivantes pour le hook de thegraveme HOOK
template_preprocess_HOOK(array amp$variables)
MODULENAME_preprocess(array amp$variables $hook)
MODULENAME_preprocess_HOOK(array amp$variables)
THEMENAME_preprocess(array amp$variables $hook)
THEMENAME_preprocess_HOOK(array amp$variables)
8 PREPROCESS
CONCREgraveTEMENT Implements hook_preprocess_menu__account() function drupal_france_preprocess_menu__account(amp$variables) if (isset($variables[items][drupalfr_useraccountcompte])) $variables[items][drupalfr_useraccountcompte][attributes]-gtaddClass([ button primary button--user-account ])
$variables[items][drupalfr_useraccountcompte][title] = new FormattableMarkup( lti class=fa fa-user-circle-o aria-hidden=truegtltigtltspan class=sr-onlygtoriginal_titleltspangt [ original_title =gt $variables[items][drupalfr_useraccountcompte][title] ] )
JAVASCRIPT9
9 JAVASCRIPT
DRUPAL amp JAVASCRIPT Drupal integravegre de nombreuses libraries javascript (jQuery Modernizrhellip) et propose
eacutegalement des libraries drsquoutilitaires (coredrupal coredrupalSettings drupalajax drupalformhellip)
Par exemple Drupal 8 embarque
jQuery 321
jQuery UI 1121
Chaque librairie deacutefinit ses deacutependances jQuery UI deacutepend de jQuery par exemple
Lorsque lrsquoon utilise une librairie depuis un script custom il ne faut pas oublier de deacuteclarer cette deacutependance Pensez agrave tester en anonyme car aucune libraire nrsquoest chargeacutee par deacutefaut
Vous disposez de toutes les librairies deacutefinies dans le fichier corecorelibrairiesyml
9 JAVASCRIPT
CONCREgraveTEMENTPour pouvoir utiliser du code JS dans vos scripts avec Drupal la bonne pratique est drsquoencadrer votre code comme suit
file Shows status messages in a modal instead of inline (function ($ Drupal)
Displays status messages in a Foundation reveal modal DrupalbehaviorsfoundationStatusInReveal = attach function (context settings) $(status-messages)once(foundation-reveal)each(function() Move the status messages out of the highlighted region var $messages = $(this) var $region = $messagesparent() $messagesappendTo(body) $messagesfoundation(open)
This is required as this region will likely be empty after status messages are removed $regionhtml($regionhtml()replace(ng )) )
)(jQuery Drupal)
9 JAVASCRIPT
DRUPAL BEHAVIORS
Les scripts sont exeacutecuteacutes apregraves le chargement complet du DOM ($(document)ready() )Mais on a aussi parfois besoin de les reacute-exeacutecuter lorsque lrsquoon interagit avec la page (appel AJAX overlayhellip)
Pour ce faire il suffit drsquoattacher le script JS agrave lrsquoobjet Drupalbehaviors (librairie coredrupal) La fonction exeacutecuteacutee reccediloit 2 variables
context le DOM (le HTML chargeacute ou ajouteacute)
settings toutes les variables injecteacutees cocircteacute serveur
9 JAVASCRIPT
RAPPEL
Comme pour les fichiers de style les scripts JS doivent ecirctre deacuteclareacutes sous forme de bibliothegraveque via les fichiers THEMENAMEinfoyml et THEMENAMElibrariesyml
QUESTIONS 10
RTFM httpswwwdrupalorgdocs8theminghttpstwigsymfonycomdoc2x
MERCI Agrave VOUS
FlorisMoriceau
CREacuteER SON THEgraveME (Agrave PARTIR DrsquoUN THEgraveME EXISTANT)
2
2 CREacuteER SON THEgraveME
OPTIONS DE PERSONNALISATION
Dans la section Apparence du back-office les personnalisations sont tregraves limiteacutees on peut seulement
Changer le logo
AfficherMasquer certains eacuteleacutements comme
Le Nom du site qui apparaicirct dans la reacutegion ldquoen-tecircteldquo
Les portraits utilisateur
Le slogan du site
Changer lrsquoicocircne de raccourcis
SI ON DEacuteSIRE PLUS DrsquoOUTILS DE PERSONNALISATION IL FAUT LES CODER
ET DONC CREacuteER SON PROPRE THEgraveME
2 CREacuteER SON THEgraveME
2 CREacuteER SON THEgraveME
POUR CREacuteER SON THEgraveME PLUSIEURS POSSIBILITEacuteS Partir de zeacutero
Possible mais fastidieux (Ne faites pas ccedila Ou alors seulement sur un side project personnel qui nrsquoa pas de deadline pour la beauteacute du geste et pour apprendre tous les rouages du templating)
Partir drsquoun thegraveme de base Un thegraveme de base est un thegraveme que lrsquoon va eacutetendre en heacuteritant de tout son code On dispose drsquoun systegraveme de thegravemes parentenfant Exemples Omega Zen Bootstraphellip ZURB Foundation
Partir drsquoun thegraveme ldquoprecirct-agrave-lrsquoemploildquo Par exemple un thegraveme acheteacute sur themeforestcom Lrsquoideacutee ici est de limiter au maximum les personnalisations afin de gagner du tempsAttention Sortir des fonctionnaliteacutes offertes par ce genre de thegraveme peut se reacuteveacuteler tregraves coucircteux
2 CREacuteER SON THEgraveME
MEacuteTHODE 1 VIA UN THEgraveME PREacuteSENT DANS LE CORE (BARTIK)
On fait une copie du thegraveme par deacutefaut Bartik (crsquoest-agrave-dire du reacutepertoire corethemesbartik)
On colle le reacutepertoire copieacute dans themescustom et on le renomme comme on le souhaiteAttention cependant Le thegraveme doit avoir un laquo nom machine raquo composeacute exclusivement de caractegraveres alphanumeacuteriques et de lsquo_rsquo (underscore)
Ici on choisira lsquoTHEMENAMErsquo
On renommez le fichier themescustomTHEMENAMEbartikinfoyml en themescustomTHEMENAMETHEMENAMEinfoyml (on nrsquooublie pas drsquoadapter eacutegalement le contenu du fichier infoyml)
On renomme tous les fichiers dont le nom comporte bartik par THEMENAME
Dans tous les fichiers on recherche les occurrences de la chaine lsquobartik et on les remplace par lsquoTHEMENAMErsquo
On vide TOUS les caches
Enfin on va dans Admin gt Apparence on active et deacutefini par deacutefaut notre nouveau thegraveme THEMENAME
On veacuterifie qursquoil nrsquoy a pas drsquoerreur en visitant par exemple la page drsquoaccueil
2 CREacuteER SON THEgraveME
MEacuteTHODE 2 VIA UN THEgraveME CONTIB AYANT UN STARTER (ZF) Certains thegravemes contrib proposent un laquo STARTER KIT raquo comme par exemple Bootstrap ou ZURB
Foundation
Dossier precirct a ecirctre copieacute colleacute pour faire un thegraveme enfant heacuteritant de ce dernier
On fait une copie du STARTER KIT
On colle le reacutepertoire copieacute dans themescustom et on le renomme comme on le souhaite
Etc
REMARQUE DANS LES DEUX CAS NE PAS OUBLIER DE PREacuteCISER LE lsquoBASE THEMErsquo DANS LE INFOYML
REMARQUE LE THEgraveME PARENT DOIT EcircTRE ACTIVEacute SI VOUS VOULEZ ACTIVER UN DE SES THEgraveMES ENFANT
JOBrsquoS DONE
Warcraft Human peon
2 CREacuteER SON THEgraveME
MAIShellip REVENONS SUR NOTRE FICHIER INFOYML
2 CREacuteER SON THEgraveME
THEMENAMEINFOYML
Librairies chargeacutees avec le thegraveme
Reacutegions du thegraveme
Informations du thegraveme
ET SUR LES FICHIERS DANS NOTRE DOSSIER lsquoTHEMENAMErsquo
2 CREacuteER SON THEgraveME gt THEMENAMEINFOYML
CONCREgraveTEMENT
NAMESCREENSHOTPNG
DESCRIPTION
1 ANATOMIE DrsquoUN THEgraveME gt _THEMENAME_INFOYML
CONCREgraveTEMENT
LOGOSVG
FAVICONICO
2 CREacuteER SON THEgraveME
DOCUMENTATION OFFICIELLEhttpswwwdrupalorgdocs8theming-drupal-8defining-a-theme-with-an-infoyml-file
Dans un fichier yml
LES POINTS Agrave RETENIR
libraries-override (optional) base theme (recommended) hidden (optional) engine (optional) logo (optional) screenshot (optional) regions (optional) regions_hidden (optional) features (optional) stylesheets-remove (deprecated) ckeditor_stylesheets (optional) name (required)
type (required) description (optional) package (optional) core (required) php (optional) version (optional) libraries (optional)
Mais surtout
Tabs are NOT allowed Use spaces ONLY
Properties and lists MUST be indented by two (2) spaces
AJOUTER DES ASSETS (CSSJS)
3
3 AJOUTER DES ASSETS
CHARGER DES FICHIERS CSS amp JSCe que dit la documentation
httpswwwdrupalorgdocs8themingadding-stylesheets-css-and-javascript-js-to-a-drupal-8-theme
1 Save the CSS or JS to a file using the proper naming conventions and file structure
2 Define a library which registers these CSSJS files with your theme
3 Attach the library to all pages to specific Twig templates or target specific pages via a render element in a preprocess function
3 AJOUTER DES ASSETS
EN PRATIQUE
Lrsquoajout de fichier de CSS et de JS se fait via un systegraveme de librairie (bibliothegraveque)
Il faut tout drsquoabord deacuteclarer une librairie (ou en utiliser une existante) dans le fichier THEMENAMElibrariesyml puis demander au systegraveme de la charger Ceci peut ecirctre fait depuis le fichier THEMENAMEinfoyml
3 AJOUTER DES ASSETS
CHARGER UNE LIBRAIRIE
Lorsqursquoune librairie est appeleacutee depuis le fichier THEMENAMEinfoyml alors elle est chargeacutee sur toutes les pages degraves lors que le thegraveme est utiliseacute
Il est possible de charger sous condition une bibliothegraveque Pour cela plusieurs techniques sont disponibles
depuis un fichier de template
en utilisant le hook_page_attachments_alter()
en utilisant une fonction de preprocess
3 AJOUTER DES ASSETS
CHARGER UNE LIBRAIRIE
Directement depuis un fichier de template directement par exemple dans le fichier geacuterant lrsquoaffichage des blocs
attach_library(lsquodrupal_franceblocksrsquo)
3 AJOUTER DES ASSETS
CHARGER UNE LIBRAIRIE
Chargement drsquoune librairie depuis le fichier themesTHEMENAMETHEMENAMEtheme en utilisant la fonction de hook hook_page_attachments_alter()
Implements hook_page_attachments_alter() function drupal_france_page_attachments_alter(array amp$attachments) $attachments[attached][library][] = drupal_franceglobal
3 AJOUTER DES ASSETS
CHARGER UNE LIBRAIRIE
Chargement drsquoune librairie depuis le fichier themesTHEMENAMETHEMENAMEtheme en utilisant une fonction de preprocess
Implements hook_preprocess_HOOK() for page templates function drupal_france_preprocess_page(array amp$variables) $variables[attached][library][] = drupal_franceglobal
LES FICHIERS TEMPLATES
4
4 LES TEMPLATES
Agrave QUOI CcedilA SERT
Les templates constituent la structure des pages du sitesEn fait de chacun des eacuteleacutements qui la composent
Ce sont des fichiers html (balises ltdivgt lth1gt ltagt) avec du code Twig permettant drsquoafficher les eacuteleacutements (sous forme de variables) creacuteeacutes par Drupal
Chaque type drsquoeacuteleacutement du site possegravede son propre template
4 LES TEMPLATES
PAR EXEMPLE (CrsquoEST DU VRAI CODE)
ltdiv class=l-main row expandedgt ltmain id=main class= main_grid role=maingt if pagehighlighted spaceless pagehighlighted endspaceless endif lta id=main-contentgtltagt if breadcrumb breadcrumb endif ltsectiongt pagecontent ltsectiongt ltmaingt if pagesidebar_first ltdiv id=sidebar-first class= sidebar_first_grid column sidebargt pagesidebar_first ltdivgt endif if pagesidebar_second ltdiv id=sidebar-second class= sidebar_sec_grid column sidebargt pagesidebar_second ltdivgt endif ltdivgt
4 LES TEMPLATES
IMBRICATION DES TEMPLATES
Imaginons lrsquoappel drsquoune page de billet de blog
Et maintenant imaginons le parcours drsquoimbrication de templates pour depuis la balise lthtmlgt jusqursquoagrave la ltdivgt contenant un commentaire sous ce billet de blog
4 LES TEMPLATES
FROM ltHTMLgt TO ltDIV CLASS=lsquoCOMMENTrsquogthtmlhtmltwig
pagehtmltwig
regionhtmltwig
blockhtmltwig
nodehtmltwig nodehtmltwig
fieldhtmltwig
comment-wrapperhtmltwig
commenthtmltwig
4 LES TEMPLATES
LES TEMPLATES DEacuteRIVEacuteES
Les templates deacuteriveacutees sont des templates utiliseacutees dans un contexte preacutecis
Crsquoest le nom de la template qui indique agrave Drupal quand lrsquoutiliser
Toutes ces templates sont optionnelles et reconnues automatiquement par Drupal en fonction de leurs noms
Si des templates ne sont pas preacutesentes dans le thegraveme alors Drupal utilise ceux par deacutefaut (corethemes)
On parle de ldquotemplate deacuteriveacuteeldquo de ldquosuggestion de templateldquo ou de ldquotemplates suggeacutereacuteesldquo
Il faut vider le cache de Drupal lorsque lrsquoon ajoute des templates au thegraveme
Documentation httpswwwdrupalorgdocs8themingtwigtwig-template-naming-conventions
4 LES TEMPLATES
EXEMPLE DE SUGGESTIONS DE TEMPLATES
Template de page pagehtmltwig page--chemin--internehtmltwig sera utiliseacute lorsque lrsquoon appelle chemininterne
Ex page--fronthtmltwig cible la page drsquoaccueil
Ex page--cheminhtmltwig cible toutes les pages dont le chemin commence par chemin
Ex page--node--240htmltwig cible la page du noeud portant lrsquoid 240
Template de noeud nodehtmltwig node--type-de-noeudhtmltwig cible les noeuds de type type-de-noeud
Ex node--articlehtmltwig cible tous les noeuds de type article
4 LES TEMPLATES
TROUVER LES SUGGESTIONS
Dans le fichier wwwsitesdevelopmentservicesyml
Local development services
parameters httpresponsedebug_cacheability_headers true twigconfig debug true services cachebackendnull class DrupalCoreCacheNullBackendFactory
TWIG5
5 TWIG
UN MOTEUR DE TEMPLATE
Twig est capable drsquoafficher le contenu de nrsquoimporte quel type de variable (chaine tableau ou objet)
Il est possible de faire des boucles des conditionshellip
Chaque variable peut ecirctre filtreacutee avant drsquoecirctre afficheacutee
Les chaines peuvent ecirctre rendues traduites (la traduction est alors faite via le back-office de Drupal)
5 TWIG
LES BASES
Affiche le contenu de la variable var var
Affiche le contenu de la proprieacuteteacute title de la variable node nodetitle
Conditions if var else endif
Commentaires commentaire
Traduction trans chaine endtrans
Fonctions speacutecifiques
url(lsquoroute_namersquo)
path(lsquoentitynodecanonicalrsquo lsquonodersquo nodeid)
Les modules Twig tweak ou encore Bamboo Twig proposent encore davantage de fonctions
5 TWIG
LES FILTRES Date date|format_date(lsquomediumrsquo)
Chaine
Echappement content (par deacutefaut)
Interpreacutetation du contenu de la variable texte|raw (attention )
Placeholder text|placeholder
Exclusion content|without(lsquolinksrsquo)
string|lower (upper eacutegalement)
class_name|clean_class
id_name|clean_id
Documentation httpswwwdrupalorgdocs8themingtwigfilters-modifying-variables-in-twig-templateshttpstwigsymfonycomdoc2x
5 TWIG
CONCREgraveTEMENT if pagefooter_first or pagefooter_middle or pagefooter_last ltdiv class=l-footer row expandedgt ltfooter class=row footer medium-up-2 large-up-3gt if pagefooter_first ltdiv id=footer-first class=columngt pagefooter_first ltdivgt endif if pagefooter_middle ltdiv id=footer-middle class=columngt pagefooter_middle ltdivgt endif if pagefooter_last ltdiv id=footer-last class=columngt pagefooter_last ltdivgt endif ltfootergt ltdivgt endif ltdiv class=bottom-bar panel hiddengt ltdiv class=rowgt ltdiv class=large-12 columngt ampcopy now|date(Y) site_name All rights reserved|t ltdivgt ltdivgt ltdivgt
LES REacuteGIONS6
6 LES REacuteGIONS
STRUCTURE DE LA PAGE
adminstructureblock gt Demonstrate block regions
6 LES REacuteGIONS
DEacuteFINITION ET RENDU DES REacuteGIONS
Les reacutegions doivent ecirctre deacutefinies dans le fichier THEMENAMEinfoyml
Elles doivent ecirctre appeleacutees obligatoirement dans pagehtmltwig
6 LES REacuteGIONS
THEMENAMEINFOYML
PAGEHTMLTWIG
LE RENDU DU CONTENU
7
7 RENDU DU CONTENU
LrsquoAFFICHAGE DES CHAMPS
Pour chaque type de contenu on peut reacutegler lrsquoaffichage des champs sur adminstructuretypesmanagecontent-typedisplay ougrave content-type est le nom machine du type de contenu
Il est possible de modifier lrsquoordre des champs lrsquoapparence des eacutetiquettes le format du champ
Les reacuteglages disponibles varient en fonction du type de champ
Les champs Texte peuvent ecirctre coupeacutes
Les champs Image peuvent ecirctre afficheacutes sous forme drsquoimage drsquoURL de fichier
Les champs Date peuvent utiliser un format diffeacuterent
Ces reacuteglages peuvent ecirctre diffeacuterents selon le mode drsquoaffichage (modes ldquoPar deacutefautldquo et ldquoAccrocheldquo) =gt Cela permet par exemple de masquer un champ en mode ldquoAccrocheldquo et de lrsquoafficher en mode ldquoPar deacutefautldquo (noeud inteacutegral)
7 RENDU DU CONTENU
LrsquoAFFICHAGE DES IMAGES
Les images transmises par les utilisateurs ne sont jamais aux bonnes dimensions
Le module Image (core) va nous permettre de preacutedeacutefinir des dimensions sous forme de styles drsquoimage par exemple
Vignette 70px x 110px (mise agrave lrsquoeacutechelle)
Normal 200px x 300px (mise agrave lrsquoeacutechelle et recadrage)
Ces dimensions pourront ensuite ecirctre appliqueacutees automatiquement aux champs Image depuis lrsquoeacutecran ldquogeacuterer lrsquoaffichageldquo vu preacuteceacutedemment
7 RENDU DU CONTENU
STYLE DrsquoIMAGE
7 RENDU DU CONTENU
STYLE DrsquoIMAGE
7 RENDU DU CONTENU
ALLER PLUS LOIN La gestion et la manipulation des champs est cependant
limiteacutee dans lrsquointerface drsquoadministration
On est parfois obligeacutes de modifier le code du template correspondant agrave notre champ ou type de contenu
Les reacuteglages de lrsquoadmin sont toujours pris en compte Par exemple les styles drsquoimage choisis seront ceux utiliseacutes mecircme si lrsquoon modifie le template
7 RENDU DU CONTENU
OUgrave SONT LES CHAMPS
Dans le fichier de template des noeuds (nodehtmltwig) on nrsquoa pas directement accegraves aux champs
Crsquoest la variable content qui contient tous les champs que lrsquoon affiche et en particulier ceux ajouteacutes via Field
Comment faire pour reacutecupeacuterer les champs un par un afin de les preacutesenter diffeacuteremment
7 RENDU DU CONTENU
LA VARIABLE lsquoCONTENTrsquo
Tout le contenu drsquoun noeud est afficheacute gracircce agrave la ligne content|without(comment links)
Pour connaitre le contenu de content on utilise la fonction kint() kint(content)
On deacutecouvre alors lrsquoensemble des champs et leurs proprieacuteteacutes qui sont afficheacutees en haut de page sous forme de var_dump()
On peut afficher seacutepareacutement chacun drsquoentre eux avec le code suivant contentnom_du_champ nodecreatedtime
7 RENDU DU CONTENU
NODE DE TYPE lsquoNEWSrsquo ET FORMAT lsquoTEASERrsquo
PREPROCESS8
8 PREPROCESS
FONCTIONS DE PREPROCESS
Pour chaque template on dispose de variables que lrsquoon affiche avec le formatage voulu
Ces variables sont creacuteeacutees en amont des templates dans lesquelles elles sont utiliseacutees
On dispose de fonctions dites de preprocess qui permettent de fabriquer les variables qui sont utiliseacutees dans les templates
Il est possible drsquoeacutetendre ces fonctions pour modifier les variables envoyeacutees aux templates ou en creacuteer de nouvelles
Pour ajouter une fonction de preprocess il faut la nommer comme suit THEMENAME_preprocess_HOOK() Par exemple drupal_france_preprocess_block()
8 PREPROCESS
FONCTIONS DE PREPROCESS
Pour chaque template on dispose de variables que lrsquoon affiche avec le formatage voulu
Ces variables sont creacuteeacutees en amont des templates dans lesquelles elles sont utiliseacutees
On dispose de fonctions dites de preprocess qui permettent de fabriquer les variables qui sont utiliseacutees dans les templates
Il est possible drsquoeacutetendre ces fonctions pour modifier les variables envoyeacutees aux templates ou en creacuteer de nouvelles
Pour ajouter une fonction de preprocess il faut la nommer comme suit THEMENAME_preprocess_HOOK() Par exemple drupal_france_preprocess_block()
8 PREPROCESS
LA VARIABLE lsquo$VARIABLESrsquo
Drupal
Preprocess en amont(core modules)
Preprocess du thegraveme
TemplateCreacuteation de $variables
$variables
$variables
$variables
$variables
En mode super simplifieacute
8 PREPROCESS
APPELLER UN PREPROCESS
Diffeacuterentes fonctions de preprocess peuvent ecirctre appeleacutees permettant agrave tous les modules et thegravemes de modifier les variables passeacutees aux templates Ces fonctions sont les suivantes pour le hook de thegraveme HOOK
template_preprocess_HOOK(array amp$variables)
MODULENAME_preprocess(array amp$variables $hook)
MODULENAME_preprocess_HOOK(array amp$variables)
THEMENAME_preprocess(array amp$variables $hook)
THEMENAME_preprocess_HOOK(array amp$variables)
8 PREPROCESS
CONCREgraveTEMENT Implements hook_preprocess_menu__account() function drupal_france_preprocess_menu__account(amp$variables) if (isset($variables[items][drupalfr_useraccountcompte])) $variables[items][drupalfr_useraccountcompte][attributes]-gtaddClass([ button primary button--user-account ])
$variables[items][drupalfr_useraccountcompte][title] = new FormattableMarkup( lti class=fa fa-user-circle-o aria-hidden=truegtltigtltspan class=sr-onlygtoriginal_titleltspangt [ original_title =gt $variables[items][drupalfr_useraccountcompte][title] ] )
JAVASCRIPT9
9 JAVASCRIPT
DRUPAL amp JAVASCRIPT Drupal integravegre de nombreuses libraries javascript (jQuery Modernizrhellip) et propose
eacutegalement des libraries drsquoutilitaires (coredrupal coredrupalSettings drupalajax drupalformhellip)
Par exemple Drupal 8 embarque
jQuery 321
jQuery UI 1121
Chaque librairie deacutefinit ses deacutependances jQuery UI deacutepend de jQuery par exemple
Lorsque lrsquoon utilise une librairie depuis un script custom il ne faut pas oublier de deacuteclarer cette deacutependance Pensez agrave tester en anonyme car aucune libraire nrsquoest chargeacutee par deacutefaut
Vous disposez de toutes les librairies deacutefinies dans le fichier corecorelibrairiesyml
9 JAVASCRIPT
CONCREgraveTEMENTPour pouvoir utiliser du code JS dans vos scripts avec Drupal la bonne pratique est drsquoencadrer votre code comme suit
file Shows status messages in a modal instead of inline (function ($ Drupal)
Displays status messages in a Foundation reveal modal DrupalbehaviorsfoundationStatusInReveal = attach function (context settings) $(status-messages)once(foundation-reveal)each(function() Move the status messages out of the highlighted region var $messages = $(this) var $region = $messagesparent() $messagesappendTo(body) $messagesfoundation(open)
This is required as this region will likely be empty after status messages are removed $regionhtml($regionhtml()replace(ng )) )
)(jQuery Drupal)
9 JAVASCRIPT
DRUPAL BEHAVIORS
Les scripts sont exeacutecuteacutes apregraves le chargement complet du DOM ($(document)ready() )Mais on a aussi parfois besoin de les reacute-exeacutecuter lorsque lrsquoon interagit avec la page (appel AJAX overlayhellip)
Pour ce faire il suffit drsquoattacher le script JS agrave lrsquoobjet Drupalbehaviors (librairie coredrupal) La fonction exeacutecuteacutee reccediloit 2 variables
context le DOM (le HTML chargeacute ou ajouteacute)
settings toutes les variables injecteacutees cocircteacute serveur
9 JAVASCRIPT
RAPPEL
Comme pour les fichiers de style les scripts JS doivent ecirctre deacuteclareacutes sous forme de bibliothegraveque via les fichiers THEMENAMEinfoyml et THEMENAMElibrariesyml
QUESTIONS 10
RTFM httpswwwdrupalorgdocs8theminghttpstwigsymfonycomdoc2x
MERCI Agrave VOUS
FlorisMoriceau
2 CREacuteER SON THEgraveME
OPTIONS DE PERSONNALISATION
Dans la section Apparence du back-office les personnalisations sont tregraves limiteacutees on peut seulement
Changer le logo
AfficherMasquer certains eacuteleacutements comme
Le Nom du site qui apparaicirct dans la reacutegion ldquoen-tecircteldquo
Les portraits utilisateur
Le slogan du site
Changer lrsquoicocircne de raccourcis
SI ON DEacuteSIRE PLUS DrsquoOUTILS DE PERSONNALISATION IL FAUT LES CODER
ET DONC CREacuteER SON PROPRE THEgraveME
2 CREacuteER SON THEgraveME
2 CREacuteER SON THEgraveME
POUR CREacuteER SON THEgraveME PLUSIEURS POSSIBILITEacuteS Partir de zeacutero
Possible mais fastidieux (Ne faites pas ccedila Ou alors seulement sur un side project personnel qui nrsquoa pas de deadline pour la beauteacute du geste et pour apprendre tous les rouages du templating)
Partir drsquoun thegraveme de base Un thegraveme de base est un thegraveme que lrsquoon va eacutetendre en heacuteritant de tout son code On dispose drsquoun systegraveme de thegravemes parentenfant Exemples Omega Zen Bootstraphellip ZURB Foundation
Partir drsquoun thegraveme ldquoprecirct-agrave-lrsquoemploildquo Par exemple un thegraveme acheteacute sur themeforestcom Lrsquoideacutee ici est de limiter au maximum les personnalisations afin de gagner du tempsAttention Sortir des fonctionnaliteacutes offertes par ce genre de thegraveme peut se reacuteveacuteler tregraves coucircteux
2 CREacuteER SON THEgraveME
MEacuteTHODE 1 VIA UN THEgraveME PREacuteSENT DANS LE CORE (BARTIK)
On fait une copie du thegraveme par deacutefaut Bartik (crsquoest-agrave-dire du reacutepertoire corethemesbartik)
On colle le reacutepertoire copieacute dans themescustom et on le renomme comme on le souhaiteAttention cependant Le thegraveme doit avoir un laquo nom machine raquo composeacute exclusivement de caractegraveres alphanumeacuteriques et de lsquo_rsquo (underscore)
Ici on choisira lsquoTHEMENAMErsquo
On renommez le fichier themescustomTHEMENAMEbartikinfoyml en themescustomTHEMENAMETHEMENAMEinfoyml (on nrsquooublie pas drsquoadapter eacutegalement le contenu du fichier infoyml)
On renomme tous les fichiers dont le nom comporte bartik par THEMENAME
Dans tous les fichiers on recherche les occurrences de la chaine lsquobartik et on les remplace par lsquoTHEMENAMErsquo
On vide TOUS les caches
Enfin on va dans Admin gt Apparence on active et deacutefini par deacutefaut notre nouveau thegraveme THEMENAME
On veacuterifie qursquoil nrsquoy a pas drsquoerreur en visitant par exemple la page drsquoaccueil
2 CREacuteER SON THEgraveME
MEacuteTHODE 2 VIA UN THEgraveME CONTIB AYANT UN STARTER (ZF) Certains thegravemes contrib proposent un laquo STARTER KIT raquo comme par exemple Bootstrap ou ZURB
Foundation
Dossier precirct a ecirctre copieacute colleacute pour faire un thegraveme enfant heacuteritant de ce dernier
On fait une copie du STARTER KIT
On colle le reacutepertoire copieacute dans themescustom et on le renomme comme on le souhaite
Etc
REMARQUE DANS LES DEUX CAS NE PAS OUBLIER DE PREacuteCISER LE lsquoBASE THEMErsquo DANS LE INFOYML
REMARQUE LE THEgraveME PARENT DOIT EcircTRE ACTIVEacute SI VOUS VOULEZ ACTIVER UN DE SES THEgraveMES ENFANT
JOBrsquoS DONE
Warcraft Human peon
2 CREacuteER SON THEgraveME
MAIShellip REVENONS SUR NOTRE FICHIER INFOYML
2 CREacuteER SON THEgraveME
THEMENAMEINFOYML
Librairies chargeacutees avec le thegraveme
Reacutegions du thegraveme
Informations du thegraveme
ET SUR LES FICHIERS DANS NOTRE DOSSIER lsquoTHEMENAMErsquo
2 CREacuteER SON THEgraveME gt THEMENAMEINFOYML
CONCREgraveTEMENT
NAMESCREENSHOTPNG
DESCRIPTION
1 ANATOMIE DrsquoUN THEgraveME gt _THEMENAME_INFOYML
CONCREgraveTEMENT
LOGOSVG
FAVICONICO
2 CREacuteER SON THEgraveME
DOCUMENTATION OFFICIELLEhttpswwwdrupalorgdocs8theming-drupal-8defining-a-theme-with-an-infoyml-file
Dans un fichier yml
LES POINTS Agrave RETENIR
libraries-override (optional) base theme (recommended) hidden (optional) engine (optional) logo (optional) screenshot (optional) regions (optional) regions_hidden (optional) features (optional) stylesheets-remove (deprecated) ckeditor_stylesheets (optional) name (required)
type (required) description (optional) package (optional) core (required) php (optional) version (optional) libraries (optional)
Mais surtout
Tabs are NOT allowed Use spaces ONLY
Properties and lists MUST be indented by two (2) spaces
AJOUTER DES ASSETS (CSSJS)
3
3 AJOUTER DES ASSETS
CHARGER DES FICHIERS CSS amp JSCe que dit la documentation
httpswwwdrupalorgdocs8themingadding-stylesheets-css-and-javascript-js-to-a-drupal-8-theme
1 Save the CSS or JS to a file using the proper naming conventions and file structure
2 Define a library which registers these CSSJS files with your theme
3 Attach the library to all pages to specific Twig templates or target specific pages via a render element in a preprocess function
3 AJOUTER DES ASSETS
EN PRATIQUE
Lrsquoajout de fichier de CSS et de JS se fait via un systegraveme de librairie (bibliothegraveque)
Il faut tout drsquoabord deacuteclarer une librairie (ou en utiliser une existante) dans le fichier THEMENAMElibrariesyml puis demander au systegraveme de la charger Ceci peut ecirctre fait depuis le fichier THEMENAMEinfoyml
3 AJOUTER DES ASSETS
CHARGER UNE LIBRAIRIE
Lorsqursquoune librairie est appeleacutee depuis le fichier THEMENAMEinfoyml alors elle est chargeacutee sur toutes les pages degraves lors que le thegraveme est utiliseacute
Il est possible de charger sous condition une bibliothegraveque Pour cela plusieurs techniques sont disponibles
depuis un fichier de template
en utilisant le hook_page_attachments_alter()
en utilisant une fonction de preprocess
3 AJOUTER DES ASSETS
CHARGER UNE LIBRAIRIE
Directement depuis un fichier de template directement par exemple dans le fichier geacuterant lrsquoaffichage des blocs
attach_library(lsquodrupal_franceblocksrsquo)
3 AJOUTER DES ASSETS
CHARGER UNE LIBRAIRIE
Chargement drsquoune librairie depuis le fichier themesTHEMENAMETHEMENAMEtheme en utilisant la fonction de hook hook_page_attachments_alter()
Implements hook_page_attachments_alter() function drupal_france_page_attachments_alter(array amp$attachments) $attachments[attached][library][] = drupal_franceglobal
3 AJOUTER DES ASSETS
CHARGER UNE LIBRAIRIE
Chargement drsquoune librairie depuis le fichier themesTHEMENAMETHEMENAMEtheme en utilisant une fonction de preprocess
Implements hook_preprocess_HOOK() for page templates function drupal_france_preprocess_page(array amp$variables) $variables[attached][library][] = drupal_franceglobal
LES FICHIERS TEMPLATES
4
4 LES TEMPLATES
Agrave QUOI CcedilA SERT
Les templates constituent la structure des pages du sitesEn fait de chacun des eacuteleacutements qui la composent
Ce sont des fichiers html (balises ltdivgt lth1gt ltagt) avec du code Twig permettant drsquoafficher les eacuteleacutements (sous forme de variables) creacuteeacutes par Drupal
Chaque type drsquoeacuteleacutement du site possegravede son propre template
4 LES TEMPLATES
PAR EXEMPLE (CrsquoEST DU VRAI CODE)
ltdiv class=l-main row expandedgt ltmain id=main class= main_grid role=maingt if pagehighlighted spaceless pagehighlighted endspaceless endif lta id=main-contentgtltagt if breadcrumb breadcrumb endif ltsectiongt pagecontent ltsectiongt ltmaingt if pagesidebar_first ltdiv id=sidebar-first class= sidebar_first_grid column sidebargt pagesidebar_first ltdivgt endif if pagesidebar_second ltdiv id=sidebar-second class= sidebar_sec_grid column sidebargt pagesidebar_second ltdivgt endif ltdivgt
4 LES TEMPLATES
IMBRICATION DES TEMPLATES
Imaginons lrsquoappel drsquoune page de billet de blog
Et maintenant imaginons le parcours drsquoimbrication de templates pour depuis la balise lthtmlgt jusqursquoagrave la ltdivgt contenant un commentaire sous ce billet de blog
4 LES TEMPLATES
FROM ltHTMLgt TO ltDIV CLASS=lsquoCOMMENTrsquogthtmlhtmltwig
pagehtmltwig
regionhtmltwig
blockhtmltwig
nodehtmltwig nodehtmltwig
fieldhtmltwig
comment-wrapperhtmltwig
commenthtmltwig
4 LES TEMPLATES
LES TEMPLATES DEacuteRIVEacuteES
Les templates deacuteriveacutees sont des templates utiliseacutees dans un contexte preacutecis
Crsquoest le nom de la template qui indique agrave Drupal quand lrsquoutiliser
Toutes ces templates sont optionnelles et reconnues automatiquement par Drupal en fonction de leurs noms
Si des templates ne sont pas preacutesentes dans le thegraveme alors Drupal utilise ceux par deacutefaut (corethemes)
On parle de ldquotemplate deacuteriveacuteeldquo de ldquosuggestion de templateldquo ou de ldquotemplates suggeacutereacuteesldquo
Il faut vider le cache de Drupal lorsque lrsquoon ajoute des templates au thegraveme
Documentation httpswwwdrupalorgdocs8themingtwigtwig-template-naming-conventions
4 LES TEMPLATES
EXEMPLE DE SUGGESTIONS DE TEMPLATES
Template de page pagehtmltwig page--chemin--internehtmltwig sera utiliseacute lorsque lrsquoon appelle chemininterne
Ex page--fronthtmltwig cible la page drsquoaccueil
Ex page--cheminhtmltwig cible toutes les pages dont le chemin commence par chemin
Ex page--node--240htmltwig cible la page du noeud portant lrsquoid 240
Template de noeud nodehtmltwig node--type-de-noeudhtmltwig cible les noeuds de type type-de-noeud
Ex node--articlehtmltwig cible tous les noeuds de type article
4 LES TEMPLATES
TROUVER LES SUGGESTIONS
Dans le fichier wwwsitesdevelopmentservicesyml
Local development services
parameters httpresponsedebug_cacheability_headers true twigconfig debug true services cachebackendnull class DrupalCoreCacheNullBackendFactory
TWIG5
5 TWIG
UN MOTEUR DE TEMPLATE
Twig est capable drsquoafficher le contenu de nrsquoimporte quel type de variable (chaine tableau ou objet)
Il est possible de faire des boucles des conditionshellip
Chaque variable peut ecirctre filtreacutee avant drsquoecirctre afficheacutee
Les chaines peuvent ecirctre rendues traduites (la traduction est alors faite via le back-office de Drupal)
5 TWIG
LES BASES
Affiche le contenu de la variable var var
Affiche le contenu de la proprieacuteteacute title de la variable node nodetitle
Conditions if var else endif
Commentaires commentaire
Traduction trans chaine endtrans
Fonctions speacutecifiques
url(lsquoroute_namersquo)
path(lsquoentitynodecanonicalrsquo lsquonodersquo nodeid)
Les modules Twig tweak ou encore Bamboo Twig proposent encore davantage de fonctions
5 TWIG
LES FILTRES Date date|format_date(lsquomediumrsquo)
Chaine
Echappement content (par deacutefaut)
Interpreacutetation du contenu de la variable texte|raw (attention )
Placeholder text|placeholder
Exclusion content|without(lsquolinksrsquo)
string|lower (upper eacutegalement)
class_name|clean_class
id_name|clean_id
Documentation httpswwwdrupalorgdocs8themingtwigfilters-modifying-variables-in-twig-templateshttpstwigsymfonycomdoc2x
5 TWIG
CONCREgraveTEMENT if pagefooter_first or pagefooter_middle or pagefooter_last ltdiv class=l-footer row expandedgt ltfooter class=row footer medium-up-2 large-up-3gt if pagefooter_first ltdiv id=footer-first class=columngt pagefooter_first ltdivgt endif if pagefooter_middle ltdiv id=footer-middle class=columngt pagefooter_middle ltdivgt endif if pagefooter_last ltdiv id=footer-last class=columngt pagefooter_last ltdivgt endif ltfootergt ltdivgt endif ltdiv class=bottom-bar panel hiddengt ltdiv class=rowgt ltdiv class=large-12 columngt ampcopy now|date(Y) site_name All rights reserved|t ltdivgt ltdivgt ltdivgt
LES REacuteGIONS6
6 LES REacuteGIONS
STRUCTURE DE LA PAGE
adminstructureblock gt Demonstrate block regions
6 LES REacuteGIONS
DEacuteFINITION ET RENDU DES REacuteGIONS
Les reacutegions doivent ecirctre deacutefinies dans le fichier THEMENAMEinfoyml
Elles doivent ecirctre appeleacutees obligatoirement dans pagehtmltwig
6 LES REacuteGIONS
THEMENAMEINFOYML
PAGEHTMLTWIG
LE RENDU DU CONTENU
7
7 RENDU DU CONTENU
LrsquoAFFICHAGE DES CHAMPS
Pour chaque type de contenu on peut reacutegler lrsquoaffichage des champs sur adminstructuretypesmanagecontent-typedisplay ougrave content-type est le nom machine du type de contenu
Il est possible de modifier lrsquoordre des champs lrsquoapparence des eacutetiquettes le format du champ
Les reacuteglages disponibles varient en fonction du type de champ
Les champs Texte peuvent ecirctre coupeacutes
Les champs Image peuvent ecirctre afficheacutes sous forme drsquoimage drsquoURL de fichier
Les champs Date peuvent utiliser un format diffeacuterent
Ces reacuteglages peuvent ecirctre diffeacuterents selon le mode drsquoaffichage (modes ldquoPar deacutefautldquo et ldquoAccrocheldquo) =gt Cela permet par exemple de masquer un champ en mode ldquoAccrocheldquo et de lrsquoafficher en mode ldquoPar deacutefautldquo (noeud inteacutegral)
7 RENDU DU CONTENU
LrsquoAFFICHAGE DES IMAGES
Les images transmises par les utilisateurs ne sont jamais aux bonnes dimensions
Le module Image (core) va nous permettre de preacutedeacutefinir des dimensions sous forme de styles drsquoimage par exemple
Vignette 70px x 110px (mise agrave lrsquoeacutechelle)
Normal 200px x 300px (mise agrave lrsquoeacutechelle et recadrage)
Ces dimensions pourront ensuite ecirctre appliqueacutees automatiquement aux champs Image depuis lrsquoeacutecran ldquogeacuterer lrsquoaffichageldquo vu preacuteceacutedemment
7 RENDU DU CONTENU
STYLE DrsquoIMAGE
7 RENDU DU CONTENU
STYLE DrsquoIMAGE
7 RENDU DU CONTENU
ALLER PLUS LOIN La gestion et la manipulation des champs est cependant
limiteacutee dans lrsquointerface drsquoadministration
On est parfois obligeacutes de modifier le code du template correspondant agrave notre champ ou type de contenu
Les reacuteglages de lrsquoadmin sont toujours pris en compte Par exemple les styles drsquoimage choisis seront ceux utiliseacutes mecircme si lrsquoon modifie le template
7 RENDU DU CONTENU
OUgrave SONT LES CHAMPS
Dans le fichier de template des noeuds (nodehtmltwig) on nrsquoa pas directement accegraves aux champs
Crsquoest la variable content qui contient tous les champs que lrsquoon affiche et en particulier ceux ajouteacutes via Field
Comment faire pour reacutecupeacuterer les champs un par un afin de les preacutesenter diffeacuteremment
7 RENDU DU CONTENU
LA VARIABLE lsquoCONTENTrsquo
Tout le contenu drsquoun noeud est afficheacute gracircce agrave la ligne content|without(comment links)
Pour connaitre le contenu de content on utilise la fonction kint() kint(content)
On deacutecouvre alors lrsquoensemble des champs et leurs proprieacuteteacutes qui sont afficheacutees en haut de page sous forme de var_dump()
On peut afficher seacutepareacutement chacun drsquoentre eux avec le code suivant contentnom_du_champ nodecreatedtime
7 RENDU DU CONTENU
NODE DE TYPE lsquoNEWSrsquo ET FORMAT lsquoTEASERrsquo
PREPROCESS8
8 PREPROCESS
FONCTIONS DE PREPROCESS
Pour chaque template on dispose de variables que lrsquoon affiche avec le formatage voulu
Ces variables sont creacuteeacutees en amont des templates dans lesquelles elles sont utiliseacutees
On dispose de fonctions dites de preprocess qui permettent de fabriquer les variables qui sont utiliseacutees dans les templates
Il est possible drsquoeacutetendre ces fonctions pour modifier les variables envoyeacutees aux templates ou en creacuteer de nouvelles
Pour ajouter une fonction de preprocess il faut la nommer comme suit THEMENAME_preprocess_HOOK() Par exemple drupal_france_preprocess_block()
8 PREPROCESS
FONCTIONS DE PREPROCESS
Pour chaque template on dispose de variables que lrsquoon affiche avec le formatage voulu
Ces variables sont creacuteeacutees en amont des templates dans lesquelles elles sont utiliseacutees
On dispose de fonctions dites de preprocess qui permettent de fabriquer les variables qui sont utiliseacutees dans les templates
Il est possible drsquoeacutetendre ces fonctions pour modifier les variables envoyeacutees aux templates ou en creacuteer de nouvelles
Pour ajouter une fonction de preprocess il faut la nommer comme suit THEMENAME_preprocess_HOOK() Par exemple drupal_france_preprocess_block()
8 PREPROCESS
LA VARIABLE lsquo$VARIABLESrsquo
Drupal
Preprocess en amont(core modules)
Preprocess du thegraveme
TemplateCreacuteation de $variables
$variables
$variables
$variables
$variables
En mode super simplifieacute
8 PREPROCESS
APPELLER UN PREPROCESS
Diffeacuterentes fonctions de preprocess peuvent ecirctre appeleacutees permettant agrave tous les modules et thegravemes de modifier les variables passeacutees aux templates Ces fonctions sont les suivantes pour le hook de thegraveme HOOK
template_preprocess_HOOK(array amp$variables)
MODULENAME_preprocess(array amp$variables $hook)
MODULENAME_preprocess_HOOK(array amp$variables)
THEMENAME_preprocess(array amp$variables $hook)
THEMENAME_preprocess_HOOK(array amp$variables)
8 PREPROCESS
CONCREgraveTEMENT Implements hook_preprocess_menu__account() function drupal_france_preprocess_menu__account(amp$variables) if (isset($variables[items][drupalfr_useraccountcompte])) $variables[items][drupalfr_useraccountcompte][attributes]-gtaddClass([ button primary button--user-account ])
$variables[items][drupalfr_useraccountcompte][title] = new FormattableMarkup( lti class=fa fa-user-circle-o aria-hidden=truegtltigtltspan class=sr-onlygtoriginal_titleltspangt [ original_title =gt $variables[items][drupalfr_useraccountcompte][title] ] )
JAVASCRIPT9
9 JAVASCRIPT
DRUPAL amp JAVASCRIPT Drupal integravegre de nombreuses libraries javascript (jQuery Modernizrhellip) et propose
eacutegalement des libraries drsquoutilitaires (coredrupal coredrupalSettings drupalajax drupalformhellip)
Par exemple Drupal 8 embarque
jQuery 321
jQuery UI 1121
Chaque librairie deacutefinit ses deacutependances jQuery UI deacutepend de jQuery par exemple
Lorsque lrsquoon utilise une librairie depuis un script custom il ne faut pas oublier de deacuteclarer cette deacutependance Pensez agrave tester en anonyme car aucune libraire nrsquoest chargeacutee par deacutefaut
Vous disposez de toutes les librairies deacutefinies dans le fichier corecorelibrairiesyml
9 JAVASCRIPT
CONCREgraveTEMENTPour pouvoir utiliser du code JS dans vos scripts avec Drupal la bonne pratique est drsquoencadrer votre code comme suit
file Shows status messages in a modal instead of inline (function ($ Drupal)
Displays status messages in a Foundation reveal modal DrupalbehaviorsfoundationStatusInReveal = attach function (context settings) $(status-messages)once(foundation-reveal)each(function() Move the status messages out of the highlighted region var $messages = $(this) var $region = $messagesparent() $messagesappendTo(body) $messagesfoundation(open)
This is required as this region will likely be empty after status messages are removed $regionhtml($regionhtml()replace(ng )) )
)(jQuery Drupal)
9 JAVASCRIPT
DRUPAL BEHAVIORS
Les scripts sont exeacutecuteacutes apregraves le chargement complet du DOM ($(document)ready() )Mais on a aussi parfois besoin de les reacute-exeacutecuter lorsque lrsquoon interagit avec la page (appel AJAX overlayhellip)
Pour ce faire il suffit drsquoattacher le script JS agrave lrsquoobjet Drupalbehaviors (librairie coredrupal) La fonction exeacutecuteacutee reccediloit 2 variables
context le DOM (le HTML chargeacute ou ajouteacute)
settings toutes les variables injecteacutees cocircteacute serveur
9 JAVASCRIPT
RAPPEL
Comme pour les fichiers de style les scripts JS doivent ecirctre deacuteclareacutes sous forme de bibliothegraveque via les fichiers THEMENAMEinfoyml et THEMENAMElibrariesyml
QUESTIONS 10
RTFM httpswwwdrupalorgdocs8theminghttpstwigsymfonycomdoc2x
MERCI Agrave VOUS
FlorisMoriceau
SI ON DEacuteSIRE PLUS DrsquoOUTILS DE PERSONNALISATION IL FAUT LES CODER
ET DONC CREacuteER SON PROPRE THEgraveME
2 CREacuteER SON THEgraveME
2 CREacuteER SON THEgraveME
POUR CREacuteER SON THEgraveME PLUSIEURS POSSIBILITEacuteS Partir de zeacutero
Possible mais fastidieux (Ne faites pas ccedila Ou alors seulement sur un side project personnel qui nrsquoa pas de deadline pour la beauteacute du geste et pour apprendre tous les rouages du templating)
Partir drsquoun thegraveme de base Un thegraveme de base est un thegraveme que lrsquoon va eacutetendre en heacuteritant de tout son code On dispose drsquoun systegraveme de thegravemes parentenfant Exemples Omega Zen Bootstraphellip ZURB Foundation
Partir drsquoun thegraveme ldquoprecirct-agrave-lrsquoemploildquo Par exemple un thegraveme acheteacute sur themeforestcom Lrsquoideacutee ici est de limiter au maximum les personnalisations afin de gagner du tempsAttention Sortir des fonctionnaliteacutes offertes par ce genre de thegraveme peut se reacuteveacuteler tregraves coucircteux
2 CREacuteER SON THEgraveME
MEacuteTHODE 1 VIA UN THEgraveME PREacuteSENT DANS LE CORE (BARTIK)
On fait une copie du thegraveme par deacutefaut Bartik (crsquoest-agrave-dire du reacutepertoire corethemesbartik)
On colle le reacutepertoire copieacute dans themescustom et on le renomme comme on le souhaiteAttention cependant Le thegraveme doit avoir un laquo nom machine raquo composeacute exclusivement de caractegraveres alphanumeacuteriques et de lsquo_rsquo (underscore)
Ici on choisira lsquoTHEMENAMErsquo
On renommez le fichier themescustomTHEMENAMEbartikinfoyml en themescustomTHEMENAMETHEMENAMEinfoyml (on nrsquooublie pas drsquoadapter eacutegalement le contenu du fichier infoyml)
On renomme tous les fichiers dont le nom comporte bartik par THEMENAME
Dans tous les fichiers on recherche les occurrences de la chaine lsquobartik et on les remplace par lsquoTHEMENAMErsquo
On vide TOUS les caches
Enfin on va dans Admin gt Apparence on active et deacutefini par deacutefaut notre nouveau thegraveme THEMENAME
On veacuterifie qursquoil nrsquoy a pas drsquoerreur en visitant par exemple la page drsquoaccueil
2 CREacuteER SON THEgraveME
MEacuteTHODE 2 VIA UN THEgraveME CONTIB AYANT UN STARTER (ZF) Certains thegravemes contrib proposent un laquo STARTER KIT raquo comme par exemple Bootstrap ou ZURB
Foundation
Dossier precirct a ecirctre copieacute colleacute pour faire un thegraveme enfant heacuteritant de ce dernier
On fait une copie du STARTER KIT
On colle le reacutepertoire copieacute dans themescustom et on le renomme comme on le souhaite
Etc
REMARQUE DANS LES DEUX CAS NE PAS OUBLIER DE PREacuteCISER LE lsquoBASE THEMErsquo DANS LE INFOYML
REMARQUE LE THEgraveME PARENT DOIT EcircTRE ACTIVEacute SI VOUS VOULEZ ACTIVER UN DE SES THEgraveMES ENFANT
JOBrsquoS DONE
Warcraft Human peon
2 CREacuteER SON THEgraveME
MAIShellip REVENONS SUR NOTRE FICHIER INFOYML
2 CREacuteER SON THEgraveME
THEMENAMEINFOYML
Librairies chargeacutees avec le thegraveme
Reacutegions du thegraveme
Informations du thegraveme
ET SUR LES FICHIERS DANS NOTRE DOSSIER lsquoTHEMENAMErsquo
2 CREacuteER SON THEgraveME gt THEMENAMEINFOYML
CONCREgraveTEMENT
NAMESCREENSHOTPNG
DESCRIPTION
1 ANATOMIE DrsquoUN THEgraveME gt _THEMENAME_INFOYML
CONCREgraveTEMENT
LOGOSVG
FAVICONICO
2 CREacuteER SON THEgraveME
DOCUMENTATION OFFICIELLEhttpswwwdrupalorgdocs8theming-drupal-8defining-a-theme-with-an-infoyml-file
Dans un fichier yml
LES POINTS Agrave RETENIR
libraries-override (optional) base theme (recommended) hidden (optional) engine (optional) logo (optional) screenshot (optional) regions (optional) regions_hidden (optional) features (optional) stylesheets-remove (deprecated) ckeditor_stylesheets (optional) name (required)
type (required) description (optional) package (optional) core (required) php (optional) version (optional) libraries (optional)
Mais surtout
Tabs are NOT allowed Use spaces ONLY
Properties and lists MUST be indented by two (2) spaces
AJOUTER DES ASSETS (CSSJS)
3
3 AJOUTER DES ASSETS
CHARGER DES FICHIERS CSS amp JSCe que dit la documentation
httpswwwdrupalorgdocs8themingadding-stylesheets-css-and-javascript-js-to-a-drupal-8-theme
1 Save the CSS or JS to a file using the proper naming conventions and file structure
2 Define a library which registers these CSSJS files with your theme
3 Attach the library to all pages to specific Twig templates or target specific pages via a render element in a preprocess function
3 AJOUTER DES ASSETS
EN PRATIQUE
Lrsquoajout de fichier de CSS et de JS se fait via un systegraveme de librairie (bibliothegraveque)
Il faut tout drsquoabord deacuteclarer une librairie (ou en utiliser une existante) dans le fichier THEMENAMElibrariesyml puis demander au systegraveme de la charger Ceci peut ecirctre fait depuis le fichier THEMENAMEinfoyml
3 AJOUTER DES ASSETS
CHARGER UNE LIBRAIRIE
Lorsqursquoune librairie est appeleacutee depuis le fichier THEMENAMEinfoyml alors elle est chargeacutee sur toutes les pages degraves lors que le thegraveme est utiliseacute
Il est possible de charger sous condition une bibliothegraveque Pour cela plusieurs techniques sont disponibles
depuis un fichier de template
en utilisant le hook_page_attachments_alter()
en utilisant une fonction de preprocess
3 AJOUTER DES ASSETS
CHARGER UNE LIBRAIRIE
Directement depuis un fichier de template directement par exemple dans le fichier geacuterant lrsquoaffichage des blocs
attach_library(lsquodrupal_franceblocksrsquo)
3 AJOUTER DES ASSETS
CHARGER UNE LIBRAIRIE
Chargement drsquoune librairie depuis le fichier themesTHEMENAMETHEMENAMEtheme en utilisant la fonction de hook hook_page_attachments_alter()
Implements hook_page_attachments_alter() function drupal_france_page_attachments_alter(array amp$attachments) $attachments[attached][library][] = drupal_franceglobal
3 AJOUTER DES ASSETS
CHARGER UNE LIBRAIRIE
Chargement drsquoune librairie depuis le fichier themesTHEMENAMETHEMENAMEtheme en utilisant une fonction de preprocess
Implements hook_preprocess_HOOK() for page templates function drupal_france_preprocess_page(array amp$variables) $variables[attached][library][] = drupal_franceglobal
LES FICHIERS TEMPLATES
4
4 LES TEMPLATES
Agrave QUOI CcedilA SERT
Les templates constituent la structure des pages du sitesEn fait de chacun des eacuteleacutements qui la composent
Ce sont des fichiers html (balises ltdivgt lth1gt ltagt) avec du code Twig permettant drsquoafficher les eacuteleacutements (sous forme de variables) creacuteeacutes par Drupal
Chaque type drsquoeacuteleacutement du site possegravede son propre template
4 LES TEMPLATES
PAR EXEMPLE (CrsquoEST DU VRAI CODE)
ltdiv class=l-main row expandedgt ltmain id=main class= main_grid role=maingt if pagehighlighted spaceless pagehighlighted endspaceless endif lta id=main-contentgtltagt if breadcrumb breadcrumb endif ltsectiongt pagecontent ltsectiongt ltmaingt if pagesidebar_first ltdiv id=sidebar-first class= sidebar_first_grid column sidebargt pagesidebar_first ltdivgt endif if pagesidebar_second ltdiv id=sidebar-second class= sidebar_sec_grid column sidebargt pagesidebar_second ltdivgt endif ltdivgt
4 LES TEMPLATES
IMBRICATION DES TEMPLATES
Imaginons lrsquoappel drsquoune page de billet de blog
Et maintenant imaginons le parcours drsquoimbrication de templates pour depuis la balise lthtmlgt jusqursquoagrave la ltdivgt contenant un commentaire sous ce billet de blog
4 LES TEMPLATES
FROM ltHTMLgt TO ltDIV CLASS=lsquoCOMMENTrsquogthtmlhtmltwig
pagehtmltwig
regionhtmltwig
blockhtmltwig
nodehtmltwig nodehtmltwig
fieldhtmltwig
comment-wrapperhtmltwig
commenthtmltwig
4 LES TEMPLATES
LES TEMPLATES DEacuteRIVEacuteES
Les templates deacuteriveacutees sont des templates utiliseacutees dans un contexte preacutecis
Crsquoest le nom de la template qui indique agrave Drupal quand lrsquoutiliser
Toutes ces templates sont optionnelles et reconnues automatiquement par Drupal en fonction de leurs noms
Si des templates ne sont pas preacutesentes dans le thegraveme alors Drupal utilise ceux par deacutefaut (corethemes)
On parle de ldquotemplate deacuteriveacuteeldquo de ldquosuggestion de templateldquo ou de ldquotemplates suggeacutereacuteesldquo
Il faut vider le cache de Drupal lorsque lrsquoon ajoute des templates au thegraveme
Documentation httpswwwdrupalorgdocs8themingtwigtwig-template-naming-conventions
4 LES TEMPLATES
EXEMPLE DE SUGGESTIONS DE TEMPLATES
Template de page pagehtmltwig page--chemin--internehtmltwig sera utiliseacute lorsque lrsquoon appelle chemininterne
Ex page--fronthtmltwig cible la page drsquoaccueil
Ex page--cheminhtmltwig cible toutes les pages dont le chemin commence par chemin
Ex page--node--240htmltwig cible la page du noeud portant lrsquoid 240
Template de noeud nodehtmltwig node--type-de-noeudhtmltwig cible les noeuds de type type-de-noeud
Ex node--articlehtmltwig cible tous les noeuds de type article
4 LES TEMPLATES
TROUVER LES SUGGESTIONS
Dans le fichier wwwsitesdevelopmentservicesyml
Local development services
parameters httpresponsedebug_cacheability_headers true twigconfig debug true services cachebackendnull class DrupalCoreCacheNullBackendFactory
TWIG5
5 TWIG
UN MOTEUR DE TEMPLATE
Twig est capable drsquoafficher le contenu de nrsquoimporte quel type de variable (chaine tableau ou objet)
Il est possible de faire des boucles des conditionshellip
Chaque variable peut ecirctre filtreacutee avant drsquoecirctre afficheacutee
Les chaines peuvent ecirctre rendues traduites (la traduction est alors faite via le back-office de Drupal)
5 TWIG
LES BASES
Affiche le contenu de la variable var var
Affiche le contenu de la proprieacuteteacute title de la variable node nodetitle
Conditions if var else endif
Commentaires commentaire
Traduction trans chaine endtrans
Fonctions speacutecifiques
url(lsquoroute_namersquo)
path(lsquoentitynodecanonicalrsquo lsquonodersquo nodeid)
Les modules Twig tweak ou encore Bamboo Twig proposent encore davantage de fonctions
5 TWIG
LES FILTRES Date date|format_date(lsquomediumrsquo)
Chaine
Echappement content (par deacutefaut)
Interpreacutetation du contenu de la variable texte|raw (attention )
Placeholder text|placeholder
Exclusion content|without(lsquolinksrsquo)
string|lower (upper eacutegalement)
class_name|clean_class
id_name|clean_id
Documentation httpswwwdrupalorgdocs8themingtwigfilters-modifying-variables-in-twig-templateshttpstwigsymfonycomdoc2x
5 TWIG
CONCREgraveTEMENT if pagefooter_first or pagefooter_middle or pagefooter_last ltdiv class=l-footer row expandedgt ltfooter class=row footer medium-up-2 large-up-3gt if pagefooter_first ltdiv id=footer-first class=columngt pagefooter_first ltdivgt endif if pagefooter_middle ltdiv id=footer-middle class=columngt pagefooter_middle ltdivgt endif if pagefooter_last ltdiv id=footer-last class=columngt pagefooter_last ltdivgt endif ltfootergt ltdivgt endif ltdiv class=bottom-bar panel hiddengt ltdiv class=rowgt ltdiv class=large-12 columngt ampcopy now|date(Y) site_name All rights reserved|t ltdivgt ltdivgt ltdivgt
LES REacuteGIONS6
6 LES REacuteGIONS
STRUCTURE DE LA PAGE
adminstructureblock gt Demonstrate block regions
6 LES REacuteGIONS
DEacuteFINITION ET RENDU DES REacuteGIONS
Les reacutegions doivent ecirctre deacutefinies dans le fichier THEMENAMEinfoyml
Elles doivent ecirctre appeleacutees obligatoirement dans pagehtmltwig
6 LES REacuteGIONS
THEMENAMEINFOYML
PAGEHTMLTWIG
LE RENDU DU CONTENU
7
7 RENDU DU CONTENU
LrsquoAFFICHAGE DES CHAMPS
Pour chaque type de contenu on peut reacutegler lrsquoaffichage des champs sur adminstructuretypesmanagecontent-typedisplay ougrave content-type est le nom machine du type de contenu
Il est possible de modifier lrsquoordre des champs lrsquoapparence des eacutetiquettes le format du champ
Les reacuteglages disponibles varient en fonction du type de champ
Les champs Texte peuvent ecirctre coupeacutes
Les champs Image peuvent ecirctre afficheacutes sous forme drsquoimage drsquoURL de fichier
Les champs Date peuvent utiliser un format diffeacuterent
Ces reacuteglages peuvent ecirctre diffeacuterents selon le mode drsquoaffichage (modes ldquoPar deacutefautldquo et ldquoAccrocheldquo) =gt Cela permet par exemple de masquer un champ en mode ldquoAccrocheldquo et de lrsquoafficher en mode ldquoPar deacutefautldquo (noeud inteacutegral)
7 RENDU DU CONTENU
LrsquoAFFICHAGE DES IMAGES
Les images transmises par les utilisateurs ne sont jamais aux bonnes dimensions
Le module Image (core) va nous permettre de preacutedeacutefinir des dimensions sous forme de styles drsquoimage par exemple
Vignette 70px x 110px (mise agrave lrsquoeacutechelle)
Normal 200px x 300px (mise agrave lrsquoeacutechelle et recadrage)
Ces dimensions pourront ensuite ecirctre appliqueacutees automatiquement aux champs Image depuis lrsquoeacutecran ldquogeacuterer lrsquoaffichageldquo vu preacuteceacutedemment
7 RENDU DU CONTENU
STYLE DrsquoIMAGE
7 RENDU DU CONTENU
STYLE DrsquoIMAGE
7 RENDU DU CONTENU
ALLER PLUS LOIN La gestion et la manipulation des champs est cependant
limiteacutee dans lrsquointerface drsquoadministration
On est parfois obligeacutes de modifier le code du template correspondant agrave notre champ ou type de contenu
Les reacuteglages de lrsquoadmin sont toujours pris en compte Par exemple les styles drsquoimage choisis seront ceux utiliseacutes mecircme si lrsquoon modifie le template
7 RENDU DU CONTENU
OUgrave SONT LES CHAMPS
Dans le fichier de template des noeuds (nodehtmltwig) on nrsquoa pas directement accegraves aux champs
Crsquoest la variable content qui contient tous les champs que lrsquoon affiche et en particulier ceux ajouteacutes via Field
Comment faire pour reacutecupeacuterer les champs un par un afin de les preacutesenter diffeacuteremment
7 RENDU DU CONTENU
LA VARIABLE lsquoCONTENTrsquo
Tout le contenu drsquoun noeud est afficheacute gracircce agrave la ligne content|without(comment links)
Pour connaitre le contenu de content on utilise la fonction kint() kint(content)
On deacutecouvre alors lrsquoensemble des champs et leurs proprieacuteteacutes qui sont afficheacutees en haut de page sous forme de var_dump()
On peut afficher seacutepareacutement chacun drsquoentre eux avec le code suivant contentnom_du_champ nodecreatedtime
7 RENDU DU CONTENU
NODE DE TYPE lsquoNEWSrsquo ET FORMAT lsquoTEASERrsquo
PREPROCESS8
8 PREPROCESS
FONCTIONS DE PREPROCESS
Pour chaque template on dispose de variables que lrsquoon affiche avec le formatage voulu
Ces variables sont creacuteeacutees en amont des templates dans lesquelles elles sont utiliseacutees
On dispose de fonctions dites de preprocess qui permettent de fabriquer les variables qui sont utiliseacutees dans les templates
Il est possible drsquoeacutetendre ces fonctions pour modifier les variables envoyeacutees aux templates ou en creacuteer de nouvelles
Pour ajouter une fonction de preprocess il faut la nommer comme suit THEMENAME_preprocess_HOOK() Par exemple drupal_france_preprocess_block()
8 PREPROCESS
FONCTIONS DE PREPROCESS
Pour chaque template on dispose de variables que lrsquoon affiche avec le formatage voulu
Ces variables sont creacuteeacutees en amont des templates dans lesquelles elles sont utiliseacutees
On dispose de fonctions dites de preprocess qui permettent de fabriquer les variables qui sont utiliseacutees dans les templates
Il est possible drsquoeacutetendre ces fonctions pour modifier les variables envoyeacutees aux templates ou en creacuteer de nouvelles
Pour ajouter une fonction de preprocess il faut la nommer comme suit THEMENAME_preprocess_HOOK() Par exemple drupal_france_preprocess_block()
8 PREPROCESS
LA VARIABLE lsquo$VARIABLESrsquo
Drupal
Preprocess en amont(core modules)
Preprocess du thegraveme
TemplateCreacuteation de $variables
$variables
$variables
$variables
$variables
En mode super simplifieacute
8 PREPROCESS
APPELLER UN PREPROCESS
Diffeacuterentes fonctions de preprocess peuvent ecirctre appeleacutees permettant agrave tous les modules et thegravemes de modifier les variables passeacutees aux templates Ces fonctions sont les suivantes pour le hook de thegraveme HOOK
template_preprocess_HOOK(array amp$variables)
MODULENAME_preprocess(array amp$variables $hook)
MODULENAME_preprocess_HOOK(array amp$variables)
THEMENAME_preprocess(array amp$variables $hook)
THEMENAME_preprocess_HOOK(array amp$variables)
8 PREPROCESS
CONCREgraveTEMENT Implements hook_preprocess_menu__account() function drupal_france_preprocess_menu__account(amp$variables) if (isset($variables[items][drupalfr_useraccountcompte])) $variables[items][drupalfr_useraccountcompte][attributes]-gtaddClass([ button primary button--user-account ])
$variables[items][drupalfr_useraccountcompte][title] = new FormattableMarkup( lti class=fa fa-user-circle-o aria-hidden=truegtltigtltspan class=sr-onlygtoriginal_titleltspangt [ original_title =gt $variables[items][drupalfr_useraccountcompte][title] ] )
JAVASCRIPT9
9 JAVASCRIPT
DRUPAL amp JAVASCRIPT Drupal integravegre de nombreuses libraries javascript (jQuery Modernizrhellip) et propose
eacutegalement des libraries drsquoutilitaires (coredrupal coredrupalSettings drupalajax drupalformhellip)
Par exemple Drupal 8 embarque
jQuery 321
jQuery UI 1121
Chaque librairie deacutefinit ses deacutependances jQuery UI deacutepend de jQuery par exemple
Lorsque lrsquoon utilise une librairie depuis un script custom il ne faut pas oublier de deacuteclarer cette deacutependance Pensez agrave tester en anonyme car aucune libraire nrsquoest chargeacutee par deacutefaut
Vous disposez de toutes les librairies deacutefinies dans le fichier corecorelibrairiesyml
9 JAVASCRIPT
CONCREgraveTEMENTPour pouvoir utiliser du code JS dans vos scripts avec Drupal la bonne pratique est drsquoencadrer votre code comme suit
file Shows status messages in a modal instead of inline (function ($ Drupal)
Displays status messages in a Foundation reveal modal DrupalbehaviorsfoundationStatusInReveal = attach function (context settings) $(status-messages)once(foundation-reveal)each(function() Move the status messages out of the highlighted region var $messages = $(this) var $region = $messagesparent() $messagesappendTo(body) $messagesfoundation(open)
This is required as this region will likely be empty after status messages are removed $regionhtml($regionhtml()replace(ng )) )
)(jQuery Drupal)
9 JAVASCRIPT
DRUPAL BEHAVIORS
Les scripts sont exeacutecuteacutes apregraves le chargement complet du DOM ($(document)ready() )Mais on a aussi parfois besoin de les reacute-exeacutecuter lorsque lrsquoon interagit avec la page (appel AJAX overlayhellip)
Pour ce faire il suffit drsquoattacher le script JS agrave lrsquoobjet Drupalbehaviors (librairie coredrupal) La fonction exeacutecuteacutee reccediloit 2 variables
context le DOM (le HTML chargeacute ou ajouteacute)
settings toutes les variables injecteacutees cocircteacute serveur
9 JAVASCRIPT
RAPPEL
Comme pour les fichiers de style les scripts JS doivent ecirctre deacuteclareacutes sous forme de bibliothegraveque via les fichiers THEMENAMEinfoyml et THEMENAMElibrariesyml
QUESTIONS 10
RTFM httpswwwdrupalorgdocs8theminghttpstwigsymfonycomdoc2x
MERCI Agrave VOUS
FlorisMoriceau
2 CREacuteER SON THEgraveME
POUR CREacuteER SON THEgraveME PLUSIEURS POSSIBILITEacuteS Partir de zeacutero
Possible mais fastidieux (Ne faites pas ccedila Ou alors seulement sur un side project personnel qui nrsquoa pas de deadline pour la beauteacute du geste et pour apprendre tous les rouages du templating)
Partir drsquoun thegraveme de base Un thegraveme de base est un thegraveme que lrsquoon va eacutetendre en heacuteritant de tout son code On dispose drsquoun systegraveme de thegravemes parentenfant Exemples Omega Zen Bootstraphellip ZURB Foundation
Partir drsquoun thegraveme ldquoprecirct-agrave-lrsquoemploildquo Par exemple un thegraveme acheteacute sur themeforestcom Lrsquoideacutee ici est de limiter au maximum les personnalisations afin de gagner du tempsAttention Sortir des fonctionnaliteacutes offertes par ce genre de thegraveme peut se reacuteveacuteler tregraves coucircteux
2 CREacuteER SON THEgraveME
MEacuteTHODE 1 VIA UN THEgraveME PREacuteSENT DANS LE CORE (BARTIK)
On fait une copie du thegraveme par deacutefaut Bartik (crsquoest-agrave-dire du reacutepertoire corethemesbartik)
On colle le reacutepertoire copieacute dans themescustom et on le renomme comme on le souhaiteAttention cependant Le thegraveme doit avoir un laquo nom machine raquo composeacute exclusivement de caractegraveres alphanumeacuteriques et de lsquo_rsquo (underscore)
Ici on choisira lsquoTHEMENAMErsquo
On renommez le fichier themescustomTHEMENAMEbartikinfoyml en themescustomTHEMENAMETHEMENAMEinfoyml (on nrsquooublie pas drsquoadapter eacutegalement le contenu du fichier infoyml)
On renomme tous les fichiers dont le nom comporte bartik par THEMENAME
Dans tous les fichiers on recherche les occurrences de la chaine lsquobartik et on les remplace par lsquoTHEMENAMErsquo
On vide TOUS les caches
Enfin on va dans Admin gt Apparence on active et deacutefini par deacutefaut notre nouveau thegraveme THEMENAME
On veacuterifie qursquoil nrsquoy a pas drsquoerreur en visitant par exemple la page drsquoaccueil
2 CREacuteER SON THEgraveME
MEacuteTHODE 2 VIA UN THEgraveME CONTIB AYANT UN STARTER (ZF) Certains thegravemes contrib proposent un laquo STARTER KIT raquo comme par exemple Bootstrap ou ZURB
Foundation
Dossier precirct a ecirctre copieacute colleacute pour faire un thegraveme enfant heacuteritant de ce dernier
On fait une copie du STARTER KIT
On colle le reacutepertoire copieacute dans themescustom et on le renomme comme on le souhaite
Etc
REMARQUE DANS LES DEUX CAS NE PAS OUBLIER DE PREacuteCISER LE lsquoBASE THEMErsquo DANS LE INFOYML
REMARQUE LE THEgraveME PARENT DOIT EcircTRE ACTIVEacute SI VOUS VOULEZ ACTIVER UN DE SES THEgraveMES ENFANT
JOBrsquoS DONE
Warcraft Human peon
2 CREacuteER SON THEgraveME
MAIShellip REVENONS SUR NOTRE FICHIER INFOYML
2 CREacuteER SON THEgraveME
THEMENAMEINFOYML
Librairies chargeacutees avec le thegraveme
Reacutegions du thegraveme
Informations du thegraveme
ET SUR LES FICHIERS DANS NOTRE DOSSIER lsquoTHEMENAMErsquo
2 CREacuteER SON THEgraveME gt THEMENAMEINFOYML
CONCREgraveTEMENT
NAMESCREENSHOTPNG
DESCRIPTION
1 ANATOMIE DrsquoUN THEgraveME gt _THEMENAME_INFOYML
CONCREgraveTEMENT
LOGOSVG
FAVICONICO
2 CREacuteER SON THEgraveME
DOCUMENTATION OFFICIELLEhttpswwwdrupalorgdocs8theming-drupal-8defining-a-theme-with-an-infoyml-file
Dans un fichier yml
LES POINTS Agrave RETENIR
libraries-override (optional) base theme (recommended) hidden (optional) engine (optional) logo (optional) screenshot (optional) regions (optional) regions_hidden (optional) features (optional) stylesheets-remove (deprecated) ckeditor_stylesheets (optional) name (required)
type (required) description (optional) package (optional) core (required) php (optional) version (optional) libraries (optional)
Mais surtout
Tabs are NOT allowed Use spaces ONLY
Properties and lists MUST be indented by two (2) spaces
AJOUTER DES ASSETS (CSSJS)
3
3 AJOUTER DES ASSETS
CHARGER DES FICHIERS CSS amp JSCe que dit la documentation
httpswwwdrupalorgdocs8themingadding-stylesheets-css-and-javascript-js-to-a-drupal-8-theme
1 Save the CSS or JS to a file using the proper naming conventions and file structure
2 Define a library which registers these CSSJS files with your theme
3 Attach the library to all pages to specific Twig templates or target specific pages via a render element in a preprocess function
3 AJOUTER DES ASSETS
EN PRATIQUE
Lrsquoajout de fichier de CSS et de JS se fait via un systegraveme de librairie (bibliothegraveque)
Il faut tout drsquoabord deacuteclarer une librairie (ou en utiliser une existante) dans le fichier THEMENAMElibrariesyml puis demander au systegraveme de la charger Ceci peut ecirctre fait depuis le fichier THEMENAMEinfoyml
3 AJOUTER DES ASSETS
CHARGER UNE LIBRAIRIE
Lorsqursquoune librairie est appeleacutee depuis le fichier THEMENAMEinfoyml alors elle est chargeacutee sur toutes les pages degraves lors que le thegraveme est utiliseacute
Il est possible de charger sous condition une bibliothegraveque Pour cela plusieurs techniques sont disponibles
depuis un fichier de template
en utilisant le hook_page_attachments_alter()
en utilisant une fonction de preprocess
3 AJOUTER DES ASSETS
CHARGER UNE LIBRAIRIE
Directement depuis un fichier de template directement par exemple dans le fichier geacuterant lrsquoaffichage des blocs
attach_library(lsquodrupal_franceblocksrsquo)
3 AJOUTER DES ASSETS
CHARGER UNE LIBRAIRIE
Chargement drsquoune librairie depuis le fichier themesTHEMENAMETHEMENAMEtheme en utilisant la fonction de hook hook_page_attachments_alter()
Implements hook_page_attachments_alter() function drupal_france_page_attachments_alter(array amp$attachments) $attachments[attached][library][] = drupal_franceglobal
3 AJOUTER DES ASSETS
CHARGER UNE LIBRAIRIE
Chargement drsquoune librairie depuis le fichier themesTHEMENAMETHEMENAMEtheme en utilisant une fonction de preprocess
Implements hook_preprocess_HOOK() for page templates function drupal_france_preprocess_page(array amp$variables) $variables[attached][library][] = drupal_franceglobal
LES FICHIERS TEMPLATES
4
4 LES TEMPLATES
Agrave QUOI CcedilA SERT
Les templates constituent la structure des pages du sitesEn fait de chacun des eacuteleacutements qui la composent
Ce sont des fichiers html (balises ltdivgt lth1gt ltagt) avec du code Twig permettant drsquoafficher les eacuteleacutements (sous forme de variables) creacuteeacutes par Drupal
Chaque type drsquoeacuteleacutement du site possegravede son propre template
4 LES TEMPLATES
PAR EXEMPLE (CrsquoEST DU VRAI CODE)
ltdiv class=l-main row expandedgt ltmain id=main class= main_grid role=maingt if pagehighlighted spaceless pagehighlighted endspaceless endif lta id=main-contentgtltagt if breadcrumb breadcrumb endif ltsectiongt pagecontent ltsectiongt ltmaingt if pagesidebar_first ltdiv id=sidebar-first class= sidebar_first_grid column sidebargt pagesidebar_first ltdivgt endif if pagesidebar_second ltdiv id=sidebar-second class= sidebar_sec_grid column sidebargt pagesidebar_second ltdivgt endif ltdivgt
4 LES TEMPLATES
IMBRICATION DES TEMPLATES
Imaginons lrsquoappel drsquoune page de billet de blog
Et maintenant imaginons le parcours drsquoimbrication de templates pour depuis la balise lthtmlgt jusqursquoagrave la ltdivgt contenant un commentaire sous ce billet de blog
4 LES TEMPLATES
FROM ltHTMLgt TO ltDIV CLASS=lsquoCOMMENTrsquogthtmlhtmltwig
pagehtmltwig
regionhtmltwig
blockhtmltwig
nodehtmltwig nodehtmltwig
fieldhtmltwig
comment-wrapperhtmltwig
commenthtmltwig
4 LES TEMPLATES
LES TEMPLATES DEacuteRIVEacuteES
Les templates deacuteriveacutees sont des templates utiliseacutees dans un contexte preacutecis
Crsquoest le nom de la template qui indique agrave Drupal quand lrsquoutiliser
Toutes ces templates sont optionnelles et reconnues automatiquement par Drupal en fonction de leurs noms
Si des templates ne sont pas preacutesentes dans le thegraveme alors Drupal utilise ceux par deacutefaut (corethemes)
On parle de ldquotemplate deacuteriveacuteeldquo de ldquosuggestion de templateldquo ou de ldquotemplates suggeacutereacuteesldquo
Il faut vider le cache de Drupal lorsque lrsquoon ajoute des templates au thegraveme
Documentation httpswwwdrupalorgdocs8themingtwigtwig-template-naming-conventions
4 LES TEMPLATES
EXEMPLE DE SUGGESTIONS DE TEMPLATES
Template de page pagehtmltwig page--chemin--internehtmltwig sera utiliseacute lorsque lrsquoon appelle chemininterne
Ex page--fronthtmltwig cible la page drsquoaccueil
Ex page--cheminhtmltwig cible toutes les pages dont le chemin commence par chemin
Ex page--node--240htmltwig cible la page du noeud portant lrsquoid 240
Template de noeud nodehtmltwig node--type-de-noeudhtmltwig cible les noeuds de type type-de-noeud
Ex node--articlehtmltwig cible tous les noeuds de type article
4 LES TEMPLATES
TROUVER LES SUGGESTIONS
Dans le fichier wwwsitesdevelopmentservicesyml
Local development services
parameters httpresponsedebug_cacheability_headers true twigconfig debug true services cachebackendnull class DrupalCoreCacheNullBackendFactory
TWIG5
5 TWIG
UN MOTEUR DE TEMPLATE
Twig est capable drsquoafficher le contenu de nrsquoimporte quel type de variable (chaine tableau ou objet)
Il est possible de faire des boucles des conditionshellip
Chaque variable peut ecirctre filtreacutee avant drsquoecirctre afficheacutee
Les chaines peuvent ecirctre rendues traduites (la traduction est alors faite via le back-office de Drupal)
5 TWIG
LES BASES
Affiche le contenu de la variable var var
Affiche le contenu de la proprieacuteteacute title de la variable node nodetitle
Conditions if var else endif
Commentaires commentaire
Traduction trans chaine endtrans
Fonctions speacutecifiques
url(lsquoroute_namersquo)
path(lsquoentitynodecanonicalrsquo lsquonodersquo nodeid)
Les modules Twig tweak ou encore Bamboo Twig proposent encore davantage de fonctions
5 TWIG
LES FILTRES Date date|format_date(lsquomediumrsquo)
Chaine
Echappement content (par deacutefaut)
Interpreacutetation du contenu de la variable texte|raw (attention )
Placeholder text|placeholder
Exclusion content|without(lsquolinksrsquo)
string|lower (upper eacutegalement)
class_name|clean_class
id_name|clean_id
Documentation httpswwwdrupalorgdocs8themingtwigfilters-modifying-variables-in-twig-templateshttpstwigsymfonycomdoc2x
5 TWIG
CONCREgraveTEMENT if pagefooter_first or pagefooter_middle or pagefooter_last ltdiv class=l-footer row expandedgt ltfooter class=row footer medium-up-2 large-up-3gt if pagefooter_first ltdiv id=footer-first class=columngt pagefooter_first ltdivgt endif if pagefooter_middle ltdiv id=footer-middle class=columngt pagefooter_middle ltdivgt endif if pagefooter_last ltdiv id=footer-last class=columngt pagefooter_last ltdivgt endif ltfootergt ltdivgt endif ltdiv class=bottom-bar panel hiddengt ltdiv class=rowgt ltdiv class=large-12 columngt ampcopy now|date(Y) site_name All rights reserved|t ltdivgt ltdivgt ltdivgt
LES REacuteGIONS6
6 LES REacuteGIONS
STRUCTURE DE LA PAGE
adminstructureblock gt Demonstrate block regions
6 LES REacuteGIONS
DEacuteFINITION ET RENDU DES REacuteGIONS
Les reacutegions doivent ecirctre deacutefinies dans le fichier THEMENAMEinfoyml
Elles doivent ecirctre appeleacutees obligatoirement dans pagehtmltwig
6 LES REacuteGIONS
THEMENAMEINFOYML
PAGEHTMLTWIG
LE RENDU DU CONTENU
7
7 RENDU DU CONTENU
LrsquoAFFICHAGE DES CHAMPS
Pour chaque type de contenu on peut reacutegler lrsquoaffichage des champs sur adminstructuretypesmanagecontent-typedisplay ougrave content-type est le nom machine du type de contenu
Il est possible de modifier lrsquoordre des champs lrsquoapparence des eacutetiquettes le format du champ
Les reacuteglages disponibles varient en fonction du type de champ
Les champs Texte peuvent ecirctre coupeacutes
Les champs Image peuvent ecirctre afficheacutes sous forme drsquoimage drsquoURL de fichier
Les champs Date peuvent utiliser un format diffeacuterent
Ces reacuteglages peuvent ecirctre diffeacuterents selon le mode drsquoaffichage (modes ldquoPar deacutefautldquo et ldquoAccrocheldquo) =gt Cela permet par exemple de masquer un champ en mode ldquoAccrocheldquo et de lrsquoafficher en mode ldquoPar deacutefautldquo (noeud inteacutegral)
7 RENDU DU CONTENU
LrsquoAFFICHAGE DES IMAGES
Les images transmises par les utilisateurs ne sont jamais aux bonnes dimensions
Le module Image (core) va nous permettre de preacutedeacutefinir des dimensions sous forme de styles drsquoimage par exemple
Vignette 70px x 110px (mise agrave lrsquoeacutechelle)
Normal 200px x 300px (mise agrave lrsquoeacutechelle et recadrage)
Ces dimensions pourront ensuite ecirctre appliqueacutees automatiquement aux champs Image depuis lrsquoeacutecran ldquogeacuterer lrsquoaffichageldquo vu preacuteceacutedemment
7 RENDU DU CONTENU
STYLE DrsquoIMAGE
7 RENDU DU CONTENU
STYLE DrsquoIMAGE
7 RENDU DU CONTENU
ALLER PLUS LOIN La gestion et la manipulation des champs est cependant
limiteacutee dans lrsquointerface drsquoadministration
On est parfois obligeacutes de modifier le code du template correspondant agrave notre champ ou type de contenu
Les reacuteglages de lrsquoadmin sont toujours pris en compte Par exemple les styles drsquoimage choisis seront ceux utiliseacutes mecircme si lrsquoon modifie le template
7 RENDU DU CONTENU
OUgrave SONT LES CHAMPS
Dans le fichier de template des noeuds (nodehtmltwig) on nrsquoa pas directement accegraves aux champs
Crsquoest la variable content qui contient tous les champs que lrsquoon affiche et en particulier ceux ajouteacutes via Field
Comment faire pour reacutecupeacuterer les champs un par un afin de les preacutesenter diffeacuteremment
7 RENDU DU CONTENU
LA VARIABLE lsquoCONTENTrsquo
Tout le contenu drsquoun noeud est afficheacute gracircce agrave la ligne content|without(comment links)
Pour connaitre le contenu de content on utilise la fonction kint() kint(content)
On deacutecouvre alors lrsquoensemble des champs et leurs proprieacuteteacutes qui sont afficheacutees en haut de page sous forme de var_dump()
On peut afficher seacutepareacutement chacun drsquoentre eux avec le code suivant contentnom_du_champ nodecreatedtime
7 RENDU DU CONTENU
NODE DE TYPE lsquoNEWSrsquo ET FORMAT lsquoTEASERrsquo
PREPROCESS8
8 PREPROCESS
FONCTIONS DE PREPROCESS
Pour chaque template on dispose de variables que lrsquoon affiche avec le formatage voulu
Ces variables sont creacuteeacutees en amont des templates dans lesquelles elles sont utiliseacutees
On dispose de fonctions dites de preprocess qui permettent de fabriquer les variables qui sont utiliseacutees dans les templates
Il est possible drsquoeacutetendre ces fonctions pour modifier les variables envoyeacutees aux templates ou en creacuteer de nouvelles
Pour ajouter une fonction de preprocess il faut la nommer comme suit THEMENAME_preprocess_HOOK() Par exemple drupal_france_preprocess_block()
8 PREPROCESS
FONCTIONS DE PREPROCESS
Pour chaque template on dispose de variables que lrsquoon affiche avec le formatage voulu
Ces variables sont creacuteeacutees en amont des templates dans lesquelles elles sont utiliseacutees
On dispose de fonctions dites de preprocess qui permettent de fabriquer les variables qui sont utiliseacutees dans les templates
Il est possible drsquoeacutetendre ces fonctions pour modifier les variables envoyeacutees aux templates ou en creacuteer de nouvelles
Pour ajouter une fonction de preprocess il faut la nommer comme suit THEMENAME_preprocess_HOOK() Par exemple drupal_france_preprocess_block()
8 PREPROCESS
LA VARIABLE lsquo$VARIABLESrsquo
Drupal
Preprocess en amont(core modules)
Preprocess du thegraveme
TemplateCreacuteation de $variables
$variables
$variables
$variables
$variables
En mode super simplifieacute
8 PREPROCESS
APPELLER UN PREPROCESS
Diffeacuterentes fonctions de preprocess peuvent ecirctre appeleacutees permettant agrave tous les modules et thegravemes de modifier les variables passeacutees aux templates Ces fonctions sont les suivantes pour le hook de thegraveme HOOK
template_preprocess_HOOK(array amp$variables)
MODULENAME_preprocess(array amp$variables $hook)
MODULENAME_preprocess_HOOK(array amp$variables)
THEMENAME_preprocess(array amp$variables $hook)
THEMENAME_preprocess_HOOK(array amp$variables)
8 PREPROCESS
CONCREgraveTEMENT Implements hook_preprocess_menu__account() function drupal_france_preprocess_menu__account(amp$variables) if (isset($variables[items][drupalfr_useraccountcompte])) $variables[items][drupalfr_useraccountcompte][attributes]-gtaddClass([ button primary button--user-account ])
$variables[items][drupalfr_useraccountcompte][title] = new FormattableMarkup( lti class=fa fa-user-circle-o aria-hidden=truegtltigtltspan class=sr-onlygtoriginal_titleltspangt [ original_title =gt $variables[items][drupalfr_useraccountcompte][title] ] )
JAVASCRIPT9
9 JAVASCRIPT
DRUPAL amp JAVASCRIPT Drupal integravegre de nombreuses libraries javascript (jQuery Modernizrhellip) et propose
eacutegalement des libraries drsquoutilitaires (coredrupal coredrupalSettings drupalajax drupalformhellip)
Par exemple Drupal 8 embarque
jQuery 321
jQuery UI 1121
Chaque librairie deacutefinit ses deacutependances jQuery UI deacutepend de jQuery par exemple
Lorsque lrsquoon utilise une librairie depuis un script custom il ne faut pas oublier de deacuteclarer cette deacutependance Pensez agrave tester en anonyme car aucune libraire nrsquoest chargeacutee par deacutefaut
Vous disposez de toutes les librairies deacutefinies dans le fichier corecorelibrairiesyml
9 JAVASCRIPT
CONCREgraveTEMENTPour pouvoir utiliser du code JS dans vos scripts avec Drupal la bonne pratique est drsquoencadrer votre code comme suit
file Shows status messages in a modal instead of inline (function ($ Drupal)
Displays status messages in a Foundation reveal modal DrupalbehaviorsfoundationStatusInReveal = attach function (context settings) $(status-messages)once(foundation-reveal)each(function() Move the status messages out of the highlighted region var $messages = $(this) var $region = $messagesparent() $messagesappendTo(body) $messagesfoundation(open)
This is required as this region will likely be empty after status messages are removed $regionhtml($regionhtml()replace(ng )) )
)(jQuery Drupal)
9 JAVASCRIPT
DRUPAL BEHAVIORS
Les scripts sont exeacutecuteacutes apregraves le chargement complet du DOM ($(document)ready() )Mais on a aussi parfois besoin de les reacute-exeacutecuter lorsque lrsquoon interagit avec la page (appel AJAX overlayhellip)
Pour ce faire il suffit drsquoattacher le script JS agrave lrsquoobjet Drupalbehaviors (librairie coredrupal) La fonction exeacutecuteacutee reccediloit 2 variables
context le DOM (le HTML chargeacute ou ajouteacute)
settings toutes les variables injecteacutees cocircteacute serveur
9 JAVASCRIPT
RAPPEL
Comme pour les fichiers de style les scripts JS doivent ecirctre deacuteclareacutes sous forme de bibliothegraveque via les fichiers THEMENAMEinfoyml et THEMENAMElibrariesyml
QUESTIONS 10
RTFM httpswwwdrupalorgdocs8theminghttpstwigsymfonycomdoc2x
MERCI Agrave VOUS
FlorisMoriceau
2 CREacuteER SON THEgraveME
MEacuteTHODE 1 VIA UN THEgraveME PREacuteSENT DANS LE CORE (BARTIK)
On fait une copie du thegraveme par deacutefaut Bartik (crsquoest-agrave-dire du reacutepertoire corethemesbartik)
On colle le reacutepertoire copieacute dans themescustom et on le renomme comme on le souhaiteAttention cependant Le thegraveme doit avoir un laquo nom machine raquo composeacute exclusivement de caractegraveres alphanumeacuteriques et de lsquo_rsquo (underscore)
Ici on choisira lsquoTHEMENAMErsquo
On renommez le fichier themescustomTHEMENAMEbartikinfoyml en themescustomTHEMENAMETHEMENAMEinfoyml (on nrsquooublie pas drsquoadapter eacutegalement le contenu du fichier infoyml)
On renomme tous les fichiers dont le nom comporte bartik par THEMENAME
Dans tous les fichiers on recherche les occurrences de la chaine lsquobartik et on les remplace par lsquoTHEMENAMErsquo
On vide TOUS les caches
Enfin on va dans Admin gt Apparence on active et deacutefini par deacutefaut notre nouveau thegraveme THEMENAME
On veacuterifie qursquoil nrsquoy a pas drsquoerreur en visitant par exemple la page drsquoaccueil
2 CREacuteER SON THEgraveME
MEacuteTHODE 2 VIA UN THEgraveME CONTIB AYANT UN STARTER (ZF) Certains thegravemes contrib proposent un laquo STARTER KIT raquo comme par exemple Bootstrap ou ZURB
Foundation
Dossier precirct a ecirctre copieacute colleacute pour faire un thegraveme enfant heacuteritant de ce dernier
On fait une copie du STARTER KIT
On colle le reacutepertoire copieacute dans themescustom et on le renomme comme on le souhaite
Etc
REMARQUE DANS LES DEUX CAS NE PAS OUBLIER DE PREacuteCISER LE lsquoBASE THEMErsquo DANS LE INFOYML
REMARQUE LE THEgraveME PARENT DOIT EcircTRE ACTIVEacute SI VOUS VOULEZ ACTIVER UN DE SES THEgraveMES ENFANT
JOBrsquoS DONE
Warcraft Human peon
2 CREacuteER SON THEgraveME
MAIShellip REVENONS SUR NOTRE FICHIER INFOYML
2 CREacuteER SON THEgraveME
THEMENAMEINFOYML
Librairies chargeacutees avec le thegraveme
Reacutegions du thegraveme
Informations du thegraveme
ET SUR LES FICHIERS DANS NOTRE DOSSIER lsquoTHEMENAMErsquo
2 CREacuteER SON THEgraveME gt THEMENAMEINFOYML
CONCREgraveTEMENT
NAMESCREENSHOTPNG
DESCRIPTION
1 ANATOMIE DrsquoUN THEgraveME gt _THEMENAME_INFOYML
CONCREgraveTEMENT
LOGOSVG
FAVICONICO
2 CREacuteER SON THEgraveME
DOCUMENTATION OFFICIELLEhttpswwwdrupalorgdocs8theming-drupal-8defining-a-theme-with-an-infoyml-file
Dans un fichier yml
LES POINTS Agrave RETENIR
libraries-override (optional) base theme (recommended) hidden (optional) engine (optional) logo (optional) screenshot (optional) regions (optional) regions_hidden (optional) features (optional) stylesheets-remove (deprecated) ckeditor_stylesheets (optional) name (required)
type (required) description (optional) package (optional) core (required) php (optional) version (optional) libraries (optional)
Mais surtout
Tabs are NOT allowed Use spaces ONLY
Properties and lists MUST be indented by two (2) spaces
AJOUTER DES ASSETS (CSSJS)
3
3 AJOUTER DES ASSETS
CHARGER DES FICHIERS CSS amp JSCe que dit la documentation
httpswwwdrupalorgdocs8themingadding-stylesheets-css-and-javascript-js-to-a-drupal-8-theme
1 Save the CSS or JS to a file using the proper naming conventions and file structure
2 Define a library which registers these CSSJS files with your theme
3 Attach the library to all pages to specific Twig templates or target specific pages via a render element in a preprocess function
3 AJOUTER DES ASSETS
EN PRATIQUE
Lrsquoajout de fichier de CSS et de JS se fait via un systegraveme de librairie (bibliothegraveque)
Il faut tout drsquoabord deacuteclarer une librairie (ou en utiliser une existante) dans le fichier THEMENAMElibrariesyml puis demander au systegraveme de la charger Ceci peut ecirctre fait depuis le fichier THEMENAMEinfoyml
3 AJOUTER DES ASSETS
CHARGER UNE LIBRAIRIE
Lorsqursquoune librairie est appeleacutee depuis le fichier THEMENAMEinfoyml alors elle est chargeacutee sur toutes les pages degraves lors que le thegraveme est utiliseacute
Il est possible de charger sous condition une bibliothegraveque Pour cela plusieurs techniques sont disponibles
depuis un fichier de template
en utilisant le hook_page_attachments_alter()
en utilisant une fonction de preprocess
3 AJOUTER DES ASSETS
CHARGER UNE LIBRAIRIE
Directement depuis un fichier de template directement par exemple dans le fichier geacuterant lrsquoaffichage des blocs
attach_library(lsquodrupal_franceblocksrsquo)
3 AJOUTER DES ASSETS
CHARGER UNE LIBRAIRIE
Chargement drsquoune librairie depuis le fichier themesTHEMENAMETHEMENAMEtheme en utilisant la fonction de hook hook_page_attachments_alter()
Implements hook_page_attachments_alter() function drupal_france_page_attachments_alter(array amp$attachments) $attachments[attached][library][] = drupal_franceglobal
3 AJOUTER DES ASSETS
CHARGER UNE LIBRAIRIE
Chargement drsquoune librairie depuis le fichier themesTHEMENAMETHEMENAMEtheme en utilisant une fonction de preprocess
Implements hook_preprocess_HOOK() for page templates function drupal_france_preprocess_page(array amp$variables) $variables[attached][library][] = drupal_franceglobal
LES FICHIERS TEMPLATES
4
4 LES TEMPLATES
Agrave QUOI CcedilA SERT
Les templates constituent la structure des pages du sitesEn fait de chacun des eacuteleacutements qui la composent
Ce sont des fichiers html (balises ltdivgt lth1gt ltagt) avec du code Twig permettant drsquoafficher les eacuteleacutements (sous forme de variables) creacuteeacutes par Drupal
Chaque type drsquoeacuteleacutement du site possegravede son propre template
4 LES TEMPLATES
PAR EXEMPLE (CrsquoEST DU VRAI CODE)
ltdiv class=l-main row expandedgt ltmain id=main class= main_grid role=maingt if pagehighlighted spaceless pagehighlighted endspaceless endif lta id=main-contentgtltagt if breadcrumb breadcrumb endif ltsectiongt pagecontent ltsectiongt ltmaingt if pagesidebar_first ltdiv id=sidebar-first class= sidebar_first_grid column sidebargt pagesidebar_first ltdivgt endif if pagesidebar_second ltdiv id=sidebar-second class= sidebar_sec_grid column sidebargt pagesidebar_second ltdivgt endif ltdivgt
4 LES TEMPLATES
IMBRICATION DES TEMPLATES
Imaginons lrsquoappel drsquoune page de billet de blog
Et maintenant imaginons le parcours drsquoimbrication de templates pour depuis la balise lthtmlgt jusqursquoagrave la ltdivgt contenant un commentaire sous ce billet de blog
4 LES TEMPLATES
FROM ltHTMLgt TO ltDIV CLASS=lsquoCOMMENTrsquogthtmlhtmltwig
pagehtmltwig
regionhtmltwig
blockhtmltwig
nodehtmltwig nodehtmltwig
fieldhtmltwig
comment-wrapperhtmltwig
commenthtmltwig
4 LES TEMPLATES
LES TEMPLATES DEacuteRIVEacuteES
Les templates deacuteriveacutees sont des templates utiliseacutees dans un contexte preacutecis
Crsquoest le nom de la template qui indique agrave Drupal quand lrsquoutiliser
Toutes ces templates sont optionnelles et reconnues automatiquement par Drupal en fonction de leurs noms
Si des templates ne sont pas preacutesentes dans le thegraveme alors Drupal utilise ceux par deacutefaut (corethemes)
On parle de ldquotemplate deacuteriveacuteeldquo de ldquosuggestion de templateldquo ou de ldquotemplates suggeacutereacuteesldquo
Il faut vider le cache de Drupal lorsque lrsquoon ajoute des templates au thegraveme
Documentation httpswwwdrupalorgdocs8themingtwigtwig-template-naming-conventions
4 LES TEMPLATES
EXEMPLE DE SUGGESTIONS DE TEMPLATES
Template de page pagehtmltwig page--chemin--internehtmltwig sera utiliseacute lorsque lrsquoon appelle chemininterne
Ex page--fronthtmltwig cible la page drsquoaccueil
Ex page--cheminhtmltwig cible toutes les pages dont le chemin commence par chemin
Ex page--node--240htmltwig cible la page du noeud portant lrsquoid 240
Template de noeud nodehtmltwig node--type-de-noeudhtmltwig cible les noeuds de type type-de-noeud
Ex node--articlehtmltwig cible tous les noeuds de type article
4 LES TEMPLATES
TROUVER LES SUGGESTIONS
Dans le fichier wwwsitesdevelopmentservicesyml
Local development services
parameters httpresponsedebug_cacheability_headers true twigconfig debug true services cachebackendnull class DrupalCoreCacheNullBackendFactory
TWIG5
5 TWIG
UN MOTEUR DE TEMPLATE
Twig est capable drsquoafficher le contenu de nrsquoimporte quel type de variable (chaine tableau ou objet)
Il est possible de faire des boucles des conditionshellip
Chaque variable peut ecirctre filtreacutee avant drsquoecirctre afficheacutee
Les chaines peuvent ecirctre rendues traduites (la traduction est alors faite via le back-office de Drupal)
5 TWIG
LES BASES
Affiche le contenu de la variable var var
Affiche le contenu de la proprieacuteteacute title de la variable node nodetitle
Conditions if var else endif
Commentaires commentaire
Traduction trans chaine endtrans
Fonctions speacutecifiques
url(lsquoroute_namersquo)
path(lsquoentitynodecanonicalrsquo lsquonodersquo nodeid)
Les modules Twig tweak ou encore Bamboo Twig proposent encore davantage de fonctions
5 TWIG
LES FILTRES Date date|format_date(lsquomediumrsquo)
Chaine
Echappement content (par deacutefaut)
Interpreacutetation du contenu de la variable texte|raw (attention )
Placeholder text|placeholder
Exclusion content|without(lsquolinksrsquo)
string|lower (upper eacutegalement)
class_name|clean_class
id_name|clean_id
Documentation httpswwwdrupalorgdocs8themingtwigfilters-modifying-variables-in-twig-templateshttpstwigsymfonycomdoc2x
5 TWIG
CONCREgraveTEMENT if pagefooter_first or pagefooter_middle or pagefooter_last ltdiv class=l-footer row expandedgt ltfooter class=row footer medium-up-2 large-up-3gt if pagefooter_first ltdiv id=footer-first class=columngt pagefooter_first ltdivgt endif if pagefooter_middle ltdiv id=footer-middle class=columngt pagefooter_middle ltdivgt endif if pagefooter_last ltdiv id=footer-last class=columngt pagefooter_last ltdivgt endif ltfootergt ltdivgt endif ltdiv class=bottom-bar panel hiddengt ltdiv class=rowgt ltdiv class=large-12 columngt ampcopy now|date(Y) site_name All rights reserved|t ltdivgt ltdivgt ltdivgt
LES REacuteGIONS6
6 LES REacuteGIONS
STRUCTURE DE LA PAGE
adminstructureblock gt Demonstrate block regions
6 LES REacuteGIONS
DEacuteFINITION ET RENDU DES REacuteGIONS
Les reacutegions doivent ecirctre deacutefinies dans le fichier THEMENAMEinfoyml
Elles doivent ecirctre appeleacutees obligatoirement dans pagehtmltwig
6 LES REacuteGIONS
THEMENAMEINFOYML
PAGEHTMLTWIG
LE RENDU DU CONTENU
7
7 RENDU DU CONTENU
LrsquoAFFICHAGE DES CHAMPS
Pour chaque type de contenu on peut reacutegler lrsquoaffichage des champs sur adminstructuretypesmanagecontent-typedisplay ougrave content-type est le nom machine du type de contenu
Il est possible de modifier lrsquoordre des champs lrsquoapparence des eacutetiquettes le format du champ
Les reacuteglages disponibles varient en fonction du type de champ
Les champs Texte peuvent ecirctre coupeacutes
Les champs Image peuvent ecirctre afficheacutes sous forme drsquoimage drsquoURL de fichier
Les champs Date peuvent utiliser un format diffeacuterent
Ces reacuteglages peuvent ecirctre diffeacuterents selon le mode drsquoaffichage (modes ldquoPar deacutefautldquo et ldquoAccrocheldquo) =gt Cela permet par exemple de masquer un champ en mode ldquoAccrocheldquo et de lrsquoafficher en mode ldquoPar deacutefautldquo (noeud inteacutegral)
7 RENDU DU CONTENU
LrsquoAFFICHAGE DES IMAGES
Les images transmises par les utilisateurs ne sont jamais aux bonnes dimensions
Le module Image (core) va nous permettre de preacutedeacutefinir des dimensions sous forme de styles drsquoimage par exemple
Vignette 70px x 110px (mise agrave lrsquoeacutechelle)
Normal 200px x 300px (mise agrave lrsquoeacutechelle et recadrage)
Ces dimensions pourront ensuite ecirctre appliqueacutees automatiquement aux champs Image depuis lrsquoeacutecran ldquogeacuterer lrsquoaffichageldquo vu preacuteceacutedemment
7 RENDU DU CONTENU
STYLE DrsquoIMAGE
7 RENDU DU CONTENU
STYLE DrsquoIMAGE
7 RENDU DU CONTENU
ALLER PLUS LOIN La gestion et la manipulation des champs est cependant
limiteacutee dans lrsquointerface drsquoadministration
On est parfois obligeacutes de modifier le code du template correspondant agrave notre champ ou type de contenu
Les reacuteglages de lrsquoadmin sont toujours pris en compte Par exemple les styles drsquoimage choisis seront ceux utiliseacutes mecircme si lrsquoon modifie le template
7 RENDU DU CONTENU
OUgrave SONT LES CHAMPS
Dans le fichier de template des noeuds (nodehtmltwig) on nrsquoa pas directement accegraves aux champs
Crsquoest la variable content qui contient tous les champs que lrsquoon affiche et en particulier ceux ajouteacutes via Field
Comment faire pour reacutecupeacuterer les champs un par un afin de les preacutesenter diffeacuteremment
7 RENDU DU CONTENU
LA VARIABLE lsquoCONTENTrsquo
Tout le contenu drsquoun noeud est afficheacute gracircce agrave la ligne content|without(comment links)
Pour connaitre le contenu de content on utilise la fonction kint() kint(content)
On deacutecouvre alors lrsquoensemble des champs et leurs proprieacuteteacutes qui sont afficheacutees en haut de page sous forme de var_dump()
On peut afficher seacutepareacutement chacun drsquoentre eux avec le code suivant contentnom_du_champ nodecreatedtime
7 RENDU DU CONTENU
NODE DE TYPE lsquoNEWSrsquo ET FORMAT lsquoTEASERrsquo
PREPROCESS8
8 PREPROCESS
FONCTIONS DE PREPROCESS
Pour chaque template on dispose de variables que lrsquoon affiche avec le formatage voulu
Ces variables sont creacuteeacutees en amont des templates dans lesquelles elles sont utiliseacutees
On dispose de fonctions dites de preprocess qui permettent de fabriquer les variables qui sont utiliseacutees dans les templates
Il est possible drsquoeacutetendre ces fonctions pour modifier les variables envoyeacutees aux templates ou en creacuteer de nouvelles
Pour ajouter une fonction de preprocess il faut la nommer comme suit THEMENAME_preprocess_HOOK() Par exemple drupal_france_preprocess_block()
8 PREPROCESS
FONCTIONS DE PREPROCESS
Pour chaque template on dispose de variables que lrsquoon affiche avec le formatage voulu
Ces variables sont creacuteeacutees en amont des templates dans lesquelles elles sont utiliseacutees
On dispose de fonctions dites de preprocess qui permettent de fabriquer les variables qui sont utiliseacutees dans les templates
Il est possible drsquoeacutetendre ces fonctions pour modifier les variables envoyeacutees aux templates ou en creacuteer de nouvelles
Pour ajouter une fonction de preprocess il faut la nommer comme suit THEMENAME_preprocess_HOOK() Par exemple drupal_france_preprocess_block()
8 PREPROCESS
LA VARIABLE lsquo$VARIABLESrsquo
Drupal
Preprocess en amont(core modules)
Preprocess du thegraveme
TemplateCreacuteation de $variables
$variables
$variables
$variables
$variables
En mode super simplifieacute
8 PREPROCESS
APPELLER UN PREPROCESS
Diffeacuterentes fonctions de preprocess peuvent ecirctre appeleacutees permettant agrave tous les modules et thegravemes de modifier les variables passeacutees aux templates Ces fonctions sont les suivantes pour le hook de thegraveme HOOK
template_preprocess_HOOK(array amp$variables)
MODULENAME_preprocess(array amp$variables $hook)
MODULENAME_preprocess_HOOK(array amp$variables)
THEMENAME_preprocess(array amp$variables $hook)
THEMENAME_preprocess_HOOK(array amp$variables)
8 PREPROCESS
CONCREgraveTEMENT Implements hook_preprocess_menu__account() function drupal_france_preprocess_menu__account(amp$variables) if (isset($variables[items][drupalfr_useraccountcompte])) $variables[items][drupalfr_useraccountcompte][attributes]-gtaddClass([ button primary button--user-account ])
$variables[items][drupalfr_useraccountcompte][title] = new FormattableMarkup( lti class=fa fa-user-circle-o aria-hidden=truegtltigtltspan class=sr-onlygtoriginal_titleltspangt [ original_title =gt $variables[items][drupalfr_useraccountcompte][title] ] )
JAVASCRIPT9
9 JAVASCRIPT
DRUPAL amp JAVASCRIPT Drupal integravegre de nombreuses libraries javascript (jQuery Modernizrhellip) et propose
eacutegalement des libraries drsquoutilitaires (coredrupal coredrupalSettings drupalajax drupalformhellip)
Par exemple Drupal 8 embarque
jQuery 321
jQuery UI 1121
Chaque librairie deacutefinit ses deacutependances jQuery UI deacutepend de jQuery par exemple
Lorsque lrsquoon utilise une librairie depuis un script custom il ne faut pas oublier de deacuteclarer cette deacutependance Pensez agrave tester en anonyme car aucune libraire nrsquoest chargeacutee par deacutefaut
Vous disposez de toutes les librairies deacutefinies dans le fichier corecorelibrairiesyml
9 JAVASCRIPT
CONCREgraveTEMENTPour pouvoir utiliser du code JS dans vos scripts avec Drupal la bonne pratique est drsquoencadrer votre code comme suit
file Shows status messages in a modal instead of inline (function ($ Drupal)
Displays status messages in a Foundation reveal modal DrupalbehaviorsfoundationStatusInReveal = attach function (context settings) $(status-messages)once(foundation-reveal)each(function() Move the status messages out of the highlighted region var $messages = $(this) var $region = $messagesparent() $messagesappendTo(body) $messagesfoundation(open)
This is required as this region will likely be empty after status messages are removed $regionhtml($regionhtml()replace(ng )) )
)(jQuery Drupal)
9 JAVASCRIPT
DRUPAL BEHAVIORS
Les scripts sont exeacutecuteacutes apregraves le chargement complet du DOM ($(document)ready() )Mais on a aussi parfois besoin de les reacute-exeacutecuter lorsque lrsquoon interagit avec la page (appel AJAX overlayhellip)
Pour ce faire il suffit drsquoattacher le script JS agrave lrsquoobjet Drupalbehaviors (librairie coredrupal) La fonction exeacutecuteacutee reccediloit 2 variables
context le DOM (le HTML chargeacute ou ajouteacute)
settings toutes les variables injecteacutees cocircteacute serveur
9 JAVASCRIPT
RAPPEL
Comme pour les fichiers de style les scripts JS doivent ecirctre deacuteclareacutes sous forme de bibliothegraveque via les fichiers THEMENAMEinfoyml et THEMENAMElibrariesyml
QUESTIONS 10
RTFM httpswwwdrupalorgdocs8theminghttpstwigsymfonycomdoc2x
MERCI Agrave VOUS
FlorisMoriceau
2 CREacuteER SON THEgraveME
MEacuteTHODE 2 VIA UN THEgraveME CONTIB AYANT UN STARTER (ZF) Certains thegravemes contrib proposent un laquo STARTER KIT raquo comme par exemple Bootstrap ou ZURB
Foundation
Dossier precirct a ecirctre copieacute colleacute pour faire un thegraveme enfant heacuteritant de ce dernier
On fait une copie du STARTER KIT
On colle le reacutepertoire copieacute dans themescustom et on le renomme comme on le souhaite
Etc
REMARQUE DANS LES DEUX CAS NE PAS OUBLIER DE PREacuteCISER LE lsquoBASE THEMErsquo DANS LE INFOYML
REMARQUE LE THEgraveME PARENT DOIT EcircTRE ACTIVEacute SI VOUS VOULEZ ACTIVER UN DE SES THEgraveMES ENFANT
JOBrsquoS DONE
Warcraft Human peon
2 CREacuteER SON THEgraveME
MAIShellip REVENONS SUR NOTRE FICHIER INFOYML
2 CREacuteER SON THEgraveME
THEMENAMEINFOYML
Librairies chargeacutees avec le thegraveme
Reacutegions du thegraveme
Informations du thegraveme
ET SUR LES FICHIERS DANS NOTRE DOSSIER lsquoTHEMENAMErsquo
2 CREacuteER SON THEgraveME gt THEMENAMEINFOYML
CONCREgraveTEMENT
NAMESCREENSHOTPNG
DESCRIPTION
1 ANATOMIE DrsquoUN THEgraveME gt _THEMENAME_INFOYML
CONCREgraveTEMENT
LOGOSVG
FAVICONICO
2 CREacuteER SON THEgraveME
DOCUMENTATION OFFICIELLEhttpswwwdrupalorgdocs8theming-drupal-8defining-a-theme-with-an-infoyml-file
Dans un fichier yml
LES POINTS Agrave RETENIR
libraries-override (optional) base theme (recommended) hidden (optional) engine (optional) logo (optional) screenshot (optional) regions (optional) regions_hidden (optional) features (optional) stylesheets-remove (deprecated) ckeditor_stylesheets (optional) name (required)
type (required) description (optional) package (optional) core (required) php (optional) version (optional) libraries (optional)
Mais surtout
Tabs are NOT allowed Use spaces ONLY
Properties and lists MUST be indented by two (2) spaces
AJOUTER DES ASSETS (CSSJS)
3
3 AJOUTER DES ASSETS
CHARGER DES FICHIERS CSS amp JSCe que dit la documentation
httpswwwdrupalorgdocs8themingadding-stylesheets-css-and-javascript-js-to-a-drupal-8-theme
1 Save the CSS or JS to a file using the proper naming conventions and file structure
2 Define a library which registers these CSSJS files with your theme
3 Attach the library to all pages to specific Twig templates or target specific pages via a render element in a preprocess function
3 AJOUTER DES ASSETS
EN PRATIQUE
Lrsquoajout de fichier de CSS et de JS se fait via un systegraveme de librairie (bibliothegraveque)
Il faut tout drsquoabord deacuteclarer une librairie (ou en utiliser une existante) dans le fichier THEMENAMElibrariesyml puis demander au systegraveme de la charger Ceci peut ecirctre fait depuis le fichier THEMENAMEinfoyml
3 AJOUTER DES ASSETS
CHARGER UNE LIBRAIRIE
Lorsqursquoune librairie est appeleacutee depuis le fichier THEMENAMEinfoyml alors elle est chargeacutee sur toutes les pages degraves lors que le thegraveme est utiliseacute
Il est possible de charger sous condition une bibliothegraveque Pour cela plusieurs techniques sont disponibles
depuis un fichier de template
en utilisant le hook_page_attachments_alter()
en utilisant une fonction de preprocess
3 AJOUTER DES ASSETS
CHARGER UNE LIBRAIRIE
Directement depuis un fichier de template directement par exemple dans le fichier geacuterant lrsquoaffichage des blocs
attach_library(lsquodrupal_franceblocksrsquo)
3 AJOUTER DES ASSETS
CHARGER UNE LIBRAIRIE
Chargement drsquoune librairie depuis le fichier themesTHEMENAMETHEMENAMEtheme en utilisant la fonction de hook hook_page_attachments_alter()
Implements hook_page_attachments_alter() function drupal_france_page_attachments_alter(array amp$attachments) $attachments[attached][library][] = drupal_franceglobal
3 AJOUTER DES ASSETS
CHARGER UNE LIBRAIRIE
Chargement drsquoune librairie depuis le fichier themesTHEMENAMETHEMENAMEtheme en utilisant une fonction de preprocess
Implements hook_preprocess_HOOK() for page templates function drupal_france_preprocess_page(array amp$variables) $variables[attached][library][] = drupal_franceglobal
LES FICHIERS TEMPLATES
4
4 LES TEMPLATES
Agrave QUOI CcedilA SERT
Les templates constituent la structure des pages du sitesEn fait de chacun des eacuteleacutements qui la composent
Ce sont des fichiers html (balises ltdivgt lth1gt ltagt) avec du code Twig permettant drsquoafficher les eacuteleacutements (sous forme de variables) creacuteeacutes par Drupal
Chaque type drsquoeacuteleacutement du site possegravede son propre template
4 LES TEMPLATES
PAR EXEMPLE (CrsquoEST DU VRAI CODE)
ltdiv class=l-main row expandedgt ltmain id=main class= main_grid role=maingt if pagehighlighted spaceless pagehighlighted endspaceless endif lta id=main-contentgtltagt if breadcrumb breadcrumb endif ltsectiongt pagecontent ltsectiongt ltmaingt if pagesidebar_first ltdiv id=sidebar-first class= sidebar_first_grid column sidebargt pagesidebar_first ltdivgt endif if pagesidebar_second ltdiv id=sidebar-second class= sidebar_sec_grid column sidebargt pagesidebar_second ltdivgt endif ltdivgt
4 LES TEMPLATES
IMBRICATION DES TEMPLATES
Imaginons lrsquoappel drsquoune page de billet de blog
Et maintenant imaginons le parcours drsquoimbrication de templates pour depuis la balise lthtmlgt jusqursquoagrave la ltdivgt contenant un commentaire sous ce billet de blog
4 LES TEMPLATES
FROM ltHTMLgt TO ltDIV CLASS=lsquoCOMMENTrsquogthtmlhtmltwig
pagehtmltwig
regionhtmltwig
blockhtmltwig
nodehtmltwig nodehtmltwig
fieldhtmltwig
comment-wrapperhtmltwig
commenthtmltwig
4 LES TEMPLATES
LES TEMPLATES DEacuteRIVEacuteES
Les templates deacuteriveacutees sont des templates utiliseacutees dans un contexte preacutecis
Crsquoest le nom de la template qui indique agrave Drupal quand lrsquoutiliser
Toutes ces templates sont optionnelles et reconnues automatiquement par Drupal en fonction de leurs noms
Si des templates ne sont pas preacutesentes dans le thegraveme alors Drupal utilise ceux par deacutefaut (corethemes)
On parle de ldquotemplate deacuteriveacuteeldquo de ldquosuggestion de templateldquo ou de ldquotemplates suggeacutereacuteesldquo
Il faut vider le cache de Drupal lorsque lrsquoon ajoute des templates au thegraveme
Documentation httpswwwdrupalorgdocs8themingtwigtwig-template-naming-conventions
4 LES TEMPLATES
EXEMPLE DE SUGGESTIONS DE TEMPLATES
Template de page pagehtmltwig page--chemin--internehtmltwig sera utiliseacute lorsque lrsquoon appelle chemininterne
Ex page--fronthtmltwig cible la page drsquoaccueil
Ex page--cheminhtmltwig cible toutes les pages dont le chemin commence par chemin
Ex page--node--240htmltwig cible la page du noeud portant lrsquoid 240
Template de noeud nodehtmltwig node--type-de-noeudhtmltwig cible les noeuds de type type-de-noeud
Ex node--articlehtmltwig cible tous les noeuds de type article
4 LES TEMPLATES
TROUVER LES SUGGESTIONS
Dans le fichier wwwsitesdevelopmentservicesyml
Local development services
parameters httpresponsedebug_cacheability_headers true twigconfig debug true services cachebackendnull class DrupalCoreCacheNullBackendFactory
TWIG5
5 TWIG
UN MOTEUR DE TEMPLATE
Twig est capable drsquoafficher le contenu de nrsquoimporte quel type de variable (chaine tableau ou objet)
Il est possible de faire des boucles des conditionshellip
Chaque variable peut ecirctre filtreacutee avant drsquoecirctre afficheacutee
Les chaines peuvent ecirctre rendues traduites (la traduction est alors faite via le back-office de Drupal)
5 TWIG
LES BASES
Affiche le contenu de la variable var var
Affiche le contenu de la proprieacuteteacute title de la variable node nodetitle
Conditions if var else endif
Commentaires commentaire
Traduction trans chaine endtrans
Fonctions speacutecifiques
url(lsquoroute_namersquo)
path(lsquoentitynodecanonicalrsquo lsquonodersquo nodeid)
Les modules Twig tweak ou encore Bamboo Twig proposent encore davantage de fonctions
5 TWIG
LES FILTRES Date date|format_date(lsquomediumrsquo)
Chaine
Echappement content (par deacutefaut)
Interpreacutetation du contenu de la variable texte|raw (attention )
Placeholder text|placeholder
Exclusion content|without(lsquolinksrsquo)
string|lower (upper eacutegalement)
class_name|clean_class
id_name|clean_id
Documentation httpswwwdrupalorgdocs8themingtwigfilters-modifying-variables-in-twig-templateshttpstwigsymfonycomdoc2x
5 TWIG
CONCREgraveTEMENT if pagefooter_first or pagefooter_middle or pagefooter_last ltdiv class=l-footer row expandedgt ltfooter class=row footer medium-up-2 large-up-3gt if pagefooter_first ltdiv id=footer-first class=columngt pagefooter_first ltdivgt endif if pagefooter_middle ltdiv id=footer-middle class=columngt pagefooter_middle ltdivgt endif if pagefooter_last ltdiv id=footer-last class=columngt pagefooter_last ltdivgt endif ltfootergt ltdivgt endif ltdiv class=bottom-bar panel hiddengt ltdiv class=rowgt ltdiv class=large-12 columngt ampcopy now|date(Y) site_name All rights reserved|t ltdivgt ltdivgt ltdivgt
LES REacuteGIONS6
6 LES REacuteGIONS
STRUCTURE DE LA PAGE
adminstructureblock gt Demonstrate block regions
6 LES REacuteGIONS
DEacuteFINITION ET RENDU DES REacuteGIONS
Les reacutegions doivent ecirctre deacutefinies dans le fichier THEMENAMEinfoyml
Elles doivent ecirctre appeleacutees obligatoirement dans pagehtmltwig
6 LES REacuteGIONS
THEMENAMEINFOYML
PAGEHTMLTWIG
LE RENDU DU CONTENU
7
7 RENDU DU CONTENU
LrsquoAFFICHAGE DES CHAMPS
Pour chaque type de contenu on peut reacutegler lrsquoaffichage des champs sur adminstructuretypesmanagecontent-typedisplay ougrave content-type est le nom machine du type de contenu
Il est possible de modifier lrsquoordre des champs lrsquoapparence des eacutetiquettes le format du champ
Les reacuteglages disponibles varient en fonction du type de champ
Les champs Texte peuvent ecirctre coupeacutes
Les champs Image peuvent ecirctre afficheacutes sous forme drsquoimage drsquoURL de fichier
Les champs Date peuvent utiliser un format diffeacuterent
Ces reacuteglages peuvent ecirctre diffeacuterents selon le mode drsquoaffichage (modes ldquoPar deacutefautldquo et ldquoAccrocheldquo) =gt Cela permet par exemple de masquer un champ en mode ldquoAccrocheldquo et de lrsquoafficher en mode ldquoPar deacutefautldquo (noeud inteacutegral)
7 RENDU DU CONTENU
LrsquoAFFICHAGE DES IMAGES
Les images transmises par les utilisateurs ne sont jamais aux bonnes dimensions
Le module Image (core) va nous permettre de preacutedeacutefinir des dimensions sous forme de styles drsquoimage par exemple
Vignette 70px x 110px (mise agrave lrsquoeacutechelle)
Normal 200px x 300px (mise agrave lrsquoeacutechelle et recadrage)
Ces dimensions pourront ensuite ecirctre appliqueacutees automatiquement aux champs Image depuis lrsquoeacutecran ldquogeacuterer lrsquoaffichageldquo vu preacuteceacutedemment
7 RENDU DU CONTENU
STYLE DrsquoIMAGE
7 RENDU DU CONTENU
STYLE DrsquoIMAGE
7 RENDU DU CONTENU
ALLER PLUS LOIN La gestion et la manipulation des champs est cependant
limiteacutee dans lrsquointerface drsquoadministration
On est parfois obligeacutes de modifier le code du template correspondant agrave notre champ ou type de contenu
Les reacuteglages de lrsquoadmin sont toujours pris en compte Par exemple les styles drsquoimage choisis seront ceux utiliseacutes mecircme si lrsquoon modifie le template
7 RENDU DU CONTENU
OUgrave SONT LES CHAMPS
Dans le fichier de template des noeuds (nodehtmltwig) on nrsquoa pas directement accegraves aux champs
Crsquoest la variable content qui contient tous les champs que lrsquoon affiche et en particulier ceux ajouteacutes via Field
Comment faire pour reacutecupeacuterer les champs un par un afin de les preacutesenter diffeacuteremment
7 RENDU DU CONTENU
LA VARIABLE lsquoCONTENTrsquo
Tout le contenu drsquoun noeud est afficheacute gracircce agrave la ligne content|without(comment links)
Pour connaitre le contenu de content on utilise la fonction kint() kint(content)
On deacutecouvre alors lrsquoensemble des champs et leurs proprieacuteteacutes qui sont afficheacutees en haut de page sous forme de var_dump()
On peut afficher seacutepareacutement chacun drsquoentre eux avec le code suivant contentnom_du_champ nodecreatedtime
7 RENDU DU CONTENU
NODE DE TYPE lsquoNEWSrsquo ET FORMAT lsquoTEASERrsquo
PREPROCESS8
8 PREPROCESS
FONCTIONS DE PREPROCESS
Pour chaque template on dispose de variables que lrsquoon affiche avec le formatage voulu
Ces variables sont creacuteeacutees en amont des templates dans lesquelles elles sont utiliseacutees
On dispose de fonctions dites de preprocess qui permettent de fabriquer les variables qui sont utiliseacutees dans les templates
Il est possible drsquoeacutetendre ces fonctions pour modifier les variables envoyeacutees aux templates ou en creacuteer de nouvelles
Pour ajouter une fonction de preprocess il faut la nommer comme suit THEMENAME_preprocess_HOOK() Par exemple drupal_france_preprocess_block()
8 PREPROCESS
FONCTIONS DE PREPROCESS
Pour chaque template on dispose de variables que lrsquoon affiche avec le formatage voulu
Ces variables sont creacuteeacutees en amont des templates dans lesquelles elles sont utiliseacutees
On dispose de fonctions dites de preprocess qui permettent de fabriquer les variables qui sont utiliseacutees dans les templates
Il est possible drsquoeacutetendre ces fonctions pour modifier les variables envoyeacutees aux templates ou en creacuteer de nouvelles
Pour ajouter une fonction de preprocess il faut la nommer comme suit THEMENAME_preprocess_HOOK() Par exemple drupal_france_preprocess_block()
8 PREPROCESS
LA VARIABLE lsquo$VARIABLESrsquo
Drupal
Preprocess en amont(core modules)
Preprocess du thegraveme
TemplateCreacuteation de $variables
$variables
$variables
$variables
$variables
En mode super simplifieacute
8 PREPROCESS
APPELLER UN PREPROCESS
Diffeacuterentes fonctions de preprocess peuvent ecirctre appeleacutees permettant agrave tous les modules et thegravemes de modifier les variables passeacutees aux templates Ces fonctions sont les suivantes pour le hook de thegraveme HOOK
template_preprocess_HOOK(array amp$variables)
MODULENAME_preprocess(array amp$variables $hook)
MODULENAME_preprocess_HOOK(array amp$variables)
THEMENAME_preprocess(array amp$variables $hook)
THEMENAME_preprocess_HOOK(array amp$variables)
8 PREPROCESS
CONCREgraveTEMENT Implements hook_preprocess_menu__account() function drupal_france_preprocess_menu__account(amp$variables) if (isset($variables[items][drupalfr_useraccountcompte])) $variables[items][drupalfr_useraccountcompte][attributes]-gtaddClass([ button primary button--user-account ])
$variables[items][drupalfr_useraccountcompte][title] = new FormattableMarkup( lti class=fa fa-user-circle-o aria-hidden=truegtltigtltspan class=sr-onlygtoriginal_titleltspangt [ original_title =gt $variables[items][drupalfr_useraccountcompte][title] ] )
JAVASCRIPT9
9 JAVASCRIPT
DRUPAL amp JAVASCRIPT Drupal integravegre de nombreuses libraries javascript (jQuery Modernizrhellip) et propose
eacutegalement des libraries drsquoutilitaires (coredrupal coredrupalSettings drupalajax drupalformhellip)
Par exemple Drupal 8 embarque
jQuery 321
jQuery UI 1121
Chaque librairie deacutefinit ses deacutependances jQuery UI deacutepend de jQuery par exemple
Lorsque lrsquoon utilise une librairie depuis un script custom il ne faut pas oublier de deacuteclarer cette deacutependance Pensez agrave tester en anonyme car aucune libraire nrsquoest chargeacutee par deacutefaut
Vous disposez de toutes les librairies deacutefinies dans le fichier corecorelibrairiesyml
9 JAVASCRIPT
CONCREgraveTEMENTPour pouvoir utiliser du code JS dans vos scripts avec Drupal la bonne pratique est drsquoencadrer votre code comme suit
file Shows status messages in a modal instead of inline (function ($ Drupal)
Displays status messages in a Foundation reveal modal DrupalbehaviorsfoundationStatusInReveal = attach function (context settings) $(status-messages)once(foundation-reveal)each(function() Move the status messages out of the highlighted region var $messages = $(this) var $region = $messagesparent() $messagesappendTo(body) $messagesfoundation(open)
This is required as this region will likely be empty after status messages are removed $regionhtml($regionhtml()replace(ng )) )
)(jQuery Drupal)
9 JAVASCRIPT
DRUPAL BEHAVIORS
Les scripts sont exeacutecuteacutes apregraves le chargement complet du DOM ($(document)ready() )Mais on a aussi parfois besoin de les reacute-exeacutecuter lorsque lrsquoon interagit avec la page (appel AJAX overlayhellip)
Pour ce faire il suffit drsquoattacher le script JS agrave lrsquoobjet Drupalbehaviors (librairie coredrupal) La fonction exeacutecuteacutee reccediloit 2 variables
context le DOM (le HTML chargeacute ou ajouteacute)
settings toutes les variables injecteacutees cocircteacute serveur
9 JAVASCRIPT
RAPPEL
Comme pour les fichiers de style les scripts JS doivent ecirctre deacuteclareacutes sous forme de bibliothegraveque via les fichiers THEMENAMEinfoyml et THEMENAMElibrariesyml
QUESTIONS 10
RTFM httpswwwdrupalorgdocs8theminghttpstwigsymfonycomdoc2x
MERCI Agrave VOUS
FlorisMoriceau
JOBrsquoS DONE
Warcraft Human peon
2 CREacuteER SON THEgraveME
MAIShellip REVENONS SUR NOTRE FICHIER INFOYML
2 CREacuteER SON THEgraveME
THEMENAMEINFOYML
Librairies chargeacutees avec le thegraveme
Reacutegions du thegraveme
Informations du thegraveme
ET SUR LES FICHIERS DANS NOTRE DOSSIER lsquoTHEMENAMErsquo
2 CREacuteER SON THEgraveME gt THEMENAMEINFOYML
CONCREgraveTEMENT
NAMESCREENSHOTPNG
DESCRIPTION
1 ANATOMIE DrsquoUN THEgraveME gt _THEMENAME_INFOYML
CONCREgraveTEMENT
LOGOSVG
FAVICONICO
2 CREacuteER SON THEgraveME
DOCUMENTATION OFFICIELLEhttpswwwdrupalorgdocs8theming-drupal-8defining-a-theme-with-an-infoyml-file
Dans un fichier yml
LES POINTS Agrave RETENIR
libraries-override (optional) base theme (recommended) hidden (optional) engine (optional) logo (optional) screenshot (optional) regions (optional) regions_hidden (optional) features (optional) stylesheets-remove (deprecated) ckeditor_stylesheets (optional) name (required)
type (required) description (optional) package (optional) core (required) php (optional) version (optional) libraries (optional)
Mais surtout
Tabs are NOT allowed Use spaces ONLY
Properties and lists MUST be indented by two (2) spaces
AJOUTER DES ASSETS (CSSJS)
3
3 AJOUTER DES ASSETS
CHARGER DES FICHIERS CSS amp JSCe que dit la documentation
httpswwwdrupalorgdocs8themingadding-stylesheets-css-and-javascript-js-to-a-drupal-8-theme
1 Save the CSS or JS to a file using the proper naming conventions and file structure
2 Define a library which registers these CSSJS files with your theme
3 Attach the library to all pages to specific Twig templates or target specific pages via a render element in a preprocess function
3 AJOUTER DES ASSETS
EN PRATIQUE
Lrsquoajout de fichier de CSS et de JS se fait via un systegraveme de librairie (bibliothegraveque)
Il faut tout drsquoabord deacuteclarer une librairie (ou en utiliser une existante) dans le fichier THEMENAMElibrariesyml puis demander au systegraveme de la charger Ceci peut ecirctre fait depuis le fichier THEMENAMEinfoyml
3 AJOUTER DES ASSETS
CHARGER UNE LIBRAIRIE
Lorsqursquoune librairie est appeleacutee depuis le fichier THEMENAMEinfoyml alors elle est chargeacutee sur toutes les pages degraves lors que le thegraveme est utiliseacute
Il est possible de charger sous condition une bibliothegraveque Pour cela plusieurs techniques sont disponibles
depuis un fichier de template
en utilisant le hook_page_attachments_alter()
en utilisant une fonction de preprocess
3 AJOUTER DES ASSETS
CHARGER UNE LIBRAIRIE
Directement depuis un fichier de template directement par exemple dans le fichier geacuterant lrsquoaffichage des blocs
attach_library(lsquodrupal_franceblocksrsquo)
3 AJOUTER DES ASSETS
CHARGER UNE LIBRAIRIE
Chargement drsquoune librairie depuis le fichier themesTHEMENAMETHEMENAMEtheme en utilisant la fonction de hook hook_page_attachments_alter()
Implements hook_page_attachments_alter() function drupal_france_page_attachments_alter(array amp$attachments) $attachments[attached][library][] = drupal_franceglobal
3 AJOUTER DES ASSETS
CHARGER UNE LIBRAIRIE
Chargement drsquoune librairie depuis le fichier themesTHEMENAMETHEMENAMEtheme en utilisant une fonction de preprocess
Implements hook_preprocess_HOOK() for page templates function drupal_france_preprocess_page(array amp$variables) $variables[attached][library][] = drupal_franceglobal
LES FICHIERS TEMPLATES
4
4 LES TEMPLATES
Agrave QUOI CcedilA SERT
Les templates constituent la structure des pages du sitesEn fait de chacun des eacuteleacutements qui la composent
Ce sont des fichiers html (balises ltdivgt lth1gt ltagt) avec du code Twig permettant drsquoafficher les eacuteleacutements (sous forme de variables) creacuteeacutes par Drupal
Chaque type drsquoeacuteleacutement du site possegravede son propre template
4 LES TEMPLATES
PAR EXEMPLE (CrsquoEST DU VRAI CODE)
ltdiv class=l-main row expandedgt ltmain id=main class= main_grid role=maingt if pagehighlighted spaceless pagehighlighted endspaceless endif lta id=main-contentgtltagt if breadcrumb breadcrumb endif ltsectiongt pagecontent ltsectiongt ltmaingt if pagesidebar_first ltdiv id=sidebar-first class= sidebar_first_grid column sidebargt pagesidebar_first ltdivgt endif if pagesidebar_second ltdiv id=sidebar-second class= sidebar_sec_grid column sidebargt pagesidebar_second ltdivgt endif ltdivgt
4 LES TEMPLATES
IMBRICATION DES TEMPLATES
Imaginons lrsquoappel drsquoune page de billet de blog
Et maintenant imaginons le parcours drsquoimbrication de templates pour depuis la balise lthtmlgt jusqursquoagrave la ltdivgt contenant un commentaire sous ce billet de blog
4 LES TEMPLATES
FROM ltHTMLgt TO ltDIV CLASS=lsquoCOMMENTrsquogthtmlhtmltwig
pagehtmltwig
regionhtmltwig
blockhtmltwig
nodehtmltwig nodehtmltwig
fieldhtmltwig
comment-wrapperhtmltwig
commenthtmltwig
4 LES TEMPLATES
LES TEMPLATES DEacuteRIVEacuteES
Les templates deacuteriveacutees sont des templates utiliseacutees dans un contexte preacutecis
Crsquoest le nom de la template qui indique agrave Drupal quand lrsquoutiliser
Toutes ces templates sont optionnelles et reconnues automatiquement par Drupal en fonction de leurs noms
Si des templates ne sont pas preacutesentes dans le thegraveme alors Drupal utilise ceux par deacutefaut (corethemes)
On parle de ldquotemplate deacuteriveacuteeldquo de ldquosuggestion de templateldquo ou de ldquotemplates suggeacutereacuteesldquo
Il faut vider le cache de Drupal lorsque lrsquoon ajoute des templates au thegraveme
Documentation httpswwwdrupalorgdocs8themingtwigtwig-template-naming-conventions
4 LES TEMPLATES
EXEMPLE DE SUGGESTIONS DE TEMPLATES
Template de page pagehtmltwig page--chemin--internehtmltwig sera utiliseacute lorsque lrsquoon appelle chemininterne
Ex page--fronthtmltwig cible la page drsquoaccueil
Ex page--cheminhtmltwig cible toutes les pages dont le chemin commence par chemin
Ex page--node--240htmltwig cible la page du noeud portant lrsquoid 240
Template de noeud nodehtmltwig node--type-de-noeudhtmltwig cible les noeuds de type type-de-noeud
Ex node--articlehtmltwig cible tous les noeuds de type article
4 LES TEMPLATES
TROUVER LES SUGGESTIONS
Dans le fichier wwwsitesdevelopmentservicesyml
Local development services
parameters httpresponsedebug_cacheability_headers true twigconfig debug true services cachebackendnull class DrupalCoreCacheNullBackendFactory
TWIG5
5 TWIG
UN MOTEUR DE TEMPLATE
Twig est capable drsquoafficher le contenu de nrsquoimporte quel type de variable (chaine tableau ou objet)
Il est possible de faire des boucles des conditionshellip
Chaque variable peut ecirctre filtreacutee avant drsquoecirctre afficheacutee
Les chaines peuvent ecirctre rendues traduites (la traduction est alors faite via le back-office de Drupal)
5 TWIG
LES BASES
Affiche le contenu de la variable var var
Affiche le contenu de la proprieacuteteacute title de la variable node nodetitle
Conditions if var else endif
Commentaires commentaire
Traduction trans chaine endtrans
Fonctions speacutecifiques
url(lsquoroute_namersquo)
path(lsquoentitynodecanonicalrsquo lsquonodersquo nodeid)
Les modules Twig tweak ou encore Bamboo Twig proposent encore davantage de fonctions
5 TWIG
LES FILTRES Date date|format_date(lsquomediumrsquo)
Chaine
Echappement content (par deacutefaut)
Interpreacutetation du contenu de la variable texte|raw (attention )
Placeholder text|placeholder
Exclusion content|without(lsquolinksrsquo)
string|lower (upper eacutegalement)
class_name|clean_class
id_name|clean_id
Documentation httpswwwdrupalorgdocs8themingtwigfilters-modifying-variables-in-twig-templateshttpstwigsymfonycomdoc2x
5 TWIG
CONCREgraveTEMENT if pagefooter_first or pagefooter_middle or pagefooter_last ltdiv class=l-footer row expandedgt ltfooter class=row footer medium-up-2 large-up-3gt if pagefooter_first ltdiv id=footer-first class=columngt pagefooter_first ltdivgt endif if pagefooter_middle ltdiv id=footer-middle class=columngt pagefooter_middle ltdivgt endif if pagefooter_last ltdiv id=footer-last class=columngt pagefooter_last ltdivgt endif ltfootergt ltdivgt endif ltdiv class=bottom-bar panel hiddengt ltdiv class=rowgt ltdiv class=large-12 columngt ampcopy now|date(Y) site_name All rights reserved|t ltdivgt ltdivgt ltdivgt
LES REacuteGIONS6
6 LES REacuteGIONS
STRUCTURE DE LA PAGE
adminstructureblock gt Demonstrate block regions
6 LES REacuteGIONS
DEacuteFINITION ET RENDU DES REacuteGIONS
Les reacutegions doivent ecirctre deacutefinies dans le fichier THEMENAMEinfoyml
Elles doivent ecirctre appeleacutees obligatoirement dans pagehtmltwig
6 LES REacuteGIONS
THEMENAMEINFOYML
PAGEHTMLTWIG
LE RENDU DU CONTENU
7
7 RENDU DU CONTENU
LrsquoAFFICHAGE DES CHAMPS
Pour chaque type de contenu on peut reacutegler lrsquoaffichage des champs sur adminstructuretypesmanagecontent-typedisplay ougrave content-type est le nom machine du type de contenu
Il est possible de modifier lrsquoordre des champs lrsquoapparence des eacutetiquettes le format du champ
Les reacuteglages disponibles varient en fonction du type de champ
Les champs Texte peuvent ecirctre coupeacutes
Les champs Image peuvent ecirctre afficheacutes sous forme drsquoimage drsquoURL de fichier
Les champs Date peuvent utiliser un format diffeacuterent
Ces reacuteglages peuvent ecirctre diffeacuterents selon le mode drsquoaffichage (modes ldquoPar deacutefautldquo et ldquoAccrocheldquo) =gt Cela permet par exemple de masquer un champ en mode ldquoAccrocheldquo et de lrsquoafficher en mode ldquoPar deacutefautldquo (noeud inteacutegral)
7 RENDU DU CONTENU
LrsquoAFFICHAGE DES IMAGES
Les images transmises par les utilisateurs ne sont jamais aux bonnes dimensions
Le module Image (core) va nous permettre de preacutedeacutefinir des dimensions sous forme de styles drsquoimage par exemple
Vignette 70px x 110px (mise agrave lrsquoeacutechelle)
Normal 200px x 300px (mise agrave lrsquoeacutechelle et recadrage)
Ces dimensions pourront ensuite ecirctre appliqueacutees automatiquement aux champs Image depuis lrsquoeacutecran ldquogeacuterer lrsquoaffichageldquo vu preacuteceacutedemment
7 RENDU DU CONTENU
STYLE DrsquoIMAGE
7 RENDU DU CONTENU
STYLE DrsquoIMAGE
7 RENDU DU CONTENU
ALLER PLUS LOIN La gestion et la manipulation des champs est cependant
limiteacutee dans lrsquointerface drsquoadministration
On est parfois obligeacutes de modifier le code du template correspondant agrave notre champ ou type de contenu
Les reacuteglages de lrsquoadmin sont toujours pris en compte Par exemple les styles drsquoimage choisis seront ceux utiliseacutes mecircme si lrsquoon modifie le template
7 RENDU DU CONTENU
OUgrave SONT LES CHAMPS
Dans le fichier de template des noeuds (nodehtmltwig) on nrsquoa pas directement accegraves aux champs
Crsquoest la variable content qui contient tous les champs que lrsquoon affiche et en particulier ceux ajouteacutes via Field
Comment faire pour reacutecupeacuterer les champs un par un afin de les preacutesenter diffeacuteremment
7 RENDU DU CONTENU
LA VARIABLE lsquoCONTENTrsquo
Tout le contenu drsquoun noeud est afficheacute gracircce agrave la ligne content|without(comment links)
Pour connaitre le contenu de content on utilise la fonction kint() kint(content)
On deacutecouvre alors lrsquoensemble des champs et leurs proprieacuteteacutes qui sont afficheacutees en haut de page sous forme de var_dump()
On peut afficher seacutepareacutement chacun drsquoentre eux avec le code suivant contentnom_du_champ nodecreatedtime
7 RENDU DU CONTENU
NODE DE TYPE lsquoNEWSrsquo ET FORMAT lsquoTEASERrsquo
PREPROCESS8
8 PREPROCESS
FONCTIONS DE PREPROCESS
Pour chaque template on dispose de variables que lrsquoon affiche avec le formatage voulu
Ces variables sont creacuteeacutees en amont des templates dans lesquelles elles sont utiliseacutees
On dispose de fonctions dites de preprocess qui permettent de fabriquer les variables qui sont utiliseacutees dans les templates
Il est possible drsquoeacutetendre ces fonctions pour modifier les variables envoyeacutees aux templates ou en creacuteer de nouvelles
Pour ajouter une fonction de preprocess il faut la nommer comme suit THEMENAME_preprocess_HOOK() Par exemple drupal_france_preprocess_block()
8 PREPROCESS
FONCTIONS DE PREPROCESS
Pour chaque template on dispose de variables que lrsquoon affiche avec le formatage voulu
Ces variables sont creacuteeacutees en amont des templates dans lesquelles elles sont utiliseacutees
On dispose de fonctions dites de preprocess qui permettent de fabriquer les variables qui sont utiliseacutees dans les templates
Il est possible drsquoeacutetendre ces fonctions pour modifier les variables envoyeacutees aux templates ou en creacuteer de nouvelles
Pour ajouter une fonction de preprocess il faut la nommer comme suit THEMENAME_preprocess_HOOK() Par exemple drupal_france_preprocess_block()
8 PREPROCESS
LA VARIABLE lsquo$VARIABLESrsquo
Drupal
Preprocess en amont(core modules)
Preprocess du thegraveme
TemplateCreacuteation de $variables
$variables
$variables
$variables
$variables
En mode super simplifieacute
8 PREPROCESS
APPELLER UN PREPROCESS
Diffeacuterentes fonctions de preprocess peuvent ecirctre appeleacutees permettant agrave tous les modules et thegravemes de modifier les variables passeacutees aux templates Ces fonctions sont les suivantes pour le hook de thegraveme HOOK
template_preprocess_HOOK(array amp$variables)
MODULENAME_preprocess(array amp$variables $hook)
MODULENAME_preprocess_HOOK(array amp$variables)
THEMENAME_preprocess(array amp$variables $hook)
THEMENAME_preprocess_HOOK(array amp$variables)
8 PREPROCESS
CONCREgraveTEMENT Implements hook_preprocess_menu__account() function drupal_france_preprocess_menu__account(amp$variables) if (isset($variables[items][drupalfr_useraccountcompte])) $variables[items][drupalfr_useraccountcompte][attributes]-gtaddClass([ button primary button--user-account ])
$variables[items][drupalfr_useraccountcompte][title] = new FormattableMarkup( lti class=fa fa-user-circle-o aria-hidden=truegtltigtltspan class=sr-onlygtoriginal_titleltspangt [ original_title =gt $variables[items][drupalfr_useraccountcompte][title] ] )
JAVASCRIPT9
9 JAVASCRIPT
DRUPAL amp JAVASCRIPT Drupal integravegre de nombreuses libraries javascript (jQuery Modernizrhellip) et propose
eacutegalement des libraries drsquoutilitaires (coredrupal coredrupalSettings drupalajax drupalformhellip)
Par exemple Drupal 8 embarque
jQuery 321
jQuery UI 1121
Chaque librairie deacutefinit ses deacutependances jQuery UI deacutepend de jQuery par exemple
Lorsque lrsquoon utilise une librairie depuis un script custom il ne faut pas oublier de deacuteclarer cette deacutependance Pensez agrave tester en anonyme car aucune libraire nrsquoest chargeacutee par deacutefaut
Vous disposez de toutes les librairies deacutefinies dans le fichier corecorelibrairiesyml
9 JAVASCRIPT
CONCREgraveTEMENTPour pouvoir utiliser du code JS dans vos scripts avec Drupal la bonne pratique est drsquoencadrer votre code comme suit
file Shows status messages in a modal instead of inline (function ($ Drupal)
Displays status messages in a Foundation reveal modal DrupalbehaviorsfoundationStatusInReveal = attach function (context settings) $(status-messages)once(foundation-reveal)each(function() Move the status messages out of the highlighted region var $messages = $(this) var $region = $messagesparent() $messagesappendTo(body) $messagesfoundation(open)
This is required as this region will likely be empty after status messages are removed $regionhtml($regionhtml()replace(ng )) )
)(jQuery Drupal)
9 JAVASCRIPT
DRUPAL BEHAVIORS
Les scripts sont exeacutecuteacutes apregraves le chargement complet du DOM ($(document)ready() )Mais on a aussi parfois besoin de les reacute-exeacutecuter lorsque lrsquoon interagit avec la page (appel AJAX overlayhellip)
Pour ce faire il suffit drsquoattacher le script JS agrave lrsquoobjet Drupalbehaviors (librairie coredrupal) La fonction exeacutecuteacutee reccediloit 2 variables
context le DOM (le HTML chargeacute ou ajouteacute)
settings toutes les variables injecteacutees cocircteacute serveur
9 JAVASCRIPT
RAPPEL
Comme pour les fichiers de style les scripts JS doivent ecirctre deacuteclareacutes sous forme de bibliothegraveque via les fichiers THEMENAMEinfoyml et THEMENAMElibrariesyml
QUESTIONS 10
RTFM httpswwwdrupalorgdocs8theminghttpstwigsymfonycomdoc2x
MERCI Agrave VOUS
FlorisMoriceau
MAIShellip REVENONS SUR NOTRE FICHIER INFOYML
2 CREacuteER SON THEgraveME
THEMENAMEINFOYML
Librairies chargeacutees avec le thegraveme
Reacutegions du thegraveme
Informations du thegraveme
ET SUR LES FICHIERS DANS NOTRE DOSSIER lsquoTHEMENAMErsquo
2 CREacuteER SON THEgraveME gt THEMENAMEINFOYML
CONCREgraveTEMENT
NAMESCREENSHOTPNG
DESCRIPTION
1 ANATOMIE DrsquoUN THEgraveME gt _THEMENAME_INFOYML
CONCREgraveTEMENT
LOGOSVG
FAVICONICO
2 CREacuteER SON THEgraveME
DOCUMENTATION OFFICIELLEhttpswwwdrupalorgdocs8theming-drupal-8defining-a-theme-with-an-infoyml-file
Dans un fichier yml
LES POINTS Agrave RETENIR
libraries-override (optional) base theme (recommended) hidden (optional) engine (optional) logo (optional) screenshot (optional) regions (optional) regions_hidden (optional) features (optional) stylesheets-remove (deprecated) ckeditor_stylesheets (optional) name (required)
type (required) description (optional) package (optional) core (required) php (optional) version (optional) libraries (optional)
Mais surtout
Tabs are NOT allowed Use spaces ONLY
Properties and lists MUST be indented by two (2) spaces
AJOUTER DES ASSETS (CSSJS)
3
3 AJOUTER DES ASSETS
CHARGER DES FICHIERS CSS amp JSCe que dit la documentation
httpswwwdrupalorgdocs8themingadding-stylesheets-css-and-javascript-js-to-a-drupal-8-theme
1 Save the CSS or JS to a file using the proper naming conventions and file structure
2 Define a library which registers these CSSJS files with your theme
3 Attach the library to all pages to specific Twig templates or target specific pages via a render element in a preprocess function
3 AJOUTER DES ASSETS
EN PRATIQUE
Lrsquoajout de fichier de CSS et de JS se fait via un systegraveme de librairie (bibliothegraveque)
Il faut tout drsquoabord deacuteclarer une librairie (ou en utiliser une existante) dans le fichier THEMENAMElibrariesyml puis demander au systegraveme de la charger Ceci peut ecirctre fait depuis le fichier THEMENAMEinfoyml
3 AJOUTER DES ASSETS
CHARGER UNE LIBRAIRIE
Lorsqursquoune librairie est appeleacutee depuis le fichier THEMENAMEinfoyml alors elle est chargeacutee sur toutes les pages degraves lors que le thegraveme est utiliseacute
Il est possible de charger sous condition une bibliothegraveque Pour cela plusieurs techniques sont disponibles
depuis un fichier de template
en utilisant le hook_page_attachments_alter()
en utilisant une fonction de preprocess
3 AJOUTER DES ASSETS
CHARGER UNE LIBRAIRIE
Directement depuis un fichier de template directement par exemple dans le fichier geacuterant lrsquoaffichage des blocs
attach_library(lsquodrupal_franceblocksrsquo)
3 AJOUTER DES ASSETS
CHARGER UNE LIBRAIRIE
Chargement drsquoune librairie depuis le fichier themesTHEMENAMETHEMENAMEtheme en utilisant la fonction de hook hook_page_attachments_alter()
Implements hook_page_attachments_alter() function drupal_france_page_attachments_alter(array amp$attachments) $attachments[attached][library][] = drupal_franceglobal
3 AJOUTER DES ASSETS
CHARGER UNE LIBRAIRIE
Chargement drsquoune librairie depuis le fichier themesTHEMENAMETHEMENAMEtheme en utilisant une fonction de preprocess
Implements hook_preprocess_HOOK() for page templates function drupal_france_preprocess_page(array amp$variables) $variables[attached][library][] = drupal_franceglobal
LES FICHIERS TEMPLATES
4
4 LES TEMPLATES
Agrave QUOI CcedilA SERT
Les templates constituent la structure des pages du sitesEn fait de chacun des eacuteleacutements qui la composent
Ce sont des fichiers html (balises ltdivgt lth1gt ltagt) avec du code Twig permettant drsquoafficher les eacuteleacutements (sous forme de variables) creacuteeacutes par Drupal
Chaque type drsquoeacuteleacutement du site possegravede son propre template
4 LES TEMPLATES
PAR EXEMPLE (CrsquoEST DU VRAI CODE)
ltdiv class=l-main row expandedgt ltmain id=main class= main_grid role=maingt if pagehighlighted spaceless pagehighlighted endspaceless endif lta id=main-contentgtltagt if breadcrumb breadcrumb endif ltsectiongt pagecontent ltsectiongt ltmaingt if pagesidebar_first ltdiv id=sidebar-first class= sidebar_first_grid column sidebargt pagesidebar_first ltdivgt endif if pagesidebar_second ltdiv id=sidebar-second class= sidebar_sec_grid column sidebargt pagesidebar_second ltdivgt endif ltdivgt
4 LES TEMPLATES
IMBRICATION DES TEMPLATES
Imaginons lrsquoappel drsquoune page de billet de blog
Et maintenant imaginons le parcours drsquoimbrication de templates pour depuis la balise lthtmlgt jusqursquoagrave la ltdivgt contenant un commentaire sous ce billet de blog
4 LES TEMPLATES
FROM ltHTMLgt TO ltDIV CLASS=lsquoCOMMENTrsquogthtmlhtmltwig
pagehtmltwig
regionhtmltwig
blockhtmltwig
nodehtmltwig nodehtmltwig
fieldhtmltwig
comment-wrapperhtmltwig
commenthtmltwig
4 LES TEMPLATES
LES TEMPLATES DEacuteRIVEacuteES
Les templates deacuteriveacutees sont des templates utiliseacutees dans un contexte preacutecis
Crsquoest le nom de la template qui indique agrave Drupal quand lrsquoutiliser
Toutes ces templates sont optionnelles et reconnues automatiquement par Drupal en fonction de leurs noms
Si des templates ne sont pas preacutesentes dans le thegraveme alors Drupal utilise ceux par deacutefaut (corethemes)
On parle de ldquotemplate deacuteriveacuteeldquo de ldquosuggestion de templateldquo ou de ldquotemplates suggeacutereacuteesldquo
Il faut vider le cache de Drupal lorsque lrsquoon ajoute des templates au thegraveme
Documentation httpswwwdrupalorgdocs8themingtwigtwig-template-naming-conventions
4 LES TEMPLATES
EXEMPLE DE SUGGESTIONS DE TEMPLATES
Template de page pagehtmltwig page--chemin--internehtmltwig sera utiliseacute lorsque lrsquoon appelle chemininterne
Ex page--fronthtmltwig cible la page drsquoaccueil
Ex page--cheminhtmltwig cible toutes les pages dont le chemin commence par chemin
Ex page--node--240htmltwig cible la page du noeud portant lrsquoid 240
Template de noeud nodehtmltwig node--type-de-noeudhtmltwig cible les noeuds de type type-de-noeud
Ex node--articlehtmltwig cible tous les noeuds de type article
4 LES TEMPLATES
TROUVER LES SUGGESTIONS
Dans le fichier wwwsitesdevelopmentservicesyml
Local development services
parameters httpresponsedebug_cacheability_headers true twigconfig debug true services cachebackendnull class DrupalCoreCacheNullBackendFactory
TWIG5
5 TWIG
UN MOTEUR DE TEMPLATE
Twig est capable drsquoafficher le contenu de nrsquoimporte quel type de variable (chaine tableau ou objet)
Il est possible de faire des boucles des conditionshellip
Chaque variable peut ecirctre filtreacutee avant drsquoecirctre afficheacutee
Les chaines peuvent ecirctre rendues traduites (la traduction est alors faite via le back-office de Drupal)
5 TWIG
LES BASES
Affiche le contenu de la variable var var
Affiche le contenu de la proprieacuteteacute title de la variable node nodetitle
Conditions if var else endif
Commentaires commentaire
Traduction trans chaine endtrans
Fonctions speacutecifiques
url(lsquoroute_namersquo)
path(lsquoentitynodecanonicalrsquo lsquonodersquo nodeid)
Les modules Twig tweak ou encore Bamboo Twig proposent encore davantage de fonctions
5 TWIG
LES FILTRES Date date|format_date(lsquomediumrsquo)
Chaine
Echappement content (par deacutefaut)
Interpreacutetation du contenu de la variable texte|raw (attention )
Placeholder text|placeholder
Exclusion content|without(lsquolinksrsquo)
string|lower (upper eacutegalement)
class_name|clean_class
id_name|clean_id
Documentation httpswwwdrupalorgdocs8themingtwigfilters-modifying-variables-in-twig-templateshttpstwigsymfonycomdoc2x
5 TWIG
CONCREgraveTEMENT if pagefooter_first or pagefooter_middle or pagefooter_last ltdiv class=l-footer row expandedgt ltfooter class=row footer medium-up-2 large-up-3gt if pagefooter_first ltdiv id=footer-first class=columngt pagefooter_first ltdivgt endif if pagefooter_middle ltdiv id=footer-middle class=columngt pagefooter_middle ltdivgt endif if pagefooter_last ltdiv id=footer-last class=columngt pagefooter_last ltdivgt endif ltfootergt ltdivgt endif ltdiv class=bottom-bar panel hiddengt ltdiv class=rowgt ltdiv class=large-12 columngt ampcopy now|date(Y) site_name All rights reserved|t ltdivgt ltdivgt ltdivgt
LES REacuteGIONS6
6 LES REacuteGIONS
STRUCTURE DE LA PAGE
adminstructureblock gt Demonstrate block regions
6 LES REacuteGIONS
DEacuteFINITION ET RENDU DES REacuteGIONS
Les reacutegions doivent ecirctre deacutefinies dans le fichier THEMENAMEinfoyml
Elles doivent ecirctre appeleacutees obligatoirement dans pagehtmltwig
6 LES REacuteGIONS
THEMENAMEINFOYML
PAGEHTMLTWIG
LE RENDU DU CONTENU
7
7 RENDU DU CONTENU
LrsquoAFFICHAGE DES CHAMPS
Pour chaque type de contenu on peut reacutegler lrsquoaffichage des champs sur adminstructuretypesmanagecontent-typedisplay ougrave content-type est le nom machine du type de contenu
Il est possible de modifier lrsquoordre des champs lrsquoapparence des eacutetiquettes le format du champ
Les reacuteglages disponibles varient en fonction du type de champ
Les champs Texte peuvent ecirctre coupeacutes
Les champs Image peuvent ecirctre afficheacutes sous forme drsquoimage drsquoURL de fichier
Les champs Date peuvent utiliser un format diffeacuterent
Ces reacuteglages peuvent ecirctre diffeacuterents selon le mode drsquoaffichage (modes ldquoPar deacutefautldquo et ldquoAccrocheldquo) =gt Cela permet par exemple de masquer un champ en mode ldquoAccrocheldquo et de lrsquoafficher en mode ldquoPar deacutefautldquo (noeud inteacutegral)
7 RENDU DU CONTENU
LrsquoAFFICHAGE DES IMAGES
Les images transmises par les utilisateurs ne sont jamais aux bonnes dimensions
Le module Image (core) va nous permettre de preacutedeacutefinir des dimensions sous forme de styles drsquoimage par exemple
Vignette 70px x 110px (mise agrave lrsquoeacutechelle)
Normal 200px x 300px (mise agrave lrsquoeacutechelle et recadrage)
Ces dimensions pourront ensuite ecirctre appliqueacutees automatiquement aux champs Image depuis lrsquoeacutecran ldquogeacuterer lrsquoaffichageldquo vu preacuteceacutedemment
7 RENDU DU CONTENU
STYLE DrsquoIMAGE
7 RENDU DU CONTENU
STYLE DrsquoIMAGE
7 RENDU DU CONTENU
ALLER PLUS LOIN La gestion et la manipulation des champs est cependant
limiteacutee dans lrsquointerface drsquoadministration
On est parfois obligeacutes de modifier le code du template correspondant agrave notre champ ou type de contenu
Les reacuteglages de lrsquoadmin sont toujours pris en compte Par exemple les styles drsquoimage choisis seront ceux utiliseacutes mecircme si lrsquoon modifie le template
7 RENDU DU CONTENU
OUgrave SONT LES CHAMPS
Dans le fichier de template des noeuds (nodehtmltwig) on nrsquoa pas directement accegraves aux champs
Crsquoest la variable content qui contient tous les champs que lrsquoon affiche et en particulier ceux ajouteacutes via Field
Comment faire pour reacutecupeacuterer les champs un par un afin de les preacutesenter diffeacuteremment
7 RENDU DU CONTENU
LA VARIABLE lsquoCONTENTrsquo
Tout le contenu drsquoun noeud est afficheacute gracircce agrave la ligne content|without(comment links)
Pour connaitre le contenu de content on utilise la fonction kint() kint(content)
On deacutecouvre alors lrsquoensemble des champs et leurs proprieacuteteacutes qui sont afficheacutees en haut de page sous forme de var_dump()
On peut afficher seacutepareacutement chacun drsquoentre eux avec le code suivant contentnom_du_champ nodecreatedtime
7 RENDU DU CONTENU
NODE DE TYPE lsquoNEWSrsquo ET FORMAT lsquoTEASERrsquo
PREPROCESS8
8 PREPROCESS
FONCTIONS DE PREPROCESS
Pour chaque template on dispose de variables que lrsquoon affiche avec le formatage voulu
Ces variables sont creacuteeacutees en amont des templates dans lesquelles elles sont utiliseacutees
On dispose de fonctions dites de preprocess qui permettent de fabriquer les variables qui sont utiliseacutees dans les templates
Il est possible drsquoeacutetendre ces fonctions pour modifier les variables envoyeacutees aux templates ou en creacuteer de nouvelles
Pour ajouter une fonction de preprocess il faut la nommer comme suit THEMENAME_preprocess_HOOK() Par exemple drupal_france_preprocess_block()
8 PREPROCESS
FONCTIONS DE PREPROCESS
Pour chaque template on dispose de variables que lrsquoon affiche avec le formatage voulu
Ces variables sont creacuteeacutees en amont des templates dans lesquelles elles sont utiliseacutees
On dispose de fonctions dites de preprocess qui permettent de fabriquer les variables qui sont utiliseacutees dans les templates
Il est possible drsquoeacutetendre ces fonctions pour modifier les variables envoyeacutees aux templates ou en creacuteer de nouvelles
Pour ajouter une fonction de preprocess il faut la nommer comme suit THEMENAME_preprocess_HOOK() Par exemple drupal_france_preprocess_block()
8 PREPROCESS
LA VARIABLE lsquo$VARIABLESrsquo
Drupal
Preprocess en amont(core modules)
Preprocess du thegraveme
TemplateCreacuteation de $variables
$variables
$variables
$variables
$variables
En mode super simplifieacute
8 PREPROCESS
APPELLER UN PREPROCESS
Diffeacuterentes fonctions de preprocess peuvent ecirctre appeleacutees permettant agrave tous les modules et thegravemes de modifier les variables passeacutees aux templates Ces fonctions sont les suivantes pour le hook de thegraveme HOOK
template_preprocess_HOOK(array amp$variables)
MODULENAME_preprocess(array amp$variables $hook)
MODULENAME_preprocess_HOOK(array amp$variables)
THEMENAME_preprocess(array amp$variables $hook)
THEMENAME_preprocess_HOOK(array amp$variables)
8 PREPROCESS
CONCREgraveTEMENT Implements hook_preprocess_menu__account() function drupal_france_preprocess_menu__account(amp$variables) if (isset($variables[items][drupalfr_useraccountcompte])) $variables[items][drupalfr_useraccountcompte][attributes]-gtaddClass([ button primary button--user-account ])
$variables[items][drupalfr_useraccountcompte][title] = new FormattableMarkup( lti class=fa fa-user-circle-o aria-hidden=truegtltigtltspan class=sr-onlygtoriginal_titleltspangt [ original_title =gt $variables[items][drupalfr_useraccountcompte][title] ] )
JAVASCRIPT9
9 JAVASCRIPT
DRUPAL amp JAVASCRIPT Drupal integravegre de nombreuses libraries javascript (jQuery Modernizrhellip) et propose
eacutegalement des libraries drsquoutilitaires (coredrupal coredrupalSettings drupalajax drupalformhellip)
Par exemple Drupal 8 embarque
jQuery 321
jQuery UI 1121
Chaque librairie deacutefinit ses deacutependances jQuery UI deacutepend de jQuery par exemple
Lorsque lrsquoon utilise une librairie depuis un script custom il ne faut pas oublier de deacuteclarer cette deacutependance Pensez agrave tester en anonyme car aucune libraire nrsquoest chargeacutee par deacutefaut
Vous disposez de toutes les librairies deacutefinies dans le fichier corecorelibrairiesyml
9 JAVASCRIPT
CONCREgraveTEMENTPour pouvoir utiliser du code JS dans vos scripts avec Drupal la bonne pratique est drsquoencadrer votre code comme suit
file Shows status messages in a modal instead of inline (function ($ Drupal)
Displays status messages in a Foundation reveal modal DrupalbehaviorsfoundationStatusInReveal = attach function (context settings) $(status-messages)once(foundation-reveal)each(function() Move the status messages out of the highlighted region var $messages = $(this) var $region = $messagesparent() $messagesappendTo(body) $messagesfoundation(open)
This is required as this region will likely be empty after status messages are removed $regionhtml($regionhtml()replace(ng )) )
)(jQuery Drupal)
9 JAVASCRIPT
DRUPAL BEHAVIORS
Les scripts sont exeacutecuteacutes apregraves le chargement complet du DOM ($(document)ready() )Mais on a aussi parfois besoin de les reacute-exeacutecuter lorsque lrsquoon interagit avec la page (appel AJAX overlayhellip)
Pour ce faire il suffit drsquoattacher le script JS agrave lrsquoobjet Drupalbehaviors (librairie coredrupal) La fonction exeacutecuteacutee reccediloit 2 variables
context le DOM (le HTML chargeacute ou ajouteacute)
settings toutes les variables injecteacutees cocircteacute serveur
9 JAVASCRIPT
RAPPEL
Comme pour les fichiers de style les scripts JS doivent ecirctre deacuteclareacutes sous forme de bibliothegraveque via les fichiers THEMENAMEinfoyml et THEMENAMElibrariesyml
QUESTIONS 10
RTFM httpswwwdrupalorgdocs8theminghttpstwigsymfonycomdoc2x
MERCI Agrave VOUS
FlorisMoriceau
2 CREacuteER SON THEgraveME
THEMENAMEINFOYML
Librairies chargeacutees avec le thegraveme
Reacutegions du thegraveme
Informations du thegraveme
ET SUR LES FICHIERS DANS NOTRE DOSSIER lsquoTHEMENAMErsquo
2 CREacuteER SON THEgraveME gt THEMENAMEINFOYML
CONCREgraveTEMENT
NAMESCREENSHOTPNG
DESCRIPTION
1 ANATOMIE DrsquoUN THEgraveME gt _THEMENAME_INFOYML
CONCREgraveTEMENT
LOGOSVG
FAVICONICO
2 CREacuteER SON THEgraveME
DOCUMENTATION OFFICIELLEhttpswwwdrupalorgdocs8theming-drupal-8defining-a-theme-with-an-infoyml-file
Dans un fichier yml
LES POINTS Agrave RETENIR
libraries-override (optional) base theme (recommended) hidden (optional) engine (optional) logo (optional) screenshot (optional) regions (optional) regions_hidden (optional) features (optional) stylesheets-remove (deprecated) ckeditor_stylesheets (optional) name (required)
type (required) description (optional) package (optional) core (required) php (optional) version (optional) libraries (optional)
Mais surtout
Tabs are NOT allowed Use spaces ONLY
Properties and lists MUST be indented by two (2) spaces
AJOUTER DES ASSETS (CSSJS)
3
3 AJOUTER DES ASSETS
CHARGER DES FICHIERS CSS amp JSCe que dit la documentation
httpswwwdrupalorgdocs8themingadding-stylesheets-css-and-javascript-js-to-a-drupal-8-theme
1 Save the CSS or JS to a file using the proper naming conventions and file structure
2 Define a library which registers these CSSJS files with your theme
3 Attach the library to all pages to specific Twig templates or target specific pages via a render element in a preprocess function
3 AJOUTER DES ASSETS
EN PRATIQUE
Lrsquoajout de fichier de CSS et de JS se fait via un systegraveme de librairie (bibliothegraveque)
Il faut tout drsquoabord deacuteclarer une librairie (ou en utiliser une existante) dans le fichier THEMENAMElibrariesyml puis demander au systegraveme de la charger Ceci peut ecirctre fait depuis le fichier THEMENAMEinfoyml
3 AJOUTER DES ASSETS
CHARGER UNE LIBRAIRIE
Lorsqursquoune librairie est appeleacutee depuis le fichier THEMENAMEinfoyml alors elle est chargeacutee sur toutes les pages degraves lors que le thegraveme est utiliseacute
Il est possible de charger sous condition une bibliothegraveque Pour cela plusieurs techniques sont disponibles
depuis un fichier de template
en utilisant le hook_page_attachments_alter()
en utilisant une fonction de preprocess
3 AJOUTER DES ASSETS
CHARGER UNE LIBRAIRIE
Directement depuis un fichier de template directement par exemple dans le fichier geacuterant lrsquoaffichage des blocs
attach_library(lsquodrupal_franceblocksrsquo)
3 AJOUTER DES ASSETS
CHARGER UNE LIBRAIRIE
Chargement drsquoune librairie depuis le fichier themesTHEMENAMETHEMENAMEtheme en utilisant la fonction de hook hook_page_attachments_alter()
Implements hook_page_attachments_alter() function drupal_france_page_attachments_alter(array amp$attachments) $attachments[attached][library][] = drupal_franceglobal
3 AJOUTER DES ASSETS
CHARGER UNE LIBRAIRIE
Chargement drsquoune librairie depuis le fichier themesTHEMENAMETHEMENAMEtheme en utilisant une fonction de preprocess
Implements hook_preprocess_HOOK() for page templates function drupal_france_preprocess_page(array amp$variables) $variables[attached][library][] = drupal_franceglobal
LES FICHIERS TEMPLATES
4
4 LES TEMPLATES
Agrave QUOI CcedilA SERT
Les templates constituent la structure des pages du sitesEn fait de chacun des eacuteleacutements qui la composent
Ce sont des fichiers html (balises ltdivgt lth1gt ltagt) avec du code Twig permettant drsquoafficher les eacuteleacutements (sous forme de variables) creacuteeacutes par Drupal
Chaque type drsquoeacuteleacutement du site possegravede son propre template
4 LES TEMPLATES
PAR EXEMPLE (CrsquoEST DU VRAI CODE)
ltdiv class=l-main row expandedgt ltmain id=main class= main_grid role=maingt if pagehighlighted spaceless pagehighlighted endspaceless endif lta id=main-contentgtltagt if breadcrumb breadcrumb endif ltsectiongt pagecontent ltsectiongt ltmaingt if pagesidebar_first ltdiv id=sidebar-first class= sidebar_first_grid column sidebargt pagesidebar_first ltdivgt endif if pagesidebar_second ltdiv id=sidebar-second class= sidebar_sec_grid column sidebargt pagesidebar_second ltdivgt endif ltdivgt
4 LES TEMPLATES
IMBRICATION DES TEMPLATES
Imaginons lrsquoappel drsquoune page de billet de blog
Et maintenant imaginons le parcours drsquoimbrication de templates pour depuis la balise lthtmlgt jusqursquoagrave la ltdivgt contenant un commentaire sous ce billet de blog
4 LES TEMPLATES
FROM ltHTMLgt TO ltDIV CLASS=lsquoCOMMENTrsquogthtmlhtmltwig
pagehtmltwig
regionhtmltwig
blockhtmltwig
nodehtmltwig nodehtmltwig
fieldhtmltwig
comment-wrapperhtmltwig
commenthtmltwig
4 LES TEMPLATES
LES TEMPLATES DEacuteRIVEacuteES
Les templates deacuteriveacutees sont des templates utiliseacutees dans un contexte preacutecis
Crsquoest le nom de la template qui indique agrave Drupal quand lrsquoutiliser
Toutes ces templates sont optionnelles et reconnues automatiquement par Drupal en fonction de leurs noms
Si des templates ne sont pas preacutesentes dans le thegraveme alors Drupal utilise ceux par deacutefaut (corethemes)
On parle de ldquotemplate deacuteriveacuteeldquo de ldquosuggestion de templateldquo ou de ldquotemplates suggeacutereacuteesldquo
Il faut vider le cache de Drupal lorsque lrsquoon ajoute des templates au thegraveme
Documentation httpswwwdrupalorgdocs8themingtwigtwig-template-naming-conventions
4 LES TEMPLATES
EXEMPLE DE SUGGESTIONS DE TEMPLATES
Template de page pagehtmltwig page--chemin--internehtmltwig sera utiliseacute lorsque lrsquoon appelle chemininterne
Ex page--fronthtmltwig cible la page drsquoaccueil
Ex page--cheminhtmltwig cible toutes les pages dont le chemin commence par chemin
Ex page--node--240htmltwig cible la page du noeud portant lrsquoid 240
Template de noeud nodehtmltwig node--type-de-noeudhtmltwig cible les noeuds de type type-de-noeud
Ex node--articlehtmltwig cible tous les noeuds de type article
4 LES TEMPLATES
TROUVER LES SUGGESTIONS
Dans le fichier wwwsitesdevelopmentservicesyml
Local development services
parameters httpresponsedebug_cacheability_headers true twigconfig debug true services cachebackendnull class DrupalCoreCacheNullBackendFactory
TWIG5
5 TWIG
UN MOTEUR DE TEMPLATE
Twig est capable drsquoafficher le contenu de nrsquoimporte quel type de variable (chaine tableau ou objet)
Il est possible de faire des boucles des conditionshellip
Chaque variable peut ecirctre filtreacutee avant drsquoecirctre afficheacutee
Les chaines peuvent ecirctre rendues traduites (la traduction est alors faite via le back-office de Drupal)
5 TWIG
LES BASES
Affiche le contenu de la variable var var
Affiche le contenu de la proprieacuteteacute title de la variable node nodetitle
Conditions if var else endif
Commentaires commentaire
Traduction trans chaine endtrans
Fonctions speacutecifiques
url(lsquoroute_namersquo)
path(lsquoentitynodecanonicalrsquo lsquonodersquo nodeid)
Les modules Twig tweak ou encore Bamboo Twig proposent encore davantage de fonctions
5 TWIG
LES FILTRES Date date|format_date(lsquomediumrsquo)
Chaine
Echappement content (par deacutefaut)
Interpreacutetation du contenu de la variable texte|raw (attention )
Placeholder text|placeholder
Exclusion content|without(lsquolinksrsquo)
string|lower (upper eacutegalement)
class_name|clean_class
id_name|clean_id
Documentation httpswwwdrupalorgdocs8themingtwigfilters-modifying-variables-in-twig-templateshttpstwigsymfonycomdoc2x
5 TWIG
CONCREgraveTEMENT if pagefooter_first or pagefooter_middle or pagefooter_last ltdiv class=l-footer row expandedgt ltfooter class=row footer medium-up-2 large-up-3gt if pagefooter_first ltdiv id=footer-first class=columngt pagefooter_first ltdivgt endif if pagefooter_middle ltdiv id=footer-middle class=columngt pagefooter_middle ltdivgt endif if pagefooter_last ltdiv id=footer-last class=columngt pagefooter_last ltdivgt endif ltfootergt ltdivgt endif ltdiv class=bottom-bar panel hiddengt ltdiv class=rowgt ltdiv class=large-12 columngt ampcopy now|date(Y) site_name All rights reserved|t ltdivgt ltdivgt ltdivgt
LES REacuteGIONS6
6 LES REacuteGIONS
STRUCTURE DE LA PAGE
adminstructureblock gt Demonstrate block regions
6 LES REacuteGIONS
DEacuteFINITION ET RENDU DES REacuteGIONS
Les reacutegions doivent ecirctre deacutefinies dans le fichier THEMENAMEinfoyml
Elles doivent ecirctre appeleacutees obligatoirement dans pagehtmltwig
6 LES REacuteGIONS
THEMENAMEINFOYML
PAGEHTMLTWIG
LE RENDU DU CONTENU
7
7 RENDU DU CONTENU
LrsquoAFFICHAGE DES CHAMPS
Pour chaque type de contenu on peut reacutegler lrsquoaffichage des champs sur adminstructuretypesmanagecontent-typedisplay ougrave content-type est le nom machine du type de contenu
Il est possible de modifier lrsquoordre des champs lrsquoapparence des eacutetiquettes le format du champ
Les reacuteglages disponibles varient en fonction du type de champ
Les champs Texte peuvent ecirctre coupeacutes
Les champs Image peuvent ecirctre afficheacutes sous forme drsquoimage drsquoURL de fichier
Les champs Date peuvent utiliser un format diffeacuterent
Ces reacuteglages peuvent ecirctre diffeacuterents selon le mode drsquoaffichage (modes ldquoPar deacutefautldquo et ldquoAccrocheldquo) =gt Cela permet par exemple de masquer un champ en mode ldquoAccrocheldquo et de lrsquoafficher en mode ldquoPar deacutefautldquo (noeud inteacutegral)
7 RENDU DU CONTENU
LrsquoAFFICHAGE DES IMAGES
Les images transmises par les utilisateurs ne sont jamais aux bonnes dimensions
Le module Image (core) va nous permettre de preacutedeacutefinir des dimensions sous forme de styles drsquoimage par exemple
Vignette 70px x 110px (mise agrave lrsquoeacutechelle)
Normal 200px x 300px (mise agrave lrsquoeacutechelle et recadrage)
Ces dimensions pourront ensuite ecirctre appliqueacutees automatiquement aux champs Image depuis lrsquoeacutecran ldquogeacuterer lrsquoaffichageldquo vu preacuteceacutedemment
7 RENDU DU CONTENU
STYLE DrsquoIMAGE
7 RENDU DU CONTENU
STYLE DrsquoIMAGE
7 RENDU DU CONTENU
ALLER PLUS LOIN La gestion et la manipulation des champs est cependant
limiteacutee dans lrsquointerface drsquoadministration
On est parfois obligeacutes de modifier le code du template correspondant agrave notre champ ou type de contenu
Les reacuteglages de lrsquoadmin sont toujours pris en compte Par exemple les styles drsquoimage choisis seront ceux utiliseacutes mecircme si lrsquoon modifie le template
7 RENDU DU CONTENU
OUgrave SONT LES CHAMPS
Dans le fichier de template des noeuds (nodehtmltwig) on nrsquoa pas directement accegraves aux champs
Crsquoest la variable content qui contient tous les champs que lrsquoon affiche et en particulier ceux ajouteacutes via Field
Comment faire pour reacutecupeacuterer les champs un par un afin de les preacutesenter diffeacuteremment
7 RENDU DU CONTENU
LA VARIABLE lsquoCONTENTrsquo
Tout le contenu drsquoun noeud est afficheacute gracircce agrave la ligne content|without(comment links)
Pour connaitre le contenu de content on utilise la fonction kint() kint(content)
On deacutecouvre alors lrsquoensemble des champs et leurs proprieacuteteacutes qui sont afficheacutees en haut de page sous forme de var_dump()
On peut afficher seacutepareacutement chacun drsquoentre eux avec le code suivant contentnom_du_champ nodecreatedtime
7 RENDU DU CONTENU
NODE DE TYPE lsquoNEWSrsquo ET FORMAT lsquoTEASERrsquo
PREPROCESS8
8 PREPROCESS
FONCTIONS DE PREPROCESS
Pour chaque template on dispose de variables que lrsquoon affiche avec le formatage voulu
Ces variables sont creacuteeacutees en amont des templates dans lesquelles elles sont utiliseacutees
On dispose de fonctions dites de preprocess qui permettent de fabriquer les variables qui sont utiliseacutees dans les templates
Il est possible drsquoeacutetendre ces fonctions pour modifier les variables envoyeacutees aux templates ou en creacuteer de nouvelles
Pour ajouter une fonction de preprocess il faut la nommer comme suit THEMENAME_preprocess_HOOK() Par exemple drupal_france_preprocess_block()
8 PREPROCESS
FONCTIONS DE PREPROCESS
Pour chaque template on dispose de variables que lrsquoon affiche avec le formatage voulu
Ces variables sont creacuteeacutees en amont des templates dans lesquelles elles sont utiliseacutees
On dispose de fonctions dites de preprocess qui permettent de fabriquer les variables qui sont utiliseacutees dans les templates
Il est possible drsquoeacutetendre ces fonctions pour modifier les variables envoyeacutees aux templates ou en creacuteer de nouvelles
Pour ajouter une fonction de preprocess il faut la nommer comme suit THEMENAME_preprocess_HOOK() Par exemple drupal_france_preprocess_block()
8 PREPROCESS
LA VARIABLE lsquo$VARIABLESrsquo
Drupal
Preprocess en amont(core modules)
Preprocess du thegraveme
TemplateCreacuteation de $variables
$variables
$variables
$variables
$variables
En mode super simplifieacute
8 PREPROCESS
APPELLER UN PREPROCESS
Diffeacuterentes fonctions de preprocess peuvent ecirctre appeleacutees permettant agrave tous les modules et thegravemes de modifier les variables passeacutees aux templates Ces fonctions sont les suivantes pour le hook de thegraveme HOOK
template_preprocess_HOOK(array amp$variables)
MODULENAME_preprocess(array amp$variables $hook)
MODULENAME_preprocess_HOOK(array amp$variables)
THEMENAME_preprocess(array amp$variables $hook)
THEMENAME_preprocess_HOOK(array amp$variables)
8 PREPROCESS
CONCREgraveTEMENT Implements hook_preprocess_menu__account() function drupal_france_preprocess_menu__account(amp$variables) if (isset($variables[items][drupalfr_useraccountcompte])) $variables[items][drupalfr_useraccountcompte][attributes]-gtaddClass([ button primary button--user-account ])
$variables[items][drupalfr_useraccountcompte][title] = new FormattableMarkup( lti class=fa fa-user-circle-o aria-hidden=truegtltigtltspan class=sr-onlygtoriginal_titleltspangt [ original_title =gt $variables[items][drupalfr_useraccountcompte][title] ] )
JAVASCRIPT9
9 JAVASCRIPT
DRUPAL amp JAVASCRIPT Drupal integravegre de nombreuses libraries javascript (jQuery Modernizrhellip) et propose
eacutegalement des libraries drsquoutilitaires (coredrupal coredrupalSettings drupalajax drupalformhellip)
Par exemple Drupal 8 embarque
jQuery 321
jQuery UI 1121
Chaque librairie deacutefinit ses deacutependances jQuery UI deacutepend de jQuery par exemple
Lorsque lrsquoon utilise une librairie depuis un script custom il ne faut pas oublier de deacuteclarer cette deacutependance Pensez agrave tester en anonyme car aucune libraire nrsquoest chargeacutee par deacutefaut
Vous disposez de toutes les librairies deacutefinies dans le fichier corecorelibrairiesyml
9 JAVASCRIPT
CONCREgraveTEMENTPour pouvoir utiliser du code JS dans vos scripts avec Drupal la bonne pratique est drsquoencadrer votre code comme suit
file Shows status messages in a modal instead of inline (function ($ Drupal)
Displays status messages in a Foundation reveal modal DrupalbehaviorsfoundationStatusInReveal = attach function (context settings) $(status-messages)once(foundation-reveal)each(function() Move the status messages out of the highlighted region var $messages = $(this) var $region = $messagesparent() $messagesappendTo(body) $messagesfoundation(open)
This is required as this region will likely be empty after status messages are removed $regionhtml($regionhtml()replace(ng )) )
)(jQuery Drupal)
9 JAVASCRIPT
DRUPAL BEHAVIORS
Les scripts sont exeacutecuteacutes apregraves le chargement complet du DOM ($(document)ready() )Mais on a aussi parfois besoin de les reacute-exeacutecuter lorsque lrsquoon interagit avec la page (appel AJAX overlayhellip)
Pour ce faire il suffit drsquoattacher le script JS agrave lrsquoobjet Drupalbehaviors (librairie coredrupal) La fonction exeacutecuteacutee reccediloit 2 variables
context le DOM (le HTML chargeacute ou ajouteacute)
settings toutes les variables injecteacutees cocircteacute serveur
9 JAVASCRIPT
RAPPEL
Comme pour les fichiers de style les scripts JS doivent ecirctre deacuteclareacutes sous forme de bibliothegraveque via les fichiers THEMENAMEinfoyml et THEMENAMElibrariesyml
QUESTIONS 10
RTFM httpswwwdrupalorgdocs8theminghttpstwigsymfonycomdoc2x
MERCI Agrave VOUS
FlorisMoriceau
ET SUR LES FICHIERS DANS NOTRE DOSSIER lsquoTHEMENAMErsquo
2 CREacuteER SON THEgraveME gt THEMENAMEINFOYML
CONCREgraveTEMENT
NAMESCREENSHOTPNG
DESCRIPTION
1 ANATOMIE DrsquoUN THEgraveME gt _THEMENAME_INFOYML
CONCREgraveTEMENT
LOGOSVG
FAVICONICO
2 CREacuteER SON THEgraveME
DOCUMENTATION OFFICIELLEhttpswwwdrupalorgdocs8theming-drupal-8defining-a-theme-with-an-infoyml-file
Dans un fichier yml
LES POINTS Agrave RETENIR
libraries-override (optional) base theme (recommended) hidden (optional) engine (optional) logo (optional) screenshot (optional) regions (optional) regions_hidden (optional) features (optional) stylesheets-remove (deprecated) ckeditor_stylesheets (optional) name (required)
type (required) description (optional) package (optional) core (required) php (optional) version (optional) libraries (optional)
Mais surtout
Tabs are NOT allowed Use spaces ONLY
Properties and lists MUST be indented by two (2) spaces
AJOUTER DES ASSETS (CSSJS)
3
3 AJOUTER DES ASSETS
CHARGER DES FICHIERS CSS amp JSCe que dit la documentation
httpswwwdrupalorgdocs8themingadding-stylesheets-css-and-javascript-js-to-a-drupal-8-theme
1 Save the CSS or JS to a file using the proper naming conventions and file structure
2 Define a library which registers these CSSJS files with your theme
3 Attach the library to all pages to specific Twig templates or target specific pages via a render element in a preprocess function
3 AJOUTER DES ASSETS
EN PRATIQUE
Lrsquoajout de fichier de CSS et de JS se fait via un systegraveme de librairie (bibliothegraveque)
Il faut tout drsquoabord deacuteclarer une librairie (ou en utiliser une existante) dans le fichier THEMENAMElibrariesyml puis demander au systegraveme de la charger Ceci peut ecirctre fait depuis le fichier THEMENAMEinfoyml
3 AJOUTER DES ASSETS
CHARGER UNE LIBRAIRIE
Lorsqursquoune librairie est appeleacutee depuis le fichier THEMENAMEinfoyml alors elle est chargeacutee sur toutes les pages degraves lors que le thegraveme est utiliseacute
Il est possible de charger sous condition une bibliothegraveque Pour cela plusieurs techniques sont disponibles
depuis un fichier de template
en utilisant le hook_page_attachments_alter()
en utilisant une fonction de preprocess
3 AJOUTER DES ASSETS
CHARGER UNE LIBRAIRIE
Directement depuis un fichier de template directement par exemple dans le fichier geacuterant lrsquoaffichage des blocs
attach_library(lsquodrupal_franceblocksrsquo)
3 AJOUTER DES ASSETS
CHARGER UNE LIBRAIRIE
Chargement drsquoune librairie depuis le fichier themesTHEMENAMETHEMENAMEtheme en utilisant la fonction de hook hook_page_attachments_alter()
Implements hook_page_attachments_alter() function drupal_france_page_attachments_alter(array amp$attachments) $attachments[attached][library][] = drupal_franceglobal
3 AJOUTER DES ASSETS
CHARGER UNE LIBRAIRIE
Chargement drsquoune librairie depuis le fichier themesTHEMENAMETHEMENAMEtheme en utilisant une fonction de preprocess
Implements hook_preprocess_HOOK() for page templates function drupal_france_preprocess_page(array amp$variables) $variables[attached][library][] = drupal_franceglobal
LES FICHIERS TEMPLATES
4
4 LES TEMPLATES
Agrave QUOI CcedilA SERT
Les templates constituent la structure des pages du sitesEn fait de chacun des eacuteleacutements qui la composent
Ce sont des fichiers html (balises ltdivgt lth1gt ltagt) avec du code Twig permettant drsquoafficher les eacuteleacutements (sous forme de variables) creacuteeacutes par Drupal
Chaque type drsquoeacuteleacutement du site possegravede son propre template
4 LES TEMPLATES
PAR EXEMPLE (CrsquoEST DU VRAI CODE)
ltdiv class=l-main row expandedgt ltmain id=main class= main_grid role=maingt if pagehighlighted spaceless pagehighlighted endspaceless endif lta id=main-contentgtltagt if breadcrumb breadcrumb endif ltsectiongt pagecontent ltsectiongt ltmaingt if pagesidebar_first ltdiv id=sidebar-first class= sidebar_first_grid column sidebargt pagesidebar_first ltdivgt endif if pagesidebar_second ltdiv id=sidebar-second class= sidebar_sec_grid column sidebargt pagesidebar_second ltdivgt endif ltdivgt
4 LES TEMPLATES
IMBRICATION DES TEMPLATES
Imaginons lrsquoappel drsquoune page de billet de blog
Et maintenant imaginons le parcours drsquoimbrication de templates pour depuis la balise lthtmlgt jusqursquoagrave la ltdivgt contenant un commentaire sous ce billet de blog
4 LES TEMPLATES
FROM ltHTMLgt TO ltDIV CLASS=lsquoCOMMENTrsquogthtmlhtmltwig
pagehtmltwig
regionhtmltwig
blockhtmltwig
nodehtmltwig nodehtmltwig
fieldhtmltwig
comment-wrapperhtmltwig
commenthtmltwig
4 LES TEMPLATES
LES TEMPLATES DEacuteRIVEacuteES
Les templates deacuteriveacutees sont des templates utiliseacutees dans un contexte preacutecis
Crsquoest le nom de la template qui indique agrave Drupal quand lrsquoutiliser
Toutes ces templates sont optionnelles et reconnues automatiquement par Drupal en fonction de leurs noms
Si des templates ne sont pas preacutesentes dans le thegraveme alors Drupal utilise ceux par deacutefaut (corethemes)
On parle de ldquotemplate deacuteriveacuteeldquo de ldquosuggestion de templateldquo ou de ldquotemplates suggeacutereacuteesldquo
Il faut vider le cache de Drupal lorsque lrsquoon ajoute des templates au thegraveme
Documentation httpswwwdrupalorgdocs8themingtwigtwig-template-naming-conventions
4 LES TEMPLATES
EXEMPLE DE SUGGESTIONS DE TEMPLATES
Template de page pagehtmltwig page--chemin--internehtmltwig sera utiliseacute lorsque lrsquoon appelle chemininterne
Ex page--fronthtmltwig cible la page drsquoaccueil
Ex page--cheminhtmltwig cible toutes les pages dont le chemin commence par chemin
Ex page--node--240htmltwig cible la page du noeud portant lrsquoid 240
Template de noeud nodehtmltwig node--type-de-noeudhtmltwig cible les noeuds de type type-de-noeud
Ex node--articlehtmltwig cible tous les noeuds de type article
4 LES TEMPLATES
TROUVER LES SUGGESTIONS
Dans le fichier wwwsitesdevelopmentservicesyml
Local development services
parameters httpresponsedebug_cacheability_headers true twigconfig debug true services cachebackendnull class DrupalCoreCacheNullBackendFactory
TWIG5
5 TWIG
UN MOTEUR DE TEMPLATE
Twig est capable drsquoafficher le contenu de nrsquoimporte quel type de variable (chaine tableau ou objet)
Il est possible de faire des boucles des conditionshellip
Chaque variable peut ecirctre filtreacutee avant drsquoecirctre afficheacutee
Les chaines peuvent ecirctre rendues traduites (la traduction est alors faite via le back-office de Drupal)
5 TWIG
LES BASES
Affiche le contenu de la variable var var
Affiche le contenu de la proprieacuteteacute title de la variable node nodetitle
Conditions if var else endif
Commentaires commentaire
Traduction trans chaine endtrans
Fonctions speacutecifiques
url(lsquoroute_namersquo)
path(lsquoentitynodecanonicalrsquo lsquonodersquo nodeid)
Les modules Twig tweak ou encore Bamboo Twig proposent encore davantage de fonctions
5 TWIG
LES FILTRES Date date|format_date(lsquomediumrsquo)
Chaine
Echappement content (par deacutefaut)
Interpreacutetation du contenu de la variable texte|raw (attention )
Placeholder text|placeholder
Exclusion content|without(lsquolinksrsquo)
string|lower (upper eacutegalement)
class_name|clean_class
id_name|clean_id
Documentation httpswwwdrupalorgdocs8themingtwigfilters-modifying-variables-in-twig-templateshttpstwigsymfonycomdoc2x
5 TWIG
CONCREgraveTEMENT if pagefooter_first or pagefooter_middle or pagefooter_last ltdiv class=l-footer row expandedgt ltfooter class=row footer medium-up-2 large-up-3gt if pagefooter_first ltdiv id=footer-first class=columngt pagefooter_first ltdivgt endif if pagefooter_middle ltdiv id=footer-middle class=columngt pagefooter_middle ltdivgt endif if pagefooter_last ltdiv id=footer-last class=columngt pagefooter_last ltdivgt endif ltfootergt ltdivgt endif ltdiv class=bottom-bar panel hiddengt ltdiv class=rowgt ltdiv class=large-12 columngt ampcopy now|date(Y) site_name All rights reserved|t ltdivgt ltdivgt ltdivgt
LES REacuteGIONS6
6 LES REacuteGIONS
STRUCTURE DE LA PAGE
adminstructureblock gt Demonstrate block regions
6 LES REacuteGIONS
DEacuteFINITION ET RENDU DES REacuteGIONS
Les reacutegions doivent ecirctre deacutefinies dans le fichier THEMENAMEinfoyml
Elles doivent ecirctre appeleacutees obligatoirement dans pagehtmltwig
6 LES REacuteGIONS
THEMENAMEINFOYML
PAGEHTMLTWIG
LE RENDU DU CONTENU
7
7 RENDU DU CONTENU
LrsquoAFFICHAGE DES CHAMPS
Pour chaque type de contenu on peut reacutegler lrsquoaffichage des champs sur adminstructuretypesmanagecontent-typedisplay ougrave content-type est le nom machine du type de contenu
Il est possible de modifier lrsquoordre des champs lrsquoapparence des eacutetiquettes le format du champ
Les reacuteglages disponibles varient en fonction du type de champ
Les champs Texte peuvent ecirctre coupeacutes
Les champs Image peuvent ecirctre afficheacutes sous forme drsquoimage drsquoURL de fichier
Les champs Date peuvent utiliser un format diffeacuterent
Ces reacuteglages peuvent ecirctre diffeacuterents selon le mode drsquoaffichage (modes ldquoPar deacutefautldquo et ldquoAccrocheldquo) =gt Cela permet par exemple de masquer un champ en mode ldquoAccrocheldquo et de lrsquoafficher en mode ldquoPar deacutefautldquo (noeud inteacutegral)
7 RENDU DU CONTENU
LrsquoAFFICHAGE DES IMAGES
Les images transmises par les utilisateurs ne sont jamais aux bonnes dimensions
Le module Image (core) va nous permettre de preacutedeacutefinir des dimensions sous forme de styles drsquoimage par exemple
Vignette 70px x 110px (mise agrave lrsquoeacutechelle)
Normal 200px x 300px (mise agrave lrsquoeacutechelle et recadrage)
Ces dimensions pourront ensuite ecirctre appliqueacutees automatiquement aux champs Image depuis lrsquoeacutecran ldquogeacuterer lrsquoaffichageldquo vu preacuteceacutedemment
7 RENDU DU CONTENU
STYLE DrsquoIMAGE
7 RENDU DU CONTENU
STYLE DrsquoIMAGE
7 RENDU DU CONTENU
ALLER PLUS LOIN La gestion et la manipulation des champs est cependant
limiteacutee dans lrsquointerface drsquoadministration
On est parfois obligeacutes de modifier le code du template correspondant agrave notre champ ou type de contenu
Les reacuteglages de lrsquoadmin sont toujours pris en compte Par exemple les styles drsquoimage choisis seront ceux utiliseacutes mecircme si lrsquoon modifie le template
7 RENDU DU CONTENU
OUgrave SONT LES CHAMPS
Dans le fichier de template des noeuds (nodehtmltwig) on nrsquoa pas directement accegraves aux champs
Crsquoest la variable content qui contient tous les champs que lrsquoon affiche et en particulier ceux ajouteacutes via Field
Comment faire pour reacutecupeacuterer les champs un par un afin de les preacutesenter diffeacuteremment
7 RENDU DU CONTENU
LA VARIABLE lsquoCONTENTrsquo
Tout le contenu drsquoun noeud est afficheacute gracircce agrave la ligne content|without(comment links)
Pour connaitre le contenu de content on utilise la fonction kint() kint(content)
On deacutecouvre alors lrsquoensemble des champs et leurs proprieacuteteacutes qui sont afficheacutees en haut de page sous forme de var_dump()
On peut afficher seacutepareacutement chacun drsquoentre eux avec le code suivant contentnom_du_champ nodecreatedtime
7 RENDU DU CONTENU
NODE DE TYPE lsquoNEWSrsquo ET FORMAT lsquoTEASERrsquo
PREPROCESS8
8 PREPROCESS
FONCTIONS DE PREPROCESS
Pour chaque template on dispose de variables que lrsquoon affiche avec le formatage voulu
Ces variables sont creacuteeacutees en amont des templates dans lesquelles elles sont utiliseacutees
On dispose de fonctions dites de preprocess qui permettent de fabriquer les variables qui sont utiliseacutees dans les templates
Il est possible drsquoeacutetendre ces fonctions pour modifier les variables envoyeacutees aux templates ou en creacuteer de nouvelles
Pour ajouter une fonction de preprocess il faut la nommer comme suit THEMENAME_preprocess_HOOK() Par exemple drupal_france_preprocess_block()
8 PREPROCESS
FONCTIONS DE PREPROCESS
Pour chaque template on dispose de variables que lrsquoon affiche avec le formatage voulu
Ces variables sont creacuteeacutees en amont des templates dans lesquelles elles sont utiliseacutees
On dispose de fonctions dites de preprocess qui permettent de fabriquer les variables qui sont utiliseacutees dans les templates
Il est possible drsquoeacutetendre ces fonctions pour modifier les variables envoyeacutees aux templates ou en creacuteer de nouvelles
Pour ajouter une fonction de preprocess il faut la nommer comme suit THEMENAME_preprocess_HOOK() Par exemple drupal_france_preprocess_block()
8 PREPROCESS
LA VARIABLE lsquo$VARIABLESrsquo
Drupal
Preprocess en amont(core modules)
Preprocess du thegraveme
TemplateCreacuteation de $variables
$variables
$variables
$variables
$variables
En mode super simplifieacute
8 PREPROCESS
APPELLER UN PREPROCESS
Diffeacuterentes fonctions de preprocess peuvent ecirctre appeleacutees permettant agrave tous les modules et thegravemes de modifier les variables passeacutees aux templates Ces fonctions sont les suivantes pour le hook de thegraveme HOOK
template_preprocess_HOOK(array amp$variables)
MODULENAME_preprocess(array amp$variables $hook)
MODULENAME_preprocess_HOOK(array amp$variables)
THEMENAME_preprocess(array amp$variables $hook)
THEMENAME_preprocess_HOOK(array amp$variables)
8 PREPROCESS
CONCREgraveTEMENT Implements hook_preprocess_menu__account() function drupal_france_preprocess_menu__account(amp$variables) if (isset($variables[items][drupalfr_useraccountcompte])) $variables[items][drupalfr_useraccountcompte][attributes]-gtaddClass([ button primary button--user-account ])
$variables[items][drupalfr_useraccountcompte][title] = new FormattableMarkup( lti class=fa fa-user-circle-o aria-hidden=truegtltigtltspan class=sr-onlygtoriginal_titleltspangt [ original_title =gt $variables[items][drupalfr_useraccountcompte][title] ] )
JAVASCRIPT9
9 JAVASCRIPT
DRUPAL amp JAVASCRIPT Drupal integravegre de nombreuses libraries javascript (jQuery Modernizrhellip) et propose
eacutegalement des libraries drsquoutilitaires (coredrupal coredrupalSettings drupalajax drupalformhellip)
Par exemple Drupal 8 embarque
jQuery 321
jQuery UI 1121
Chaque librairie deacutefinit ses deacutependances jQuery UI deacutepend de jQuery par exemple
Lorsque lrsquoon utilise une librairie depuis un script custom il ne faut pas oublier de deacuteclarer cette deacutependance Pensez agrave tester en anonyme car aucune libraire nrsquoest chargeacutee par deacutefaut
Vous disposez de toutes les librairies deacutefinies dans le fichier corecorelibrairiesyml
9 JAVASCRIPT
CONCREgraveTEMENTPour pouvoir utiliser du code JS dans vos scripts avec Drupal la bonne pratique est drsquoencadrer votre code comme suit
file Shows status messages in a modal instead of inline (function ($ Drupal)
Displays status messages in a Foundation reveal modal DrupalbehaviorsfoundationStatusInReveal = attach function (context settings) $(status-messages)once(foundation-reveal)each(function() Move the status messages out of the highlighted region var $messages = $(this) var $region = $messagesparent() $messagesappendTo(body) $messagesfoundation(open)
This is required as this region will likely be empty after status messages are removed $regionhtml($regionhtml()replace(ng )) )
)(jQuery Drupal)
9 JAVASCRIPT
DRUPAL BEHAVIORS
Les scripts sont exeacutecuteacutes apregraves le chargement complet du DOM ($(document)ready() )Mais on a aussi parfois besoin de les reacute-exeacutecuter lorsque lrsquoon interagit avec la page (appel AJAX overlayhellip)
Pour ce faire il suffit drsquoattacher le script JS agrave lrsquoobjet Drupalbehaviors (librairie coredrupal) La fonction exeacutecuteacutee reccediloit 2 variables
context le DOM (le HTML chargeacute ou ajouteacute)
settings toutes les variables injecteacutees cocircteacute serveur
9 JAVASCRIPT
RAPPEL
Comme pour les fichiers de style les scripts JS doivent ecirctre deacuteclareacutes sous forme de bibliothegraveque via les fichiers THEMENAMEinfoyml et THEMENAMElibrariesyml
QUESTIONS 10
RTFM httpswwwdrupalorgdocs8theminghttpstwigsymfonycomdoc2x
MERCI Agrave VOUS
FlorisMoriceau
2 CREacuteER SON THEgraveME gt THEMENAMEINFOYML
CONCREgraveTEMENT
NAMESCREENSHOTPNG
DESCRIPTION
1 ANATOMIE DrsquoUN THEgraveME gt _THEMENAME_INFOYML
CONCREgraveTEMENT
LOGOSVG
FAVICONICO
2 CREacuteER SON THEgraveME
DOCUMENTATION OFFICIELLEhttpswwwdrupalorgdocs8theming-drupal-8defining-a-theme-with-an-infoyml-file
Dans un fichier yml
LES POINTS Agrave RETENIR
libraries-override (optional) base theme (recommended) hidden (optional) engine (optional) logo (optional) screenshot (optional) regions (optional) regions_hidden (optional) features (optional) stylesheets-remove (deprecated) ckeditor_stylesheets (optional) name (required)
type (required) description (optional) package (optional) core (required) php (optional) version (optional) libraries (optional)
Mais surtout
Tabs are NOT allowed Use spaces ONLY
Properties and lists MUST be indented by two (2) spaces
AJOUTER DES ASSETS (CSSJS)
3
3 AJOUTER DES ASSETS
CHARGER DES FICHIERS CSS amp JSCe que dit la documentation
httpswwwdrupalorgdocs8themingadding-stylesheets-css-and-javascript-js-to-a-drupal-8-theme
1 Save the CSS or JS to a file using the proper naming conventions and file structure
2 Define a library which registers these CSSJS files with your theme
3 Attach the library to all pages to specific Twig templates or target specific pages via a render element in a preprocess function
3 AJOUTER DES ASSETS
EN PRATIQUE
Lrsquoajout de fichier de CSS et de JS se fait via un systegraveme de librairie (bibliothegraveque)
Il faut tout drsquoabord deacuteclarer une librairie (ou en utiliser une existante) dans le fichier THEMENAMElibrariesyml puis demander au systegraveme de la charger Ceci peut ecirctre fait depuis le fichier THEMENAMEinfoyml
3 AJOUTER DES ASSETS
CHARGER UNE LIBRAIRIE
Lorsqursquoune librairie est appeleacutee depuis le fichier THEMENAMEinfoyml alors elle est chargeacutee sur toutes les pages degraves lors que le thegraveme est utiliseacute
Il est possible de charger sous condition une bibliothegraveque Pour cela plusieurs techniques sont disponibles
depuis un fichier de template
en utilisant le hook_page_attachments_alter()
en utilisant une fonction de preprocess
3 AJOUTER DES ASSETS
CHARGER UNE LIBRAIRIE
Directement depuis un fichier de template directement par exemple dans le fichier geacuterant lrsquoaffichage des blocs
attach_library(lsquodrupal_franceblocksrsquo)
3 AJOUTER DES ASSETS
CHARGER UNE LIBRAIRIE
Chargement drsquoune librairie depuis le fichier themesTHEMENAMETHEMENAMEtheme en utilisant la fonction de hook hook_page_attachments_alter()
Implements hook_page_attachments_alter() function drupal_france_page_attachments_alter(array amp$attachments) $attachments[attached][library][] = drupal_franceglobal
3 AJOUTER DES ASSETS
CHARGER UNE LIBRAIRIE
Chargement drsquoune librairie depuis le fichier themesTHEMENAMETHEMENAMEtheme en utilisant une fonction de preprocess
Implements hook_preprocess_HOOK() for page templates function drupal_france_preprocess_page(array amp$variables) $variables[attached][library][] = drupal_franceglobal
LES FICHIERS TEMPLATES
4
4 LES TEMPLATES
Agrave QUOI CcedilA SERT
Les templates constituent la structure des pages du sitesEn fait de chacun des eacuteleacutements qui la composent
Ce sont des fichiers html (balises ltdivgt lth1gt ltagt) avec du code Twig permettant drsquoafficher les eacuteleacutements (sous forme de variables) creacuteeacutes par Drupal
Chaque type drsquoeacuteleacutement du site possegravede son propre template
4 LES TEMPLATES
PAR EXEMPLE (CrsquoEST DU VRAI CODE)
ltdiv class=l-main row expandedgt ltmain id=main class= main_grid role=maingt if pagehighlighted spaceless pagehighlighted endspaceless endif lta id=main-contentgtltagt if breadcrumb breadcrumb endif ltsectiongt pagecontent ltsectiongt ltmaingt if pagesidebar_first ltdiv id=sidebar-first class= sidebar_first_grid column sidebargt pagesidebar_first ltdivgt endif if pagesidebar_second ltdiv id=sidebar-second class= sidebar_sec_grid column sidebargt pagesidebar_second ltdivgt endif ltdivgt
4 LES TEMPLATES
IMBRICATION DES TEMPLATES
Imaginons lrsquoappel drsquoune page de billet de blog
Et maintenant imaginons le parcours drsquoimbrication de templates pour depuis la balise lthtmlgt jusqursquoagrave la ltdivgt contenant un commentaire sous ce billet de blog
4 LES TEMPLATES
FROM ltHTMLgt TO ltDIV CLASS=lsquoCOMMENTrsquogthtmlhtmltwig
pagehtmltwig
regionhtmltwig
blockhtmltwig
nodehtmltwig nodehtmltwig
fieldhtmltwig
comment-wrapperhtmltwig
commenthtmltwig
4 LES TEMPLATES
LES TEMPLATES DEacuteRIVEacuteES
Les templates deacuteriveacutees sont des templates utiliseacutees dans un contexte preacutecis
Crsquoest le nom de la template qui indique agrave Drupal quand lrsquoutiliser
Toutes ces templates sont optionnelles et reconnues automatiquement par Drupal en fonction de leurs noms
Si des templates ne sont pas preacutesentes dans le thegraveme alors Drupal utilise ceux par deacutefaut (corethemes)
On parle de ldquotemplate deacuteriveacuteeldquo de ldquosuggestion de templateldquo ou de ldquotemplates suggeacutereacuteesldquo
Il faut vider le cache de Drupal lorsque lrsquoon ajoute des templates au thegraveme
Documentation httpswwwdrupalorgdocs8themingtwigtwig-template-naming-conventions
4 LES TEMPLATES
EXEMPLE DE SUGGESTIONS DE TEMPLATES
Template de page pagehtmltwig page--chemin--internehtmltwig sera utiliseacute lorsque lrsquoon appelle chemininterne
Ex page--fronthtmltwig cible la page drsquoaccueil
Ex page--cheminhtmltwig cible toutes les pages dont le chemin commence par chemin
Ex page--node--240htmltwig cible la page du noeud portant lrsquoid 240
Template de noeud nodehtmltwig node--type-de-noeudhtmltwig cible les noeuds de type type-de-noeud
Ex node--articlehtmltwig cible tous les noeuds de type article
4 LES TEMPLATES
TROUVER LES SUGGESTIONS
Dans le fichier wwwsitesdevelopmentservicesyml
Local development services
parameters httpresponsedebug_cacheability_headers true twigconfig debug true services cachebackendnull class DrupalCoreCacheNullBackendFactory
TWIG5
5 TWIG
UN MOTEUR DE TEMPLATE
Twig est capable drsquoafficher le contenu de nrsquoimporte quel type de variable (chaine tableau ou objet)
Il est possible de faire des boucles des conditionshellip
Chaque variable peut ecirctre filtreacutee avant drsquoecirctre afficheacutee
Les chaines peuvent ecirctre rendues traduites (la traduction est alors faite via le back-office de Drupal)
5 TWIG
LES BASES
Affiche le contenu de la variable var var
Affiche le contenu de la proprieacuteteacute title de la variable node nodetitle
Conditions if var else endif
Commentaires commentaire
Traduction trans chaine endtrans
Fonctions speacutecifiques
url(lsquoroute_namersquo)
path(lsquoentitynodecanonicalrsquo lsquonodersquo nodeid)
Les modules Twig tweak ou encore Bamboo Twig proposent encore davantage de fonctions
5 TWIG
LES FILTRES Date date|format_date(lsquomediumrsquo)
Chaine
Echappement content (par deacutefaut)
Interpreacutetation du contenu de la variable texte|raw (attention )
Placeholder text|placeholder
Exclusion content|without(lsquolinksrsquo)
string|lower (upper eacutegalement)
class_name|clean_class
id_name|clean_id
Documentation httpswwwdrupalorgdocs8themingtwigfilters-modifying-variables-in-twig-templateshttpstwigsymfonycomdoc2x
5 TWIG
CONCREgraveTEMENT if pagefooter_first or pagefooter_middle or pagefooter_last ltdiv class=l-footer row expandedgt ltfooter class=row footer medium-up-2 large-up-3gt if pagefooter_first ltdiv id=footer-first class=columngt pagefooter_first ltdivgt endif if pagefooter_middle ltdiv id=footer-middle class=columngt pagefooter_middle ltdivgt endif if pagefooter_last ltdiv id=footer-last class=columngt pagefooter_last ltdivgt endif ltfootergt ltdivgt endif ltdiv class=bottom-bar panel hiddengt ltdiv class=rowgt ltdiv class=large-12 columngt ampcopy now|date(Y) site_name All rights reserved|t ltdivgt ltdivgt ltdivgt
LES REacuteGIONS6
6 LES REacuteGIONS
STRUCTURE DE LA PAGE
adminstructureblock gt Demonstrate block regions
6 LES REacuteGIONS
DEacuteFINITION ET RENDU DES REacuteGIONS
Les reacutegions doivent ecirctre deacutefinies dans le fichier THEMENAMEinfoyml
Elles doivent ecirctre appeleacutees obligatoirement dans pagehtmltwig
6 LES REacuteGIONS
THEMENAMEINFOYML
PAGEHTMLTWIG
LE RENDU DU CONTENU
7
7 RENDU DU CONTENU
LrsquoAFFICHAGE DES CHAMPS
Pour chaque type de contenu on peut reacutegler lrsquoaffichage des champs sur adminstructuretypesmanagecontent-typedisplay ougrave content-type est le nom machine du type de contenu
Il est possible de modifier lrsquoordre des champs lrsquoapparence des eacutetiquettes le format du champ
Les reacuteglages disponibles varient en fonction du type de champ
Les champs Texte peuvent ecirctre coupeacutes
Les champs Image peuvent ecirctre afficheacutes sous forme drsquoimage drsquoURL de fichier
Les champs Date peuvent utiliser un format diffeacuterent
Ces reacuteglages peuvent ecirctre diffeacuterents selon le mode drsquoaffichage (modes ldquoPar deacutefautldquo et ldquoAccrocheldquo) =gt Cela permet par exemple de masquer un champ en mode ldquoAccrocheldquo et de lrsquoafficher en mode ldquoPar deacutefautldquo (noeud inteacutegral)
7 RENDU DU CONTENU
LrsquoAFFICHAGE DES IMAGES
Les images transmises par les utilisateurs ne sont jamais aux bonnes dimensions
Le module Image (core) va nous permettre de preacutedeacutefinir des dimensions sous forme de styles drsquoimage par exemple
Vignette 70px x 110px (mise agrave lrsquoeacutechelle)
Normal 200px x 300px (mise agrave lrsquoeacutechelle et recadrage)
Ces dimensions pourront ensuite ecirctre appliqueacutees automatiquement aux champs Image depuis lrsquoeacutecran ldquogeacuterer lrsquoaffichageldquo vu preacuteceacutedemment
7 RENDU DU CONTENU
STYLE DrsquoIMAGE
7 RENDU DU CONTENU
STYLE DrsquoIMAGE
7 RENDU DU CONTENU
ALLER PLUS LOIN La gestion et la manipulation des champs est cependant
limiteacutee dans lrsquointerface drsquoadministration
On est parfois obligeacutes de modifier le code du template correspondant agrave notre champ ou type de contenu
Les reacuteglages de lrsquoadmin sont toujours pris en compte Par exemple les styles drsquoimage choisis seront ceux utiliseacutes mecircme si lrsquoon modifie le template
7 RENDU DU CONTENU
OUgrave SONT LES CHAMPS
Dans le fichier de template des noeuds (nodehtmltwig) on nrsquoa pas directement accegraves aux champs
Crsquoest la variable content qui contient tous les champs que lrsquoon affiche et en particulier ceux ajouteacutes via Field
Comment faire pour reacutecupeacuterer les champs un par un afin de les preacutesenter diffeacuteremment
7 RENDU DU CONTENU
LA VARIABLE lsquoCONTENTrsquo
Tout le contenu drsquoun noeud est afficheacute gracircce agrave la ligne content|without(comment links)
Pour connaitre le contenu de content on utilise la fonction kint() kint(content)
On deacutecouvre alors lrsquoensemble des champs et leurs proprieacuteteacutes qui sont afficheacutees en haut de page sous forme de var_dump()
On peut afficher seacutepareacutement chacun drsquoentre eux avec le code suivant contentnom_du_champ nodecreatedtime
7 RENDU DU CONTENU
NODE DE TYPE lsquoNEWSrsquo ET FORMAT lsquoTEASERrsquo
PREPROCESS8
8 PREPROCESS
FONCTIONS DE PREPROCESS
Pour chaque template on dispose de variables que lrsquoon affiche avec le formatage voulu
Ces variables sont creacuteeacutees en amont des templates dans lesquelles elles sont utiliseacutees
On dispose de fonctions dites de preprocess qui permettent de fabriquer les variables qui sont utiliseacutees dans les templates
Il est possible drsquoeacutetendre ces fonctions pour modifier les variables envoyeacutees aux templates ou en creacuteer de nouvelles
Pour ajouter une fonction de preprocess il faut la nommer comme suit THEMENAME_preprocess_HOOK() Par exemple drupal_france_preprocess_block()
8 PREPROCESS
FONCTIONS DE PREPROCESS
Pour chaque template on dispose de variables que lrsquoon affiche avec le formatage voulu
Ces variables sont creacuteeacutees en amont des templates dans lesquelles elles sont utiliseacutees
On dispose de fonctions dites de preprocess qui permettent de fabriquer les variables qui sont utiliseacutees dans les templates
Il est possible drsquoeacutetendre ces fonctions pour modifier les variables envoyeacutees aux templates ou en creacuteer de nouvelles
Pour ajouter une fonction de preprocess il faut la nommer comme suit THEMENAME_preprocess_HOOK() Par exemple drupal_france_preprocess_block()
8 PREPROCESS
LA VARIABLE lsquo$VARIABLESrsquo
Drupal
Preprocess en amont(core modules)
Preprocess du thegraveme
TemplateCreacuteation de $variables
$variables
$variables
$variables
$variables
En mode super simplifieacute
8 PREPROCESS
APPELLER UN PREPROCESS
Diffeacuterentes fonctions de preprocess peuvent ecirctre appeleacutees permettant agrave tous les modules et thegravemes de modifier les variables passeacutees aux templates Ces fonctions sont les suivantes pour le hook de thegraveme HOOK
template_preprocess_HOOK(array amp$variables)
MODULENAME_preprocess(array amp$variables $hook)
MODULENAME_preprocess_HOOK(array amp$variables)
THEMENAME_preprocess(array amp$variables $hook)
THEMENAME_preprocess_HOOK(array amp$variables)
8 PREPROCESS
CONCREgraveTEMENT Implements hook_preprocess_menu__account() function drupal_france_preprocess_menu__account(amp$variables) if (isset($variables[items][drupalfr_useraccountcompte])) $variables[items][drupalfr_useraccountcompte][attributes]-gtaddClass([ button primary button--user-account ])
$variables[items][drupalfr_useraccountcompte][title] = new FormattableMarkup( lti class=fa fa-user-circle-o aria-hidden=truegtltigtltspan class=sr-onlygtoriginal_titleltspangt [ original_title =gt $variables[items][drupalfr_useraccountcompte][title] ] )
JAVASCRIPT9
9 JAVASCRIPT
DRUPAL amp JAVASCRIPT Drupal integravegre de nombreuses libraries javascript (jQuery Modernizrhellip) et propose
eacutegalement des libraries drsquoutilitaires (coredrupal coredrupalSettings drupalajax drupalformhellip)
Par exemple Drupal 8 embarque
jQuery 321
jQuery UI 1121
Chaque librairie deacutefinit ses deacutependances jQuery UI deacutepend de jQuery par exemple
Lorsque lrsquoon utilise une librairie depuis un script custom il ne faut pas oublier de deacuteclarer cette deacutependance Pensez agrave tester en anonyme car aucune libraire nrsquoest chargeacutee par deacutefaut
Vous disposez de toutes les librairies deacutefinies dans le fichier corecorelibrairiesyml
9 JAVASCRIPT
CONCREgraveTEMENTPour pouvoir utiliser du code JS dans vos scripts avec Drupal la bonne pratique est drsquoencadrer votre code comme suit
file Shows status messages in a modal instead of inline (function ($ Drupal)
Displays status messages in a Foundation reveal modal DrupalbehaviorsfoundationStatusInReveal = attach function (context settings) $(status-messages)once(foundation-reveal)each(function() Move the status messages out of the highlighted region var $messages = $(this) var $region = $messagesparent() $messagesappendTo(body) $messagesfoundation(open)
This is required as this region will likely be empty after status messages are removed $regionhtml($regionhtml()replace(ng )) )
)(jQuery Drupal)
9 JAVASCRIPT
DRUPAL BEHAVIORS
Les scripts sont exeacutecuteacutes apregraves le chargement complet du DOM ($(document)ready() )Mais on a aussi parfois besoin de les reacute-exeacutecuter lorsque lrsquoon interagit avec la page (appel AJAX overlayhellip)
Pour ce faire il suffit drsquoattacher le script JS agrave lrsquoobjet Drupalbehaviors (librairie coredrupal) La fonction exeacutecuteacutee reccediloit 2 variables
context le DOM (le HTML chargeacute ou ajouteacute)
settings toutes les variables injecteacutees cocircteacute serveur
9 JAVASCRIPT
RAPPEL
Comme pour les fichiers de style les scripts JS doivent ecirctre deacuteclareacutes sous forme de bibliothegraveque via les fichiers THEMENAMEinfoyml et THEMENAMElibrariesyml
QUESTIONS 10
RTFM httpswwwdrupalorgdocs8theminghttpstwigsymfonycomdoc2x
MERCI Agrave VOUS
FlorisMoriceau
1 ANATOMIE DrsquoUN THEgraveME gt _THEMENAME_INFOYML
CONCREgraveTEMENT
LOGOSVG
FAVICONICO
2 CREacuteER SON THEgraveME
DOCUMENTATION OFFICIELLEhttpswwwdrupalorgdocs8theming-drupal-8defining-a-theme-with-an-infoyml-file
Dans un fichier yml
LES POINTS Agrave RETENIR
libraries-override (optional) base theme (recommended) hidden (optional) engine (optional) logo (optional) screenshot (optional) regions (optional) regions_hidden (optional) features (optional) stylesheets-remove (deprecated) ckeditor_stylesheets (optional) name (required)
type (required) description (optional) package (optional) core (required) php (optional) version (optional) libraries (optional)
Mais surtout
Tabs are NOT allowed Use spaces ONLY
Properties and lists MUST be indented by two (2) spaces
AJOUTER DES ASSETS (CSSJS)
3
3 AJOUTER DES ASSETS
CHARGER DES FICHIERS CSS amp JSCe que dit la documentation
httpswwwdrupalorgdocs8themingadding-stylesheets-css-and-javascript-js-to-a-drupal-8-theme
1 Save the CSS or JS to a file using the proper naming conventions and file structure
2 Define a library which registers these CSSJS files with your theme
3 Attach the library to all pages to specific Twig templates or target specific pages via a render element in a preprocess function
3 AJOUTER DES ASSETS
EN PRATIQUE
Lrsquoajout de fichier de CSS et de JS se fait via un systegraveme de librairie (bibliothegraveque)
Il faut tout drsquoabord deacuteclarer une librairie (ou en utiliser une existante) dans le fichier THEMENAMElibrariesyml puis demander au systegraveme de la charger Ceci peut ecirctre fait depuis le fichier THEMENAMEinfoyml
3 AJOUTER DES ASSETS
CHARGER UNE LIBRAIRIE
Lorsqursquoune librairie est appeleacutee depuis le fichier THEMENAMEinfoyml alors elle est chargeacutee sur toutes les pages degraves lors que le thegraveme est utiliseacute
Il est possible de charger sous condition une bibliothegraveque Pour cela plusieurs techniques sont disponibles
depuis un fichier de template
en utilisant le hook_page_attachments_alter()
en utilisant une fonction de preprocess
3 AJOUTER DES ASSETS
CHARGER UNE LIBRAIRIE
Directement depuis un fichier de template directement par exemple dans le fichier geacuterant lrsquoaffichage des blocs
attach_library(lsquodrupal_franceblocksrsquo)
3 AJOUTER DES ASSETS
CHARGER UNE LIBRAIRIE
Chargement drsquoune librairie depuis le fichier themesTHEMENAMETHEMENAMEtheme en utilisant la fonction de hook hook_page_attachments_alter()
Implements hook_page_attachments_alter() function drupal_france_page_attachments_alter(array amp$attachments) $attachments[attached][library][] = drupal_franceglobal
3 AJOUTER DES ASSETS
CHARGER UNE LIBRAIRIE
Chargement drsquoune librairie depuis le fichier themesTHEMENAMETHEMENAMEtheme en utilisant une fonction de preprocess
Implements hook_preprocess_HOOK() for page templates function drupal_france_preprocess_page(array amp$variables) $variables[attached][library][] = drupal_franceglobal
LES FICHIERS TEMPLATES
4
4 LES TEMPLATES
Agrave QUOI CcedilA SERT
Les templates constituent la structure des pages du sitesEn fait de chacun des eacuteleacutements qui la composent
Ce sont des fichiers html (balises ltdivgt lth1gt ltagt) avec du code Twig permettant drsquoafficher les eacuteleacutements (sous forme de variables) creacuteeacutes par Drupal
Chaque type drsquoeacuteleacutement du site possegravede son propre template
4 LES TEMPLATES
PAR EXEMPLE (CrsquoEST DU VRAI CODE)
ltdiv class=l-main row expandedgt ltmain id=main class= main_grid role=maingt if pagehighlighted spaceless pagehighlighted endspaceless endif lta id=main-contentgtltagt if breadcrumb breadcrumb endif ltsectiongt pagecontent ltsectiongt ltmaingt if pagesidebar_first ltdiv id=sidebar-first class= sidebar_first_grid column sidebargt pagesidebar_first ltdivgt endif if pagesidebar_second ltdiv id=sidebar-second class= sidebar_sec_grid column sidebargt pagesidebar_second ltdivgt endif ltdivgt
4 LES TEMPLATES
IMBRICATION DES TEMPLATES
Imaginons lrsquoappel drsquoune page de billet de blog
Et maintenant imaginons le parcours drsquoimbrication de templates pour depuis la balise lthtmlgt jusqursquoagrave la ltdivgt contenant un commentaire sous ce billet de blog
4 LES TEMPLATES
FROM ltHTMLgt TO ltDIV CLASS=lsquoCOMMENTrsquogthtmlhtmltwig
pagehtmltwig
regionhtmltwig
blockhtmltwig
nodehtmltwig nodehtmltwig
fieldhtmltwig
comment-wrapperhtmltwig
commenthtmltwig
4 LES TEMPLATES
LES TEMPLATES DEacuteRIVEacuteES
Les templates deacuteriveacutees sont des templates utiliseacutees dans un contexte preacutecis
Crsquoest le nom de la template qui indique agrave Drupal quand lrsquoutiliser
Toutes ces templates sont optionnelles et reconnues automatiquement par Drupal en fonction de leurs noms
Si des templates ne sont pas preacutesentes dans le thegraveme alors Drupal utilise ceux par deacutefaut (corethemes)
On parle de ldquotemplate deacuteriveacuteeldquo de ldquosuggestion de templateldquo ou de ldquotemplates suggeacutereacuteesldquo
Il faut vider le cache de Drupal lorsque lrsquoon ajoute des templates au thegraveme
Documentation httpswwwdrupalorgdocs8themingtwigtwig-template-naming-conventions
4 LES TEMPLATES
EXEMPLE DE SUGGESTIONS DE TEMPLATES
Template de page pagehtmltwig page--chemin--internehtmltwig sera utiliseacute lorsque lrsquoon appelle chemininterne
Ex page--fronthtmltwig cible la page drsquoaccueil
Ex page--cheminhtmltwig cible toutes les pages dont le chemin commence par chemin
Ex page--node--240htmltwig cible la page du noeud portant lrsquoid 240
Template de noeud nodehtmltwig node--type-de-noeudhtmltwig cible les noeuds de type type-de-noeud
Ex node--articlehtmltwig cible tous les noeuds de type article
4 LES TEMPLATES
TROUVER LES SUGGESTIONS
Dans le fichier wwwsitesdevelopmentservicesyml
Local development services
parameters httpresponsedebug_cacheability_headers true twigconfig debug true services cachebackendnull class DrupalCoreCacheNullBackendFactory
TWIG5
5 TWIG
UN MOTEUR DE TEMPLATE
Twig est capable drsquoafficher le contenu de nrsquoimporte quel type de variable (chaine tableau ou objet)
Il est possible de faire des boucles des conditionshellip
Chaque variable peut ecirctre filtreacutee avant drsquoecirctre afficheacutee
Les chaines peuvent ecirctre rendues traduites (la traduction est alors faite via le back-office de Drupal)
5 TWIG
LES BASES
Affiche le contenu de la variable var var
Affiche le contenu de la proprieacuteteacute title de la variable node nodetitle
Conditions if var else endif
Commentaires commentaire
Traduction trans chaine endtrans
Fonctions speacutecifiques
url(lsquoroute_namersquo)
path(lsquoentitynodecanonicalrsquo lsquonodersquo nodeid)
Les modules Twig tweak ou encore Bamboo Twig proposent encore davantage de fonctions
5 TWIG
LES FILTRES Date date|format_date(lsquomediumrsquo)
Chaine
Echappement content (par deacutefaut)
Interpreacutetation du contenu de la variable texte|raw (attention )
Placeholder text|placeholder
Exclusion content|without(lsquolinksrsquo)
string|lower (upper eacutegalement)
class_name|clean_class
id_name|clean_id
Documentation httpswwwdrupalorgdocs8themingtwigfilters-modifying-variables-in-twig-templateshttpstwigsymfonycomdoc2x
5 TWIG
CONCREgraveTEMENT if pagefooter_first or pagefooter_middle or pagefooter_last ltdiv class=l-footer row expandedgt ltfooter class=row footer medium-up-2 large-up-3gt if pagefooter_first ltdiv id=footer-first class=columngt pagefooter_first ltdivgt endif if pagefooter_middle ltdiv id=footer-middle class=columngt pagefooter_middle ltdivgt endif if pagefooter_last ltdiv id=footer-last class=columngt pagefooter_last ltdivgt endif ltfootergt ltdivgt endif ltdiv class=bottom-bar panel hiddengt ltdiv class=rowgt ltdiv class=large-12 columngt ampcopy now|date(Y) site_name All rights reserved|t ltdivgt ltdivgt ltdivgt
LES REacuteGIONS6
6 LES REacuteGIONS
STRUCTURE DE LA PAGE
adminstructureblock gt Demonstrate block regions
6 LES REacuteGIONS
DEacuteFINITION ET RENDU DES REacuteGIONS
Les reacutegions doivent ecirctre deacutefinies dans le fichier THEMENAMEinfoyml
Elles doivent ecirctre appeleacutees obligatoirement dans pagehtmltwig
6 LES REacuteGIONS
THEMENAMEINFOYML
PAGEHTMLTWIG
LE RENDU DU CONTENU
7
7 RENDU DU CONTENU
LrsquoAFFICHAGE DES CHAMPS
Pour chaque type de contenu on peut reacutegler lrsquoaffichage des champs sur adminstructuretypesmanagecontent-typedisplay ougrave content-type est le nom machine du type de contenu
Il est possible de modifier lrsquoordre des champs lrsquoapparence des eacutetiquettes le format du champ
Les reacuteglages disponibles varient en fonction du type de champ
Les champs Texte peuvent ecirctre coupeacutes
Les champs Image peuvent ecirctre afficheacutes sous forme drsquoimage drsquoURL de fichier
Les champs Date peuvent utiliser un format diffeacuterent
Ces reacuteglages peuvent ecirctre diffeacuterents selon le mode drsquoaffichage (modes ldquoPar deacutefautldquo et ldquoAccrocheldquo) =gt Cela permet par exemple de masquer un champ en mode ldquoAccrocheldquo et de lrsquoafficher en mode ldquoPar deacutefautldquo (noeud inteacutegral)
7 RENDU DU CONTENU
LrsquoAFFICHAGE DES IMAGES
Les images transmises par les utilisateurs ne sont jamais aux bonnes dimensions
Le module Image (core) va nous permettre de preacutedeacutefinir des dimensions sous forme de styles drsquoimage par exemple
Vignette 70px x 110px (mise agrave lrsquoeacutechelle)
Normal 200px x 300px (mise agrave lrsquoeacutechelle et recadrage)
Ces dimensions pourront ensuite ecirctre appliqueacutees automatiquement aux champs Image depuis lrsquoeacutecran ldquogeacuterer lrsquoaffichageldquo vu preacuteceacutedemment
7 RENDU DU CONTENU
STYLE DrsquoIMAGE
7 RENDU DU CONTENU
STYLE DrsquoIMAGE
7 RENDU DU CONTENU
ALLER PLUS LOIN La gestion et la manipulation des champs est cependant
limiteacutee dans lrsquointerface drsquoadministration
On est parfois obligeacutes de modifier le code du template correspondant agrave notre champ ou type de contenu
Les reacuteglages de lrsquoadmin sont toujours pris en compte Par exemple les styles drsquoimage choisis seront ceux utiliseacutes mecircme si lrsquoon modifie le template
7 RENDU DU CONTENU
OUgrave SONT LES CHAMPS
Dans le fichier de template des noeuds (nodehtmltwig) on nrsquoa pas directement accegraves aux champs
Crsquoest la variable content qui contient tous les champs que lrsquoon affiche et en particulier ceux ajouteacutes via Field
Comment faire pour reacutecupeacuterer les champs un par un afin de les preacutesenter diffeacuteremment
7 RENDU DU CONTENU
LA VARIABLE lsquoCONTENTrsquo
Tout le contenu drsquoun noeud est afficheacute gracircce agrave la ligne content|without(comment links)
Pour connaitre le contenu de content on utilise la fonction kint() kint(content)
On deacutecouvre alors lrsquoensemble des champs et leurs proprieacuteteacutes qui sont afficheacutees en haut de page sous forme de var_dump()
On peut afficher seacutepareacutement chacun drsquoentre eux avec le code suivant contentnom_du_champ nodecreatedtime
7 RENDU DU CONTENU
NODE DE TYPE lsquoNEWSrsquo ET FORMAT lsquoTEASERrsquo
PREPROCESS8
8 PREPROCESS
FONCTIONS DE PREPROCESS
Pour chaque template on dispose de variables que lrsquoon affiche avec le formatage voulu
Ces variables sont creacuteeacutees en amont des templates dans lesquelles elles sont utiliseacutees
On dispose de fonctions dites de preprocess qui permettent de fabriquer les variables qui sont utiliseacutees dans les templates
Il est possible drsquoeacutetendre ces fonctions pour modifier les variables envoyeacutees aux templates ou en creacuteer de nouvelles
Pour ajouter une fonction de preprocess il faut la nommer comme suit THEMENAME_preprocess_HOOK() Par exemple drupal_france_preprocess_block()
8 PREPROCESS
FONCTIONS DE PREPROCESS
Pour chaque template on dispose de variables que lrsquoon affiche avec le formatage voulu
Ces variables sont creacuteeacutees en amont des templates dans lesquelles elles sont utiliseacutees
On dispose de fonctions dites de preprocess qui permettent de fabriquer les variables qui sont utiliseacutees dans les templates
Il est possible drsquoeacutetendre ces fonctions pour modifier les variables envoyeacutees aux templates ou en creacuteer de nouvelles
Pour ajouter une fonction de preprocess il faut la nommer comme suit THEMENAME_preprocess_HOOK() Par exemple drupal_france_preprocess_block()
8 PREPROCESS
LA VARIABLE lsquo$VARIABLESrsquo
Drupal
Preprocess en amont(core modules)
Preprocess du thegraveme
TemplateCreacuteation de $variables
$variables
$variables
$variables
$variables
En mode super simplifieacute
8 PREPROCESS
APPELLER UN PREPROCESS
Diffeacuterentes fonctions de preprocess peuvent ecirctre appeleacutees permettant agrave tous les modules et thegravemes de modifier les variables passeacutees aux templates Ces fonctions sont les suivantes pour le hook de thegraveme HOOK
template_preprocess_HOOK(array amp$variables)
MODULENAME_preprocess(array amp$variables $hook)
MODULENAME_preprocess_HOOK(array amp$variables)
THEMENAME_preprocess(array amp$variables $hook)
THEMENAME_preprocess_HOOK(array amp$variables)
8 PREPROCESS
CONCREgraveTEMENT Implements hook_preprocess_menu__account() function drupal_france_preprocess_menu__account(amp$variables) if (isset($variables[items][drupalfr_useraccountcompte])) $variables[items][drupalfr_useraccountcompte][attributes]-gtaddClass([ button primary button--user-account ])
$variables[items][drupalfr_useraccountcompte][title] = new FormattableMarkup( lti class=fa fa-user-circle-o aria-hidden=truegtltigtltspan class=sr-onlygtoriginal_titleltspangt [ original_title =gt $variables[items][drupalfr_useraccountcompte][title] ] )
JAVASCRIPT9
9 JAVASCRIPT
DRUPAL amp JAVASCRIPT Drupal integravegre de nombreuses libraries javascript (jQuery Modernizrhellip) et propose
eacutegalement des libraries drsquoutilitaires (coredrupal coredrupalSettings drupalajax drupalformhellip)
Par exemple Drupal 8 embarque
jQuery 321
jQuery UI 1121
Chaque librairie deacutefinit ses deacutependances jQuery UI deacutepend de jQuery par exemple
Lorsque lrsquoon utilise une librairie depuis un script custom il ne faut pas oublier de deacuteclarer cette deacutependance Pensez agrave tester en anonyme car aucune libraire nrsquoest chargeacutee par deacutefaut
Vous disposez de toutes les librairies deacutefinies dans le fichier corecorelibrairiesyml
9 JAVASCRIPT
CONCREgraveTEMENTPour pouvoir utiliser du code JS dans vos scripts avec Drupal la bonne pratique est drsquoencadrer votre code comme suit
file Shows status messages in a modal instead of inline (function ($ Drupal)
Displays status messages in a Foundation reveal modal DrupalbehaviorsfoundationStatusInReveal = attach function (context settings) $(status-messages)once(foundation-reveal)each(function() Move the status messages out of the highlighted region var $messages = $(this) var $region = $messagesparent() $messagesappendTo(body) $messagesfoundation(open)
This is required as this region will likely be empty after status messages are removed $regionhtml($regionhtml()replace(ng )) )
)(jQuery Drupal)
9 JAVASCRIPT
DRUPAL BEHAVIORS
Les scripts sont exeacutecuteacutes apregraves le chargement complet du DOM ($(document)ready() )Mais on a aussi parfois besoin de les reacute-exeacutecuter lorsque lrsquoon interagit avec la page (appel AJAX overlayhellip)
Pour ce faire il suffit drsquoattacher le script JS agrave lrsquoobjet Drupalbehaviors (librairie coredrupal) La fonction exeacutecuteacutee reccediloit 2 variables
context le DOM (le HTML chargeacute ou ajouteacute)
settings toutes les variables injecteacutees cocircteacute serveur
9 JAVASCRIPT
RAPPEL
Comme pour les fichiers de style les scripts JS doivent ecirctre deacuteclareacutes sous forme de bibliothegraveque via les fichiers THEMENAMEinfoyml et THEMENAMElibrariesyml
QUESTIONS 10
RTFM httpswwwdrupalorgdocs8theminghttpstwigsymfonycomdoc2x
MERCI Agrave VOUS
FlorisMoriceau
2 CREacuteER SON THEgraveME
DOCUMENTATION OFFICIELLEhttpswwwdrupalorgdocs8theming-drupal-8defining-a-theme-with-an-infoyml-file
Dans un fichier yml
LES POINTS Agrave RETENIR
libraries-override (optional) base theme (recommended) hidden (optional) engine (optional) logo (optional) screenshot (optional) regions (optional) regions_hidden (optional) features (optional) stylesheets-remove (deprecated) ckeditor_stylesheets (optional) name (required)
type (required) description (optional) package (optional) core (required) php (optional) version (optional) libraries (optional)
Mais surtout
Tabs are NOT allowed Use spaces ONLY
Properties and lists MUST be indented by two (2) spaces
AJOUTER DES ASSETS (CSSJS)
3
3 AJOUTER DES ASSETS
CHARGER DES FICHIERS CSS amp JSCe que dit la documentation
httpswwwdrupalorgdocs8themingadding-stylesheets-css-and-javascript-js-to-a-drupal-8-theme
1 Save the CSS or JS to a file using the proper naming conventions and file structure
2 Define a library which registers these CSSJS files with your theme
3 Attach the library to all pages to specific Twig templates or target specific pages via a render element in a preprocess function
3 AJOUTER DES ASSETS
EN PRATIQUE
Lrsquoajout de fichier de CSS et de JS se fait via un systegraveme de librairie (bibliothegraveque)
Il faut tout drsquoabord deacuteclarer une librairie (ou en utiliser une existante) dans le fichier THEMENAMElibrariesyml puis demander au systegraveme de la charger Ceci peut ecirctre fait depuis le fichier THEMENAMEinfoyml
3 AJOUTER DES ASSETS
CHARGER UNE LIBRAIRIE
Lorsqursquoune librairie est appeleacutee depuis le fichier THEMENAMEinfoyml alors elle est chargeacutee sur toutes les pages degraves lors que le thegraveme est utiliseacute
Il est possible de charger sous condition une bibliothegraveque Pour cela plusieurs techniques sont disponibles
depuis un fichier de template
en utilisant le hook_page_attachments_alter()
en utilisant une fonction de preprocess
3 AJOUTER DES ASSETS
CHARGER UNE LIBRAIRIE
Directement depuis un fichier de template directement par exemple dans le fichier geacuterant lrsquoaffichage des blocs
attach_library(lsquodrupal_franceblocksrsquo)
3 AJOUTER DES ASSETS
CHARGER UNE LIBRAIRIE
Chargement drsquoune librairie depuis le fichier themesTHEMENAMETHEMENAMEtheme en utilisant la fonction de hook hook_page_attachments_alter()
Implements hook_page_attachments_alter() function drupal_france_page_attachments_alter(array amp$attachments) $attachments[attached][library][] = drupal_franceglobal
3 AJOUTER DES ASSETS
CHARGER UNE LIBRAIRIE
Chargement drsquoune librairie depuis le fichier themesTHEMENAMETHEMENAMEtheme en utilisant une fonction de preprocess
Implements hook_preprocess_HOOK() for page templates function drupal_france_preprocess_page(array amp$variables) $variables[attached][library][] = drupal_franceglobal
LES FICHIERS TEMPLATES
4
4 LES TEMPLATES
Agrave QUOI CcedilA SERT
Les templates constituent la structure des pages du sitesEn fait de chacun des eacuteleacutements qui la composent
Ce sont des fichiers html (balises ltdivgt lth1gt ltagt) avec du code Twig permettant drsquoafficher les eacuteleacutements (sous forme de variables) creacuteeacutes par Drupal
Chaque type drsquoeacuteleacutement du site possegravede son propre template
4 LES TEMPLATES
PAR EXEMPLE (CrsquoEST DU VRAI CODE)
ltdiv class=l-main row expandedgt ltmain id=main class= main_grid role=maingt if pagehighlighted spaceless pagehighlighted endspaceless endif lta id=main-contentgtltagt if breadcrumb breadcrumb endif ltsectiongt pagecontent ltsectiongt ltmaingt if pagesidebar_first ltdiv id=sidebar-first class= sidebar_first_grid column sidebargt pagesidebar_first ltdivgt endif if pagesidebar_second ltdiv id=sidebar-second class= sidebar_sec_grid column sidebargt pagesidebar_second ltdivgt endif ltdivgt
4 LES TEMPLATES
IMBRICATION DES TEMPLATES
Imaginons lrsquoappel drsquoune page de billet de blog
Et maintenant imaginons le parcours drsquoimbrication de templates pour depuis la balise lthtmlgt jusqursquoagrave la ltdivgt contenant un commentaire sous ce billet de blog
4 LES TEMPLATES
FROM ltHTMLgt TO ltDIV CLASS=lsquoCOMMENTrsquogthtmlhtmltwig
pagehtmltwig
regionhtmltwig
blockhtmltwig
nodehtmltwig nodehtmltwig
fieldhtmltwig
comment-wrapperhtmltwig
commenthtmltwig
4 LES TEMPLATES
LES TEMPLATES DEacuteRIVEacuteES
Les templates deacuteriveacutees sont des templates utiliseacutees dans un contexte preacutecis
Crsquoest le nom de la template qui indique agrave Drupal quand lrsquoutiliser
Toutes ces templates sont optionnelles et reconnues automatiquement par Drupal en fonction de leurs noms
Si des templates ne sont pas preacutesentes dans le thegraveme alors Drupal utilise ceux par deacutefaut (corethemes)
On parle de ldquotemplate deacuteriveacuteeldquo de ldquosuggestion de templateldquo ou de ldquotemplates suggeacutereacuteesldquo
Il faut vider le cache de Drupal lorsque lrsquoon ajoute des templates au thegraveme
Documentation httpswwwdrupalorgdocs8themingtwigtwig-template-naming-conventions
4 LES TEMPLATES
EXEMPLE DE SUGGESTIONS DE TEMPLATES
Template de page pagehtmltwig page--chemin--internehtmltwig sera utiliseacute lorsque lrsquoon appelle chemininterne
Ex page--fronthtmltwig cible la page drsquoaccueil
Ex page--cheminhtmltwig cible toutes les pages dont le chemin commence par chemin
Ex page--node--240htmltwig cible la page du noeud portant lrsquoid 240
Template de noeud nodehtmltwig node--type-de-noeudhtmltwig cible les noeuds de type type-de-noeud
Ex node--articlehtmltwig cible tous les noeuds de type article
4 LES TEMPLATES
TROUVER LES SUGGESTIONS
Dans le fichier wwwsitesdevelopmentservicesyml
Local development services
parameters httpresponsedebug_cacheability_headers true twigconfig debug true services cachebackendnull class DrupalCoreCacheNullBackendFactory
TWIG5
5 TWIG
UN MOTEUR DE TEMPLATE
Twig est capable drsquoafficher le contenu de nrsquoimporte quel type de variable (chaine tableau ou objet)
Il est possible de faire des boucles des conditionshellip
Chaque variable peut ecirctre filtreacutee avant drsquoecirctre afficheacutee
Les chaines peuvent ecirctre rendues traduites (la traduction est alors faite via le back-office de Drupal)
5 TWIG
LES BASES
Affiche le contenu de la variable var var
Affiche le contenu de la proprieacuteteacute title de la variable node nodetitle
Conditions if var else endif
Commentaires commentaire
Traduction trans chaine endtrans
Fonctions speacutecifiques
url(lsquoroute_namersquo)
path(lsquoentitynodecanonicalrsquo lsquonodersquo nodeid)
Les modules Twig tweak ou encore Bamboo Twig proposent encore davantage de fonctions
5 TWIG
LES FILTRES Date date|format_date(lsquomediumrsquo)
Chaine
Echappement content (par deacutefaut)
Interpreacutetation du contenu de la variable texte|raw (attention )
Placeholder text|placeholder
Exclusion content|without(lsquolinksrsquo)
string|lower (upper eacutegalement)
class_name|clean_class
id_name|clean_id
Documentation httpswwwdrupalorgdocs8themingtwigfilters-modifying-variables-in-twig-templateshttpstwigsymfonycomdoc2x
5 TWIG
CONCREgraveTEMENT if pagefooter_first or pagefooter_middle or pagefooter_last ltdiv class=l-footer row expandedgt ltfooter class=row footer medium-up-2 large-up-3gt if pagefooter_first ltdiv id=footer-first class=columngt pagefooter_first ltdivgt endif if pagefooter_middle ltdiv id=footer-middle class=columngt pagefooter_middle ltdivgt endif if pagefooter_last ltdiv id=footer-last class=columngt pagefooter_last ltdivgt endif ltfootergt ltdivgt endif ltdiv class=bottom-bar panel hiddengt ltdiv class=rowgt ltdiv class=large-12 columngt ampcopy now|date(Y) site_name All rights reserved|t ltdivgt ltdivgt ltdivgt
LES REacuteGIONS6
6 LES REacuteGIONS
STRUCTURE DE LA PAGE
adminstructureblock gt Demonstrate block regions
6 LES REacuteGIONS
DEacuteFINITION ET RENDU DES REacuteGIONS
Les reacutegions doivent ecirctre deacutefinies dans le fichier THEMENAMEinfoyml
Elles doivent ecirctre appeleacutees obligatoirement dans pagehtmltwig
6 LES REacuteGIONS
THEMENAMEINFOYML
PAGEHTMLTWIG
LE RENDU DU CONTENU
7
7 RENDU DU CONTENU
LrsquoAFFICHAGE DES CHAMPS
Pour chaque type de contenu on peut reacutegler lrsquoaffichage des champs sur adminstructuretypesmanagecontent-typedisplay ougrave content-type est le nom machine du type de contenu
Il est possible de modifier lrsquoordre des champs lrsquoapparence des eacutetiquettes le format du champ
Les reacuteglages disponibles varient en fonction du type de champ
Les champs Texte peuvent ecirctre coupeacutes
Les champs Image peuvent ecirctre afficheacutes sous forme drsquoimage drsquoURL de fichier
Les champs Date peuvent utiliser un format diffeacuterent
Ces reacuteglages peuvent ecirctre diffeacuterents selon le mode drsquoaffichage (modes ldquoPar deacutefautldquo et ldquoAccrocheldquo) =gt Cela permet par exemple de masquer un champ en mode ldquoAccrocheldquo et de lrsquoafficher en mode ldquoPar deacutefautldquo (noeud inteacutegral)
7 RENDU DU CONTENU
LrsquoAFFICHAGE DES IMAGES
Les images transmises par les utilisateurs ne sont jamais aux bonnes dimensions
Le module Image (core) va nous permettre de preacutedeacutefinir des dimensions sous forme de styles drsquoimage par exemple
Vignette 70px x 110px (mise agrave lrsquoeacutechelle)
Normal 200px x 300px (mise agrave lrsquoeacutechelle et recadrage)
Ces dimensions pourront ensuite ecirctre appliqueacutees automatiquement aux champs Image depuis lrsquoeacutecran ldquogeacuterer lrsquoaffichageldquo vu preacuteceacutedemment
7 RENDU DU CONTENU
STYLE DrsquoIMAGE
7 RENDU DU CONTENU
STYLE DrsquoIMAGE
7 RENDU DU CONTENU
ALLER PLUS LOIN La gestion et la manipulation des champs est cependant
limiteacutee dans lrsquointerface drsquoadministration
On est parfois obligeacutes de modifier le code du template correspondant agrave notre champ ou type de contenu
Les reacuteglages de lrsquoadmin sont toujours pris en compte Par exemple les styles drsquoimage choisis seront ceux utiliseacutes mecircme si lrsquoon modifie le template
7 RENDU DU CONTENU
OUgrave SONT LES CHAMPS
Dans le fichier de template des noeuds (nodehtmltwig) on nrsquoa pas directement accegraves aux champs
Crsquoest la variable content qui contient tous les champs que lrsquoon affiche et en particulier ceux ajouteacutes via Field
Comment faire pour reacutecupeacuterer les champs un par un afin de les preacutesenter diffeacuteremment
7 RENDU DU CONTENU
LA VARIABLE lsquoCONTENTrsquo
Tout le contenu drsquoun noeud est afficheacute gracircce agrave la ligne content|without(comment links)
Pour connaitre le contenu de content on utilise la fonction kint() kint(content)
On deacutecouvre alors lrsquoensemble des champs et leurs proprieacuteteacutes qui sont afficheacutees en haut de page sous forme de var_dump()
On peut afficher seacutepareacutement chacun drsquoentre eux avec le code suivant contentnom_du_champ nodecreatedtime
7 RENDU DU CONTENU
NODE DE TYPE lsquoNEWSrsquo ET FORMAT lsquoTEASERrsquo
PREPROCESS8
8 PREPROCESS
FONCTIONS DE PREPROCESS
Pour chaque template on dispose de variables que lrsquoon affiche avec le formatage voulu
Ces variables sont creacuteeacutees en amont des templates dans lesquelles elles sont utiliseacutees
On dispose de fonctions dites de preprocess qui permettent de fabriquer les variables qui sont utiliseacutees dans les templates
Il est possible drsquoeacutetendre ces fonctions pour modifier les variables envoyeacutees aux templates ou en creacuteer de nouvelles
Pour ajouter une fonction de preprocess il faut la nommer comme suit THEMENAME_preprocess_HOOK() Par exemple drupal_france_preprocess_block()
8 PREPROCESS
FONCTIONS DE PREPROCESS
Pour chaque template on dispose de variables que lrsquoon affiche avec le formatage voulu
Ces variables sont creacuteeacutees en amont des templates dans lesquelles elles sont utiliseacutees
On dispose de fonctions dites de preprocess qui permettent de fabriquer les variables qui sont utiliseacutees dans les templates
Il est possible drsquoeacutetendre ces fonctions pour modifier les variables envoyeacutees aux templates ou en creacuteer de nouvelles
Pour ajouter une fonction de preprocess il faut la nommer comme suit THEMENAME_preprocess_HOOK() Par exemple drupal_france_preprocess_block()
8 PREPROCESS
LA VARIABLE lsquo$VARIABLESrsquo
Drupal
Preprocess en amont(core modules)
Preprocess du thegraveme
TemplateCreacuteation de $variables
$variables
$variables
$variables
$variables
En mode super simplifieacute
8 PREPROCESS
APPELLER UN PREPROCESS
Diffeacuterentes fonctions de preprocess peuvent ecirctre appeleacutees permettant agrave tous les modules et thegravemes de modifier les variables passeacutees aux templates Ces fonctions sont les suivantes pour le hook de thegraveme HOOK
template_preprocess_HOOK(array amp$variables)
MODULENAME_preprocess(array amp$variables $hook)
MODULENAME_preprocess_HOOK(array amp$variables)
THEMENAME_preprocess(array amp$variables $hook)
THEMENAME_preprocess_HOOK(array amp$variables)
8 PREPROCESS
CONCREgraveTEMENT Implements hook_preprocess_menu__account() function drupal_france_preprocess_menu__account(amp$variables) if (isset($variables[items][drupalfr_useraccountcompte])) $variables[items][drupalfr_useraccountcompte][attributes]-gtaddClass([ button primary button--user-account ])
$variables[items][drupalfr_useraccountcompte][title] = new FormattableMarkup( lti class=fa fa-user-circle-o aria-hidden=truegtltigtltspan class=sr-onlygtoriginal_titleltspangt [ original_title =gt $variables[items][drupalfr_useraccountcompte][title] ] )
JAVASCRIPT9
9 JAVASCRIPT
DRUPAL amp JAVASCRIPT Drupal integravegre de nombreuses libraries javascript (jQuery Modernizrhellip) et propose
eacutegalement des libraries drsquoutilitaires (coredrupal coredrupalSettings drupalajax drupalformhellip)
Par exemple Drupal 8 embarque
jQuery 321
jQuery UI 1121
Chaque librairie deacutefinit ses deacutependances jQuery UI deacutepend de jQuery par exemple
Lorsque lrsquoon utilise une librairie depuis un script custom il ne faut pas oublier de deacuteclarer cette deacutependance Pensez agrave tester en anonyme car aucune libraire nrsquoest chargeacutee par deacutefaut
Vous disposez de toutes les librairies deacutefinies dans le fichier corecorelibrairiesyml
9 JAVASCRIPT
CONCREgraveTEMENTPour pouvoir utiliser du code JS dans vos scripts avec Drupal la bonne pratique est drsquoencadrer votre code comme suit
file Shows status messages in a modal instead of inline (function ($ Drupal)
Displays status messages in a Foundation reveal modal DrupalbehaviorsfoundationStatusInReveal = attach function (context settings) $(status-messages)once(foundation-reveal)each(function() Move the status messages out of the highlighted region var $messages = $(this) var $region = $messagesparent() $messagesappendTo(body) $messagesfoundation(open)
This is required as this region will likely be empty after status messages are removed $regionhtml($regionhtml()replace(ng )) )
)(jQuery Drupal)
9 JAVASCRIPT
DRUPAL BEHAVIORS
Les scripts sont exeacutecuteacutes apregraves le chargement complet du DOM ($(document)ready() )Mais on a aussi parfois besoin de les reacute-exeacutecuter lorsque lrsquoon interagit avec la page (appel AJAX overlayhellip)
Pour ce faire il suffit drsquoattacher le script JS agrave lrsquoobjet Drupalbehaviors (librairie coredrupal) La fonction exeacutecuteacutee reccediloit 2 variables
context le DOM (le HTML chargeacute ou ajouteacute)
settings toutes les variables injecteacutees cocircteacute serveur
9 JAVASCRIPT
RAPPEL
Comme pour les fichiers de style les scripts JS doivent ecirctre deacuteclareacutes sous forme de bibliothegraveque via les fichiers THEMENAMEinfoyml et THEMENAMElibrariesyml
QUESTIONS 10
RTFM httpswwwdrupalorgdocs8theminghttpstwigsymfonycomdoc2x
MERCI Agrave VOUS
FlorisMoriceau
AJOUTER DES ASSETS (CSSJS)
3
3 AJOUTER DES ASSETS
CHARGER DES FICHIERS CSS amp JSCe que dit la documentation
httpswwwdrupalorgdocs8themingadding-stylesheets-css-and-javascript-js-to-a-drupal-8-theme
1 Save the CSS or JS to a file using the proper naming conventions and file structure
2 Define a library which registers these CSSJS files with your theme
3 Attach the library to all pages to specific Twig templates or target specific pages via a render element in a preprocess function
3 AJOUTER DES ASSETS
EN PRATIQUE
Lrsquoajout de fichier de CSS et de JS se fait via un systegraveme de librairie (bibliothegraveque)
Il faut tout drsquoabord deacuteclarer une librairie (ou en utiliser une existante) dans le fichier THEMENAMElibrariesyml puis demander au systegraveme de la charger Ceci peut ecirctre fait depuis le fichier THEMENAMEinfoyml
3 AJOUTER DES ASSETS
CHARGER UNE LIBRAIRIE
Lorsqursquoune librairie est appeleacutee depuis le fichier THEMENAMEinfoyml alors elle est chargeacutee sur toutes les pages degraves lors que le thegraveme est utiliseacute
Il est possible de charger sous condition une bibliothegraveque Pour cela plusieurs techniques sont disponibles
depuis un fichier de template
en utilisant le hook_page_attachments_alter()
en utilisant une fonction de preprocess
3 AJOUTER DES ASSETS
CHARGER UNE LIBRAIRIE
Directement depuis un fichier de template directement par exemple dans le fichier geacuterant lrsquoaffichage des blocs
attach_library(lsquodrupal_franceblocksrsquo)
3 AJOUTER DES ASSETS
CHARGER UNE LIBRAIRIE
Chargement drsquoune librairie depuis le fichier themesTHEMENAMETHEMENAMEtheme en utilisant la fonction de hook hook_page_attachments_alter()
Implements hook_page_attachments_alter() function drupal_france_page_attachments_alter(array amp$attachments) $attachments[attached][library][] = drupal_franceglobal
3 AJOUTER DES ASSETS
CHARGER UNE LIBRAIRIE
Chargement drsquoune librairie depuis le fichier themesTHEMENAMETHEMENAMEtheme en utilisant une fonction de preprocess
Implements hook_preprocess_HOOK() for page templates function drupal_france_preprocess_page(array amp$variables) $variables[attached][library][] = drupal_franceglobal
LES FICHIERS TEMPLATES
4
4 LES TEMPLATES
Agrave QUOI CcedilA SERT
Les templates constituent la structure des pages du sitesEn fait de chacun des eacuteleacutements qui la composent
Ce sont des fichiers html (balises ltdivgt lth1gt ltagt) avec du code Twig permettant drsquoafficher les eacuteleacutements (sous forme de variables) creacuteeacutes par Drupal
Chaque type drsquoeacuteleacutement du site possegravede son propre template
4 LES TEMPLATES
PAR EXEMPLE (CrsquoEST DU VRAI CODE)
ltdiv class=l-main row expandedgt ltmain id=main class= main_grid role=maingt if pagehighlighted spaceless pagehighlighted endspaceless endif lta id=main-contentgtltagt if breadcrumb breadcrumb endif ltsectiongt pagecontent ltsectiongt ltmaingt if pagesidebar_first ltdiv id=sidebar-first class= sidebar_first_grid column sidebargt pagesidebar_first ltdivgt endif if pagesidebar_second ltdiv id=sidebar-second class= sidebar_sec_grid column sidebargt pagesidebar_second ltdivgt endif ltdivgt
4 LES TEMPLATES
IMBRICATION DES TEMPLATES
Imaginons lrsquoappel drsquoune page de billet de blog
Et maintenant imaginons le parcours drsquoimbrication de templates pour depuis la balise lthtmlgt jusqursquoagrave la ltdivgt contenant un commentaire sous ce billet de blog
4 LES TEMPLATES
FROM ltHTMLgt TO ltDIV CLASS=lsquoCOMMENTrsquogthtmlhtmltwig
pagehtmltwig
regionhtmltwig
blockhtmltwig
nodehtmltwig nodehtmltwig
fieldhtmltwig
comment-wrapperhtmltwig
commenthtmltwig
4 LES TEMPLATES
LES TEMPLATES DEacuteRIVEacuteES
Les templates deacuteriveacutees sont des templates utiliseacutees dans un contexte preacutecis
Crsquoest le nom de la template qui indique agrave Drupal quand lrsquoutiliser
Toutes ces templates sont optionnelles et reconnues automatiquement par Drupal en fonction de leurs noms
Si des templates ne sont pas preacutesentes dans le thegraveme alors Drupal utilise ceux par deacutefaut (corethemes)
On parle de ldquotemplate deacuteriveacuteeldquo de ldquosuggestion de templateldquo ou de ldquotemplates suggeacutereacuteesldquo
Il faut vider le cache de Drupal lorsque lrsquoon ajoute des templates au thegraveme
Documentation httpswwwdrupalorgdocs8themingtwigtwig-template-naming-conventions
4 LES TEMPLATES
EXEMPLE DE SUGGESTIONS DE TEMPLATES
Template de page pagehtmltwig page--chemin--internehtmltwig sera utiliseacute lorsque lrsquoon appelle chemininterne
Ex page--fronthtmltwig cible la page drsquoaccueil
Ex page--cheminhtmltwig cible toutes les pages dont le chemin commence par chemin
Ex page--node--240htmltwig cible la page du noeud portant lrsquoid 240
Template de noeud nodehtmltwig node--type-de-noeudhtmltwig cible les noeuds de type type-de-noeud
Ex node--articlehtmltwig cible tous les noeuds de type article
4 LES TEMPLATES
TROUVER LES SUGGESTIONS
Dans le fichier wwwsitesdevelopmentservicesyml
Local development services
parameters httpresponsedebug_cacheability_headers true twigconfig debug true services cachebackendnull class DrupalCoreCacheNullBackendFactory
TWIG5
5 TWIG
UN MOTEUR DE TEMPLATE
Twig est capable drsquoafficher le contenu de nrsquoimporte quel type de variable (chaine tableau ou objet)
Il est possible de faire des boucles des conditionshellip
Chaque variable peut ecirctre filtreacutee avant drsquoecirctre afficheacutee
Les chaines peuvent ecirctre rendues traduites (la traduction est alors faite via le back-office de Drupal)
5 TWIG
LES BASES
Affiche le contenu de la variable var var
Affiche le contenu de la proprieacuteteacute title de la variable node nodetitle
Conditions if var else endif
Commentaires commentaire
Traduction trans chaine endtrans
Fonctions speacutecifiques
url(lsquoroute_namersquo)
path(lsquoentitynodecanonicalrsquo lsquonodersquo nodeid)
Les modules Twig tweak ou encore Bamboo Twig proposent encore davantage de fonctions
5 TWIG
LES FILTRES Date date|format_date(lsquomediumrsquo)
Chaine
Echappement content (par deacutefaut)
Interpreacutetation du contenu de la variable texte|raw (attention )
Placeholder text|placeholder
Exclusion content|without(lsquolinksrsquo)
string|lower (upper eacutegalement)
class_name|clean_class
id_name|clean_id
Documentation httpswwwdrupalorgdocs8themingtwigfilters-modifying-variables-in-twig-templateshttpstwigsymfonycomdoc2x
5 TWIG
CONCREgraveTEMENT if pagefooter_first or pagefooter_middle or pagefooter_last ltdiv class=l-footer row expandedgt ltfooter class=row footer medium-up-2 large-up-3gt if pagefooter_first ltdiv id=footer-first class=columngt pagefooter_first ltdivgt endif if pagefooter_middle ltdiv id=footer-middle class=columngt pagefooter_middle ltdivgt endif if pagefooter_last ltdiv id=footer-last class=columngt pagefooter_last ltdivgt endif ltfootergt ltdivgt endif ltdiv class=bottom-bar panel hiddengt ltdiv class=rowgt ltdiv class=large-12 columngt ampcopy now|date(Y) site_name All rights reserved|t ltdivgt ltdivgt ltdivgt
LES REacuteGIONS6
6 LES REacuteGIONS
STRUCTURE DE LA PAGE
adminstructureblock gt Demonstrate block regions
6 LES REacuteGIONS
DEacuteFINITION ET RENDU DES REacuteGIONS
Les reacutegions doivent ecirctre deacutefinies dans le fichier THEMENAMEinfoyml
Elles doivent ecirctre appeleacutees obligatoirement dans pagehtmltwig
6 LES REacuteGIONS
THEMENAMEINFOYML
PAGEHTMLTWIG
LE RENDU DU CONTENU
7
7 RENDU DU CONTENU
LrsquoAFFICHAGE DES CHAMPS
Pour chaque type de contenu on peut reacutegler lrsquoaffichage des champs sur adminstructuretypesmanagecontent-typedisplay ougrave content-type est le nom machine du type de contenu
Il est possible de modifier lrsquoordre des champs lrsquoapparence des eacutetiquettes le format du champ
Les reacuteglages disponibles varient en fonction du type de champ
Les champs Texte peuvent ecirctre coupeacutes
Les champs Image peuvent ecirctre afficheacutes sous forme drsquoimage drsquoURL de fichier
Les champs Date peuvent utiliser un format diffeacuterent
Ces reacuteglages peuvent ecirctre diffeacuterents selon le mode drsquoaffichage (modes ldquoPar deacutefautldquo et ldquoAccrocheldquo) =gt Cela permet par exemple de masquer un champ en mode ldquoAccrocheldquo et de lrsquoafficher en mode ldquoPar deacutefautldquo (noeud inteacutegral)
7 RENDU DU CONTENU
LrsquoAFFICHAGE DES IMAGES
Les images transmises par les utilisateurs ne sont jamais aux bonnes dimensions
Le module Image (core) va nous permettre de preacutedeacutefinir des dimensions sous forme de styles drsquoimage par exemple
Vignette 70px x 110px (mise agrave lrsquoeacutechelle)
Normal 200px x 300px (mise agrave lrsquoeacutechelle et recadrage)
Ces dimensions pourront ensuite ecirctre appliqueacutees automatiquement aux champs Image depuis lrsquoeacutecran ldquogeacuterer lrsquoaffichageldquo vu preacuteceacutedemment
7 RENDU DU CONTENU
STYLE DrsquoIMAGE
7 RENDU DU CONTENU
STYLE DrsquoIMAGE
7 RENDU DU CONTENU
ALLER PLUS LOIN La gestion et la manipulation des champs est cependant
limiteacutee dans lrsquointerface drsquoadministration
On est parfois obligeacutes de modifier le code du template correspondant agrave notre champ ou type de contenu
Les reacuteglages de lrsquoadmin sont toujours pris en compte Par exemple les styles drsquoimage choisis seront ceux utiliseacutes mecircme si lrsquoon modifie le template
7 RENDU DU CONTENU
OUgrave SONT LES CHAMPS
Dans le fichier de template des noeuds (nodehtmltwig) on nrsquoa pas directement accegraves aux champs
Crsquoest la variable content qui contient tous les champs que lrsquoon affiche et en particulier ceux ajouteacutes via Field
Comment faire pour reacutecupeacuterer les champs un par un afin de les preacutesenter diffeacuteremment
7 RENDU DU CONTENU
LA VARIABLE lsquoCONTENTrsquo
Tout le contenu drsquoun noeud est afficheacute gracircce agrave la ligne content|without(comment links)
Pour connaitre le contenu de content on utilise la fonction kint() kint(content)
On deacutecouvre alors lrsquoensemble des champs et leurs proprieacuteteacutes qui sont afficheacutees en haut de page sous forme de var_dump()
On peut afficher seacutepareacutement chacun drsquoentre eux avec le code suivant contentnom_du_champ nodecreatedtime
7 RENDU DU CONTENU
NODE DE TYPE lsquoNEWSrsquo ET FORMAT lsquoTEASERrsquo
PREPROCESS8
8 PREPROCESS
FONCTIONS DE PREPROCESS
Pour chaque template on dispose de variables que lrsquoon affiche avec le formatage voulu
Ces variables sont creacuteeacutees en amont des templates dans lesquelles elles sont utiliseacutees
On dispose de fonctions dites de preprocess qui permettent de fabriquer les variables qui sont utiliseacutees dans les templates
Il est possible drsquoeacutetendre ces fonctions pour modifier les variables envoyeacutees aux templates ou en creacuteer de nouvelles
Pour ajouter une fonction de preprocess il faut la nommer comme suit THEMENAME_preprocess_HOOK() Par exemple drupal_france_preprocess_block()
8 PREPROCESS
FONCTIONS DE PREPROCESS
Pour chaque template on dispose de variables que lrsquoon affiche avec le formatage voulu
Ces variables sont creacuteeacutees en amont des templates dans lesquelles elles sont utiliseacutees
On dispose de fonctions dites de preprocess qui permettent de fabriquer les variables qui sont utiliseacutees dans les templates
Il est possible drsquoeacutetendre ces fonctions pour modifier les variables envoyeacutees aux templates ou en creacuteer de nouvelles
Pour ajouter une fonction de preprocess il faut la nommer comme suit THEMENAME_preprocess_HOOK() Par exemple drupal_france_preprocess_block()
8 PREPROCESS
LA VARIABLE lsquo$VARIABLESrsquo
Drupal
Preprocess en amont(core modules)
Preprocess du thegraveme
TemplateCreacuteation de $variables
$variables
$variables
$variables
$variables
En mode super simplifieacute
8 PREPROCESS
APPELLER UN PREPROCESS
Diffeacuterentes fonctions de preprocess peuvent ecirctre appeleacutees permettant agrave tous les modules et thegravemes de modifier les variables passeacutees aux templates Ces fonctions sont les suivantes pour le hook de thegraveme HOOK
template_preprocess_HOOK(array amp$variables)
MODULENAME_preprocess(array amp$variables $hook)
MODULENAME_preprocess_HOOK(array amp$variables)
THEMENAME_preprocess(array amp$variables $hook)
THEMENAME_preprocess_HOOK(array amp$variables)
8 PREPROCESS
CONCREgraveTEMENT Implements hook_preprocess_menu__account() function drupal_france_preprocess_menu__account(amp$variables) if (isset($variables[items][drupalfr_useraccountcompte])) $variables[items][drupalfr_useraccountcompte][attributes]-gtaddClass([ button primary button--user-account ])
$variables[items][drupalfr_useraccountcompte][title] = new FormattableMarkup( lti class=fa fa-user-circle-o aria-hidden=truegtltigtltspan class=sr-onlygtoriginal_titleltspangt [ original_title =gt $variables[items][drupalfr_useraccountcompte][title] ] )
JAVASCRIPT9
9 JAVASCRIPT
DRUPAL amp JAVASCRIPT Drupal integravegre de nombreuses libraries javascript (jQuery Modernizrhellip) et propose
eacutegalement des libraries drsquoutilitaires (coredrupal coredrupalSettings drupalajax drupalformhellip)
Par exemple Drupal 8 embarque
jQuery 321
jQuery UI 1121
Chaque librairie deacutefinit ses deacutependances jQuery UI deacutepend de jQuery par exemple
Lorsque lrsquoon utilise une librairie depuis un script custom il ne faut pas oublier de deacuteclarer cette deacutependance Pensez agrave tester en anonyme car aucune libraire nrsquoest chargeacutee par deacutefaut
Vous disposez de toutes les librairies deacutefinies dans le fichier corecorelibrairiesyml
9 JAVASCRIPT
CONCREgraveTEMENTPour pouvoir utiliser du code JS dans vos scripts avec Drupal la bonne pratique est drsquoencadrer votre code comme suit
file Shows status messages in a modal instead of inline (function ($ Drupal)
Displays status messages in a Foundation reveal modal DrupalbehaviorsfoundationStatusInReveal = attach function (context settings) $(status-messages)once(foundation-reveal)each(function() Move the status messages out of the highlighted region var $messages = $(this) var $region = $messagesparent() $messagesappendTo(body) $messagesfoundation(open)
This is required as this region will likely be empty after status messages are removed $regionhtml($regionhtml()replace(ng )) )
)(jQuery Drupal)
9 JAVASCRIPT
DRUPAL BEHAVIORS
Les scripts sont exeacutecuteacutes apregraves le chargement complet du DOM ($(document)ready() )Mais on a aussi parfois besoin de les reacute-exeacutecuter lorsque lrsquoon interagit avec la page (appel AJAX overlayhellip)
Pour ce faire il suffit drsquoattacher le script JS agrave lrsquoobjet Drupalbehaviors (librairie coredrupal) La fonction exeacutecuteacutee reccediloit 2 variables
context le DOM (le HTML chargeacute ou ajouteacute)
settings toutes les variables injecteacutees cocircteacute serveur
9 JAVASCRIPT
RAPPEL
Comme pour les fichiers de style les scripts JS doivent ecirctre deacuteclareacutes sous forme de bibliothegraveque via les fichiers THEMENAMEinfoyml et THEMENAMElibrariesyml
QUESTIONS 10
RTFM httpswwwdrupalorgdocs8theminghttpstwigsymfonycomdoc2x
MERCI Agrave VOUS
FlorisMoriceau
3 AJOUTER DES ASSETS
CHARGER DES FICHIERS CSS amp JSCe que dit la documentation
httpswwwdrupalorgdocs8themingadding-stylesheets-css-and-javascript-js-to-a-drupal-8-theme
1 Save the CSS or JS to a file using the proper naming conventions and file structure
2 Define a library which registers these CSSJS files with your theme
3 Attach the library to all pages to specific Twig templates or target specific pages via a render element in a preprocess function
3 AJOUTER DES ASSETS
EN PRATIQUE
Lrsquoajout de fichier de CSS et de JS se fait via un systegraveme de librairie (bibliothegraveque)
Il faut tout drsquoabord deacuteclarer une librairie (ou en utiliser une existante) dans le fichier THEMENAMElibrariesyml puis demander au systegraveme de la charger Ceci peut ecirctre fait depuis le fichier THEMENAMEinfoyml
3 AJOUTER DES ASSETS
CHARGER UNE LIBRAIRIE
Lorsqursquoune librairie est appeleacutee depuis le fichier THEMENAMEinfoyml alors elle est chargeacutee sur toutes les pages degraves lors que le thegraveme est utiliseacute
Il est possible de charger sous condition une bibliothegraveque Pour cela plusieurs techniques sont disponibles
depuis un fichier de template
en utilisant le hook_page_attachments_alter()
en utilisant une fonction de preprocess
3 AJOUTER DES ASSETS
CHARGER UNE LIBRAIRIE
Directement depuis un fichier de template directement par exemple dans le fichier geacuterant lrsquoaffichage des blocs
attach_library(lsquodrupal_franceblocksrsquo)
3 AJOUTER DES ASSETS
CHARGER UNE LIBRAIRIE
Chargement drsquoune librairie depuis le fichier themesTHEMENAMETHEMENAMEtheme en utilisant la fonction de hook hook_page_attachments_alter()
Implements hook_page_attachments_alter() function drupal_france_page_attachments_alter(array amp$attachments) $attachments[attached][library][] = drupal_franceglobal
3 AJOUTER DES ASSETS
CHARGER UNE LIBRAIRIE
Chargement drsquoune librairie depuis le fichier themesTHEMENAMETHEMENAMEtheme en utilisant une fonction de preprocess
Implements hook_preprocess_HOOK() for page templates function drupal_france_preprocess_page(array amp$variables) $variables[attached][library][] = drupal_franceglobal
LES FICHIERS TEMPLATES
4
4 LES TEMPLATES
Agrave QUOI CcedilA SERT
Les templates constituent la structure des pages du sitesEn fait de chacun des eacuteleacutements qui la composent
Ce sont des fichiers html (balises ltdivgt lth1gt ltagt) avec du code Twig permettant drsquoafficher les eacuteleacutements (sous forme de variables) creacuteeacutes par Drupal
Chaque type drsquoeacuteleacutement du site possegravede son propre template
4 LES TEMPLATES
PAR EXEMPLE (CrsquoEST DU VRAI CODE)
ltdiv class=l-main row expandedgt ltmain id=main class= main_grid role=maingt if pagehighlighted spaceless pagehighlighted endspaceless endif lta id=main-contentgtltagt if breadcrumb breadcrumb endif ltsectiongt pagecontent ltsectiongt ltmaingt if pagesidebar_first ltdiv id=sidebar-first class= sidebar_first_grid column sidebargt pagesidebar_first ltdivgt endif if pagesidebar_second ltdiv id=sidebar-second class= sidebar_sec_grid column sidebargt pagesidebar_second ltdivgt endif ltdivgt
4 LES TEMPLATES
IMBRICATION DES TEMPLATES
Imaginons lrsquoappel drsquoune page de billet de blog
Et maintenant imaginons le parcours drsquoimbrication de templates pour depuis la balise lthtmlgt jusqursquoagrave la ltdivgt contenant un commentaire sous ce billet de blog
4 LES TEMPLATES
FROM ltHTMLgt TO ltDIV CLASS=lsquoCOMMENTrsquogthtmlhtmltwig
pagehtmltwig
regionhtmltwig
blockhtmltwig
nodehtmltwig nodehtmltwig
fieldhtmltwig
comment-wrapperhtmltwig
commenthtmltwig
4 LES TEMPLATES
LES TEMPLATES DEacuteRIVEacuteES
Les templates deacuteriveacutees sont des templates utiliseacutees dans un contexte preacutecis
Crsquoest le nom de la template qui indique agrave Drupal quand lrsquoutiliser
Toutes ces templates sont optionnelles et reconnues automatiquement par Drupal en fonction de leurs noms
Si des templates ne sont pas preacutesentes dans le thegraveme alors Drupal utilise ceux par deacutefaut (corethemes)
On parle de ldquotemplate deacuteriveacuteeldquo de ldquosuggestion de templateldquo ou de ldquotemplates suggeacutereacuteesldquo
Il faut vider le cache de Drupal lorsque lrsquoon ajoute des templates au thegraveme
Documentation httpswwwdrupalorgdocs8themingtwigtwig-template-naming-conventions
4 LES TEMPLATES
EXEMPLE DE SUGGESTIONS DE TEMPLATES
Template de page pagehtmltwig page--chemin--internehtmltwig sera utiliseacute lorsque lrsquoon appelle chemininterne
Ex page--fronthtmltwig cible la page drsquoaccueil
Ex page--cheminhtmltwig cible toutes les pages dont le chemin commence par chemin
Ex page--node--240htmltwig cible la page du noeud portant lrsquoid 240
Template de noeud nodehtmltwig node--type-de-noeudhtmltwig cible les noeuds de type type-de-noeud
Ex node--articlehtmltwig cible tous les noeuds de type article
4 LES TEMPLATES
TROUVER LES SUGGESTIONS
Dans le fichier wwwsitesdevelopmentservicesyml
Local development services
parameters httpresponsedebug_cacheability_headers true twigconfig debug true services cachebackendnull class DrupalCoreCacheNullBackendFactory
TWIG5
5 TWIG
UN MOTEUR DE TEMPLATE
Twig est capable drsquoafficher le contenu de nrsquoimporte quel type de variable (chaine tableau ou objet)
Il est possible de faire des boucles des conditionshellip
Chaque variable peut ecirctre filtreacutee avant drsquoecirctre afficheacutee
Les chaines peuvent ecirctre rendues traduites (la traduction est alors faite via le back-office de Drupal)
5 TWIG
LES BASES
Affiche le contenu de la variable var var
Affiche le contenu de la proprieacuteteacute title de la variable node nodetitle
Conditions if var else endif
Commentaires commentaire
Traduction trans chaine endtrans
Fonctions speacutecifiques
url(lsquoroute_namersquo)
path(lsquoentitynodecanonicalrsquo lsquonodersquo nodeid)
Les modules Twig tweak ou encore Bamboo Twig proposent encore davantage de fonctions
5 TWIG
LES FILTRES Date date|format_date(lsquomediumrsquo)
Chaine
Echappement content (par deacutefaut)
Interpreacutetation du contenu de la variable texte|raw (attention )
Placeholder text|placeholder
Exclusion content|without(lsquolinksrsquo)
string|lower (upper eacutegalement)
class_name|clean_class
id_name|clean_id
Documentation httpswwwdrupalorgdocs8themingtwigfilters-modifying-variables-in-twig-templateshttpstwigsymfonycomdoc2x
5 TWIG
CONCREgraveTEMENT if pagefooter_first or pagefooter_middle or pagefooter_last ltdiv class=l-footer row expandedgt ltfooter class=row footer medium-up-2 large-up-3gt if pagefooter_first ltdiv id=footer-first class=columngt pagefooter_first ltdivgt endif if pagefooter_middle ltdiv id=footer-middle class=columngt pagefooter_middle ltdivgt endif if pagefooter_last ltdiv id=footer-last class=columngt pagefooter_last ltdivgt endif ltfootergt ltdivgt endif ltdiv class=bottom-bar panel hiddengt ltdiv class=rowgt ltdiv class=large-12 columngt ampcopy now|date(Y) site_name All rights reserved|t ltdivgt ltdivgt ltdivgt
LES REacuteGIONS6
6 LES REacuteGIONS
STRUCTURE DE LA PAGE
adminstructureblock gt Demonstrate block regions
6 LES REacuteGIONS
DEacuteFINITION ET RENDU DES REacuteGIONS
Les reacutegions doivent ecirctre deacutefinies dans le fichier THEMENAMEinfoyml
Elles doivent ecirctre appeleacutees obligatoirement dans pagehtmltwig
6 LES REacuteGIONS
THEMENAMEINFOYML
PAGEHTMLTWIG
LE RENDU DU CONTENU
7
7 RENDU DU CONTENU
LrsquoAFFICHAGE DES CHAMPS
Pour chaque type de contenu on peut reacutegler lrsquoaffichage des champs sur adminstructuretypesmanagecontent-typedisplay ougrave content-type est le nom machine du type de contenu
Il est possible de modifier lrsquoordre des champs lrsquoapparence des eacutetiquettes le format du champ
Les reacuteglages disponibles varient en fonction du type de champ
Les champs Texte peuvent ecirctre coupeacutes
Les champs Image peuvent ecirctre afficheacutes sous forme drsquoimage drsquoURL de fichier
Les champs Date peuvent utiliser un format diffeacuterent
Ces reacuteglages peuvent ecirctre diffeacuterents selon le mode drsquoaffichage (modes ldquoPar deacutefautldquo et ldquoAccrocheldquo) =gt Cela permet par exemple de masquer un champ en mode ldquoAccrocheldquo et de lrsquoafficher en mode ldquoPar deacutefautldquo (noeud inteacutegral)
7 RENDU DU CONTENU
LrsquoAFFICHAGE DES IMAGES
Les images transmises par les utilisateurs ne sont jamais aux bonnes dimensions
Le module Image (core) va nous permettre de preacutedeacutefinir des dimensions sous forme de styles drsquoimage par exemple
Vignette 70px x 110px (mise agrave lrsquoeacutechelle)
Normal 200px x 300px (mise agrave lrsquoeacutechelle et recadrage)
Ces dimensions pourront ensuite ecirctre appliqueacutees automatiquement aux champs Image depuis lrsquoeacutecran ldquogeacuterer lrsquoaffichageldquo vu preacuteceacutedemment
7 RENDU DU CONTENU
STYLE DrsquoIMAGE
7 RENDU DU CONTENU
STYLE DrsquoIMAGE
7 RENDU DU CONTENU
ALLER PLUS LOIN La gestion et la manipulation des champs est cependant
limiteacutee dans lrsquointerface drsquoadministration
On est parfois obligeacutes de modifier le code du template correspondant agrave notre champ ou type de contenu
Les reacuteglages de lrsquoadmin sont toujours pris en compte Par exemple les styles drsquoimage choisis seront ceux utiliseacutes mecircme si lrsquoon modifie le template
7 RENDU DU CONTENU
OUgrave SONT LES CHAMPS
Dans le fichier de template des noeuds (nodehtmltwig) on nrsquoa pas directement accegraves aux champs
Crsquoest la variable content qui contient tous les champs que lrsquoon affiche et en particulier ceux ajouteacutes via Field
Comment faire pour reacutecupeacuterer les champs un par un afin de les preacutesenter diffeacuteremment
7 RENDU DU CONTENU
LA VARIABLE lsquoCONTENTrsquo
Tout le contenu drsquoun noeud est afficheacute gracircce agrave la ligne content|without(comment links)
Pour connaitre le contenu de content on utilise la fonction kint() kint(content)
On deacutecouvre alors lrsquoensemble des champs et leurs proprieacuteteacutes qui sont afficheacutees en haut de page sous forme de var_dump()
On peut afficher seacutepareacutement chacun drsquoentre eux avec le code suivant contentnom_du_champ nodecreatedtime
7 RENDU DU CONTENU
NODE DE TYPE lsquoNEWSrsquo ET FORMAT lsquoTEASERrsquo
PREPROCESS8
8 PREPROCESS
FONCTIONS DE PREPROCESS
Pour chaque template on dispose de variables que lrsquoon affiche avec le formatage voulu
Ces variables sont creacuteeacutees en amont des templates dans lesquelles elles sont utiliseacutees
On dispose de fonctions dites de preprocess qui permettent de fabriquer les variables qui sont utiliseacutees dans les templates
Il est possible drsquoeacutetendre ces fonctions pour modifier les variables envoyeacutees aux templates ou en creacuteer de nouvelles
Pour ajouter une fonction de preprocess il faut la nommer comme suit THEMENAME_preprocess_HOOK() Par exemple drupal_france_preprocess_block()
8 PREPROCESS
FONCTIONS DE PREPROCESS
Pour chaque template on dispose de variables que lrsquoon affiche avec le formatage voulu
Ces variables sont creacuteeacutees en amont des templates dans lesquelles elles sont utiliseacutees
On dispose de fonctions dites de preprocess qui permettent de fabriquer les variables qui sont utiliseacutees dans les templates
Il est possible drsquoeacutetendre ces fonctions pour modifier les variables envoyeacutees aux templates ou en creacuteer de nouvelles
Pour ajouter une fonction de preprocess il faut la nommer comme suit THEMENAME_preprocess_HOOK() Par exemple drupal_france_preprocess_block()
8 PREPROCESS
LA VARIABLE lsquo$VARIABLESrsquo
Drupal
Preprocess en amont(core modules)
Preprocess du thegraveme
TemplateCreacuteation de $variables
$variables
$variables
$variables
$variables
En mode super simplifieacute
8 PREPROCESS
APPELLER UN PREPROCESS
Diffeacuterentes fonctions de preprocess peuvent ecirctre appeleacutees permettant agrave tous les modules et thegravemes de modifier les variables passeacutees aux templates Ces fonctions sont les suivantes pour le hook de thegraveme HOOK
template_preprocess_HOOK(array amp$variables)
MODULENAME_preprocess(array amp$variables $hook)
MODULENAME_preprocess_HOOK(array amp$variables)
THEMENAME_preprocess(array amp$variables $hook)
THEMENAME_preprocess_HOOK(array amp$variables)
8 PREPROCESS
CONCREgraveTEMENT Implements hook_preprocess_menu__account() function drupal_france_preprocess_menu__account(amp$variables) if (isset($variables[items][drupalfr_useraccountcompte])) $variables[items][drupalfr_useraccountcompte][attributes]-gtaddClass([ button primary button--user-account ])
$variables[items][drupalfr_useraccountcompte][title] = new FormattableMarkup( lti class=fa fa-user-circle-o aria-hidden=truegtltigtltspan class=sr-onlygtoriginal_titleltspangt [ original_title =gt $variables[items][drupalfr_useraccountcompte][title] ] )
JAVASCRIPT9
9 JAVASCRIPT
DRUPAL amp JAVASCRIPT Drupal integravegre de nombreuses libraries javascript (jQuery Modernizrhellip) et propose
eacutegalement des libraries drsquoutilitaires (coredrupal coredrupalSettings drupalajax drupalformhellip)
Par exemple Drupal 8 embarque
jQuery 321
jQuery UI 1121
Chaque librairie deacutefinit ses deacutependances jQuery UI deacutepend de jQuery par exemple
Lorsque lrsquoon utilise une librairie depuis un script custom il ne faut pas oublier de deacuteclarer cette deacutependance Pensez agrave tester en anonyme car aucune libraire nrsquoest chargeacutee par deacutefaut
Vous disposez de toutes les librairies deacutefinies dans le fichier corecorelibrairiesyml
9 JAVASCRIPT
CONCREgraveTEMENTPour pouvoir utiliser du code JS dans vos scripts avec Drupal la bonne pratique est drsquoencadrer votre code comme suit
file Shows status messages in a modal instead of inline (function ($ Drupal)
Displays status messages in a Foundation reveal modal DrupalbehaviorsfoundationStatusInReveal = attach function (context settings) $(status-messages)once(foundation-reveal)each(function() Move the status messages out of the highlighted region var $messages = $(this) var $region = $messagesparent() $messagesappendTo(body) $messagesfoundation(open)
This is required as this region will likely be empty after status messages are removed $regionhtml($regionhtml()replace(ng )) )
)(jQuery Drupal)
9 JAVASCRIPT
DRUPAL BEHAVIORS
Les scripts sont exeacutecuteacutes apregraves le chargement complet du DOM ($(document)ready() )Mais on a aussi parfois besoin de les reacute-exeacutecuter lorsque lrsquoon interagit avec la page (appel AJAX overlayhellip)
Pour ce faire il suffit drsquoattacher le script JS agrave lrsquoobjet Drupalbehaviors (librairie coredrupal) La fonction exeacutecuteacutee reccediloit 2 variables
context le DOM (le HTML chargeacute ou ajouteacute)
settings toutes les variables injecteacutees cocircteacute serveur
9 JAVASCRIPT
RAPPEL
Comme pour les fichiers de style les scripts JS doivent ecirctre deacuteclareacutes sous forme de bibliothegraveque via les fichiers THEMENAMEinfoyml et THEMENAMElibrariesyml
QUESTIONS 10
RTFM httpswwwdrupalorgdocs8theminghttpstwigsymfonycomdoc2x
MERCI Agrave VOUS
FlorisMoriceau
3 AJOUTER DES ASSETS
EN PRATIQUE
Lrsquoajout de fichier de CSS et de JS se fait via un systegraveme de librairie (bibliothegraveque)
Il faut tout drsquoabord deacuteclarer une librairie (ou en utiliser une existante) dans le fichier THEMENAMElibrariesyml puis demander au systegraveme de la charger Ceci peut ecirctre fait depuis le fichier THEMENAMEinfoyml
3 AJOUTER DES ASSETS
CHARGER UNE LIBRAIRIE
Lorsqursquoune librairie est appeleacutee depuis le fichier THEMENAMEinfoyml alors elle est chargeacutee sur toutes les pages degraves lors que le thegraveme est utiliseacute
Il est possible de charger sous condition une bibliothegraveque Pour cela plusieurs techniques sont disponibles
depuis un fichier de template
en utilisant le hook_page_attachments_alter()
en utilisant une fonction de preprocess
3 AJOUTER DES ASSETS
CHARGER UNE LIBRAIRIE
Directement depuis un fichier de template directement par exemple dans le fichier geacuterant lrsquoaffichage des blocs
attach_library(lsquodrupal_franceblocksrsquo)
3 AJOUTER DES ASSETS
CHARGER UNE LIBRAIRIE
Chargement drsquoune librairie depuis le fichier themesTHEMENAMETHEMENAMEtheme en utilisant la fonction de hook hook_page_attachments_alter()
Implements hook_page_attachments_alter() function drupal_france_page_attachments_alter(array amp$attachments) $attachments[attached][library][] = drupal_franceglobal
3 AJOUTER DES ASSETS
CHARGER UNE LIBRAIRIE
Chargement drsquoune librairie depuis le fichier themesTHEMENAMETHEMENAMEtheme en utilisant une fonction de preprocess
Implements hook_preprocess_HOOK() for page templates function drupal_france_preprocess_page(array amp$variables) $variables[attached][library][] = drupal_franceglobal
LES FICHIERS TEMPLATES
4
4 LES TEMPLATES
Agrave QUOI CcedilA SERT
Les templates constituent la structure des pages du sitesEn fait de chacun des eacuteleacutements qui la composent
Ce sont des fichiers html (balises ltdivgt lth1gt ltagt) avec du code Twig permettant drsquoafficher les eacuteleacutements (sous forme de variables) creacuteeacutes par Drupal
Chaque type drsquoeacuteleacutement du site possegravede son propre template
4 LES TEMPLATES
PAR EXEMPLE (CrsquoEST DU VRAI CODE)
ltdiv class=l-main row expandedgt ltmain id=main class= main_grid role=maingt if pagehighlighted spaceless pagehighlighted endspaceless endif lta id=main-contentgtltagt if breadcrumb breadcrumb endif ltsectiongt pagecontent ltsectiongt ltmaingt if pagesidebar_first ltdiv id=sidebar-first class= sidebar_first_grid column sidebargt pagesidebar_first ltdivgt endif if pagesidebar_second ltdiv id=sidebar-second class= sidebar_sec_grid column sidebargt pagesidebar_second ltdivgt endif ltdivgt
4 LES TEMPLATES
IMBRICATION DES TEMPLATES
Imaginons lrsquoappel drsquoune page de billet de blog
Et maintenant imaginons le parcours drsquoimbrication de templates pour depuis la balise lthtmlgt jusqursquoagrave la ltdivgt contenant un commentaire sous ce billet de blog
4 LES TEMPLATES
FROM ltHTMLgt TO ltDIV CLASS=lsquoCOMMENTrsquogthtmlhtmltwig
pagehtmltwig
regionhtmltwig
blockhtmltwig
nodehtmltwig nodehtmltwig
fieldhtmltwig
comment-wrapperhtmltwig
commenthtmltwig
4 LES TEMPLATES
LES TEMPLATES DEacuteRIVEacuteES
Les templates deacuteriveacutees sont des templates utiliseacutees dans un contexte preacutecis
Crsquoest le nom de la template qui indique agrave Drupal quand lrsquoutiliser
Toutes ces templates sont optionnelles et reconnues automatiquement par Drupal en fonction de leurs noms
Si des templates ne sont pas preacutesentes dans le thegraveme alors Drupal utilise ceux par deacutefaut (corethemes)
On parle de ldquotemplate deacuteriveacuteeldquo de ldquosuggestion de templateldquo ou de ldquotemplates suggeacutereacuteesldquo
Il faut vider le cache de Drupal lorsque lrsquoon ajoute des templates au thegraveme
Documentation httpswwwdrupalorgdocs8themingtwigtwig-template-naming-conventions
4 LES TEMPLATES
EXEMPLE DE SUGGESTIONS DE TEMPLATES
Template de page pagehtmltwig page--chemin--internehtmltwig sera utiliseacute lorsque lrsquoon appelle chemininterne
Ex page--fronthtmltwig cible la page drsquoaccueil
Ex page--cheminhtmltwig cible toutes les pages dont le chemin commence par chemin
Ex page--node--240htmltwig cible la page du noeud portant lrsquoid 240
Template de noeud nodehtmltwig node--type-de-noeudhtmltwig cible les noeuds de type type-de-noeud
Ex node--articlehtmltwig cible tous les noeuds de type article
4 LES TEMPLATES
TROUVER LES SUGGESTIONS
Dans le fichier wwwsitesdevelopmentservicesyml
Local development services
parameters httpresponsedebug_cacheability_headers true twigconfig debug true services cachebackendnull class DrupalCoreCacheNullBackendFactory
TWIG5
5 TWIG
UN MOTEUR DE TEMPLATE
Twig est capable drsquoafficher le contenu de nrsquoimporte quel type de variable (chaine tableau ou objet)
Il est possible de faire des boucles des conditionshellip
Chaque variable peut ecirctre filtreacutee avant drsquoecirctre afficheacutee
Les chaines peuvent ecirctre rendues traduites (la traduction est alors faite via le back-office de Drupal)
5 TWIG
LES BASES
Affiche le contenu de la variable var var
Affiche le contenu de la proprieacuteteacute title de la variable node nodetitle
Conditions if var else endif
Commentaires commentaire
Traduction trans chaine endtrans
Fonctions speacutecifiques
url(lsquoroute_namersquo)
path(lsquoentitynodecanonicalrsquo lsquonodersquo nodeid)
Les modules Twig tweak ou encore Bamboo Twig proposent encore davantage de fonctions
5 TWIG
LES FILTRES Date date|format_date(lsquomediumrsquo)
Chaine
Echappement content (par deacutefaut)
Interpreacutetation du contenu de la variable texte|raw (attention )
Placeholder text|placeholder
Exclusion content|without(lsquolinksrsquo)
string|lower (upper eacutegalement)
class_name|clean_class
id_name|clean_id
Documentation httpswwwdrupalorgdocs8themingtwigfilters-modifying-variables-in-twig-templateshttpstwigsymfonycomdoc2x
5 TWIG
CONCREgraveTEMENT if pagefooter_first or pagefooter_middle or pagefooter_last ltdiv class=l-footer row expandedgt ltfooter class=row footer medium-up-2 large-up-3gt if pagefooter_first ltdiv id=footer-first class=columngt pagefooter_first ltdivgt endif if pagefooter_middle ltdiv id=footer-middle class=columngt pagefooter_middle ltdivgt endif if pagefooter_last ltdiv id=footer-last class=columngt pagefooter_last ltdivgt endif ltfootergt ltdivgt endif ltdiv class=bottom-bar panel hiddengt ltdiv class=rowgt ltdiv class=large-12 columngt ampcopy now|date(Y) site_name All rights reserved|t ltdivgt ltdivgt ltdivgt
LES REacuteGIONS6
6 LES REacuteGIONS
STRUCTURE DE LA PAGE
adminstructureblock gt Demonstrate block regions
6 LES REacuteGIONS
DEacuteFINITION ET RENDU DES REacuteGIONS
Les reacutegions doivent ecirctre deacutefinies dans le fichier THEMENAMEinfoyml
Elles doivent ecirctre appeleacutees obligatoirement dans pagehtmltwig
6 LES REacuteGIONS
THEMENAMEINFOYML
PAGEHTMLTWIG
LE RENDU DU CONTENU
7
7 RENDU DU CONTENU
LrsquoAFFICHAGE DES CHAMPS
Pour chaque type de contenu on peut reacutegler lrsquoaffichage des champs sur adminstructuretypesmanagecontent-typedisplay ougrave content-type est le nom machine du type de contenu
Il est possible de modifier lrsquoordre des champs lrsquoapparence des eacutetiquettes le format du champ
Les reacuteglages disponibles varient en fonction du type de champ
Les champs Texte peuvent ecirctre coupeacutes
Les champs Image peuvent ecirctre afficheacutes sous forme drsquoimage drsquoURL de fichier
Les champs Date peuvent utiliser un format diffeacuterent
Ces reacuteglages peuvent ecirctre diffeacuterents selon le mode drsquoaffichage (modes ldquoPar deacutefautldquo et ldquoAccrocheldquo) =gt Cela permet par exemple de masquer un champ en mode ldquoAccrocheldquo et de lrsquoafficher en mode ldquoPar deacutefautldquo (noeud inteacutegral)
7 RENDU DU CONTENU
LrsquoAFFICHAGE DES IMAGES
Les images transmises par les utilisateurs ne sont jamais aux bonnes dimensions
Le module Image (core) va nous permettre de preacutedeacutefinir des dimensions sous forme de styles drsquoimage par exemple
Vignette 70px x 110px (mise agrave lrsquoeacutechelle)
Normal 200px x 300px (mise agrave lrsquoeacutechelle et recadrage)
Ces dimensions pourront ensuite ecirctre appliqueacutees automatiquement aux champs Image depuis lrsquoeacutecran ldquogeacuterer lrsquoaffichageldquo vu preacuteceacutedemment
7 RENDU DU CONTENU
STYLE DrsquoIMAGE
7 RENDU DU CONTENU
STYLE DrsquoIMAGE
7 RENDU DU CONTENU
ALLER PLUS LOIN La gestion et la manipulation des champs est cependant
limiteacutee dans lrsquointerface drsquoadministration
On est parfois obligeacutes de modifier le code du template correspondant agrave notre champ ou type de contenu
Les reacuteglages de lrsquoadmin sont toujours pris en compte Par exemple les styles drsquoimage choisis seront ceux utiliseacutes mecircme si lrsquoon modifie le template
7 RENDU DU CONTENU
OUgrave SONT LES CHAMPS
Dans le fichier de template des noeuds (nodehtmltwig) on nrsquoa pas directement accegraves aux champs
Crsquoest la variable content qui contient tous les champs que lrsquoon affiche et en particulier ceux ajouteacutes via Field
Comment faire pour reacutecupeacuterer les champs un par un afin de les preacutesenter diffeacuteremment
7 RENDU DU CONTENU
LA VARIABLE lsquoCONTENTrsquo
Tout le contenu drsquoun noeud est afficheacute gracircce agrave la ligne content|without(comment links)
Pour connaitre le contenu de content on utilise la fonction kint() kint(content)
On deacutecouvre alors lrsquoensemble des champs et leurs proprieacuteteacutes qui sont afficheacutees en haut de page sous forme de var_dump()
On peut afficher seacutepareacutement chacun drsquoentre eux avec le code suivant contentnom_du_champ nodecreatedtime
7 RENDU DU CONTENU
NODE DE TYPE lsquoNEWSrsquo ET FORMAT lsquoTEASERrsquo
PREPROCESS8
8 PREPROCESS
FONCTIONS DE PREPROCESS
Pour chaque template on dispose de variables que lrsquoon affiche avec le formatage voulu
Ces variables sont creacuteeacutees en amont des templates dans lesquelles elles sont utiliseacutees
On dispose de fonctions dites de preprocess qui permettent de fabriquer les variables qui sont utiliseacutees dans les templates
Il est possible drsquoeacutetendre ces fonctions pour modifier les variables envoyeacutees aux templates ou en creacuteer de nouvelles
Pour ajouter une fonction de preprocess il faut la nommer comme suit THEMENAME_preprocess_HOOK() Par exemple drupal_france_preprocess_block()
8 PREPROCESS
FONCTIONS DE PREPROCESS
Pour chaque template on dispose de variables que lrsquoon affiche avec le formatage voulu
Ces variables sont creacuteeacutees en amont des templates dans lesquelles elles sont utiliseacutees
On dispose de fonctions dites de preprocess qui permettent de fabriquer les variables qui sont utiliseacutees dans les templates
Il est possible drsquoeacutetendre ces fonctions pour modifier les variables envoyeacutees aux templates ou en creacuteer de nouvelles
Pour ajouter une fonction de preprocess il faut la nommer comme suit THEMENAME_preprocess_HOOK() Par exemple drupal_france_preprocess_block()
8 PREPROCESS
LA VARIABLE lsquo$VARIABLESrsquo
Drupal
Preprocess en amont(core modules)
Preprocess du thegraveme
TemplateCreacuteation de $variables
$variables
$variables
$variables
$variables
En mode super simplifieacute
8 PREPROCESS
APPELLER UN PREPROCESS
Diffeacuterentes fonctions de preprocess peuvent ecirctre appeleacutees permettant agrave tous les modules et thegravemes de modifier les variables passeacutees aux templates Ces fonctions sont les suivantes pour le hook de thegraveme HOOK
template_preprocess_HOOK(array amp$variables)
MODULENAME_preprocess(array amp$variables $hook)
MODULENAME_preprocess_HOOK(array amp$variables)
THEMENAME_preprocess(array amp$variables $hook)
THEMENAME_preprocess_HOOK(array amp$variables)
8 PREPROCESS
CONCREgraveTEMENT Implements hook_preprocess_menu__account() function drupal_france_preprocess_menu__account(amp$variables) if (isset($variables[items][drupalfr_useraccountcompte])) $variables[items][drupalfr_useraccountcompte][attributes]-gtaddClass([ button primary button--user-account ])
$variables[items][drupalfr_useraccountcompte][title] = new FormattableMarkup( lti class=fa fa-user-circle-o aria-hidden=truegtltigtltspan class=sr-onlygtoriginal_titleltspangt [ original_title =gt $variables[items][drupalfr_useraccountcompte][title] ] )
JAVASCRIPT9
9 JAVASCRIPT
DRUPAL amp JAVASCRIPT Drupal integravegre de nombreuses libraries javascript (jQuery Modernizrhellip) et propose
eacutegalement des libraries drsquoutilitaires (coredrupal coredrupalSettings drupalajax drupalformhellip)
Par exemple Drupal 8 embarque
jQuery 321
jQuery UI 1121
Chaque librairie deacutefinit ses deacutependances jQuery UI deacutepend de jQuery par exemple
Lorsque lrsquoon utilise une librairie depuis un script custom il ne faut pas oublier de deacuteclarer cette deacutependance Pensez agrave tester en anonyme car aucune libraire nrsquoest chargeacutee par deacutefaut
Vous disposez de toutes les librairies deacutefinies dans le fichier corecorelibrairiesyml
9 JAVASCRIPT
CONCREgraveTEMENTPour pouvoir utiliser du code JS dans vos scripts avec Drupal la bonne pratique est drsquoencadrer votre code comme suit
file Shows status messages in a modal instead of inline (function ($ Drupal)
Displays status messages in a Foundation reveal modal DrupalbehaviorsfoundationStatusInReveal = attach function (context settings) $(status-messages)once(foundation-reveal)each(function() Move the status messages out of the highlighted region var $messages = $(this) var $region = $messagesparent() $messagesappendTo(body) $messagesfoundation(open)
This is required as this region will likely be empty after status messages are removed $regionhtml($regionhtml()replace(ng )) )
)(jQuery Drupal)
9 JAVASCRIPT
DRUPAL BEHAVIORS
Les scripts sont exeacutecuteacutes apregraves le chargement complet du DOM ($(document)ready() )Mais on a aussi parfois besoin de les reacute-exeacutecuter lorsque lrsquoon interagit avec la page (appel AJAX overlayhellip)
Pour ce faire il suffit drsquoattacher le script JS agrave lrsquoobjet Drupalbehaviors (librairie coredrupal) La fonction exeacutecuteacutee reccediloit 2 variables
context le DOM (le HTML chargeacute ou ajouteacute)
settings toutes les variables injecteacutees cocircteacute serveur
9 JAVASCRIPT
RAPPEL
Comme pour les fichiers de style les scripts JS doivent ecirctre deacuteclareacutes sous forme de bibliothegraveque via les fichiers THEMENAMEinfoyml et THEMENAMElibrariesyml
QUESTIONS 10
RTFM httpswwwdrupalorgdocs8theminghttpstwigsymfonycomdoc2x
MERCI Agrave VOUS
FlorisMoriceau
3 AJOUTER DES ASSETS
CHARGER UNE LIBRAIRIE
Lorsqursquoune librairie est appeleacutee depuis le fichier THEMENAMEinfoyml alors elle est chargeacutee sur toutes les pages degraves lors que le thegraveme est utiliseacute
Il est possible de charger sous condition une bibliothegraveque Pour cela plusieurs techniques sont disponibles
depuis un fichier de template
en utilisant le hook_page_attachments_alter()
en utilisant une fonction de preprocess
3 AJOUTER DES ASSETS
CHARGER UNE LIBRAIRIE
Directement depuis un fichier de template directement par exemple dans le fichier geacuterant lrsquoaffichage des blocs
attach_library(lsquodrupal_franceblocksrsquo)
3 AJOUTER DES ASSETS
CHARGER UNE LIBRAIRIE
Chargement drsquoune librairie depuis le fichier themesTHEMENAMETHEMENAMEtheme en utilisant la fonction de hook hook_page_attachments_alter()
Implements hook_page_attachments_alter() function drupal_france_page_attachments_alter(array amp$attachments) $attachments[attached][library][] = drupal_franceglobal
3 AJOUTER DES ASSETS
CHARGER UNE LIBRAIRIE
Chargement drsquoune librairie depuis le fichier themesTHEMENAMETHEMENAMEtheme en utilisant une fonction de preprocess
Implements hook_preprocess_HOOK() for page templates function drupal_france_preprocess_page(array amp$variables) $variables[attached][library][] = drupal_franceglobal
LES FICHIERS TEMPLATES
4
4 LES TEMPLATES
Agrave QUOI CcedilA SERT
Les templates constituent la structure des pages du sitesEn fait de chacun des eacuteleacutements qui la composent
Ce sont des fichiers html (balises ltdivgt lth1gt ltagt) avec du code Twig permettant drsquoafficher les eacuteleacutements (sous forme de variables) creacuteeacutes par Drupal
Chaque type drsquoeacuteleacutement du site possegravede son propre template
4 LES TEMPLATES
PAR EXEMPLE (CrsquoEST DU VRAI CODE)
ltdiv class=l-main row expandedgt ltmain id=main class= main_grid role=maingt if pagehighlighted spaceless pagehighlighted endspaceless endif lta id=main-contentgtltagt if breadcrumb breadcrumb endif ltsectiongt pagecontent ltsectiongt ltmaingt if pagesidebar_first ltdiv id=sidebar-first class= sidebar_first_grid column sidebargt pagesidebar_first ltdivgt endif if pagesidebar_second ltdiv id=sidebar-second class= sidebar_sec_grid column sidebargt pagesidebar_second ltdivgt endif ltdivgt
4 LES TEMPLATES
IMBRICATION DES TEMPLATES
Imaginons lrsquoappel drsquoune page de billet de blog
Et maintenant imaginons le parcours drsquoimbrication de templates pour depuis la balise lthtmlgt jusqursquoagrave la ltdivgt contenant un commentaire sous ce billet de blog
4 LES TEMPLATES
FROM ltHTMLgt TO ltDIV CLASS=lsquoCOMMENTrsquogthtmlhtmltwig
pagehtmltwig
regionhtmltwig
blockhtmltwig
nodehtmltwig nodehtmltwig
fieldhtmltwig
comment-wrapperhtmltwig
commenthtmltwig
4 LES TEMPLATES
LES TEMPLATES DEacuteRIVEacuteES
Les templates deacuteriveacutees sont des templates utiliseacutees dans un contexte preacutecis
Crsquoest le nom de la template qui indique agrave Drupal quand lrsquoutiliser
Toutes ces templates sont optionnelles et reconnues automatiquement par Drupal en fonction de leurs noms
Si des templates ne sont pas preacutesentes dans le thegraveme alors Drupal utilise ceux par deacutefaut (corethemes)
On parle de ldquotemplate deacuteriveacuteeldquo de ldquosuggestion de templateldquo ou de ldquotemplates suggeacutereacuteesldquo
Il faut vider le cache de Drupal lorsque lrsquoon ajoute des templates au thegraveme
Documentation httpswwwdrupalorgdocs8themingtwigtwig-template-naming-conventions
4 LES TEMPLATES
EXEMPLE DE SUGGESTIONS DE TEMPLATES
Template de page pagehtmltwig page--chemin--internehtmltwig sera utiliseacute lorsque lrsquoon appelle chemininterne
Ex page--fronthtmltwig cible la page drsquoaccueil
Ex page--cheminhtmltwig cible toutes les pages dont le chemin commence par chemin
Ex page--node--240htmltwig cible la page du noeud portant lrsquoid 240
Template de noeud nodehtmltwig node--type-de-noeudhtmltwig cible les noeuds de type type-de-noeud
Ex node--articlehtmltwig cible tous les noeuds de type article
4 LES TEMPLATES
TROUVER LES SUGGESTIONS
Dans le fichier wwwsitesdevelopmentservicesyml
Local development services
parameters httpresponsedebug_cacheability_headers true twigconfig debug true services cachebackendnull class DrupalCoreCacheNullBackendFactory
TWIG5
5 TWIG
UN MOTEUR DE TEMPLATE
Twig est capable drsquoafficher le contenu de nrsquoimporte quel type de variable (chaine tableau ou objet)
Il est possible de faire des boucles des conditionshellip
Chaque variable peut ecirctre filtreacutee avant drsquoecirctre afficheacutee
Les chaines peuvent ecirctre rendues traduites (la traduction est alors faite via le back-office de Drupal)
5 TWIG
LES BASES
Affiche le contenu de la variable var var
Affiche le contenu de la proprieacuteteacute title de la variable node nodetitle
Conditions if var else endif
Commentaires commentaire
Traduction trans chaine endtrans
Fonctions speacutecifiques
url(lsquoroute_namersquo)
path(lsquoentitynodecanonicalrsquo lsquonodersquo nodeid)
Les modules Twig tweak ou encore Bamboo Twig proposent encore davantage de fonctions
5 TWIG
LES FILTRES Date date|format_date(lsquomediumrsquo)
Chaine
Echappement content (par deacutefaut)
Interpreacutetation du contenu de la variable texte|raw (attention )
Placeholder text|placeholder
Exclusion content|without(lsquolinksrsquo)
string|lower (upper eacutegalement)
class_name|clean_class
id_name|clean_id
Documentation httpswwwdrupalorgdocs8themingtwigfilters-modifying-variables-in-twig-templateshttpstwigsymfonycomdoc2x
5 TWIG
CONCREgraveTEMENT if pagefooter_first or pagefooter_middle or pagefooter_last ltdiv class=l-footer row expandedgt ltfooter class=row footer medium-up-2 large-up-3gt if pagefooter_first ltdiv id=footer-first class=columngt pagefooter_first ltdivgt endif if pagefooter_middle ltdiv id=footer-middle class=columngt pagefooter_middle ltdivgt endif if pagefooter_last ltdiv id=footer-last class=columngt pagefooter_last ltdivgt endif ltfootergt ltdivgt endif ltdiv class=bottom-bar panel hiddengt ltdiv class=rowgt ltdiv class=large-12 columngt ampcopy now|date(Y) site_name All rights reserved|t ltdivgt ltdivgt ltdivgt
LES REacuteGIONS6
6 LES REacuteGIONS
STRUCTURE DE LA PAGE
adminstructureblock gt Demonstrate block regions
6 LES REacuteGIONS
DEacuteFINITION ET RENDU DES REacuteGIONS
Les reacutegions doivent ecirctre deacutefinies dans le fichier THEMENAMEinfoyml
Elles doivent ecirctre appeleacutees obligatoirement dans pagehtmltwig
6 LES REacuteGIONS
THEMENAMEINFOYML
PAGEHTMLTWIG
LE RENDU DU CONTENU
7
7 RENDU DU CONTENU
LrsquoAFFICHAGE DES CHAMPS
Pour chaque type de contenu on peut reacutegler lrsquoaffichage des champs sur adminstructuretypesmanagecontent-typedisplay ougrave content-type est le nom machine du type de contenu
Il est possible de modifier lrsquoordre des champs lrsquoapparence des eacutetiquettes le format du champ
Les reacuteglages disponibles varient en fonction du type de champ
Les champs Texte peuvent ecirctre coupeacutes
Les champs Image peuvent ecirctre afficheacutes sous forme drsquoimage drsquoURL de fichier
Les champs Date peuvent utiliser un format diffeacuterent
Ces reacuteglages peuvent ecirctre diffeacuterents selon le mode drsquoaffichage (modes ldquoPar deacutefautldquo et ldquoAccrocheldquo) =gt Cela permet par exemple de masquer un champ en mode ldquoAccrocheldquo et de lrsquoafficher en mode ldquoPar deacutefautldquo (noeud inteacutegral)
7 RENDU DU CONTENU
LrsquoAFFICHAGE DES IMAGES
Les images transmises par les utilisateurs ne sont jamais aux bonnes dimensions
Le module Image (core) va nous permettre de preacutedeacutefinir des dimensions sous forme de styles drsquoimage par exemple
Vignette 70px x 110px (mise agrave lrsquoeacutechelle)
Normal 200px x 300px (mise agrave lrsquoeacutechelle et recadrage)
Ces dimensions pourront ensuite ecirctre appliqueacutees automatiquement aux champs Image depuis lrsquoeacutecran ldquogeacuterer lrsquoaffichageldquo vu preacuteceacutedemment
7 RENDU DU CONTENU
STYLE DrsquoIMAGE
7 RENDU DU CONTENU
STYLE DrsquoIMAGE
7 RENDU DU CONTENU
ALLER PLUS LOIN La gestion et la manipulation des champs est cependant
limiteacutee dans lrsquointerface drsquoadministration
On est parfois obligeacutes de modifier le code du template correspondant agrave notre champ ou type de contenu
Les reacuteglages de lrsquoadmin sont toujours pris en compte Par exemple les styles drsquoimage choisis seront ceux utiliseacutes mecircme si lrsquoon modifie le template
7 RENDU DU CONTENU
OUgrave SONT LES CHAMPS
Dans le fichier de template des noeuds (nodehtmltwig) on nrsquoa pas directement accegraves aux champs
Crsquoest la variable content qui contient tous les champs que lrsquoon affiche et en particulier ceux ajouteacutes via Field
Comment faire pour reacutecupeacuterer les champs un par un afin de les preacutesenter diffeacuteremment
7 RENDU DU CONTENU
LA VARIABLE lsquoCONTENTrsquo
Tout le contenu drsquoun noeud est afficheacute gracircce agrave la ligne content|without(comment links)
Pour connaitre le contenu de content on utilise la fonction kint() kint(content)
On deacutecouvre alors lrsquoensemble des champs et leurs proprieacuteteacutes qui sont afficheacutees en haut de page sous forme de var_dump()
On peut afficher seacutepareacutement chacun drsquoentre eux avec le code suivant contentnom_du_champ nodecreatedtime
7 RENDU DU CONTENU
NODE DE TYPE lsquoNEWSrsquo ET FORMAT lsquoTEASERrsquo
PREPROCESS8
8 PREPROCESS
FONCTIONS DE PREPROCESS
Pour chaque template on dispose de variables que lrsquoon affiche avec le formatage voulu
Ces variables sont creacuteeacutees en amont des templates dans lesquelles elles sont utiliseacutees
On dispose de fonctions dites de preprocess qui permettent de fabriquer les variables qui sont utiliseacutees dans les templates
Il est possible drsquoeacutetendre ces fonctions pour modifier les variables envoyeacutees aux templates ou en creacuteer de nouvelles
Pour ajouter une fonction de preprocess il faut la nommer comme suit THEMENAME_preprocess_HOOK() Par exemple drupal_france_preprocess_block()
8 PREPROCESS
FONCTIONS DE PREPROCESS
Pour chaque template on dispose de variables que lrsquoon affiche avec le formatage voulu
Ces variables sont creacuteeacutees en amont des templates dans lesquelles elles sont utiliseacutees
On dispose de fonctions dites de preprocess qui permettent de fabriquer les variables qui sont utiliseacutees dans les templates
Il est possible drsquoeacutetendre ces fonctions pour modifier les variables envoyeacutees aux templates ou en creacuteer de nouvelles
Pour ajouter une fonction de preprocess il faut la nommer comme suit THEMENAME_preprocess_HOOK() Par exemple drupal_france_preprocess_block()
8 PREPROCESS
LA VARIABLE lsquo$VARIABLESrsquo
Drupal
Preprocess en amont(core modules)
Preprocess du thegraveme
TemplateCreacuteation de $variables
$variables
$variables
$variables
$variables
En mode super simplifieacute
8 PREPROCESS
APPELLER UN PREPROCESS
Diffeacuterentes fonctions de preprocess peuvent ecirctre appeleacutees permettant agrave tous les modules et thegravemes de modifier les variables passeacutees aux templates Ces fonctions sont les suivantes pour le hook de thegraveme HOOK
template_preprocess_HOOK(array amp$variables)
MODULENAME_preprocess(array amp$variables $hook)
MODULENAME_preprocess_HOOK(array amp$variables)
THEMENAME_preprocess(array amp$variables $hook)
THEMENAME_preprocess_HOOK(array amp$variables)
8 PREPROCESS
CONCREgraveTEMENT Implements hook_preprocess_menu__account() function drupal_france_preprocess_menu__account(amp$variables) if (isset($variables[items][drupalfr_useraccountcompte])) $variables[items][drupalfr_useraccountcompte][attributes]-gtaddClass([ button primary button--user-account ])
$variables[items][drupalfr_useraccountcompte][title] = new FormattableMarkup( lti class=fa fa-user-circle-o aria-hidden=truegtltigtltspan class=sr-onlygtoriginal_titleltspangt [ original_title =gt $variables[items][drupalfr_useraccountcompte][title] ] )
JAVASCRIPT9
9 JAVASCRIPT
DRUPAL amp JAVASCRIPT Drupal integravegre de nombreuses libraries javascript (jQuery Modernizrhellip) et propose
eacutegalement des libraries drsquoutilitaires (coredrupal coredrupalSettings drupalajax drupalformhellip)
Par exemple Drupal 8 embarque
jQuery 321
jQuery UI 1121
Chaque librairie deacutefinit ses deacutependances jQuery UI deacutepend de jQuery par exemple
Lorsque lrsquoon utilise une librairie depuis un script custom il ne faut pas oublier de deacuteclarer cette deacutependance Pensez agrave tester en anonyme car aucune libraire nrsquoest chargeacutee par deacutefaut
Vous disposez de toutes les librairies deacutefinies dans le fichier corecorelibrairiesyml
9 JAVASCRIPT
CONCREgraveTEMENTPour pouvoir utiliser du code JS dans vos scripts avec Drupal la bonne pratique est drsquoencadrer votre code comme suit
file Shows status messages in a modal instead of inline (function ($ Drupal)
Displays status messages in a Foundation reveal modal DrupalbehaviorsfoundationStatusInReveal = attach function (context settings) $(status-messages)once(foundation-reveal)each(function() Move the status messages out of the highlighted region var $messages = $(this) var $region = $messagesparent() $messagesappendTo(body) $messagesfoundation(open)
This is required as this region will likely be empty after status messages are removed $regionhtml($regionhtml()replace(ng )) )
)(jQuery Drupal)
9 JAVASCRIPT
DRUPAL BEHAVIORS
Les scripts sont exeacutecuteacutes apregraves le chargement complet du DOM ($(document)ready() )Mais on a aussi parfois besoin de les reacute-exeacutecuter lorsque lrsquoon interagit avec la page (appel AJAX overlayhellip)
Pour ce faire il suffit drsquoattacher le script JS agrave lrsquoobjet Drupalbehaviors (librairie coredrupal) La fonction exeacutecuteacutee reccediloit 2 variables
context le DOM (le HTML chargeacute ou ajouteacute)
settings toutes les variables injecteacutees cocircteacute serveur
9 JAVASCRIPT
RAPPEL
Comme pour les fichiers de style les scripts JS doivent ecirctre deacuteclareacutes sous forme de bibliothegraveque via les fichiers THEMENAMEinfoyml et THEMENAMElibrariesyml
QUESTIONS 10
RTFM httpswwwdrupalorgdocs8theminghttpstwigsymfonycomdoc2x
MERCI Agrave VOUS
FlorisMoriceau
3 AJOUTER DES ASSETS
CHARGER UNE LIBRAIRIE
Directement depuis un fichier de template directement par exemple dans le fichier geacuterant lrsquoaffichage des blocs
attach_library(lsquodrupal_franceblocksrsquo)
3 AJOUTER DES ASSETS
CHARGER UNE LIBRAIRIE
Chargement drsquoune librairie depuis le fichier themesTHEMENAMETHEMENAMEtheme en utilisant la fonction de hook hook_page_attachments_alter()
Implements hook_page_attachments_alter() function drupal_france_page_attachments_alter(array amp$attachments) $attachments[attached][library][] = drupal_franceglobal
3 AJOUTER DES ASSETS
CHARGER UNE LIBRAIRIE
Chargement drsquoune librairie depuis le fichier themesTHEMENAMETHEMENAMEtheme en utilisant une fonction de preprocess
Implements hook_preprocess_HOOK() for page templates function drupal_france_preprocess_page(array amp$variables) $variables[attached][library][] = drupal_franceglobal
LES FICHIERS TEMPLATES
4
4 LES TEMPLATES
Agrave QUOI CcedilA SERT
Les templates constituent la structure des pages du sitesEn fait de chacun des eacuteleacutements qui la composent
Ce sont des fichiers html (balises ltdivgt lth1gt ltagt) avec du code Twig permettant drsquoafficher les eacuteleacutements (sous forme de variables) creacuteeacutes par Drupal
Chaque type drsquoeacuteleacutement du site possegravede son propre template
4 LES TEMPLATES
PAR EXEMPLE (CrsquoEST DU VRAI CODE)
ltdiv class=l-main row expandedgt ltmain id=main class= main_grid role=maingt if pagehighlighted spaceless pagehighlighted endspaceless endif lta id=main-contentgtltagt if breadcrumb breadcrumb endif ltsectiongt pagecontent ltsectiongt ltmaingt if pagesidebar_first ltdiv id=sidebar-first class= sidebar_first_grid column sidebargt pagesidebar_first ltdivgt endif if pagesidebar_second ltdiv id=sidebar-second class= sidebar_sec_grid column sidebargt pagesidebar_second ltdivgt endif ltdivgt
4 LES TEMPLATES
IMBRICATION DES TEMPLATES
Imaginons lrsquoappel drsquoune page de billet de blog
Et maintenant imaginons le parcours drsquoimbrication de templates pour depuis la balise lthtmlgt jusqursquoagrave la ltdivgt contenant un commentaire sous ce billet de blog
4 LES TEMPLATES
FROM ltHTMLgt TO ltDIV CLASS=lsquoCOMMENTrsquogthtmlhtmltwig
pagehtmltwig
regionhtmltwig
blockhtmltwig
nodehtmltwig nodehtmltwig
fieldhtmltwig
comment-wrapperhtmltwig
commenthtmltwig
4 LES TEMPLATES
LES TEMPLATES DEacuteRIVEacuteES
Les templates deacuteriveacutees sont des templates utiliseacutees dans un contexte preacutecis
Crsquoest le nom de la template qui indique agrave Drupal quand lrsquoutiliser
Toutes ces templates sont optionnelles et reconnues automatiquement par Drupal en fonction de leurs noms
Si des templates ne sont pas preacutesentes dans le thegraveme alors Drupal utilise ceux par deacutefaut (corethemes)
On parle de ldquotemplate deacuteriveacuteeldquo de ldquosuggestion de templateldquo ou de ldquotemplates suggeacutereacuteesldquo
Il faut vider le cache de Drupal lorsque lrsquoon ajoute des templates au thegraveme
Documentation httpswwwdrupalorgdocs8themingtwigtwig-template-naming-conventions
4 LES TEMPLATES
EXEMPLE DE SUGGESTIONS DE TEMPLATES
Template de page pagehtmltwig page--chemin--internehtmltwig sera utiliseacute lorsque lrsquoon appelle chemininterne
Ex page--fronthtmltwig cible la page drsquoaccueil
Ex page--cheminhtmltwig cible toutes les pages dont le chemin commence par chemin
Ex page--node--240htmltwig cible la page du noeud portant lrsquoid 240
Template de noeud nodehtmltwig node--type-de-noeudhtmltwig cible les noeuds de type type-de-noeud
Ex node--articlehtmltwig cible tous les noeuds de type article
4 LES TEMPLATES
TROUVER LES SUGGESTIONS
Dans le fichier wwwsitesdevelopmentservicesyml
Local development services
parameters httpresponsedebug_cacheability_headers true twigconfig debug true services cachebackendnull class DrupalCoreCacheNullBackendFactory
TWIG5
5 TWIG
UN MOTEUR DE TEMPLATE
Twig est capable drsquoafficher le contenu de nrsquoimporte quel type de variable (chaine tableau ou objet)
Il est possible de faire des boucles des conditionshellip
Chaque variable peut ecirctre filtreacutee avant drsquoecirctre afficheacutee
Les chaines peuvent ecirctre rendues traduites (la traduction est alors faite via le back-office de Drupal)
5 TWIG
LES BASES
Affiche le contenu de la variable var var
Affiche le contenu de la proprieacuteteacute title de la variable node nodetitle
Conditions if var else endif
Commentaires commentaire
Traduction trans chaine endtrans
Fonctions speacutecifiques
url(lsquoroute_namersquo)
path(lsquoentitynodecanonicalrsquo lsquonodersquo nodeid)
Les modules Twig tweak ou encore Bamboo Twig proposent encore davantage de fonctions
5 TWIG
LES FILTRES Date date|format_date(lsquomediumrsquo)
Chaine
Echappement content (par deacutefaut)
Interpreacutetation du contenu de la variable texte|raw (attention )
Placeholder text|placeholder
Exclusion content|without(lsquolinksrsquo)
string|lower (upper eacutegalement)
class_name|clean_class
id_name|clean_id
Documentation httpswwwdrupalorgdocs8themingtwigfilters-modifying-variables-in-twig-templateshttpstwigsymfonycomdoc2x
5 TWIG
CONCREgraveTEMENT if pagefooter_first or pagefooter_middle or pagefooter_last ltdiv class=l-footer row expandedgt ltfooter class=row footer medium-up-2 large-up-3gt if pagefooter_first ltdiv id=footer-first class=columngt pagefooter_first ltdivgt endif if pagefooter_middle ltdiv id=footer-middle class=columngt pagefooter_middle ltdivgt endif if pagefooter_last ltdiv id=footer-last class=columngt pagefooter_last ltdivgt endif ltfootergt ltdivgt endif ltdiv class=bottom-bar panel hiddengt ltdiv class=rowgt ltdiv class=large-12 columngt ampcopy now|date(Y) site_name All rights reserved|t ltdivgt ltdivgt ltdivgt
LES REacuteGIONS6
6 LES REacuteGIONS
STRUCTURE DE LA PAGE
adminstructureblock gt Demonstrate block regions
6 LES REacuteGIONS
DEacuteFINITION ET RENDU DES REacuteGIONS
Les reacutegions doivent ecirctre deacutefinies dans le fichier THEMENAMEinfoyml
Elles doivent ecirctre appeleacutees obligatoirement dans pagehtmltwig
6 LES REacuteGIONS
THEMENAMEINFOYML
PAGEHTMLTWIG
LE RENDU DU CONTENU
7
7 RENDU DU CONTENU
LrsquoAFFICHAGE DES CHAMPS
Pour chaque type de contenu on peut reacutegler lrsquoaffichage des champs sur adminstructuretypesmanagecontent-typedisplay ougrave content-type est le nom machine du type de contenu
Il est possible de modifier lrsquoordre des champs lrsquoapparence des eacutetiquettes le format du champ
Les reacuteglages disponibles varient en fonction du type de champ
Les champs Texte peuvent ecirctre coupeacutes
Les champs Image peuvent ecirctre afficheacutes sous forme drsquoimage drsquoURL de fichier
Les champs Date peuvent utiliser un format diffeacuterent
Ces reacuteglages peuvent ecirctre diffeacuterents selon le mode drsquoaffichage (modes ldquoPar deacutefautldquo et ldquoAccrocheldquo) =gt Cela permet par exemple de masquer un champ en mode ldquoAccrocheldquo et de lrsquoafficher en mode ldquoPar deacutefautldquo (noeud inteacutegral)
7 RENDU DU CONTENU
LrsquoAFFICHAGE DES IMAGES
Les images transmises par les utilisateurs ne sont jamais aux bonnes dimensions
Le module Image (core) va nous permettre de preacutedeacutefinir des dimensions sous forme de styles drsquoimage par exemple
Vignette 70px x 110px (mise agrave lrsquoeacutechelle)
Normal 200px x 300px (mise agrave lrsquoeacutechelle et recadrage)
Ces dimensions pourront ensuite ecirctre appliqueacutees automatiquement aux champs Image depuis lrsquoeacutecran ldquogeacuterer lrsquoaffichageldquo vu preacuteceacutedemment
7 RENDU DU CONTENU
STYLE DrsquoIMAGE
7 RENDU DU CONTENU
STYLE DrsquoIMAGE
7 RENDU DU CONTENU
ALLER PLUS LOIN La gestion et la manipulation des champs est cependant
limiteacutee dans lrsquointerface drsquoadministration
On est parfois obligeacutes de modifier le code du template correspondant agrave notre champ ou type de contenu
Les reacuteglages de lrsquoadmin sont toujours pris en compte Par exemple les styles drsquoimage choisis seront ceux utiliseacutes mecircme si lrsquoon modifie le template
7 RENDU DU CONTENU
OUgrave SONT LES CHAMPS
Dans le fichier de template des noeuds (nodehtmltwig) on nrsquoa pas directement accegraves aux champs
Crsquoest la variable content qui contient tous les champs que lrsquoon affiche et en particulier ceux ajouteacutes via Field
Comment faire pour reacutecupeacuterer les champs un par un afin de les preacutesenter diffeacuteremment
7 RENDU DU CONTENU
LA VARIABLE lsquoCONTENTrsquo
Tout le contenu drsquoun noeud est afficheacute gracircce agrave la ligne content|without(comment links)
Pour connaitre le contenu de content on utilise la fonction kint() kint(content)
On deacutecouvre alors lrsquoensemble des champs et leurs proprieacuteteacutes qui sont afficheacutees en haut de page sous forme de var_dump()
On peut afficher seacutepareacutement chacun drsquoentre eux avec le code suivant contentnom_du_champ nodecreatedtime
7 RENDU DU CONTENU
NODE DE TYPE lsquoNEWSrsquo ET FORMAT lsquoTEASERrsquo
PREPROCESS8
8 PREPROCESS
FONCTIONS DE PREPROCESS
Pour chaque template on dispose de variables que lrsquoon affiche avec le formatage voulu
Ces variables sont creacuteeacutees en amont des templates dans lesquelles elles sont utiliseacutees
On dispose de fonctions dites de preprocess qui permettent de fabriquer les variables qui sont utiliseacutees dans les templates
Il est possible drsquoeacutetendre ces fonctions pour modifier les variables envoyeacutees aux templates ou en creacuteer de nouvelles
Pour ajouter une fonction de preprocess il faut la nommer comme suit THEMENAME_preprocess_HOOK() Par exemple drupal_france_preprocess_block()
8 PREPROCESS
FONCTIONS DE PREPROCESS
Pour chaque template on dispose de variables que lrsquoon affiche avec le formatage voulu
Ces variables sont creacuteeacutees en amont des templates dans lesquelles elles sont utiliseacutees
On dispose de fonctions dites de preprocess qui permettent de fabriquer les variables qui sont utiliseacutees dans les templates
Il est possible drsquoeacutetendre ces fonctions pour modifier les variables envoyeacutees aux templates ou en creacuteer de nouvelles
Pour ajouter une fonction de preprocess il faut la nommer comme suit THEMENAME_preprocess_HOOK() Par exemple drupal_france_preprocess_block()
8 PREPROCESS
LA VARIABLE lsquo$VARIABLESrsquo
Drupal
Preprocess en amont(core modules)
Preprocess du thegraveme
TemplateCreacuteation de $variables
$variables
$variables
$variables
$variables
En mode super simplifieacute
8 PREPROCESS
APPELLER UN PREPROCESS
Diffeacuterentes fonctions de preprocess peuvent ecirctre appeleacutees permettant agrave tous les modules et thegravemes de modifier les variables passeacutees aux templates Ces fonctions sont les suivantes pour le hook de thegraveme HOOK
template_preprocess_HOOK(array amp$variables)
MODULENAME_preprocess(array amp$variables $hook)
MODULENAME_preprocess_HOOK(array amp$variables)
THEMENAME_preprocess(array amp$variables $hook)
THEMENAME_preprocess_HOOK(array amp$variables)
8 PREPROCESS
CONCREgraveTEMENT Implements hook_preprocess_menu__account() function drupal_france_preprocess_menu__account(amp$variables) if (isset($variables[items][drupalfr_useraccountcompte])) $variables[items][drupalfr_useraccountcompte][attributes]-gtaddClass([ button primary button--user-account ])
$variables[items][drupalfr_useraccountcompte][title] = new FormattableMarkup( lti class=fa fa-user-circle-o aria-hidden=truegtltigtltspan class=sr-onlygtoriginal_titleltspangt [ original_title =gt $variables[items][drupalfr_useraccountcompte][title] ] )
JAVASCRIPT9
9 JAVASCRIPT
DRUPAL amp JAVASCRIPT Drupal integravegre de nombreuses libraries javascript (jQuery Modernizrhellip) et propose
eacutegalement des libraries drsquoutilitaires (coredrupal coredrupalSettings drupalajax drupalformhellip)
Par exemple Drupal 8 embarque
jQuery 321
jQuery UI 1121
Chaque librairie deacutefinit ses deacutependances jQuery UI deacutepend de jQuery par exemple
Lorsque lrsquoon utilise une librairie depuis un script custom il ne faut pas oublier de deacuteclarer cette deacutependance Pensez agrave tester en anonyme car aucune libraire nrsquoest chargeacutee par deacutefaut
Vous disposez de toutes les librairies deacutefinies dans le fichier corecorelibrairiesyml
9 JAVASCRIPT
CONCREgraveTEMENTPour pouvoir utiliser du code JS dans vos scripts avec Drupal la bonne pratique est drsquoencadrer votre code comme suit
file Shows status messages in a modal instead of inline (function ($ Drupal)
Displays status messages in a Foundation reveal modal DrupalbehaviorsfoundationStatusInReveal = attach function (context settings) $(status-messages)once(foundation-reveal)each(function() Move the status messages out of the highlighted region var $messages = $(this) var $region = $messagesparent() $messagesappendTo(body) $messagesfoundation(open)
This is required as this region will likely be empty after status messages are removed $regionhtml($regionhtml()replace(ng )) )
)(jQuery Drupal)
9 JAVASCRIPT
DRUPAL BEHAVIORS
Les scripts sont exeacutecuteacutes apregraves le chargement complet du DOM ($(document)ready() )Mais on a aussi parfois besoin de les reacute-exeacutecuter lorsque lrsquoon interagit avec la page (appel AJAX overlayhellip)
Pour ce faire il suffit drsquoattacher le script JS agrave lrsquoobjet Drupalbehaviors (librairie coredrupal) La fonction exeacutecuteacutee reccediloit 2 variables
context le DOM (le HTML chargeacute ou ajouteacute)
settings toutes les variables injecteacutees cocircteacute serveur
9 JAVASCRIPT
RAPPEL
Comme pour les fichiers de style les scripts JS doivent ecirctre deacuteclareacutes sous forme de bibliothegraveque via les fichiers THEMENAMEinfoyml et THEMENAMElibrariesyml
QUESTIONS 10
RTFM httpswwwdrupalorgdocs8theminghttpstwigsymfonycomdoc2x
MERCI Agrave VOUS
FlorisMoriceau
3 AJOUTER DES ASSETS
CHARGER UNE LIBRAIRIE
Chargement drsquoune librairie depuis le fichier themesTHEMENAMETHEMENAMEtheme en utilisant la fonction de hook hook_page_attachments_alter()
Implements hook_page_attachments_alter() function drupal_france_page_attachments_alter(array amp$attachments) $attachments[attached][library][] = drupal_franceglobal
3 AJOUTER DES ASSETS
CHARGER UNE LIBRAIRIE
Chargement drsquoune librairie depuis le fichier themesTHEMENAMETHEMENAMEtheme en utilisant une fonction de preprocess
Implements hook_preprocess_HOOK() for page templates function drupal_france_preprocess_page(array amp$variables) $variables[attached][library][] = drupal_franceglobal
LES FICHIERS TEMPLATES
4
4 LES TEMPLATES
Agrave QUOI CcedilA SERT
Les templates constituent la structure des pages du sitesEn fait de chacun des eacuteleacutements qui la composent
Ce sont des fichiers html (balises ltdivgt lth1gt ltagt) avec du code Twig permettant drsquoafficher les eacuteleacutements (sous forme de variables) creacuteeacutes par Drupal
Chaque type drsquoeacuteleacutement du site possegravede son propre template
4 LES TEMPLATES
PAR EXEMPLE (CrsquoEST DU VRAI CODE)
ltdiv class=l-main row expandedgt ltmain id=main class= main_grid role=maingt if pagehighlighted spaceless pagehighlighted endspaceless endif lta id=main-contentgtltagt if breadcrumb breadcrumb endif ltsectiongt pagecontent ltsectiongt ltmaingt if pagesidebar_first ltdiv id=sidebar-first class= sidebar_first_grid column sidebargt pagesidebar_first ltdivgt endif if pagesidebar_second ltdiv id=sidebar-second class= sidebar_sec_grid column sidebargt pagesidebar_second ltdivgt endif ltdivgt
4 LES TEMPLATES
IMBRICATION DES TEMPLATES
Imaginons lrsquoappel drsquoune page de billet de blog
Et maintenant imaginons le parcours drsquoimbrication de templates pour depuis la balise lthtmlgt jusqursquoagrave la ltdivgt contenant un commentaire sous ce billet de blog
4 LES TEMPLATES
FROM ltHTMLgt TO ltDIV CLASS=lsquoCOMMENTrsquogthtmlhtmltwig
pagehtmltwig
regionhtmltwig
blockhtmltwig
nodehtmltwig nodehtmltwig
fieldhtmltwig
comment-wrapperhtmltwig
commenthtmltwig
4 LES TEMPLATES
LES TEMPLATES DEacuteRIVEacuteES
Les templates deacuteriveacutees sont des templates utiliseacutees dans un contexte preacutecis
Crsquoest le nom de la template qui indique agrave Drupal quand lrsquoutiliser
Toutes ces templates sont optionnelles et reconnues automatiquement par Drupal en fonction de leurs noms
Si des templates ne sont pas preacutesentes dans le thegraveme alors Drupal utilise ceux par deacutefaut (corethemes)
On parle de ldquotemplate deacuteriveacuteeldquo de ldquosuggestion de templateldquo ou de ldquotemplates suggeacutereacuteesldquo
Il faut vider le cache de Drupal lorsque lrsquoon ajoute des templates au thegraveme
Documentation httpswwwdrupalorgdocs8themingtwigtwig-template-naming-conventions
4 LES TEMPLATES
EXEMPLE DE SUGGESTIONS DE TEMPLATES
Template de page pagehtmltwig page--chemin--internehtmltwig sera utiliseacute lorsque lrsquoon appelle chemininterne
Ex page--fronthtmltwig cible la page drsquoaccueil
Ex page--cheminhtmltwig cible toutes les pages dont le chemin commence par chemin
Ex page--node--240htmltwig cible la page du noeud portant lrsquoid 240
Template de noeud nodehtmltwig node--type-de-noeudhtmltwig cible les noeuds de type type-de-noeud
Ex node--articlehtmltwig cible tous les noeuds de type article
4 LES TEMPLATES
TROUVER LES SUGGESTIONS
Dans le fichier wwwsitesdevelopmentservicesyml
Local development services
parameters httpresponsedebug_cacheability_headers true twigconfig debug true services cachebackendnull class DrupalCoreCacheNullBackendFactory
TWIG5
5 TWIG
UN MOTEUR DE TEMPLATE
Twig est capable drsquoafficher le contenu de nrsquoimporte quel type de variable (chaine tableau ou objet)
Il est possible de faire des boucles des conditionshellip
Chaque variable peut ecirctre filtreacutee avant drsquoecirctre afficheacutee
Les chaines peuvent ecirctre rendues traduites (la traduction est alors faite via le back-office de Drupal)
5 TWIG
LES BASES
Affiche le contenu de la variable var var
Affiche le contenu de la proprieacuteteacute title de la variable node nodetitle
Conditions if var else endif
Commentaires commentaire
Traduction trans chaine endtrans
Fonctions speacutecifiques
url(lsquoroute_namersquo)
path(lsquoentitynodecanonicalrsquo lsquonodersquo nodeid)
Les modules Twig tweak ou encore Bamboo Twig proposent encore davantage de fonctions
5 TWIG
LES FILTRES Date date|format_date(lsquomediumrsquo)
Chaine
Echappement content (par deacutefaut)
Interpreacutetation du contenu de la variable texte|raw (attention )
Placeholder text|placeholder
Exclusion content|without(lsquolinksrsquo)
string|lower (upper eacutegalement)
class_name|clean_class
id_name|clean_id
Documentation httpswwwdrupalorgdocs8themingtwigfilters-modifying-variables-in-twig-templateshttpstwigsymfonycomdoc2x
5 TWIG
CONCREgraveTEMENT if pagefooter_first or pagefooter_middle or pagefooter_last ltdiv class=l-footer row expandedgt ltfooter class=row footer medium-up-2 large-up-3gt if pagefooter_first ltdiv id=footer-first class=columngt pagefooter_first ltdivgt endif if pagefooter_middle ltdiv id=footer-middle class=columngt pagefooter_middle ltdivgt endif if pagefooter_last ltdiv id=footer-last class=columngt pagefooter_last ltdivgt endif ltfootergt ltdivgt endif ltdiv class=bottom-bar panel hiddengt ltdiv class=rowgt ltdiv class=large-12 columngt ampcopy now|date(Y) site_name All rights reserved|t ltdivgt ltdivgt ltdivgt
LES REacuteGIONS6
6 LES REacuteGIONS
STRUCTURE DE LA PAGE
adminstructureblock gt Demonstrate block regions
6 LES REacuteGIONS
DEacuteFINITION ET RENDU DES REacuteGIONS
Les reacutegions doivent ecirctre deacutefinies dans le fichier THEMENAMEinfoyml
Elles doivent ecirctre appeleacutees obligatoirement dans pagehtmltwig
6 LES REacuteGIONS
THEMENAMEINFOYML
PAGEHTMLTWIG
LE RENDU DU CONTENU
7
7 RENDU DU CONTENU
LrsquoAFFICHAGE DES CHAMPS
Pour chaque type de contenu on peut reacutegler lrsquoaffichage des champs sur adminstructuretypesmanagecontent-typedisplay ougrave content-type est le nom machine du type de contenu
Il est possible de modifier lrsquoordre des champs lrsquoapparence des eacutetiquettes le format du champ
Les reacuteglages disponibles varient en fonction du type de champ
Les champs Texte peuvent ecirctre coupeacutes
Les champs Image peuvent ecirctre afficheacutes sous forme drsquoimage drsquoURL de fichier
Les champs Date peuvent utiliser un format diffeacuterent
Ces reacuteglages peuvent ecirctre diffeacuterents selon le mode drsquoaffichage (modes ldquoPar deacutefautldquo et ldquoAccrocheldquo) =gt Cela permet par exemple de masquer un champ en mode ldquoAccrocheldquo et de lrsquoafficher en mode ldquoPar deacutefautldquo (noeud inteacutegral)
7 RENDU DU CONTENU
LrsquoAFFICHAGE DES IMAGES
Les images transmises par les utilisateurs ne sont jamais aux bonnes dimensions
Le module Image (core) va nous permettre de preacutedeacutefinir des dimensions sous forme de styles drsquoimage par exemple
Vignette 70px x 110px (mise agrave lrsquoeacutechelle)
Normal 200px x 300px (mise agrave lrsquoeacutechelle et recadrage)
Ces dimensions pourront ensuite ecirctre appliqueacutees automatiquement aux champs Image depuis lrsquoeacutecran ldquogeacuterer lrsquoaffichageldquo vu preacuteceacutedemment
7 RENDU DU CONTENU
STYLE DrsquoIMAGE
7 RENDU DU CONTENU
STYLE DrsquoIMAGE
7 RENDU DU CONTENU
ALLER PLUS LOIN La gestion et la manipulation des champs est cependant
limiteacutee dans lrsquointerface drsquoadministration
On est parfois obligeacutes de modifier le code du template correspondant agrave notre champ ou type de contenu
Les reacuteglages de lrsquoadmin sont toujours pris en compte Par exemple les styles drsquoimage choisis seront ceux utiliseacutes mecircme si lrsquoon modifie le template
7 RENDU DU CONTENU
OUgrave SONT LES CHAMPS
Dans le fichier de template des noeuds (nodehtmltwig) on nrsquoa pas directement accegraves aux champs
Crsquoest la variable content qui contient tous les champs que lrsquoon affiche et en particulier ceux ajouteacutes via Field
Comment faire pour reacutecupeacuterer les champs un par un afin de les preacutesenter diffeacuteremment
7 RENDU DU CONTENU
LA VARIABLE lsquoCONTENTrsquo
Tout le contenu drsquoun noeud est afficheacute gracircce agrave la ligne content|without(comment links)
Pour connaitre le contenu de content on utilise la fonction kint() kint(content)
On deacutecouvre alors lrsquoensemble des champs et leurs proprieacuteteacutes qui sont afficheacutees en haut de page sous forme de var_dump()
On peut afficher seacutepareacutement chacun drsquoentre eux avec le code suivant contentnom_du_champ nodecreatedtime
7 RENDU DU CONTENU
NODE DE TYPE lsquoNEWSrsquo ET FORMAT lsquoTEASERrsquo
PREPROCESS8
8 PREPROCESS
FONCTIONS DE PREPROCESS
Pour chaque template on dispose de variables que lrsquoon affiche avec le formatage voulu
Ces variables sont creacuteeacutees en amont des templates dans lesquelles elles sont utiliseacutees
On dispose de fonctions dites de preprocess qui permettent de fabriquer les variables qui sont utiliseacutees dans les templates
Il est possible drsquoeacutetendre ces fonctions pour modifier les variables envoyeacutees aux templates ou en creacuteer de nouvelles
Pour ajouter une fonction de preprocess il faut la nommer comme suit THEMENAME_preprocess_HOOK() Par exemple drupal_france_preprocess_block()
8 PREPROCESS
FONCTIONS DE PREPROCESS
Pour chaque template on dispose de variables que lrsquoon affiche avec le formatage voulu
Ces variables sont creacuteeacutees en amont des templates dans lesquelles elles sont utiliseacutees
On dispose de fonctions dites de preprocess qui permettent de fabriquer les variables qui sont utiliseacutees dans les templates
Il est possible drsquoeacutetendre ces fonctions pour modifier les variables envoyeacutees aux templates ou en creacuteer de nouvelles
Pour ajouter une fonction de preprocess il faut la nommer comme suit THEMENAME_preprocess_HOOK() Par exemple drupal_france_preprocess_block()
8 PREPROCESS
LA VARIABLE lsquo$VARIABLESrsquo
Drupal
Preprocess en amont(core modules)
Preprocess du thegraveme
TemplateCreacuteation de $variables
$variables
$variables
$variables
$variables
En mode super simplifieacute
8 PREPROCESS
APPELLER UN PREPROCESS
Diffeacuterentes fonctions de preprocess peuvent ecirctre appeleacutees permettant agrave tous les modules et thegravemes de modifier les variables passeacutees aux templates Ces fonctions sont les suivantes pour le hook de thegraveme HOOK
template_preprocess_HOOK(array amp$variables)
MODULENAME_preprocess(array amp$variables $hook)
MODULENAME_preprocess_HOOK(array amp$variables)
THEMENAME_preprocess(array amp$variables $hook)
THEMENAME_preprocess_HOOK(array amp$variables)
8 PREPROCESS
CONCREgraveTEMENT Implements hook_preprocess_menu__account() function drupal_france_preprocess_menu__account(amp$variables) if (isset($variables[items][drupalfr_useraccountcompte])) $variables[items][drupalfr_useraccountcompte][attributes]-gtaddClass([ button primary button--user-account ])
$variables[items][drupalfr_useraccountcompte][title] = new FormattableMarkup( lti class=fa fa-user-circle-o aria-hidden=truegtltigtltspan class=sr-onlygtoriginal_titleltspangt [ original_title =gt $variables[items][drupalfr_useraccountcompte][title] ] )
JAVASCRIPT9
9 JAVASCRIPT
DRUPAL amp JAVASCRIPT Drupal integravegre de nombreuses libraries javascript (jQuery Modernizrhellip) et propose
eacutegalement des libraries drsquoutilitaires (coredrupal coredrupalSettings drupalajax drupalformhellip)
Par exemple Drupal 8 embarque
jQuery 321
jQuery UI 1121
Chaque librairie deacutefinit ses deacutependances jQuery UI deacutepend de jQuery par exemple
Lorsque lrsquoon utilise une librairie depuis un script custom il ne faut pas oublier de deacuteclarer cette deacutependance Pensez agrave tester en anonyme car aucune libraire nrsquoest chargeacutee par deacutefaut
Vous disposez de toutes les librairies deacutefinies dans le fichier corecorelibrairiesyml
9 JAVASCRIPT
CONCREgraveTEMENTPour pouvoir utiliser du code JS dans vos scripts avec Drupal la bonne pratique est drsquoencadrer votre code comme suit
file Shows status messages in a modal instead of inline (function ($ Drupal)
Displays status messages in a Foundation reveal modal DrupalbehaviorsfoundationStatusInReveal = attach function (context settings) $(status-messages)once(foundation-reveal)each(function() Move the status messages out of the highlighted region var $messages = $(this) var $region = $messagesparent() $messagesappendTo(body) $messagesfoundation(open)
This is required as this region will likely be empty after status messages are removed $regionhtml($regionhtml()replace(ng )) )
)(jQuery Drupal)
9 JAVASCRIPT
DRUPAL BEHAVIORS
Les scripts sont exeacutecuteacutes apregraves le chargement complet du DOM ($(document)ready() )Mais on a aussi parfois besoin de les reacute-exeacutecuter lorsque lrsquoon interagit avec la page (appel AJAX overlayhellip)
Pour ce faire il suffit drsquoattacher le script JS agrave lrsquoobjet Drupalbehaviors (librairie coredrupal) La fonction exeacutecuteacutee reccediloit 2 variables
context le DOM (le HTML chargeacute ou ajouteacute)
settings toutes les variables injecteacutees cocircteacute serveur
9 JAVASCRIPT
RAPPEL
Comme pour les fichiers de style les scripts JS doivent ecirctre deacuteclareacutes sous forme de bibliothegraveque via les fichiers THEMENAMEinfoyml et THEMENAMElibrariesyml
QUESTIONS 10
RTFM httpswwwdrupalorgdocs8theminghttpstwigsymfonycomdoc2x
MERCI Agrave VOUS
FlorisMoriceau
3 AJOUTER DES ASSETS
CHARGER UNE LIBRAIRIE
Chargement drsquoune librairie depuis le fichier themesTHEMENAMETHEMENAMEtheme en utilisant une fonction de preprocess
Implements hook_preprocess_HOOK() for page templates function drupal_france_preprocess_page(array amp$variables) $variables[attached][library][] = drupal_franceglobal
LES FICHIERS TEMPLATES
4
4 LES TEMPLATES
Agrave QUOI CcedilA SERT
Les templates constituent la structure des pages du sitesEn fait de chacun des eacuteleacutements qui la composent
Ce sont des fichiers html (balises ltdivgt lth1gt ltagt) avec du code Twig permettant drsquoafficher les eacuteleacutements (sous forme de variables) creacuteeacutes par Drupal
Chaque type drsquoeacuteleacutement du site possegravede son propre template
4 LES TEMPLATES
PAR EXEMPLE (CrsquoEST DU VRAI CODE)
ltdiv class=l-main row expandedgt ltmain id=main class= main_grid role=maingt if pagehighlighted spaceless pagehighlighted endspaceless endif lta id=main-contentgtltagt if breadcrumb breadcrumb endif ltsectiongt pagecontent ltsectiongt ltmaingt if pagesidebar_first ltdiv id=sidebar-first class= sidebar_first_grid column sidebargt pagesidebar_first ltdivgt endif if pagesidebar_second ltdiv id=sidebar-second class= sidebar_sec_grid column sidebargt pagesidebar_second ltdivgt endif ltdivgt
4 LES TEMPLATES
IMBRICATION DES TEMPLATES
Imaginons lrsquoappel drsquoune page de billet de blog
Et maintenant imaginons le parcours drsquoimbrication de templates pour depuis la balise lthtmlgt jusqursquoagrave la ltdivgt contenant un commentaire sous ce billet de blog
4 LES TEMPLATES
FROM ltHTMLgt TO ltDIV CLASS=lsquoCOMMENTrsquogthtmlhtmltwig
pagehtmltwig
regionhtmltwig
blockhtmltwig
nodehtmltwig nodehtmltwig
fieldhtmltwig
comment-wrapperhtmltwig
commenthtmltwig
4 LES TEMPLATES
LES TEMPLATES DEacuteRIVEacuteES
Les templates deacuteriveacutees sont des templates utiliseacutees dans un contexte preacutecis
Crsquoest le nom de la template qui indique agrave Drupal quand lrsquoutiliser
Toutes ces templates sont optionnelles et reconnues automatiquement par Drupal en fonction de leurs noms
Si des templates ne sont pas preacutesentes dans le thegraveme alors Drupal utilise ceux par deacutefaut (corethemes)
On parle de ldquotemplate deacuteriveacuteeldquo de ldquosuggestion de templateldquo ou de ldquotemplates suggeacutereacuteesldquo
Il faut vider le cache de Drupal lorsque lrsquoon ajoute des templates au thegraveme
Documentation httpswwwdrupalorgdocs8themingtwigtwig-template-naming-conventions
4 LES TEMPLATES
EXEMPLE DE SUGGESTIONS DE TEMPLATES
Template de page pagehtmltwig page--chemin--internehtmltwig sera utiliseacute lorsque lrsquoon appelle chemininterne
Ex page--fronthtmltwig cible la page drsquoaccueil
Ex page--cheminhtmltwig cible toutes les pages dont le chemin commence par chemin
Ex page--node--240htmltwig cible la page du noeud portant lrsquoid 240
Template de noeud nodehtmltwig node--type-de-noeudhtmltwig cible les noeuds de type type-de-noeud
Ex node--articlehtmltwig cible tous les noeuds de type article
4 LES TEMPLATES
TROUVER LES SUGGESTIONS
Dans le fichier wwwsitesdevelopmentservicesyml
Local development services
parameters httpresponsedebug_cacheability_headers true twigconfig debug true services cachebackendnull class DrupalCoreCacheNullBackendFactory
TWIG5
5 TWIG
UN MOTEUR DE TEMPLATE
Twig est capable drsquoafficher le contenu de nrsquoimporte quel type de variable (chaine tableau ou objet)
Il est possible de faire des boucles des conditionshellip
Chaque variable peut ecirctre filtreacutee avant drsquoecirctre afficheacutee
Les chaines peuvent ecirctre rendues traduites (la traduction est alors faite via le back-office de Drupal)
5 TWIG
LES BASES
Affiche le contenu de la variable var var
Affiche le contenu de la proprieacuteteacute title de la variable node nodetitle
Conditions if var else endif
Commentaires commentaire
Traduction trans chaine endtrans
Fonctions speacutecifiques
url(lsquoroute_namersquo)
path(lsquoentitynodecanonicalrsquo lsquonodersquo nodeid)
Les modules Twig tweak ou encore Bamboo Twig proposent encore davantage de fonctions
5 TWIG
LES FILTRES Date date|format_date(lsquomediumrsquo)
Chaine
Echappement content (par deacutefaut)
Interpreacutetation du contenu de la variable texte|raw (attention )
Placeholder text|placeholder
Exclusion content|without(lsquolinksrsquo)
string|lower (upper eacutegalement)
class_name|clean_class
id_name|clean_id
Documentation httpswwwdrupalorgdocs8themingtwigfilters-modifying-variables-in-twig-templateshttpstwigsymfonycomdoc2x
5 TWIG
CONCREgraveTEMENT if pagefooter_first or pagefooter_middle or pagefooter_last ltdiv class=l-footer row expandedgt ltfooter class=row footer medium-up-2 large-up-3gt if pagefooter_first ltdiv id=footer-first class=columngt pagefooter_first ltdivgt endif if pagefooter_middle ltdiv id=footer-middle class=columngt pagefooter_middle ltdivgt endif if pagefooter_last ltdiv id=footer-last class=columngt pagefooter_last ltdivgt endif ltfootergt ltdivgt endif ltdiv class=bottom-bar panel hiddengt ltdiv class=rowgt ltdiv class=large-12 columngt ampcopy now|date(Y) site_name All rights reserved|t ltdivgt ltdivgt ltdivgt
LES REacuteGIONS6
6 LES REacuteGIONS
STRUCTURE DE LA PAGE
adminstructureblock gt Demonstrate block regions
6 LES REacuteGIONS
DEacuteFINITION ET RENDU DES REacuteGIONS
Les reacutegions doivent ecirctre deacutefinies dans le fichier THEMENAMEinfoyml
Elles doivent ecirctre appeleacutees obligatoirement dans pagehtmltwig
6 LES REacuteGIONS
THEMENAMEINFOYML
PAGEHTMLTWIG
LE RENDU DU CONTENU
7
7 RENDU DU CONTENU
LrsquoAFFICHAGE DES CHAMPS
Pour chaque type de contenu on peut reacutegler lrsquoaffichage des champs sur adminstructuretypesmanagecontent-typedisplay ougrave content-type est le nom machine du type de contenu
Il est possible de modifier lrsquoordre des champs lrsquoapparence des eacutetiquettes le format du champ
Les reacuteglages disponibles varient en fonction du type de champ
Les champs Texte peuvent ecirctre coupeacutes
Les champs Image peuvent ecirctre afficheacutes sous forme drsquoimage drsquoURL de fichier
Les champs Date peuvent utiliser un format diffeacuterent
Ces reacuteglages peuvent ecirctre diffeacuterents selon le mode drsquoaffichage (modes ldquoPar deacutefautldquo et ldquoAccrocheldquo) =gt Cela permet par exemple de masquer un champ en mode ldquoAccrocheldquo et de lrsquoafficher en mode ldquoPar deacutefautldquo (noeud inteacutegral)
7 RENDU DU CONTENU
LrsquoAFFICHAGE DES IMAGES
Les images transmises par les utilisateurs ne sont jamais aux bonnes dimensions
Le module Image (core) va nous permettre de preacutedeacutefinir des dimensions sous forme de styles drsquoimage par exemple
Vignette 70px x 110px (mise agrave lrsquoeacutechelle)
Normal 200px x 300px (mise agrave lrsquoeacutechelle et recadrage)
Ces dimensions pourront ensuite ecirctre appliqueacutees automatiquement aux champs Image depuis lrsquoeacutecran ldquogeacuterer lrsquoaffichageldquo vu preacuteceacutedemment
7 RENDU DU CONTENU
STYLE DrsquoIMAGE
7 RENDU DU CONTENU
STYLE DrsquoIMAGE
7 RENDU DU CONTENU
ALLER PLUS LOIN La gestion et la manipulation des champs est cependant
limiteacutee dans lrsquointerface drsquoadministration
On est parfois obligeacutes de modifier le code du template correspondant agrave notre champ ou type de contenu
Les reacuteglages de lrsquoadmin sont toujours pris en compte Par exemple les styles drsquoimage choisis seront ceux utiliseacutes mecircme si lrsquoon modifie le template
7 RENDU DU CONTENU
OUgrave SONT LES CHAMPS
Dans le fichier de template des noeuds (nodehtmltwig) on nrsquoa pas directement accegraves aux champs
Crsquoest la variable content qui contient tous les champs que lrsquoon affiche et en particulier ceux ajouteacutes via Field
Comment faire pour reacutecupeacuterer les champs un par un afin de les preacutesenter diffeacuteremment
7 RENDU DU CONTENU
LA VARIABLE lsquoCONTENTrsquo
Tout le contenu drsquoun noeud est afficheacute gracircce agrave la ligne content|without(comment links)
Pour connaitre le contenu de content on utilise la fonction kint() kint(content)
On deacutecouvre alors lrsquoensemble des champs et leurs proprieacuteteacutes qui sont afficheacutees en haut de page sous forme de var_dump()
On peut afficher seacutepareacutement chacun drsquoentre eux avec le code suivant contentnom_du_champ nodecreatedtime
7 RENDU DU CONTENU
NODE DE TYPE lsquoNEWSrsquo ET FORMAT lsquoTEASERrsquo
PREPROCESS8
8 PREPROCESS
FONCTIONS DE PREPROCESS
Pour chaque template on dispose de variables que lrsquoon affiche avec le formatage voulu
Ces variables sont creacuteeacutees en amont des templates dans lesquelles elles sont utiliseacutees
On dispose de fonctions dites de preprocess qui permettent de fabriquer les variables qui sont utiliseacutees dans les templates
Il est possible drsquoeacutetendre ces fonctions pour modifier les variables envoyeacutees aux templates ou en creacuteer de nouvelles
Pour ajouter une fonction de preprocess il faut la nommer comme suit THEMENAME_preprocess_HOOK() Par exemple drupal_france_preprocess_block()
8 PREPROCESS
FONCTIONS DE PREPROCESS
Pour chaque template on dispose de variables que lrsquoon affiche avec le formatage voulu
Ces variables sont creacuteeacutees en amont des templates dans lesquelles elles sont utiliseacutees
On dispose de fonctions dites de preprocess qui permettent de fabriquer les variables qui sont utiliseacutees dans les templates
Il est possible drsquoeacutetendre ces fonctions pour modifier les variables envoyeacutees aux templates ou en creacuteer de nouvelles
Pour ajouter une fonction de preprocess il faut la nommer comme suit THEMENAME_preprocess_HOOK() Par exemple drupal_france_preprocess_block()
8 PREPROCESS
LA VARIABLE lsquo$VARIABLESrsquo
Drupal
Preprocess en amont(core modules)
Preprocess du thegraveme
TemplateCreacuteation de $variables
$variables
$variables
$variables
$variables
En mode super simplifieacute
8 PREPROCESS
APPELLER UN PREPROCESS
Diffeacuterentes fonctions de preprocess peuvent ecirctre appeleacutees permettant agrave tous les modules et thegravemes de modifier les variables passeacutees aux templates Ces fonctions sont les suivantes pour le hook de thegraveme HOOK
template_preprocess_HOOK(array amp$variables)
MODULENAME_preprocess(array amp$variables $hook)
MODULENAME_preprocess_HOOK(array amp$variables)
THEMENAME_preprocess(array amp$variables $hook)
THEMENAME_preprocess_HOOK(array amp$variables)
8 PREPROCESS
CONCREgraveTEMENT Implements hook_preprocess_menu__account() function drupal_france_preprocess_menu__account(amp$variables) if (isset($variables[items][drupalfr_useraccountcompte])) $variables[items][drupalfr_useraccountcompte][attributes]-gtaddClass([ button primary button--user-account ])
$variables[items][drupalfr_useraccountcompte][title] = new FormattableMarkup( lti class=fa fa-user-circle-o aria-hidden=truegtltigtltspan class=sr-onlygtoriginal_titleltspangt [ original_title =gt $variables[items][drupalfr_useraccountcompte][title] ] )
JAVASCRIPT9
9 JAVASCRIPT
DRUPAL amp JAVASCRIPT Drupal integravegre de nombreuses libraries javascript (jQuery Modernizrhellip) et propose
eacutegalement des libraries drsquoutilitaires (coredrupal coredrupalSettings drupalajax drupalformhellip)
Par exemple Drupal 8 embarque
jQuery 321
jQuery UI 1121
Chaque librairie deacutefinit ses deacutependances jQuery UI deacutepend de jQuery par exemple
Lorsque lrsquoon utilise une librairie depuis un script custom il ne faut pas oublier de deacuteclarer cette deacutependance Pensez agrave tester en anonyme car aucune libraire nrsquoest chargeacutee par deacutefaut
Vous disposez de toutes les librairies deacutefinies dans le fichier corecorelibrairiesyml
9 JAVASCRIPT
CONCREgraveTEMENTPour pouvoir utiliser du code JS dans vos scripts avec Drupal la bonne pratique est drsquoencadrer votre code comme suit
file Shows status messages in a modal instead of inline (function ($ Drupal)
Displays status messages in a Foundation reveal modal DrupalbehaviorsfoundationStatusInReveal = attach function (context settings) $(status-messages)once(foundation-reveal)each(function() Move the status messages out of the highlighted region var $messages = $(this) var $region = $messagesparent() $messagesappendTo(body) $messagesfoundation(open)
This is required as this region will likely be empty after status messages are removed $regionhtml($regionhtml()replace(ng )) )
)(jQuery Drupal)
9 JAVASCRIPT
DRUPAL BEHAVIORS
Les scripts sont exeacutecuteacutes apregraves le chargement complet du DOM ($(document)ready() )Mais on a aussi parfois besoin de les reacute-exeacutecuter lorsque lrsquoon interagit avec la page (appel AJAX overlayhellip)
Pour ce faire il suffit drsquoattacher le script JS agrave lrsquoobjet Drupalbehaviors (librairie coredrupal) La fonction exeacutecuteacutee reccediloit 2 variables
context le DOM (le HTML chargeacute ou ajouteacute)
settings toutes les variables injecteacutees cocircteacute serveur
9 JAVASCRIPT
RAPPEL
Comme pour les fichiers de style les scripts JS doivent ecirctre deacuteclareacutes sous forme de bibliothegraveque via les fichiers THEMENAMEinfoyml et THEMENAMElibrariesyml
QUESTIONS 10
RTFM httpswwwdrupalorgdocs8theminghttpstwigsymfonycomdoc2x
MERCI Agrave VOUS
FlorisMoriceau
LES FICHIERS TEMPLATES
4
4 LES TEMPLATES
Agrave QUOI CcedilA SERT
Les templates constituent la structure des pages du sitesEn fait de chacun des eacuteleacutements qui la composent
Ce sont des fichiers html (balises ltdivgt lth1gt ltagt) avec du code Twig permettant drsquoafficher les eacuteleacutements (sous forme de variables) creacuteeacutes par Drupal
Chaque type drsquoeacuteleacutement du site possegravede son propre template
4 LES TEMPLATES
PAR EXEMPLE (CrsquoEST DU VRAI CODE)
ltdiv class=l-main row expandedgt ltmain id=main class= main_grid role=maingt if pagehighlighted spaceless pagehighlighted endspaceless endif lta id=main-contentgtltagt if breadcrumb breadcrumb endif ltsectiongt pagecontent ltsectiongt ltmaingt if pagesidebar_first ltdiv id=sidebar-first class= sidebar_first_grid column sidebargt pagesidebar_first ltdivgt endif if pagesidebar_second ltdiv id=sidebar-second class= sidebar_sec_grid column sidebargt pagesidebar_second ltdivgt endif ltdivgt
4 LES TEMPLATES
IMBRICATION DES TEMPLATES
Imaginons lrsquoappel drsquoune page de billet de blog
Et maintenant imaginons le parcours drsquoimbrication de templates pour depuis la balise lthtmlgt jusqursquoagrave la ltdivgt contenant un commentaire sous ce billet de blog
4 LES TEMPLATES
FROM ltHTMLgt TO ltDIV CLASS=lsquoCOMMENTrsquogthtmlhtmltwig
pagehtmltwig
regionhtmltwig
blockhtmltwig
nodehtmltwig nodehtmltwig
fieldhtmltwig
comment-wrapperhtmltwig
commenthtmltwig
4 LES TEMPLATES
LES TEMPLATES DEacuteRIVEacuteES
Les templates deacuteriveacutees sont des templates utiliseacutees dans un contexte preacutecis
Crsquoest le nom de la template qui indique agrave Drupal quand lrsquoutiliser
Toutes ces templates sont optionnelles et reconnues automatiquement par Drupal en fonction de leurs noms
Si des templates ne sont pas preacutesentes dans le thegraveme alors Drupal utilise ceux par deacutefaut (corethemes)
On parle de ldquotemplate deacuteriveacuteeldquo de ldquosuggestion de templateldquo ou de ldquotemplates suggeacutereacuteesldquo
Il faut vider le cache de Drupal lorsque lrsquoon ajoute des templates au thegraveme
Documentation httpswwwdrupalorgdocs8themingtwigtwig-template-naming-conventions
4 LES TEMPLATES
EXEMPLE DE SUGGESTIONS DE TEMPLATES
Template de page pagehtmltwig page--chemin--internehtmltwig sera utiliseacute lorsque lrsquoon appelle chemininterne
Ex page--fronthtmltwig cible la page drsquoaccueil
Ex page--cheminhtmltwig cible toutes les pages dont le chemin commence par chemin
Ex page--node--240htmltwig cible la page du noeud portant lrsquoid 240
Template de noeud nodehtmltwig node--type-de-noeudhtmltwig cible les noeuds de type type-de-noeud
Ex node--articlehtmltwig cible tous les noeuds de type article
4 LES TEMPLATES
TROUVER LES SUGGESTIONS
Dans le fichier wwwsitesdevelopmentservicesyml
Local development services
parameters httpresponsedebug_cacheability_headers true twigconfig debug true services cachebackendnull class DrupalCoreCacheNullBackendFactory
TWIG5
5 TWIG
UN MOTEUR DE TEMPLATE
Twig est capable drsquoafficher le contenu de nrsquoimporte quel type de variable (chaine tableau ou objet)
Il est possible de faire des boucles des conditionshellip
Chaque variable peut ecirctre filtreacutee avant drsquoecirctre afficheacutee
Les chaines peuvent ecirctre rendues traduites (la traduction est alors faite via le back-office de Drupal)
5 TWIG
LES BASES
Affiche le contenu de la variable var var
Affiche le contenu de la proprieacuteteacute title de la variable node nodetitle
Conditions if var else endif
Commentaires commentaire
Traduction trans chaine endtrans
Fonctions speacutecifiques
url(lsquoroute_namersquo)
path(lsquoentitynodecanonicalrsquo lsquonodersquo nodeid)
Les modules Twig tweak ou encore Bamboo Twig proposent encore davantage de fonctions
5 TWIG
LES FILTRES Date date|format_date(lsquomediumrsquo)
Chaine
Echappement content (par deacutefaut)
Interpreacutetation du contenu de la variable texte|raw (attention )
Placeholder text|placeholder
Exclusion content|without(lsquolinksrsquo)
string|lower (upper eacutegalement)
class_name|clean_class
id_name|clean_id
Documentation httpswwwdrupalorgdocs8themingtwigfilters-modifying-variables-in-twig-templateshttpstwigsymfonycomdoc2x
5 TWIG
CONCREgraveTEMENT if pagefooter_first or pagefooter_middle or pagefooter_last ltdiv class=l-footer row expandedgt ltfooter class=row footer medium-up-2 large-up-3gt if pagefooter_first ltdiv id=footer-first class=columngt pagefooter_first ltdivgt endif if pagefooter_middle ltdiv id=footer-middle class=columngt pagefooter_middle ltdivgt endif if pagefooter_last ltdiv id=footer-last class=columngt pagefooter_last ltdivgt endif ltfootergt ltdivgt endif ltdiv class=bottom-bar panel hiddengt ltdiv class=rowgt ltdiv class=large-12 columngt ampcopy now|date(Y) site_name All rights reserved|t ltdivgt ltdivgt ltdivgt
LES REacuteGIONS6
6 LES REacuteGIONS
STRUCTURE DE LA PAGE
adminstructureblock gt Demonstrate block regions
6 LES REacuteGIONS
DEacuteFINITION ET RENDU DES REacuteGIONS
Les reacutegions doivent ecirctre deacutefinies dans le fichier THEMENAMEinfoyml
Elles doivent ecirctre appeleacutees obligatoirement dans pagehtmltwig
6 LES REacuteGIONS
THEMENAMEINFOYML
PAGEHTMLTWIG
LE RENDU DU CONTENU
7
7 RENDU DU CONTENU
LrsquoAFFICHAGE DES CHAMPS
Pour chaque type de contenu on peut reacutegler lrsquoaffichage des champs sur adminstructuretypesmanagecontent-typedisplay ougrave content-type est le nom machine du type de contenu
Il est possible de modifier lrsquoordre des champs lrsquoapparence des eacutetiquettes le format du champ
Les reacuteglages disponibles varient en fonction du type de champ
Les champs Texte peuvent ecirctre coupeacutes
Les champs Image peuvent ecirctre afficheacutes sous forme drsquoimage drsquoURL de fichier
Les champs Date peuvent utiliser un format diffeacuterent
Ces reacuteglages peuvent ecirctre diffeacuterents selon le mode drsquoaffichage (modes ldquoPar deacutefautldquo et ldquoAccrocheldquo) =gt Cela permet par exemple de masquer un champ en mode ldquoAccrocheldquo et de lrsquoafficher en mode ldquoPar deacutefautldquo (noeud inteacutegral)
7 RENDU DU CONTENU
LrsquoAFFICHAGE DES IMAGES
Les images transmises par les utilisateurs ne sont jamais aux bonnes dimensions
Le module Image (core) va nous permettre de preacutedeacutefinir des dimensions sous forme de styles drsquoimage par exemple
Vignette 70px x 110px (mise agrave lrsquoeacutechelle)
Normal 200px x 300px (mise agrave lrsquoeacutechelle et recadrage)
Ces dimensions pourront ensuite ecirctre appliqueacutees automatiquement aux champs Image depuis lrsquoeacutecran ldquogeacuterer lrsquoaffichageldquo vu preacuteceacutedemment
7 RENDU DU CONTENU
STYLE DrsquoIMAGE
7 RENDU DU CONTENU
STYLE DrsquoIMAGE
7 RENDU DU CONTENU
ALLER PLUS LOIN La gestion et la manipulation des champs est cependant
limiteacutee dans lrsquointerface drsquoadministration
On est parfois obligeacutes de modifier le code du template correspondant agrave notre champ ou type de contenu
Les reacuteglages de lrsquoadmin sont toujours pris en compte Par exemple les styles drsquoimage choisis seront ceux utiliseacutes mecircme si lrsquoon modifie le template
7 RENDU DU CONTENU
OUgrave SONT LES CHAMPS
Dans le fichier de template des noeuds (nodehtmltwig) on nrsquoa pas directement accegraves aux champs
Crsquoest la variable content qui contient tous les champs que lrsquoon affiche et en particulier ceux ajouteacutes via Field
Comment faire pour reacutecupeacuterer les champs un par un afin de les preacutesenter diffeacuteremment
7 RENDU DU CONTENU
LA VARIABLE lsquoCONTENTrsquo
Tout le contenu drsquoun noeud est afficheacute gracircce agrave la ligne content|without(comment links)
Pour connaitre le contenu de content on utilise la fonction kint() kint(content)
On deacutecouvre alors lrsquoensemble des champs et leurs proprieacuteteacutes qui sont afficheacutees en haut de page sous forme de var_dump()
On peut afficher seacutepareacutement chacun drsquoentre eux avec le code suivant contentnom_du_champ nodecreatedtime
7 RENDU DU CONTENU
NODE DE TYPE lsquoNEWSrsquo ET FORMAT lsquoTEASERrsquo
PREPROCESS8
8 PREPROCESS
FONCTIONS DE PREPROCESS
Pour chaque template on dispose de variables que lrsquoon affiche avec le formatage voulu
Ces variables sont creacuteeacutees en amont des templates dans lesquelles elles sont utiliseacutees
On dispose de fonctions dites de preprocess qui permettent de fabriquer les variables qui sont utiliseacutees dans les templates
Il est possible drsquoeacutetendre ces fonctions pour modifier les variables envoyeacutees aux templates ou en creacuteer de nouvelles
Pour ajouter une fonction de preprocess il faut la nommer comme suit THEMENAME_preprocess_HOOK() Par exemple drupal_france_preprocess_block()
8 PREPROCESS
FONCTIONS DE PREPROCESS
Pour chaque template on dispose de variables que lrsquoon affiche avec le formatage voulu
Ces variables sont creacuteeacutees en amont des templates dans lesquelles elles sont utiliseacutees
On dispose de fonctions dites de preprocess qui permettent de fabriquer les variables qui sont utiliseacutees dans les templates
Il est possible drsquoeacutetendre ces fonctions pour modifier les variables envoyeacutees aux templates ou en creacuteer de nouvelles
Pour ajouter une fonction de preprocess il faut la nommer comme suit THEMENAME_preprocess_HOOK() Par exemple drupal_france_preprocess_block()
8 PREPROCESS
LA VARIABLE lsquo$VARIABLESrsquo
Drupal
Preprocess en amont(core modules)
Preprocess du thegraveme
TemplateCreacuteation de $variables
$variables
$variables
$variables
$variables
En mode super simplifieacute
8 PREPROCESS
APPELLER UN PREPROCESS
Diffeacuterentes fonctions de preprocess peuvent ecirctre appeleacutees permettant agrave tous les modules et thegravemes de modifier les variables passeacutees aux templates Ces fonctions sont les suivantes pour le hook de thegraveme HOOK
template_preprocess_HOOK(array amp$variables)
MODULENAME_preprocess(array amp$variables $hook)
MODULENAME_preprocess_HOOK(array amp$variables)
THEMENAME_preprocess(array amp$variables $hook)
THEMENAME_preprocess_HOOK(array amp$variables)
8 PREPROCESS
CONCREgraveTEMENT Implements hook_preprocess_menu__account() function drupal_france_preprocess_menu__account(amp$variables) if (isset($variables[items][drupalfr_useraccountcompte])) $variables[items][drupalfr_useraccountcompte][attributes]-gtaddClass([ button primary button--user-account ])
$variables[items][drupalfr_useraccountcompte][title] = new FormattableMarkup( lti class=fa fa-user-circle-o aria-hidden=truegtltigtltspan class=sr-onlygtoriginal_titleltspangt [ original_title =gt $variables[items][drupalfr_useraccountcompte][title] ] )
JAVASCRIPT9
9 JAVASCRIPT
DRUPAL amp JAVASCRIPT Drupal integravegre de nombreuses libraries javascript (jQuery Modernizrhellip) et propose
eacutegalement des libraries drsquoutilitaires (coredrupal coredrupalSettings drupalajax drupalformhellip)
Par exemple Drupal 8 embarque
jQuery 321
jQuery UI 1121
Chaque librairie deacutefinit ses deacutependances jQuery UI deacutepend de jQuery par exemple
Lorsque lrsquoon utilise une librairie depuis un script custom il ne faut pas oublier de deacuteclarer cette deacutependance Pensez agrave tester en anonyme car aucune libraire nrsquoest chargeacutee par deacutefaut
Vous disposez de toutes les librairies deacutefinies dans le fichier corecorelibrairiesyml
9 JAVASCRIPT
CONCREgraveTEMENTPour pouvoir utiliser du code JS dans vos scripts avec Drupal la bonne pratique est drsquoencadrer votre code comme suit
file Shows status messages in a modal instead of inline (function ($ Drupal)
Displays status messages in a Foundation reveal modal DrupalbehaviorsfoundationStatusInReveal = attach function (context settings) $(status-messages)once(foundation-reveal)each(function() Move the status messages out of the highlighted region var $messages = $(this) var $region = $messagesparent() $messagesappendTo(body) $messagesfoundation(open)
This is required as this region will likely be empty after status messages are removed $regionhtml($regionhtml()replace(ng )) )
)(jQuery Drupal)
9 JAVASCRIPT
DRUPAL BEHAVIORS
Les scripts sont exeacutecuteacutes apregraves le chargement complet du DOM ($(document)ready() )Mais on a aussi parfois besoin de les reacute-exeacutecuter lorsque lrsquoon interagit avec la page (appel AJAX overlayhellip)
Pour ce faire il suffit drsquoattacher le script JS agrave lrsquoobjet Drupalbehaviors (librairie coredrupal) La fonction exeacutecuteacutee reccediloit 2 variables
context le DOM (le HTML chargeacute ou ajouteacute)
settings toutes les variables injecteacutees cocircteacute serveur
9 JAVASCRIPT
RAPPEL
Comme pour les fichiers de style les scripts JS doivent ecirctre deacuteclareacutes sous forme de bibliothegraveque via les fichiers THEMENAMEinfoyml et THEMENAMElibrariesyml
QUESTIONS 10
RTFM httpswwwdrupalorgdocs8theminghttpstwigsymfonycomdoc2x
MERCI Agrave VOUS
FlorisMoriceau
4 LES TEMPLATES
Agrave QUOI CcedilA SERT
Les templates constituent la structure des pages du sitesEn fait de chacun des eacuteleacutements qui la composent
Ce sont des fichiers html (balises ltdivgt lth1gt ltagt) avec du code Twig permettant drsquoafficher les eacuteleacutements (sous forme de variables) creacuteeacutes par Drupal
Chaque type drsquoeacuteleacutement du site possegravede son propre template
4 LES TEMPLATES
PAR EXEMPLE (CrsquoEST DU VRAI CODE)
ltdiv class=l-main row expandedgt ltmain id=main class= main_grid role=maingt if pagehighlighted spaceless pagehighlighted endspaceless endif lta id=main-contentgtltagt if breadcrumb breadcrumb endif ltsectiongt pagecontent ltsectiongt ltmaingt if pagesidebar_first ltdiv id=sidebar-first class= sidebar_first_grid column sidebargt pagesidebar_first ltdivgt endif if pagesidebar_second ltdiv id=sidebar-second class= sidebar_sec_grid column sidebargt pagesidebar_second ltdivgt endif ltdivgt
4 LES TEMPLATES
IMBRICATION DES TEMPLATES
Imaginons lrsquoappel drsquoune page de billet de blog
Et maintenant imaginons le parcours drsquoimbrication de templates pour depuis la balise lthtmlgt jusqursquoagrave la ltdivgt contenant un commentaire sous ce billet de blog
4 LES TEMPLATES
FROM ltHTMLgt TO ltDIV CLASS=lsquoCOMMENTrsquogthtmlhtmltwig
pagehtmltwig
regionhtmltwig
blockhtmltwig
nodehtmltwig nodehtmltwig
fieldhtmltwig
comment-wrapperhtmltwig
commenthtmltwig
4 LES TEMPLATES
LES TEMPLATES DEacuteRIVEacuteES
Les templates deacuteriveacutees sont des templates utiliseacutees dans un contexte preacutecis
Crsquoest le nom de la template qui indique agrave Drupal quand lrsquoutiliser
Toutes ces templates sont optionnelles et reconnues automatiquement par Drupal en fonction de leurs noms
Si des templates ne sont pas preacutesentes dans le thegraveme alors Drupal utilise ceux par deacutefaut (corethemes)
On parle de ldquotemplate deacuteriveacuteeldquo de ldquosuggestion de templateldquo ou de ldquotemplates suggeacutereacuteesldquo
Il faut vider le cache de Drupal lorsque lrsquoon ajoute des templates au thegraveme
Documentation httpswwwdrupalorgdocs8themingtwigtwig-template-naming-conventions
4 LES TEMPLATES
EXEMPLE DE SUGGESTIONS DE TEMPLATES
Template de page pagehtmltwig page--chemin--internehtmltwig sera utiliseacute lorsque lrsquoon appelle chemininterne
Ex page--fronthtmltwig cible la page drsquoaccueil
Ex page--cheminhtmltwig cible toutes les pages dont le chemin commence par chemin
Ex page--node--240htmltwig cible la page du noeud portant lrsquoid 240
Template de noeud nodehtmltwig node--type-de-noeudhtmltwig cible les noeuds de type type-de-noeud
Ex node--articlehtmltwig cible tous les noeuds de type article
4 LES TEMPLATES
TROUVER LES SUGGESTIONS
Dans le fichier wwwsitesdevelopmentservicesyml
Local development services
parameters httpresponsedebug_cacheability_headers true twigconfig debug true services cachebackendnull class DrupalCoreCacheNullBackendFactory
TWIG5
5 TWIG
UN MOTEUR DE TEMPLATE
Twig est capable drsquoafficher le contenu de nrsquoimporte quel type de variable (chaine tableau ou objet)
Il est possible de faire des boucles des conditionshellip
Chaque variable peut ecirctre filtreacutee avant drsquoecirctre afficheacutee
Les chaines peuvent ecirctre rendues traduites (la traduction est alors faite via le back-office de Drupal)
5 TWIG
LES BASES
Affiche le contenu de la variable var var
Affiche le contenu de la proprieacuteteacute title de la variable node nodetitle
Conditions if var else endif
Commentaires commentaire
Traduction trans chaine endtrans
Fonctions speacutecifiques
url(lsquoroute_namersquo)
path(lsquoentitynodecanonicalrsquo lsquonodersquo nodeid)
Les modules Twig tweak ou encore Bamboo Twig proposent encore davantage de fonctions
5 TWIG
LES FILTRES Date date|format_date(lsquomediumrsquo)
Chaine
Echappement content (par deacutefaut)
Interpreacutetation du contenu de la variable texte|raw (attention )
Placeholder text|placeholder
Exclusion content|without(lsquolinksrsquo)
string|lower (upper eacutegalement)
class_name|clean_class
id_name|clean_id
Documentation httpswwwdrupalorgdocs8themingtwigfilters-modifying-variables-in-twig-templateshttpstwigsymfonycomdoc2x
5 TWIG
CONCREgraveTEMENT if pagefooter_first or pagefooter_middle or pagefooter_last ltdiv class=l-footer row expandedgt ltfooter class=row footer medium-up-2 large-up-3gt if pagefooter_first ltdiv id=footer-first class=columngt pagefooter_first ltdivgt endif if pagefooter_middle ltdiv id=footer-middle class=columngt pagefooter_middle ltdivgt endif if pagefooter_last ltdiv id=footer-last class=columngt pagefooter_last ltdivgt endif ltfootergt ltdivgt endif ltdiv class=bottom-bar panel hiddengt ltdiv class=rowgt ltdiv class=large-12 columngt ampcopy now|date(Y) site_name All rights reserved|t ltdivgt ltdivgt ltdivgt
LES REacuteGIONS6
6 LES REacuteGIONS
STRUCTURE DE LA PAGE
adminstructureblock gt Demonstrate block regions
6 LES REacuteGIONS
DEacuteFINITION ET RENDU DES REacuteGIONS
Les reacutegions doivent ecirctre deacutefinies dans le fichier THEMENAMEinfoyml
Elles doivent ecirctre appeleacutees obligatoirement dans pagehtmltwig
6 LES REacuteGIONS
THEMENAMEINFOYML
PAGEHTMLTWIG
LE RENDU DU CONTENU
7
7 RENDU DU CONTENU
LrsquoAFFICHAGE DES CHAMPS
Pour chaque type de contenu on peut reacutegler lrsquoaffichage des champs sur adminstructuretypesmanagecontent-typedisplay ougrave content-type est le nom machine du type de contenu
Il est possible de modifier lrsquoordre des champs lrsquoapparence des eacutetiquettes le format du champ
Les reacuteglages disponibles varient en fonction du type de champ
Les champs Texte peuvent ecirctre coupeacutes
Les champs Image peuvent ecirctre afficheacutes sous forme drsquoimage drsquoURL de fichier
Les champs Date peuvent utiliser un format diffeacuterent
Ces reacuteglages peuvent ecirctre diffeacuterents selon le mode drsquoaffichage (modes ldquoPar deacutefautldquo et ldquoAccrocheldquo) =gt Cela permet par exemple de masquer un champ en mode ldquoAccrocheldquo et de lrsquoafficher en mode ldquoPar deacutefautldquo (noeud inteacutegral)
7 RENDU DU CONTENU
LrsquoAFFICHAGE DES IMAGES
Les images transmises par les utilisateurs ne sont jamais aux bonnes dimensions
Le module Image (core) va nous permettre de preacutedeacutefinir des dimensions sous forme de styles drsquoimage par exemple
Vignette 70px x 110px (mise agrave lrsquoeacutechelle)
Normal 200px x 300px (mise agrave lrsquoeacutechelle et recadrage)
Ces dimensions pourront ensuite ecirctre appliqueacutees automatiquement aux champs Image depuis lrsquoeacutecran ldquogeacuterer lrsquoaffichageldquo vu preacuteceacutedemment
7 RENDU DU CONTENU
STYLE DrsquoIMAGE
7 RENDU DU CONTENU
STYLE DrsquoIMAGE
7 RENDU DU CONTENU
ALLER PLUS LOIN La gestion et la manipulation des champs est cependant
limiteacutee dans lrsquointerface drsquoadministration
On est parfois obligeacutes de modifier le code du template correspondant agrave notre champ ou type de contenu
Les reacuteglages de lrsquoadmin sont toujours pris en compte Par exemple les styles drsquoimage choisis seront ceux utiliseacutes mecircme si lrsquoon modifie le template
7 RENDU DU CONTENU
OUgrave SONT LES CHAMPS
Dans le fichier de template des noeuds (nodehtmltwig) on nrsquoa pas directement accegraves aux champs
Crsquoest la variable content qui contient tous les champs que lrsquoon affiche et en particulier ceux ajouteacutes via Field
Comment faire pour reacutecupeacuterer les champs un par un afin de les preacutesenter diffeacuteremment
7 RENDU DU CONTENU
LA VARIABLE lsquoCONTENTrsquo
Tout le contenu drsquoun noeud est afficheacute gracircce agrave la ligne content|without(comment links)
Pour connaitre le contenu de content on utilise la fonction kint() kint(content)
On deacutecouvre alors lrsquoensemble des champs et leurs proprieacuteteacutes qui sont afficheacutees en haut de page sous forme de var_dump()
On peut afficher seacutepareacutement chacun drsquoentre eux avec le code suivant contentnom_du_champ nodecreatedtime
7 RENDU DU CONTENU
NODE DE TYPE lsquoNEWSrsquo ET FORMAT lsquoTEASERrsquo
PREPROCESS8
8 PREPROCESS
FONCTIONS DE PREPROCESS
Pour chaque template on dispose de variables que lrsquoon affiche avec le formatage voulu
Ces variables sont creacuteeacutees en amont des templates dans lesquelles elles sont utiliseacutees
On dispose de fonctions dites de preprocess qui permettent de fabriquer les variables qui sont utiliseacutees dans les templates
Il est possible drsquoeacutetendre ces fonctions pour modifier les variables envoyeacutees aux templates ou en creacuteer de nouvelles
Pour ajouter une fonction de preprocess il faut la nommer comme suit THEMENAME_preprocess_HOOK() Par exemple drupal_france_preprocess_block()
8 PREPROCESS
FONCTIONS DE PREPROCESS
Pour chaque template on dispose de variables que lrsquoon affiche avec le formatage voulu
Ces variables sont creacuteeacutees en amont des templates dans lesquelles elles sont utiliseacutees
On dispose de fonctions dites de preprocess qui permettent de fabriquer les variables qui sont utiliseacutees dans les templates
Il est possible drsquoeacutetendre ces fonctions pour modifier les variables envoyeacutees aux templates ou en creacuteer de nouvelles
Pour ajouter une fonction de preprocess il faut la nommer comme suit THEMENAME_preprocess_HOOK() Par exemple drupal_france_preprocess_block()
8 PREPROCESS
LA VARIABLE lsquo$VARIABLESrsquo
Drupal
Preprocess en amont(core modules)
Preprocess du thegraveme
TemplateCreacuteation de $variables
$variables
$variables
$variables
$variables
En mode super simplifieacute
8 PREPROCESS
APPELLER UN PREPROCESS
Diffeacuterentes fonctions de preprocess peuvent ecirctre appeleacutees permettant agrave tous les modules et thegravemes de modifier les variables passeacutees aux templates Ces fonctions sont les suivantes pour le hook de thegraveme HOOK
template_preprocess_HOOK(array amp$variables)
MODULENAME_preprocess(array amp$variables $hook)
MODULENAME_preprocess_HOOK(array amp$variables)
THEMENAME_preprocess(array amp$variables $hook)
THEMENAME_preprocess_HOOK(array amp$variables)
8 PREPROCESS
CONCREgraveTEMENT Implements hook_preprocess_menu__account() function drupal_france_preprocess_menu__account(amp$variables) if (isset($variables[items][drupalfr_useraccountcompte])) $variables[items][drupalfr_useraccountcompte][attributes]-gtaddClass([ button primary button--user-account ])
$variables[items][drupalfr_useraccountcompte][title] = new FormattableMarkup( lti class=fa fa-user-circle-o aria-hidden=truegtltigtltspan class=sr-onlygtoriginal_titleltspangt [ original_title =gt $variables[items][drupalfr_useraccountcompte][title] ] )
JAVASCRIPT9
9 JAVASCRIPT
DRUPAL amp JAVASCRIPT Drupal integravegre de nombreuses libraries javascript (jQuery Modernizrhellip) et propose
eacutegalement des libraries drsquoutilitaires (coredrupal coredrupalSettings drupalajax drupalformhellip)
Par exemple Drupal 8 embarque
jQuery 321
jQuery UI 1121
Chaque librairie deacutefinit ses deacutependances jQuery UI deacutepend de jQuery par exemple
Lorsque lrsquoon utilise une librairie depuis un script custom il ne faut pas oublier de deacuteclarer cette deacutependance Pensez agrave tester en anonyme car aucune libraire nrsquoest chargeacutee par deacutefaut
Vous disposez de toutes les librairies deacutefinies dans le fichier corecorelibrairiesyml
9 JAVASCRIPT
CONCREgraveTEMENTPour pouvoir utiliser du code JS dans vos scripts avec Drupal la bonne pratique est drsquoencadrer votre code comme suit
file Shows status messages in a modal instead of inline (function ($ Drupal)
Displays status messages in a Foundation reveal modal DrupalbehaviorsfoundationStatusInReveal = attach function (context settings) $(status-messages)once(foundation-reveal)each(function() Move the status messages out of the highlighted region var $messages = $(this) var $region = $messagesparent() $messagesappendTo(body) $messagesfoundation(open)
This is required as this region will likely be empty after status messages are removed $regionhtml($regionhtml()replace(ng )) )
)(jQuery Drupal)
9 JAVASCRIPT
DRUPAL BEHAVIORS
Les scripts sont exeacutecuteacutes apregraves le chargement complet du DOM ($(document)ready() )Mais on a aussi parfois besoin de les reacute-exeacutecuter lorsque lrsquoon interagit avec la page (appel AJAX overlayhellip)
Pour ce faire il suffit drsquoattacher le script JS agrave lrsquoobjet Drupalbehaviors (librairie coredrupal) La fonction exeacutecuteacutee reccediloit 2 variables
context le DOM (le HTML chargeacute ou ajouteacute)
settings toutes les variables injecteacutees cocircteacute serveur
9 JAVASCRIPT
RAPPEL
Comme pour les fichiers de style les scripts JS doivent ecirctre deacuteclareacutes sous forme de bibliothegraveque via les fichiers THEMENAMEinfoyml et THEMENAMElibrariesyml
QUESTIONS 10
RTFM httpswwwdrupalorgdocs8theminghttpstwigsymfonycomdoc2x
MERCI Agrave VOUS
FlorisMoriceau
4 LES TEMPLATES
PAR EXEMPLE (CrsquoEST DU VRAI CODE)
ltdiv class=l-main row expandedgt ltmain id=main class= main_grid role=maingt if pagehighlighted spaceless pagehighlighted endspaceless endif lta id=main-contentgtltagt if breadcrumb breadcrumb endif ltsectiongt pagecontent ltsectiongt ltmaingt if pagesidebar_first ltdiv id=sidebar-first class= sidebar_first_grid column sidebargt pagesidebar_first ltdivgt endif if pagesidebar_second ltdiv id=sidebar-second class= sidebar_sec_grid column sidebargt pagesidebar_second ltdivgt endif ltdivgt
4 LES TEMPLATES
IMBRICATION DES TEMPLATES
Imaginons lrsquoappel drsquoune page de billet de blog
Et maintenant imaginons le parcours drsquoimbrication de templates pour depuis la balise lthtmlgt jusqursquoagrave la ltdivgt contenant un commentaire sous ce billet de blog
4 LES TEMPLATES
FROM ltHTMLgt TO ltDIV CLASS=lsquoCOMMENTrsquogthtmlhtmltwig
pagehtmltwig
regionhtmltwig
blockhtmltwig
nodehtmltwig nodehtmltwig
fieldhtmltwig
comment-wrapperhtmltwig
commenthtmltwig
4 LES TEMPLATES
LES TEMPLATES DEacuteRIVEacuteES
Les templates deacuteriveacutees sont des templates utiliseacutees dans un contexte preacutecis
Crsquoest le nom de la template qui indique agrave Drupal quand lrsquoutiliser
Toutes ces templates sont optionnelles et reconnues automatiquement par Drupal en fonction de leurs noms
Si des templates ne sont pas preacutesentes dans le thegraveme alors Drupal utilise ceux par deacutefaut (corethemes)
On parle de ldquotemplate deacuteriveacuteeldquo de ldquosuggestion de templateldquo ou de ldquotemplates suggeacutereacuteesldquo
Il faut vider le cache de Drupal lorsque lrsquoon ajoute des templates au thegraveme
Documentation httpswwwdrupalorgdocs8themingtwigtwig-template-naming-conventions
4 LES TEMPLATES
EXEMPLE DE SUGGESTIONS DE TEMPLATES
Template de page pagehtmltwig page--chemin--internehtmltwig sera utiliseacute lorsque lrsquoon appelle chemininterne
Ex page--fronthtmltwig cible la page drsquoaccueil
Ex page--cheminhtmltwig cible toutes les pages dont le chemin commence par chemin
Ex page--node--240htmltwig cible la page du noeud portant lrsquoid 240
Template de noeud nodehtmltwig node--type-de-noeudhtmltwig cible les noeuds de type type-de-noeud
Ex node--articlehtmltwig cible tous les noeuds de type article
4 LES TEMPLATES
TROUVER LES SUGGESTIONS
Dans le fichier wwwsitesdevelopmentservicesyml
Local development services
parameters httpresponsedebug_cacheability_headers true twigconfig debug true services cachebackendnull class DrupalCoreCacheNullBackendFactory
TWIG5
5 TWIG
UN MOTEUR DE TEMPLATE
Twig est capable drsquoafficher le contenu de nrsquoimporte quel type de variable (chaine tableau ou objet)
Il est possible de faire des boucles des conditionshellip
Chaque variable peut ecirctre filtreacutee avant drsquoecirctre afficheacutee
Les chaines peuvent ecirctre rendues traduites (la traduction est alors faite via le back-office de Drupal)
5 TWIG
LES BASES
Affiche le contenu de la variable var var
Affiche le contenu de la proprieacuteteacute title de la variable node nodetitle
Conditions if var else endif
Commentaires commentaire
Traduction trans chaine endtrans
Fonctions speacutecifiques
url(lsquoroute_namersquo)
path(lsquoentitynodecanonicalrsquo lsquonodersquo nodeid)
Les modules Twig tweak ou encore Bamboo Twig proposent encore davantage de fonctions
5 TWIG
LES FILTRES Date date|format_date(lsquomediumrsquo)
Chaine
Echappement content (par deacutefaut)
Interpreacutetation du contenu de la variable texte|raw (attention )
Placeholder text|placeholder
Exclusion content|without(lsquolinksrsquo)
string|lower (upper eacutegalement)
class_name|clean_class
id_name|clean_id
Documentation httpswwwdrupalorgdocs8themingtwigfilters-modifying-variables-in-twig-templateshttpstwigsymfonycomdoc2x
5 TWIG
CONCREgraveTEMENT if pagefooter_first or pagefooter_middle or pagefooter_last ltdiv class=l-footer row expandedgt ltfooter class=row footer medium-up-2 large-up-3gt if pagefooter_first ltdiv id=footer-first class=columngt pagefooter_first ltdivgt endif if pagefooter_middle ltdiv id=footer-middle class=columngt pagefooter_middle ltdivgt endif if pagefooter_last ltdiv id=footer-last class=columngt pagefooter_last ltdivgt endif ltfootergt ltdivgt endif ltdiv class=bottom-bar panel hiddengt ltdiv class=rowgt ltdiv class=large-12 columngt ampcopy now|date(Y) site_name All rights reserved|t ltdivgt ltdivgt ltdivgt
LES REacuteGIONS6
6 LES REacuteGIONS
STRUCTURE DE LA PAGE
adminstructureblock gt Demonstrate block regions
6 LES REacuteGIONS
DEacuteFINITION ET RENDU DES REacuteGIONS
Les reacutegions doivent ecirctre deacutefinies dans le fichier THEMENAMEinfoyml
Elles doivent ecirctre appeleacutees obligatoirement dans pagehtmltwig
6 LES REacuteGIONS
THEMENAMEINFOYML
PAGEHTMLTWIG
LE RENDU DU CONTENU
7
7 RENDU DU CONTENU
LrsquoAFFICHAGE DES CHAMPS
Pour chaque type de contenu on peut reacutegler lrsquoaffichage des champs sur adminstructuretypesmanagecontent-typedisplay ougrave content-type est le nom machine du type de contenu
Il est possible de modifier lrsquoordre des champs lrsquoapparence des eacutetiquettes le format du champ
Les reacuteglages disponibles varient en fonction du type de champ
Les champs Texte peuvent ecirctre coupeacutes
Les champs Image peuvent ecirctre afficheacutes sous forme drsquoimage drsquoURL de fichier
Les champs Date peuvent utiliser un format diffeacuterent
Ces reacuteglages peuvent ecirctre diffeacuterents selon le mode drsquoaffichage (modes ldquoPar deacutefautldquo et ldquoAccrocheldquo) =gt Cela permet par exemple de masquer un champ en mode ldquoAccrocheldquo et de lrsquoafficher en mode ldquoPar deacutefautldquo (noeud inteacutegral)
7 RENDU DU CONTENU
LrsquoAFFICHAGE DES IMAGES
Les images transmises par les utilisateurs ne sont jamais aux bonnes dimensions
Le module Image (core) va nous permettre de preacutedeacutefinir des dimensions sous forme de styles drsquoimage par exemple
Vignette 70px x 110px (mise agrave lrsquoeacutechelle)
Normal 200px x 300px (mise agrave lrsquoeacutechelle et recadrage)
Ces dimensions pourront ensuite ecirctre appliqueacutees automatiquement aux champs Image depuis lrsquoeacutecran ldquogeacuterer lrsquoaffichageldquo vu preacuteceacutedemment
7 RENDU DU CONTENU
STYLE DrsquoIMAGE
7 RENDU DU CONTENU
STYLE DrsquoIMAGE
7 RENDU DU CONTENU
ALLER PLUS LOIN La gestion et la manipulation des champs est cependant
limiteacutee dans lrsquointerface drsquoadministration
On est parfois obligeacutes de modifier le code du template correspondant agrave notre champ ou type de contenu
Les reacuteglages de lrsquoadmin sont toujours pris en compte Par exemple les styles drsquoimage choisis seront ceux utiliseacutes mecircme si lrsquoon modifie le template
7 RENDU DU CONTENU
OUgrave SONT LES CHAMPS
Dans le fichier de template des noeuds (nodehtmltwig) on nrsquoa pas directement accegraves aux champs
Crsquoest la variable content qui contient tous les champs que lrsquoon affiche et en particulier ceux ajouteacutes via Field
Comment faire pour reacutecupeacuterer les champs un par un afin de les preacutesenter diffeacuteremment
7 RENDU DU CONTENU
LA VARIABLE lsquoCONTENTrsquo
Tout le contenu drsquoun noeud est afficheacute gracircce agrave la ligne content|without(comment links)
Pour connaitre le contenu de content on utilise la fonction kint() kint(content)
On deacutecouvre alors lrsquoensemble des champs et leurs proprieacuteteacutes qui sont afficheacutees en haut de page sous forme de var_dump()
On peut afficher seacutepareacutement chacun drsquoentre eux avec le code suivant contentnom_du_champ nodecreatedtime
7 RENDU DU CONTENU
NODE DE TYPE lsquoNEWSrsquo ET FORMAT lsquoTEASERrsquo
PREPROCESS8
8 PREPROCESS
FONCTIONS DE PREPROCESS
Pour chaque template on dispose de variables que lrsquoon affiche avec le formatage voulu
Ces variables sont creacuteeacutees en amont des templates dans lesquelles elles sont utiliseacutees
On dispose de fonctions dites de preprocess qui permettent de fabriquer les variables qui sont utiliseacutees dans les templates
Il est possible drsquoeacutetendre ces fonctions pour modifier les variables envoyeacutees aux templates ou en creacuteer de nouvelles
Pour ajouter une fonction de preprocess il faut la nommer comme suit THEMENAME_preprocess_HOOK() Par exemple drupal_france_preprocess_block()
8 PREPROCESS
FONCTIONS DE PREPROCESS
Pour chaque template on dispose de variables que lrsquoon affiche avec le formatage voulu
Ces variables sont creacuteeacutees en amont des templates dans lesquelles elles sont utiliseacutees
On dispose de fonctions dites de preprocess qui permettent de fabriquer les variables qui sont utiliseacutees dans les templates
Il est possible drsquoeacutetendre ces fonctions pour modifier les variables envoyeacutees aux templates ou en creacuteer de nouvelles
Pour ajouter une fonction de preprocess il faut la nommer comme suit THEMENAME_preprocess_HOOK() Par exemple drupal_france_preprocess_block()
8 PREPROCESS
LA VARIABLE lsquo$VARIABLESrsquo
Drupal
Preprocess en amont(core modules)
Preprocess du thegraveme
TemplateCreacuteation de $variables
$variables
$variables
$variables
$variables
En mode super simplifieacute
8 PREPROCESS
APPELLER UN PREPROCESS
Diffeacuterentes fonctions de preprocess peuvent ecirctre appeleacutees permettant agrave tous les modules et thegravemes de modifier les variables passeacutees aux templates Ces fonctions sont les suivantes pour le hook de thegraveme HOOK
template_preprocess_HOOK(array amp$variables)
MODULENAME_preprocess(array amp$variables $hook)
MODULENAME_preprocess_HOOK(array amp$variables)
THEMENAME_preprocess(array amp$variables $hook)
THEMENAME_preprocess_HOOK(array amp$variables)
8 PREPROCESS
CONCREgraveTEMENT Implements hook_preprocess_menu__account() function drupal_france_preprocess_menu__account(amp$variables) if (isset($variables[items][drupalfr_useraccountcompte])) $variables[items][drupalfr_useraccountcompte][attributes]-gtaddClass([ button primary button--user-account ])
$variables[items][drupalfr_useraccountcompte][title] = new FormattableMarkup( lti class=fa fa-user-circle-o aria-hidden=truegtltigtltspan class=sr-onlygtoriginal_titleltspangt [ original_title =gt $variables[items][drupalfr_useraccountcompte][title] ] )
JAVASCRIPT9
9 JAVASCRIPT
DRUPAL amp JAVASCRIPT Drupal integravegre de nombreuses libraries javascript (jQuery Modernizrhellip) et propose
eacutegalement des libraries drsquoutilitaires (coredrupal coredrupalSettings drupalajax drupalformhellip)
Par exemple Drupal 8 embarque
jQuery 321
jQuery UI 1121
Chaque librairie deacutefinit ses deacutependances jQuery UI deacutepend de jQuery par exemple
Lorsque lrsquoon utilise une librairie depuis un script custom il ne faut pas oublier de deacuteclarer cette deacutependance Pensez agrave tester en anonyme car aucune libraire nrsquoest chargeacutee par deacutefaut
Vous disposez de toutes les librairies deacutefinies dans le fichier corecorelibrairiesyml
9 JAVASCRIPT
CONCREgraveTEMENTPour pouvoir utiliser du code JS dans vos scripts avec Drupal la bonne pratique est drsquoencadrer votre code comme suit
file Shows status messages in a modal instead of inline (function ($ Drupal)
Displays status messages in a Foundation reveal modal DrupalbehaviorsfoundationStatusInReveal = attach function (context settings) $(status-messages)once(foundation-reveal)each(function() Move the status messages out of the highlighted region var $messages = $(this) var $region = $messagesparent() $messagesappendTo(body) $messagesfoundation(open)
This is required as this region will likely be empty after status messages are removed $regionhtml($regionhtml()replace(ng )) )
)(jQuery Drupal)
9 JAVASCRIPT
DRUPAL BEHAVIORS
Les scripts sont exeacutecuteacutes apregraves le chargement complet du DOM ($(document)ready() )Mais on a aussi parfois besoin de les reacute-exeacutecuter lorsque lrsquoon interagit avec la page (appel AJAX overlayhellip)
Pour ce faire il suffit drsquoattacher le script JS agrave lrsquoobjet Drupalbehaviors (librairie coredrupal) La fonction exeacutecuteacutee reccediloit 2 variables
context le DOM (le HTML chargeacute ou ajouteacute)
settings toutes les variables injecteacutees cocircteacute serveur
9 JAVASCRIPT
RAPPEL
Comme pour les fichiers de style les scripts JS doivent ecirctre deacuteclareacutes sous forme de bibliothegraveque via les fichiers THEMENAMEinfoyml et THEMENAMElibrariesyml
QUESTIONS 10
RTFM httpswwwdrupalorgdocs8theminghttpstwigsymfonycomdoc2x
MERCI Agrave VOUS
FlorisMoriceau
4 LES TEMPLATES
IMBRICATION DES TEMPLATES
Imaginons lrsquoappel drsquoune page de billet de blog
Et maintenant imaginons le parcours drsquoimbrication de templates pour depuis la balise lthtmlgt jusqursquoagrave la ltdivgt contenant un commentaire sous ce billet de blog
4 LES TEMPLATES
FROM ltHTMLgt TO ltDIV CLASS=lsquoCOMMENTrsquogthtmlhtmltwig
pagehtmltwig
regionhtmltwig
blockhtmltwig
nodehtmltwig nodehtmltwig
fieldhtmltwig
comment-wrapperhtmltwig
commenthtmltwig
4 LES TEMPLATES
LES TEMPLATES DEacuteRIVEacuteES
Les templates deacuteriveacutees sont des templates utiliseacutees dans un contexte preacutecis
Crsquoest le nom de la template qui indique agrave Drupal quand lrsquoutiliser
Toutes ces templates sont optionnelles et reconnues automatiquement par Drupal en fonction de leurs noms
Si des templates ne sont pas preacutesentes dans le thegraveme alors Drupal utilise ceux par deacutefaut (corethemes)
On parle de ldquotemplate deacuteriveacuteeldquo de ldquosuggestion de templateldquo ou de ldquotemplates suggeacutereacuteesldquo
Il faut vider le cache de Drupal lorsque lrsquoon ajoute des templates au thegraveme
Documentation httpswwwdrupalorgdocs8themingtwigtwig-template-naming-conventions
4 LES TEMPLATES
EXEMPLE DE SUGGESTIONS DE TEMPLATES
Template de page pagehtmltwig page--chemin--internehtmltwig sera utiliseacute lorsque lrsquoon appelle chemininterne
Ex page--fronthtmltwig cible la page drsquoaccueil
Ex page--cheminhtmltwig cible toutes les pages dont le chemin commence par chemin
Ex page--node--240htmltwig cible la page du noeud portant lrsquoid 240
Template de noeud nodehtmltwig node--type-de-noeudhtmltwig cible les noeuds de type type-de-noeud
Ex node--articlehtmltwig cible tous les noeuds de type article
4 LES TEMPLATES
TROUVER LES SUGGESTIONS
Dans le fichier wwwsitesdevelopmentservicesyml
Local development services
parameters httpresponsedebug_cacheability_headers true twigconfig debug true services cachebackendnull class DrupalCoreCacheNullBackendFactory
TWIG5
5 TWIG
UN MOTEUR DE TEMPLATE
Twig est capable drsquoafficher le contenu de nrsquoimporte quel type de variable (chaine tableau ou objet)
Il est possible de faire des boucles des conditionshellip
Chaque variable peut ecirctre filtreacutee avant drsquoecirctre afficheacutee
Les chaines peuvent ecirctre rendues traduites (la traduction est alors faite via le back-office de Drupal)
5 TWIG
LES BASES
Affiche le contenu de la variable var var
Affiche le contenu de la proprieacuteteacute title de la variable node nodetitle
Conditions if var else endif
Commentaires commentaire
Traduction trans chaine endtrans
Fonctions speacutecifiques
url(lsquoroute_namersquo)
path(lsquoentitynodecanonicalrsquo lsquonodersquo nodeid)
Les modules Twig tweak ou encore Bamboo Twig proposent encore davantage de fonctions
5 TWIG
LES FILTRES Date date|format_date(lsquomediumrsquo)
Chaine
Echappement content (par deacutefaut)
Interpreacutetation du contenu de la variable texte|raw (attention )
Placeholder text|placeholder
Exclusion content|without(lsquolinksrsquo)
string|lower (upper eacutegalement)
class_name|clean_class
id_name|clean_id
Documentation httpswwwdrupalorgdocs8themingtwigfilters-modifying-variables-in-twig-templateshttpstwigsymfonycomdoc2x
5 TWIG
CONCREgraveTEMENT if pagefooter_first or pagefooter_middle or pagefooter_last ltdiv class=l-footer row expandedgt ltfooter class=row footer medium-up-2 large-up-3gt if pagefooter_first ltdiv id=footer-first class=columngt pagefooter_first ltdivgt endif if pagefooter_middle ltdiv id=footer-middle class=columngt pagefooter_middle ltdivgt endif if pagefooter_last ltdiv id=footer-last class=columngt pagefooter_last ltdivgt endif ltfootergt ltdivgt endif ltdiv class=bottom-bar panel hiddengt ltdiv class=rowgt ltdiv class=large-12 columngt ampcopy now|date(Y) site_name All rights reserved|t ltdivgt ltdivgt ltdivgt
LES REacuteGIONS6
6 LES REacuteGIONS
STRUCTURE DE LA PAGE
adminstructureblock gt Demonstrate block regions
6 LES REacuteGIONS
DEacuteFINITION ET RENDU DES REacuteGIONS
Les reacutegions doivent ecirctre deacutefinies dans le fichier THEMENAMEinfoyml
Elles doivent ecirctre appeleacutees obligatoirement dans pagehtmltwig
6 LES REacuteGIONS
THEMENAMEINFOYML
PAGEHTMLTWIG
LE RENDU DU CONTENU
7
7 RENDU DU CONTENU
LrsquoAFFICHAGE DES CHAMPS
Pour chaque type de contenu on peut reacutegler lrsquoaffichage des champs sur adminstructuretypesmanagecontent-typedisplay ougrave content-type est le nom machine du type de contenu
Il est possible de modifier lrsquoordre des champs lrsquoapparence des eacutetiquettes le format du champ
Les reacuteglages disponibles varient en fonction du type de champ
Les champs Texte peuvent ecirctre coupeacutes
Les champs Image peuvent ecirctre afficheacutes sous forme drsquoimage drsquoURL de fichier
Les champs Date peuvent utiliser un format diffeacuterent
Ces reacuteglages peuvent ecirctre diffeacuterents selon le mode drsquoaffichage (modes ldquoPar deacutefautldquo et ldquoAccrocheldquo) =gt Cela permet par exemple de masquer un champ en mode ldquoAccrocheldquo et de lrsquoafficher en mode ldquoPar deacutefautldquo (noeud inteacutegral)
7 RENDU DU CONTENU
LrsquoAFFICHAGE DES IMAGES
Les images transmises par les utilisateurs ne sont jamais aux bonnes dimensions
Le module Image (core) va nous permettre de preacutedeacutefinir des dimensions sous forme de styles drsquoimage par exemple
Vignette 70px x 110px (mise agrave lrsquoeacutechelle)
Normal 200px x 300px (mise agrave lrsquoeacutechelle et recadrage)
Ces dimensions pourront ensuite ecirctre appliqueacutees automatiquement aux champs Image depuis lrsquoeacutecran ldquogeacuterer lrsquoaffichageldquo vu preacuteceacutedemment
7 RENDU DU CONTENU
STYLE DrsquoIMAGE
7 RENDU DU CONTENU
STYLE DrsquoIMAGE
7 RENDU DU CONTENU
ALLER PLUS LOIN La gestion et la manipulation des champs est cependant
limiteacutee dans lrsquointerface drsquoadministration
On est parfois obligeacutes de modifier le code du template correspondant agrave notre champ ou type de contenu
Les reacuteglages de lrsquoadmin sont toujours pris en compte Par exemple les styles drsquoimage choisis seront ceux utiliseacutes mecircme si lrsquoon modifie le template
7 RENDU DU CONTENU
OUgrave SONT LES CHAMPS
Dans le fichier de template des noeuds (nodehtmltwig) on nrsquoa pas directement accegraves aux champs
Crsquoest la variable content qui contient tous les champs que lrsquoon affiche et en particulier ceux ajouteacutes via Field
Comment faire pour reacutecupeacuterer les champs un par un afin de les preacutesenter diffeacuteremment
7 RENDU DU CONTENU
LA VARIABLE lsquoCONTENTrsquo
Tout le contenu drsquoun noeud est afficheacute gracircce agrave la ligne content|without(comment links)
Pour connaitre le contenu de content on utilise la fonction kint() kint(content)
On deacutecouvre alors lrsquoensemble des champs et leurs proprieacuteteacutes qui sont afficheacutees en haut de page sous forme de var_dump()
On peut afficher seacutepareacutement chacun drsquoentre eux avec le code suivant contentnom_du_champ nodecreatedtime
7 RENDU DU CONTENU
NODE DE TYPE lsquoNEWSrsquo ET FORMAT lsquoTEASERrsquo
PREPROCESS8
8 PREPROCESS
FONCTIONS DE PREPROCESS
Pour chaque template on dispose de variables que lrsquoon affiche avec le formatage voulu
Ces variables sont creacuteeacutees en amont des templates dans lesquelles elles sont utiliseacutees
On dispose de fonctions dites de preprocess qui permettent de fabriquer les variables qui sont utiliseacutees dans les templates
Il est possible drsquoeacutetendre ces fonctions pour modifier les variables envoyeacutees aux templates ou en creacuteer de nouvelles
Pour ajouter une fonction de preprocess il faut la nommer comme suit THEMENAME_preprocess_HOOK() Par exemple drupal_france_preprocess_block()
8 PREPROCESS
FONCTIONS DE PREPROCESS
Pour chaque template on dispose de variables que lrsquoon affiche avec le formatage voulu
Ces variables sont creacuteeacutees en amont des templates dans lesquelles elles sont utiliseacutees
On dispose de fonctions dites de preprocess qui permettent de fabriquer les variables qui sont utiliseacutees dans les templates
Il est possible drsquoeacutetendre ces fonctions pour modifier les variables envoyeacutees aux templates ou en creacuteer de nouvelles
Pour ajouter une fonction de preprocess il faut la nommer comme suit THEMENAME_preprocess_HOOK() Par exemple drupal_france_preprocess_block()
8 PREPROCESS
LA VARIABLE lsquo$VARIABLESrsquo
Drupal
Preprocess en amont(core modules)
Preprocess du thegraveme
TemplateCreacuteation de $variables
$variables
$variables
$variables
$variables
En mode super simplifieacute
8 PREPROCESS
APPELLER UN PREPROCESS
Diffeacuterentes fonctions de preprocess peuvent ecirctre appeleacutees permettant agrave tous les modules et thegravemes de modifier les variables passeacutees aux templates Ces fonctions sont les suivantes pour le hook de thegraveme HOOK
template_preprocess_HOOK(array amp$variables)
MODULENAME_preprocess(array amp$variables $hook)
MODULENAME_preprocess_HOOK(array amp$variables)
THEMENAME_preprocess(array amp$variables $hook)
THEMENAME_preprocess_HOOK(array amp$variables)
8 PREPROCESS
CONCREgraveTEMENT Implements hook_preprocess_menu__account() function drupal_france_preprocess_menu__account(amp$variables) if (isset($variables[items][drupalfr_useraccountcompte])) $variables[items][drupalfr_useraccountcompte][attributes]-gtaddClass([ button primary button--user-account ])
$variables[items][drupalfr_useraccountcompte][title] = new FormattableMarkup( lti class=fa fa-user-circle-o aria-hidden=truegtltigtltspan class=sr-onlygtoriginal_titleltspangt [ original_title =gt $variables[items][drupalfr_useraccountcompte][title] ] )
JAVASCRIPT9
9 JAVASCRIPT
DRUPAL amp JAVASCRIPT Drupal integravegre de nombreuses libraries javascript (jQuery Modernizrhellip) et propose
eacutegalement des libraries drsquoutilitaires (coredrupal coredrupalSettings drupalajax drupalformhellip)
Par exemple Drupal 8 embarque
jQuery 321
jQuery UI 1121
Chaque librairie deacutefinit ses deacutependances jQuery UI deacutepend de jQuery par exemple
Lorsque lrsquoon utilise une librairie depuis un script custom il ne faut pas oublier de deacuteclarer cette deacutependance Pensez agrave tester en anonyme car aucune libraire nrsquoest chargeacutee par deacutefaut
Vous disposez de toutes les librairies deacutefinies dans le fichier corecorelibrairiesyml
9 JAVASCRIPT
CONCREgraveTEMENTPour pouvoir utiliser du code JS dans vos scripts avec Drupal la bonne pratique est drsquoencadrer votre code comme suit
file Shows status messages in a modal instead of inline (function ($ Drupal)
Displays status messages in a Foundation reveal modal DrupalbehaviorsfoundationStatusInReveal = attach function (context settings) $(status-messages)once(foundation-reveal)each(function() Move the status messages out of the highlighted region var $messages = $(this) var $region = $messagesparent() $messagesappendTo(body) $messagesfoundation(open)
This is required as this region will likely be empty after status messages are removed $regionhtml($regionhtml()replace(ng )) )
)(jQuery Drupal)
9 JAVASCRIPT
DRUPAL BEHAVIORS
Les scripts sont exeacutecuteacutes apregraves le chargement complet du DOM ($(document)ready() )Mais on a aussi parfois besoin de les reacute-exeacutecuter lorsque lrsquoon interagit avec la page (appel AJAX overlayhellip)
Pour ce faire il suffit drsquoattacher le script JS agrave lrsquoobjet Drupalbehaviors (librairie coredrupal) La fonction exeacutecuteacutee reccediloit 2 variables
context le DOM (le HTML chargeacute ou ajouteacute)
settings toutes les variables injecteacutees cocircteacute serveur
9 JAVASCRIPT
RAPPEL
Comme pour les fichiers de style les scripts JS doivent ecirctre deacuteclareacutes sous forme de bibliothegraveque via les fichiers THEMENAMEinfoyml et THEMENAMElibrariesyml
QUESTIONS 10
RTFM httpswwwdrupalorgdocs8theminghttpstwigsymfonycomdoc2x
MERCI Agrave VOUS
FlorisMoriceau
4 LES TEMPLATES
FROM ltHTMLgt TO ltDIV CLASS=lsquoCOMMENTrsquogthtmlhtmltwig
pagehtmltwig
regionhtmltwig
blockhtmltwig
nodehtmltwig nodehtmltwig
fieldhtmltwig
comment-wrapperhtmltwig
commenthtmltwig
4 LES TEMPLATES
LES TEMPLATES DEacuteRIVEacuteES
Les templates deacuteriveacutees sont des templates utiliseacutees dans un contexte preacutecis
Crsquoest le nom de la template qui indique agrave Drupal quand lrsquoutiliser
Toutes ces templates sont optionnelles et reconnues automatiquement par Drupal en fonction de leurs noms
Si des templates ne sont pas preacutesentes dans le thegraveme alors Drupal utilise ceux par deacutefaut (corethemes)
On parle de ldquotemplate deacuteriveacuteeldquo de ldquosuggestion de templateldquo ou de ldquotemplates suggeacutereacuteesldquo
Il faut vider le cache de Drupal lorsque lrsquoon ajoute des templates au thegraveme
Documentation httpswwwdrupalorgdocs8themingtwigtwig-template-naming-conventions
4 LES TEMPLATES
EXEMPLE DE SUGGESTIONS DE TEMPLATES
Template de page pagehtmltwig page--chemin--internehtmltwig sera utiliseacute lorsque lrsquoon appelle chemininterne
Ex page--fronthtmltwig cible la page drsquoaccueil
Ex page--cheminhtmltwig cible toutes les pages dont le chemin commence par chemin
Ex page--node--240htmltwig cible la page du noeud portant lrsquoid 240
Template de noeud nodehtmltwig node--type-de-noeudhtmltwig cible les noeuds de type type-de-noeud
Ex node--articlehtmltwig cible tous les noeuds de type article
4 LES TEMPLATES
TROUVER LES SUGGESTIONS
Dans le fichier wwwsitesdevelopmentservicesyml
Local development services
parameters httpresponsedebug_cacheability_headers true twigconfig debug true services cachebackendnull class DrupalCoreCacheNullBackendFactory
TWIG5
5 TWIG
UN MOTEUR DE TEMPLATE
Twig est capable drsquoafficher le contenu de nrsquoimporte quel type de variable (chaine tableau ou objet)
Il est possible de faire des boucles des conditionshellip
Chaque variable peut ecirctre filtreacutee avant drsquoecirctre afficheacutee
Les chaines peuvent ecirctre rendues traduites (la traduction est alors faite via le back-office de Drupal)
5 TWIG
LES BASES
Affiche le contenu de la variable var var
Affiche le contenu de la proprieacuteteacute title de la variable node nodetitle
Conditions if var else endif
Commentaires commentaire
Traduction trans chaine endtrans
Fonctions speacutecifiques
url(lsquoroute_namersquo)
path(lsquoentitynodecanonicalrsquo lsquonodersquo nodeid)
Les modules Twig tweak ou encore Bamboo Twig proposent encore davantage de fonctions
5 TWIG
LES FILTRES Date date|format_date(lsquomediumrsquo)
Chaine
Echappement content (par deacutefaut)
Interpreacutetation du contenu de la variable texte|raw (attention )
Placeholder text|placeholder
Exclusion content|without(lsquolinksrsquo)
string|lower (upper eacutegalement)
class_name|clean_class
id_name|clean_id
Documentation httpswwwdrupalorgdocs8themingtwigfilters-modifying-variables-in-twig-templateshttpstwigsymfonycomdoc2x
5 TWIG
CONCREgraveTEMENT if pagefooter_first or pagefooter_middle or pagefooter_last ltdiv class=l-footer row expandedgt ltfooter class=row footer medium-up-2 large-up-3gt if pagefooter_first ltdiv id=footer-first class=columngt pagefooter_first ltdivgt endif if pagefooter_middle ltdiv id=footer-middle class=columngt pagefooter_middle ltdivgt endif if pagefooter_last ltdiv id=footer-last class=columngt pagefooter_last ltdivgt endif ltfootergt ltdivgt endif ltdiv class=bottom-bar panel hiddengt ltdiv class=rowgt ltdiv class=large-12 columngt ampcopy now|date(Y) site_name All rights reserved|t ltdivgt ltdivgt ltdivgt
LES REacuteGIONS6
6 LES REacuteGIONS
STRUCTURE DE LA PAGE
adminstructureblock gt Demonstrate block regions
6 LES REacuteGIONS
DEacuteFINITION ET RENDU DES REacuteGIONS
Les reacutegions doivent ecirctre deacutefinies dans le fichier THEMENAMEinfoyml
Elles doivent ecirctre appeleacutees obligatoirement dans pagehtmltwig
6 LES REacuteGIONS
THEMENAMEINFOYML
PAGEHTMLTWIG
LE RENDU DU CONTENU
7
7 RENDU DU CONTENU
LrsquoAFFICHAGE DES CHAMPS
Pour chaque type de contenu on peut reacutegler lrsquoaffichage des champs sur adminstructuretypesmanagecontent-typedisplay ougrave content-type est le nom machine du type de contenu
Il est possible de modifier lrsquoordre des champs lrsquoapparence des eacutetiquettes le format du champ
Les reacuteglages disponibles varient en fonction du type de champ
Les champs Texte peuvent ecirctre coupeacutes
Les champs Image peuvent ecirctre afficheacutes sous forme drsquoimage drsquoURL de fichier
Les champs Date peuvent utiliser un format diffeacuterent
Ces reacuteglages peuvent ecirctre diffeacuterents selon le mode drsquoaffichage (modes ldquoPar deacutefautldquo et ldquoAccrocheldquo) =gt Cela permet par exemple de masquer un champ en mode ldquoAccrocheldquo et de lrsquoafficher en mode ldquoPar deacutefautldquo (noeud inteacutegral)
7 RENDU DU CONTENU
LrsquoAFFICHAGE DES IMAGES
Les images transmises par les utilisateurs ne sont jamais aux bonnes dimensions
Le module Image (core) va nous permettre de preacutedeacutefinir des dimensions sous forme de styles drsquoimage par exemple
Vignette 70px x 110px (mise agrave lrsquoeacutechelle)
Normal 200px x 300px (mise agrave lrsquoeacutechelle et recadrage)
Ces dimensions pourront ensuite ecirctre appliqueacutees automatiquement aux champs Image depuis lrsquoeacutecran ldquogeacuterer lrsquoaffichageldquo vu preacuteceacutedemment
7 RENDU DU CONTENU
STYLE DrsquoIMAGE
7 RENDU DU CONTENU
STYLE DrsquoIMAGE
7 RENDU DU CONTENU
ALLER PLUS LOIN La gestion et la manipulation des champs est cependant
limiteacutee dans lrsquointerface drsquoadministration
On est parfois obligeacutes de modifier le code du template correspondant agrave notre champ ou type de contenu
Les reacuteglages de lrsquoadmin sont toujours pris en compte Par exemple les styles drsquoimage choisis seront ceux utiliseacutes mecircme si lrsquoon modifie le template
7 RENDU DU CONTENU
OUgrave SONT LES CHAMPS
Dans le fichier de template des noeuds (nodehtmltwig) on nrsquoa pas directement accegraves aux champs
Crsquoest la variable content qui contient tous les champs que lrsquoon affiche et en particulier ceux ajouteacutes via Field
Comment faire pour reacutecupeacuterer les champs un par un afin de les preacutesenter diffeacuteremment
7 RENDU DU CONTENU
LA VARIABLE lsquoCONTENTrsquo
Tout le contenu drsquoun noeud est afficheacute gracircce agrave la ligne content|without(comment links)
Pour connaitre le contenu de content on utilise la fonction kint() kint(content)
On deacutecouvre alors lrsquoensemble des champs et leurs proprieacuteteacutes qui sont afficheacutees en haut de page sous forme de var_dump()
On peut afficher seacutepareacutement chacun drsquoentre eux avec le code suivant contentnom_du_champ nodecreatedtime
7 RENDU DU CONTENU
NODE DE TYPE lsquoNEWSrsquo ET FORMAT lsquoTEASERrsquo
PREPROCESS8
8 PREPROCESS
FONCTIONS DE PREPROCESS
Pour chaque template on dispose de variables que lrsquoon affiche avec le formatage voulu
Ces variables sont creacuteeacutees en amont des templates dans lesquelles elles sont utiliseacutees
On dispose de fonctions dites de preprocess qui permettent de fabriquer les variables qui sont utiliseacutees dans les templates
Il est possible drsquoeacutetendre ces fonctions pour modifier les variables envoyeacutees aux templates ou en creacuteer de nouvelles
Pour ajouter une fonction de preprocess il faut la nommer comme suit THEMENAME_preprocess_HOOK() Par exemple drupal_france_preprocess_block()
8 PREPROCESS
FONCTIONS DE PREPROCESS
Pour chaque template on dispose de variables que lrsquoon affiche avec le formatage voulu
Ces variables sont creacuteeacutees en amont des templates dans lesquelles elles sont utiliseacutees
On dispose de fonctions dites de preprocess qui permettent de fabriquer les variables qui sont utiliseacutees dans les templates
Il est possible drsquoeacutetendre ces fonctions pour modifier les variables envoyeacutees aux templates ou en creacuteer de nouvelles
Pour ajouter une fonction de preprocess il faut la nommer comme suit THEMENAME_preprocess_HOOK() Par exemple drupal_france_preprocess_block()
8 PREPROCESS
LA VARIABLE lsquo$VARIABLESrsquo
Drupal
Preprocess en amont(core modules)
Preprocess du thegraveme
TemplateCreacuteation de $variables
$variables
$variables
$variables
$variables
En mode super simplifieacute
8 PREPROCESS
APPELLER UN PREPROCESS
Diffeacuterentes fonctions de preprocess peuvent ecirctre appeleacutees permettant agrave tous les modules et thegravemes de modifier les variables passeacutees aux templates Ces fonctions sont les suivantes pour le hook de thegraveme HOOK
template_preprocess_HOOK(array amp$variables)
MODULENAME_preprocess(array amp$variables $hook)
MODULENAME_preprocess_HOOK(array amp$variables)
THEMENAME_preprocess(array amp$variables $hook)
THEMENAME_preprocess_HOOK(array amp$variables)
8 PREPROCESS
CONCREgraveTEMENT Implements hook_preprocess_menu__account() function drupal_france_preprocess_menu__account(amp$variables) if (isset($variables[items][drupalfr_useraccountcompte])) $variables[items][drupalfr_useraccountcompte][attributes]-gtaddClass([ button primary button--user-account ])
$variables[items][drupalfr_useraccountcompte][title] = new FormattableMarkup( lti class=fa fa-user-circle-o aria-hidden=truegtltigtltspan class=sr-onlygtoriginal_titleltspangt [ original_title =gt $variables[items][drupalfr_useraccountcompte][title] ] )
JAVASCRIPT9
9 JAVASCRIPT
DRUPAL amp JAVASCRIPT Drupal integravegre de nombreuses libraries javascript (jQuery Modernizrhellip) et propose
eacutegalement des libraries drsquoutilitaires (coredrupal coredrupalSettings drupalajax drupalformhellip)
Par exemple Drupal 8 embarque
jQuery 321
jQuery UI 1121
Chaque librairie deacutefinit ses deacutependances jQuery UI deacutepend de jQuery par exemple
Lorsque lrsquoon utilise une librairie depuis un script custom il ne faut pas oublier de deacuteclarer cette deacutependance Pensez agrave tester en anonyme car aucune libraire nrsquoest chargeacutee par deacutefaut
Vous disposez de toutes les librairies deacutefinies dans le fichier corecorelibrairiesyml
9 JAVASCRIPT
CONCREgraveTEMENTPour pouvoir utiliser du code JS dans vos scripts avec Drupal la bonne pratique est drsquoencadrer votre code comme suit
file Shows status messages in a modal instead of inline (function ($ Drupal)
Displays status messages in a Foundation reveal modal DrupalbehaviorsfoundationStatusInReveal = attach function (context settings) $(status-messages)once(foundation-reveal)each(function() Move the status messages out of the highlighted region var $messages = $(this) var $region = $messagesparent() $messagesappendTo(body) $messagesfoundation(open)
This is required as this region will likely be empty after status messages are removed $regionhtml($regionhtml()replace(ng )) )
)(jQuery Drupal)
9 JAVASCRIPT
DRUPAL BEHAVIORS
Les scripts sont exeacutecuteacutes apregraves le chargement complet du DOM ($(document)ready() )Mais on a aussi parfois besoin de les reacute-exeacutecuter lorsque lrsquoon interagit avec la page (appel AJAX overlayhellip)
Pour ce faire il suffit drsquoattacher le script JS agrave lrsquoobjet Drupalbehaviors (librairie coredrupal) La fonction exeacutecuteacutee reccediloit 2 variables
context le DOM (le HTML chargeacute ou ajouteacute)
settings toutes les variables injecteacutees cocircteacute serveur
9 JAVASCRIPT
RAPPEL
Comme pour les fichiers de style les scripts JS doivent ecirctre deacuteclareacutes sous forme de bibliothegraveque via les fichiers THEMENAMEinfoyml et THEMENAMElibrariesyml
QUESTIONS 10
RTFM httpswwwdrupalorgdocs8theminghttpstwigsymfonycomdoc2x
MERCI Agrave VOUS
FlorisMoriceau
4 LES TEMPLATES
LES TEMPLATES DEacuteRIVEacuteES
Les templates deacuteriveacutees sont des templates utiliseacutees dans un contexte preacutecis
Crsquoest le nom de la template qui indique agrave Drupal quand lrsquoutiliser
Toutes ces templates sont optionnelles et reconnues automatiquement par Drupal en fonction de leurs noms
Si des templates ne sont pas preacutesentes dans le thegraveme alors Drupal utilise ceux par deacutefaut (corethemes)
On parle de ldquotemplate deacuteriveacuteeldquo de ldquosuggestion de templateldquo ou de ldquotemplates suggeacutereacuteesldquo
Il faut vider le cache de Drupal lorsque lrsquoon ajoute des templates au thegraveme
Documentation httpswwwdrupalorgdocs8themingtwigtwig-template-naming-conventions
4 LES TEMPLATES
EXEMPLE DE SUGGESTIONS DE TEMPLATES
Template de page pagehtmltwig page--chemin--internehtmltwig sera utiliseacute lorsque lrsquoon appelle chemininterne
Ex page--fronthtmltwig cible la page drsquoaccueil
Ex page--cheminhtmltwig cible toutes les pages dont le chemin commence par chemin
Ex page--node--240htmltwig cible la page du noeud portant lrsquoid 240
Template de noeud nodehtmltwig node--type-de-noeudhtmltwig cible les noeuds de type type-de-noeud
Ex node--articlehtmltwig cible tous les noeuds de type article
4 LES TEMPLATES
TROUVER LES SUGGESTIONS
Dans le fichier wwwsitesdevelopmentservicesyml
Local development services
parameters httpresponsedebug_cacheability_headers true twigconfig debug true services cachebackendnull class DrupalCoreCacheNullBackendFactory
TWIG5
5 TWIG
UN MOTEUR DE TEMPLATE
Twig est capable drsquoafficher le contenu de nrsquoimporte quel type de variable (chaine tableau ou objet)
Il est possible de faire des boucles des conditionshellip
Chaque variable peut ecirctre filtreacutee avant drsquoecirctre afficheacutee
Les chaines peuvent ecirctre rendues traduites (la traduction est alors faite via le back-office de Drupal)
5 TWIG
LES BASES
Affiche le contenu de la variable var var
Affiche le contenu de la proprieacuteteacute title de la variable node nodetitle
Conditions if var else endif
Commentaires commentaire
Traduction trans chaine endtrans
Fonctions speacutecifiques
url(lsquoroute_namersquo)
path(lsquoentitynodecanonicalrsquo lsquonodersquo nodeid)
Les modules Twig tweak ou encore Bamboo Twig proposent encore davantage de fonctions
5 TWIG
LES FILTRES Date date|format_date(lsquomediumrsquo)
Chaine
Echappement content (par deacutefaut)
Interpreacutetation du contenu de la variable texte|raw (attention )
Placeholder text|placeholder
Exclusion content|without(lsquolinksrsquo)
string|lower (upper eacutegalement)
class_name|clean_class
id_name|clean_id
Documentation httpswwwdrupalorgdocs8themingtwigfilters-modifying-variables-in-twig-templateshttpstwigsymfonycomdoc2x
5 TWIG
CONCREgraveTEMENT if pagefooter_first or pagefooter_middle or pagefooter_last ltdiv class=l-footer row expandedgt ltfooter class=row footer medium-up-2 large-up-3gt if pagefooter_first ltdiv id=footer-first class=columngt pagefooter_first ltdivgt endif if pagefooter_middle ltdiv id=footer-middle class=columngt pagefooter_middle ltdivgt endif if pagefooter_last ltdiv id=footer-last class=columngt pagefooter_last ltdivgt endif ltfootergt ltdivgt endif ltdiv class=bottom-bar panel hiddengt ltdiv class=rowgt ltdiv class=large-12 columngt ampcopy now|date(Y) site_name All rights reserved|t ltdivgt ltdivgt ltdivgt
LES REacuteGIONS6
6 LES REacuteGIONS
STRUCTURE DE LA PAGE
adminstructureblock gt Demonstrate block regions
6 LES REacuteGIONS
DEacuteFINITION ET RENDU DES REacuteGIONS
Les reacutegions doivent ecirctre deacutefinies dans le fichier THEMENAMEinfoyml
Elles doivent ecirctre appeleacutees obligatoirement dans pagehtmltwig
6 LES REacuteGIONS
THEMENAMEINFOYML
PAGEHTMLTWIG
LE RENDU DU CONTENU
7
7 RENDU DU CONTENU
LrsquoAFFICHAGE DES CHAMPS
Pour chaque type de contenu on peut reacutegler lrsquoaffichage des champs sur adminstructuretypesmanagecontent-typedisplay ougrave content-type est le nom machine du type de contenu
Il est possible de modifier lrsquoordre des champs lrsquoapparence des eacutetiquettes le format du champ
Les reacuteglages disponibles varient en fonction du type de champ
Les champs Texte peuvent ecirctre coupeacutes
Les champs Image peuvent ecirctre afficheacutes sous forme drsquoimage drsquoURL de fichier
Les champs Date peuvent utiliser un format diffeacuterent
Ces reacuteglages peuvent ecirctre diffeacuterents selon le mode drsquoaffichage (modes ldquoPar deacutefautldquo et ldquoAccrocheldquo) =gt Cela permet par exemple de masquer un champ en mode ldquoAccrocheldquo et de lrsquoafficher en mode ldquoPar deacutefautldquo (noeud inteacutegral)
7 RENDU DU CONTENU
LrsquoAFFICHAGE DES IMAGES
Les images transmises par les utilisateurs ne sont jamais aux bonnes dimensions
Le module Image (core) va nous permettre de preacutedeacutefinir des dimensions sous forme de styles drsquoimage par exemple
Vignette 70px x 110px (mise agrave lrsquoeacutechelle)
Normal 200px x 300px (mise agrave lrsquoeacutechelle et recadrage)
Ces dimensions pourront ensuite ecirctre appliqueacutees automatiquement aux champs Image depuis lrsquoeacutecran ldquogeacuterer lrsquoaffichageldquo vu preacuteceacutedemment
7 RENDU DU CONTENU
STYLE DrsquoIMAGE
7 RENDU DU CONTENU
STYLE DrsquoIMAGE
7 RENDU DU CONTENU
ALLER PLUS LOIN La gestion et la manipulation des champs est cependant
limiteacutee dans lrsquointerface drsquoadministration
On est parfois obligeacutes de modifier le code du template correspondant agrave notre champ ou type de contenu
Les reacuteglages de lrsquoadmin sont toujours pris en compte Par exemple les styles drsquoimage choisis seront ceux utiliseacutes mecircme si lrsquoon modifie le template
7 RENDU DU CONTENU
OUgrave SONT LES CHAMPS
Dans le fichier de template des noeuds (nodehtmltwig) on nrsquoa pas directement accegraves aux champs
Crsquoest la variable content qui contient tous les champs que lrsquoon affiche et en particulier ceux ajouteacutes via Field
Comment faire pour reacutecupeacuterer les champs un par un afin de les preacutesenter diffeacuteremment
7 RENDU DU CONTENU
LA VARIABLE lsquoCONTENTrsquo
Tout le contenu drsquoun noeud est afficheacute gracircce agrave la ligne content|without(comment links)
Pour connaitre le contenu de content on utilise la fonction kint() kint(content)
On deacutecouvre alors lrsquoensemble des champs et leurs proprieacuteteacutes qui sont afficheacutees en haut de page sous forme de var_dump()
On peut afficher seacutepareacutement chacun drsquoentre eux avec le code suivant contentnom_du_champ nodecreatedtime
7 RENDU DU CONTENU
NODE DE TYPE lsquoNEWSrsquo ET FORMAT lsquoTEASERrsquo
PREPROCESS8
8 PREPROCESS
FONCTIONS DE PREPROCESS
Pour chaque template on dispose de variables que lrsquoon affiche avec le formatage voulu
Ces variables sont creacuteeacutees en amont des templates dans lesquelles elles sont utiliseacutees
On dispose de fonctions dites de preprocess qui permettent de fabriquer les variables qui sont utiliseacutees dans les templates
Il est possible drsquoeacutetendre ces fonctions pour modifier les variables envoyeacutees aux templates ou en creacuteer de nouvelles
Pour ajouter une fonction de preprocess il faut la nommer comme suit THEMENAME_preprocess_HOOK() Par exemple drupal_france_preprocess_block()
8 PREPROCESS
FONCTIONS DE PREPROCESS
Pour chaque template on dispose de variables que lrsquoon affiche avec le formatage voulu
Ces variables sont creacuteeacutees en amont des templates dans lesquelles elles sont utiliseacutees
On dispose de fonctions dites de preprocess qui permettent de fabriquer les variables qui sont utiliseacutees dans les templates
Il est possible drsquoeacutetendre ces fonctions pour modifier les variables envoyeacutees aux templates ou en creacuteer de nouvelles
Pour ajouter une fonction de preprocess il faut la nommer comme suit THEMENAME_preprocess_HOOK() Par exemple drupal_france_preprocess_block()
8 PREPROCESS
LA VARIABLE lsquo$VARIABLESrsquo
Drupal
Preprocess en amont(core modules)
Preprocess du thegraveme
TemplateCreacuteation de $variables
$variables
$variables
$variables
$variables
En mode super simplifieacute
8 PREPROCESS
APPELLER UN PREPROCESS
Diffeacuterentes fonctions de preprocess peuvent ecirctre appeleacutees permettant agrave tous les modules et thegravemes de modifier les variables passeacutees aux templates Ces fonctions sont les suivantes pour le hook de thegraveme HOOK
template_preprocess_HOOK(array amp$variables)
MODULENAME_preprocess(array amp$variables $hook)
MODULENAME_preprocess_HOOK(array amp$variables)
THEMENAME_preprocess(array amp$variables $hook)
THEMENAME_preprocess_HOOK(array amp$variables)
8 PREPROCESS
CONCREgraveTEMENT Implements hook_preprocess_menu__account() function drupal_france_preprocess_menu__account(amp$variables) if (isset($variables[items][drupalfr_useraccountcompte])) $variables[items][drupalfr_useraccountcompte][attributes]-gtaddClass([ button primary button--user-account ])
$variables[items][drupalfr_useraccountcompte][title] = new FormattableMarkup( lti class=fa fa-user-circle-o aria-hidden=truegtltigtltspan class=sr-onlygtoriginal_titleltspangt [ original_title =gt $variables[items][drupalfr_useraccountcompte][title] ] )
JAVASCRIPT9
9 JAVASCRIPT
DRUPAL amp JAVASCRIPT Drupal integravegre de nombreuses libraries javascript (jQuery Modernizrhellip) et propose
eacutegalement des libraries drsquoutilitaires (coredrupal coredrupalSettings drupalajax drupalformhellip)
Par exemple Drupal 8 embarque
jQuery 321
jQuery UI 1121
Chaque librairie deacutefinit ses deacutependances jQuery UI deacutepend de jQuery par exemple
Lorsque lrsquoon utilise une librairie depuis un script custom il ne faut pas oublier de deacuteclarer cette deacutependance Pensez agrave tester en anonyme car aucune libraire nrsquoest chargeacutee par deacutefaut
Vous disposez de toutes les librairies deacutefinies dans le fichier corecorelibrairiesyml
9 JAVASCRIPT
CONCREgraveTEMENTPour pouvoir utiliser du code JS dans vos scripts avec Drupal la bonne pratique est drsquoencadrer votre code comme suit
file Shows status messages in a modal instead of inline (function ($ Drupal)
Displays status messages in a Foundation reveal modal DrupalbehaviorsfoundationStatusInReveal = attach function (context settings) $(status-messages)once(foundation-reveal)each(function() Move the status messages out of the highlighted region var $messages = $(this) var $region = $messagesparent() $messagesappendTo(body) $messagesfoundation(open)
This is required as this region will likely be empty after status messages are removed $regionhtml($regionhtml()replace(ng )) )
)(jQuery Drupal)
9 JAVASCRIPT
DRUPAL BEHAVIORS
Les scripts sont exeacutecuteacutes apregraves le chargement complet du DOM ($(document)ready() )Mais on a aussi parfois besoin de les reacute-exeacutecuter lorsque lrsquoon interagit avec la page (appel AJAX overlayhellip)
Pour ce faire il suffit drsquoattacher le script JS agrave lrsquoobjet Drupalbehaviors (librairie coredrupal) La fonction exeacutecuteacutee reccediloit 2 variables
context le DOM (le HTML chargeacute ou ajouteacute)
settings toutes les variables injecteacutees cocircteacute serveur
9 JAVASCRIPT
RAPPEL
Comme pour les fichiers de style les scripts JS doivent ecirctre deacuteclareacutes sous forme de bibliothegraveque via les fichiers THEMENAMEinfoyml et THEMENAMElibrariesyml
QUESTIONS 10
RTFM httpswwwdrupalorgdocs8theminghttpstwigsymfonycomdoc2x
MERCI Agrave VOUS
FlorisMoriceau
4 LES TEMPLATES
EXEMPLE DE SUGGESTIONS DE TEMPLATES
Template de page pagehtmltwig page--chemin--internehtmltwig sera utiliseacute lorsque lrsquoon appelle chemininterne
Ex page--fronthtmltwig cible la page drsquoaccueil
Ex page--cheminhtmltwig cible toutes les pages dont le chemin commence par chemin
Ex page--node--240htmltwig cible la page du noeud portant lrsquoid 240
Template de noeud nodehtmltwig node--type-de-noeudhtmltwig cible les noeuds de type type-de-noeud
Ex node--articlehtmltwig cible tous les noeuds de type article
4 LES TEMPLATES
TROUVER LES SUGGESTIONS
Dans le fichier wwwsitesdevelopmentservicesyml
Local development services
parameters httpresponsedebug_cacheability_headers true twigconfig debug true services cachebackendnull class DrupalCoreCacheNullBackendFactory
TWIG5
5 TWIG
UN MOTEUR DE TEMPLATE
Twig est capable drsquoafficher le contenu de nrsquoimporte quel type de variable (chaine tableau ou objet)
Il est possible de faire des boucles des conditionshellip
Chaque variable peut ecirctre filtreacutee avant drsquoecirctre afficheacutee
Les chaines peuvent ecirctre rendues traduites (la traduction est alors faite via le back-office de Drupal)
5 TWIG
LES BASES
Affiche le contenu de la variable var var
Affiche le contenu de la proprieacuteteacute title de la variable node nodetitle
Conditions if var else endif
Commentaires commentaire
Traduction trans chaine endtrans
Fonctions speacutecifiques
url(lsquoroute_namersquo)
path(lsquoentitynodecanonicalrsquo lsquonodersquo nodeid)
Les modules Twig tweak ou encore Bamboo Twig proposent encore davantage de fonctions
5 TWIG
LES FILTRES Date date|format_date(lsquomediumrsquo)
Chaine
Echappement content (par deacutefaut)
Interpreacutetation du contenu de la variable texte|raw (attention )
Placeholder text|placeholder
Exclusion content|without(lsquolinksrsquo)
string|lower (upper eacutegalement)
class_name|clean_class
id_name|clean_id
Documentation httpswwwdrupalorgdocs8themingtwigfilters-modifying-variables-in-twig-templateshttpstwigsymfonycomdoc2x
5 TWIG
CONCREgraveTEMENT if pagefooter_first or pagefooter_middle or pagefooter_last ltdiv class=l-footer row expandedgt ltfooter class=row footer medium-up-2 large-up-3gt if pagefooter_first ltdiv id=footer-first class=columngt pagefooter_first ltdivgt endif if pagefooter_middle ltdiv id=footer-middle class=columngt pagefooter_middle ltdivgt endif if pagefooter_last ltdiv id=footer-last class=columngt pagefooter_last ltdivgt endif ltfootergt ltdivgt endif ltdiv class=bottom-bar panel hiddengt ltdiv class=rowgt ltdiv class=large-12 columngt ampcopy now|date(Y) site_name All rights reserved|t ltdivgt ltdivgt ltdivgt
LES REacuteGIONS6
6 LES REacuteGIONS
STRUCTURE DE LA PAGE
adminstructureblock gt Demonstrate block regions
6 LES REacuteGIONS
DEacuteFINITION ET RENDU DES REacuteGIONS
Les reacutegions doivent ecirctre deacutefinies dans le fichier THEMENAMEinfoyml
Elles doivent ecirctre appeleacutees obligatoirement dans pagehtmltwig
6 LES REacuteGIONS
THEMENAMEINFOYML
PAGEHTMLTWIG
LE RENDU DU CONTENU
7
7 RENDU DU CONTENU
LrsquoAFFICHAGE DES CHAMPS
Pour chaque type de contenu on peut reacutegler lrsquoaffichage des champs sur adminstructuretypesmanagecontent-typedisplay ougrave content-type est le nom machine du type de contenu
Il est possible de modifier lrsquoordre des champs lrsquoapparence des eacutetiquettes le format du champ
Les reacuteglages disponibles varient en fonction du type de champ
Les champs Texte peuvent ecirctre coupeacutes
Les champs Image peuvent ecirctre afficheacutes sous forme drsquoimage drsquoURL de fichier
Les champs Date peuvent utiliser un format diffeacuterent
Ces reacuteglages peuvent ecirctre diffeacuterents selon le mode drsquoaffichage (modes ldquoPar deacutefautldquo et ldquoAccrocheldquo) =gt Cela permet par exemple de masquer un champ en mode ldquoAccrocheldquo et de lrsquoafficher en mode ldquoPar deacutefautldquo (noeud inteacutegral)
7 RENDU DU CONTENU
LrsquoAFFICHAGE DES IMAGES
Les images transmises par les utilisateurs ne sont jamais aux bonnes dimensions
Le module Image (core) va nous permettre de preacutedeacutefinir des dimensions sous forme de styles drsquoimage par exemple
Vignette 70px x 110px (mise agrave lrsquoeacutechelle)
Normal 200px x 300px (mise agrave lrsquoeacutechelle et recadrage)
Ces dimensions pourront ensuite ecirctre appliqueacutees automatiquement aux champs Image depuis lrsquoeacutecran ldquogeacuterer lrsquoaffichageldquo vu preacuteceacutedemment
7 RENDU DU CONTENU
STYLE DrsquoIMAGE
7 RENDU DU CONTENU
STYLE DrsquoIMAGE
7 RENDU DU CONTENU
ALLER PLUS LOIN La gestion et la manipulation des champs est cependant
limiteacutee dans lrsquointerface drsquoadministration
On est parfois obligeacutes de modifier le code du template correspondant agrave notre champ ou type de contenu
Les reacuteglages de lrsquoadmin sont toujours pris en compte Par exemple les styles drsquoimage choisis seront ceux utiliseacutes mecircme si lrsquoon modifie le template
7 RENDU DU CONTENU
OUgrave SONT LES CHAMPS
Dans le fichier de template des noeuds (nodehtmltwig) on nrsquoa pas directement accegraves aux champs
Crsquoest la variable content qui contient tous les champs que lrsquoon affiche et en particulier ceux ajouteacutes via Field
Comment faire pour reacutecupeacuterer les champs un par un afin de les preacutesenter diffeacuteremment
7 RENDU DU CONTENU
LA VARIABLE lsquoCONTENTrsquo
Tout le contenu drsquoun noeud est afficheacute gracircce agrave la ligne content|without(comment links)
Pour connaitre le contenu de content on utilise la fonction kint() kint(content)
On deacutecouvre alors lrsquoensemble des champs et leurs proprieacuteteacutes qui sont afficheacutees en haut de page sous forme de var_dump()
On peut afficher seacutepareacutement chacun drsquoentre eux avec le code suivant contentnom_du_champ nodecreatedtime
7 RENDU DU CONTENU
NODE DE TYPE lsquoNEWSrsquo ET FORMAT lsquoTEASERrsquo
PREPROCESS8
8 PREPROCESS
FONCTIONS DE PREPROCESS
Pour chaque template on dispose de variables que lrsquoon affiche avec le formatage voulu
Ces variables sont creacuteeacutees en amont des templates dans lesquelles elles sont utiliseacutees
On dispose de fonctions dites de preprocess qui permettent de fabriquer les variables qui sont utiliseacutees dans les templates
Il est possible drsquoeacutetendre ces fonctions pour modifier les variables envoyeacutees aux templates ou en creacuteer de nouvelles
Pour ajouter une fonction de preprocess il faut la nommer comme suit THEMENAME_preprocess_HOOK() Par exemple drupal_france_preprocess_block()
8 PREPROCESS
FONCTIONS DE PREPROCESS
Pour chaque template on dispose de variables que lrsquoon affiche avec le formatage voulu
Ces variables sont creacuteeacutees en amont des templates dans lesquelles elles sont utiliseacutees
On dispose de fonctions dites de preprocess qui permettent de fabriquer les variables qui sont utiliseacutees dans les templates
Il est possible drsquoeacutetendre ces fonctions pour modifier les variables envoyeacutees aux templates ou en creacuteer de nouvelles
Pour ajouter une fonction de preprocess il faut la nommer comme suit THEMENAME_preprocess_HOOK() Par exemple drupal_france_preprocess_block()
8 PREPROCESS
LA VARIABLE lsquo$VARIABLESrsquo
Drupal
Preprocess en amont(core modules)
Preprocess du thegraveme
TemplateCreacuteation de $variables
$variables
$variables
$variables
$variables
En mode super simplifieacute
8 PREPROCESS
APPELLER UN PREPROCESS
Diffeacuterentes fonctions de preprocess peuvent ecirctre appeleacutees permettant agrave tous les modules et thegravemes de modifier les variables passeacutees aux templates Ces fonctions sont les suivantes pour le hook de thegraveme HOOK
template_preprocess_HOOK(array amp$variables)
MODULENAME_preprocess(array amp$variables $hook)
MODULENAME_preprocess_HOOK(array amp$variables)
THEMENAME_preprocess(array amp$variables $hook)
THEMENAME_preprocess_HOOK(array amp$variables)
8 PREPROCESS
CONCREgraveTEMENT Implements hook_preprocess_menu__account() function drupal_france_preprocess_menu__account(amp$variables) if (isset($variables[items][drupalfr_useraccountcompte])) $variables[items][drupalfr_useraccountcompte][attributes]-gtaddClass([ button primary button--user-account ])
$variables[items][drupalfr_useraccountcompte][title] = new FormattableMarkup( lti class=fa fa-user-circle-o aria-hidden=truegtltigtltspan class=sr-onlygtoriginal_titleltspangt [ original_title =gt $variables[items][drupalfr_useraccountcompte][title] ] )
JAVASCRIPT9
9 JAVASCRIPT
DRUPAL amp JAVASCRIPT Drupal integravegre de nombreuses libraries javascript (jQuery Modernizrhellip) et propose
eacutegalement des libraries drsquoutilitaires (coredrupal coredrupalSettings drupalajax drupalformhellip)
Par exemple Drupal 8 embarque
jQuery 321
jQuery UI 1121
Chaque librairie deacutefinit ses deacutependances jQuery UI deacutepend de jQuery par exemple
Lorsque lrsquoon utilise une librairie depuis un script custom il ne faut pas oublier de deacuteclarer cette deacutependance Pensez agrave tester en anonyme car aucune libraire nrsquoest chargeacutee par deacutefaut
Vous disposez de toutes les librairies deacutefinies dans le fichier corecorelibrairiesyml
9 JAVASCRIPT
CONCREgraveTEMENTPour pouvoir utiliser du code JS dans vos scripts avec Drupal la bonne pratique est drsquoencadrer votre code comme suit
file Shows status messages in a modal instead of inline (function ($ Drupal)
Displays status messages in a Foundation reveal modal DrupalbehaviorsfoundationStatusInReveal = attach function (context settings) $(status-messages)once(foundation-reveal)each(function() Move the status messages out of the highlighted region var $messages = $(this) var $region = $messagesparent() $messagesappendTo(body) $messagesfoundation(open)
This is required as this region will likely be empty after status messages are removed $regionhtml($regionhtml()replace(ng )) )
)(jQuery Drupal)
9 JAVASCRIPT
DRUPAL BEHAVIORS
Les scripts sont exeacutecuteacutes apregraves le chargement complet du DOM ($(document)ready() )Mais on a aussi parfois besoin de les reacute-exeacutecuter lorsque lrsquoon interagit avec la page (appel AJAX overlayhellip)
Pour ce faire il suffit drsquoattacher le script JS agrave lrsquoobjet Drupalbehaviors (librairie coredrupal) La fonction exeacutecuteacutee reccediloit 2 variables
context le DOM (le HTML chargeacute ou ajouteacute)
settings toutes les variables injecteacutees cocircteacute serveur
9 JAVASCRIPT
RAPPEL
Comme pour les fichiers de style les scripts JS doivent ecirctre deacuteclareacutes sous forme de bibliothegraveque via les fichiers THEMENAMEinfoyml et THEMENAMElibrariesyml
QUESTIONS 10
RTFM httpswwwdrupalorgdocs8theminghttpstwigsymfonycomdoc2x
MERCI Agrave VOUS
FlorisMoriceau
4 LES TEMPLATES
TROUVER LES SUGGESTIONS
Dans le fichier wwwsitesdevelopmentservicesyml
Local development services
parameters httpresponsedebug_cacheability_headers true twigconfig debug true services cachebackendnull class DrupalCoreCacheNullBackendFactory
TWIG5
5 TWIG
UN MOTEUR DE TEMPLATE
Twig est capable drsquoafficher le contenu de nrsquoimporte quel type de variable (chaine tableau ou objet)
Il est possible de faire des boucles des conditionshellip
Chaque variable peut ecirctre filtreacutee avant drsquoecirctre afficheacutee
Les chaines peuvent ecirctre rendues traduites (la traduction est alors faite via le back-office de Drupal)
5 TWIG
LES BASES
Affiche le contenu de la variable var var
Affiche le contenu de la proprieacuteteacute title de la variable node nodetitle
Conditions if var else endif
Commentaires commentaire
Traduction trans chaine endtrans
Fonctions speacutecifiques
url(lsquoroute_namersquo)
path(lsquoentitynodecanonicalrsquo lsquonodersquo nodeid)
Les modules Twig tweak ou encore Bamboo Twig proposent encore davantage de fonctions
5 TWIG
LES FILTRES Date date|format_date(lsquomediumrsquo)
Chaine
Echappement content (par deacutefaut)
Interpreacutetation du contenu de la variable texte|raw (attention )
Placeholder text|placeholder
Exclusion content|without(lsquolinksrsquo)
string|lower (upper eacutegalement)
class_name|clean_class
id_name|clean_id
Documentation httpswwwdrupalorgdocs8themingtwigfilters-modifying-variables-in-twig-templateshttpstwigsymfonycomdoc2x
5 TWIG
CONCREgraveTEMENT if pagefooter_first or pagefooter_middle or pagefooter_last ltdiv class=l-footer row expandedgt ltfooter class=row footer medium-up-2 large-up-3gt if pagefooter_first ltdiv id=footer-first class=columngt pagefooter_first ltdivgt endif if pagefooter_middle ltdiv id=footer-middle class=columngt pagefooter_middle ltdivgt endif if pagefooter_last ltdiv id=footer-last class=columngt pagefooter_last ltdivgt endif ltfootergt ltdivgt endif ltdiv class=bottom-bar panel hiddengt ltdiv class=rowgt ltdiv class=large-12 columngt ampcopy now|date(Y) site_name All rights reserved|t ltdivgt ltdivgt ltdivgt
LES REacuteGIONS6
6 LES REacuteGIONS
STRUCTURE DE LA PAGE
adminstructureblock gt Demonstrate block regions
6 LES REacuteGIONS
DEacuteFINITION ET RENDU DES REacuteGIONS
Les reacutegions doivent ecirctre deacutefinies dans le fichier THEMENAMEinfoyml
Elles doivent ecirctre appeleacutees obligatoirement dans pagehtmltwig
6 LES REacuteGIONS
THEMENAMEINFOYML
PAGEHTMLTWIG
LE RENDU DU CONTENU
7
7 RENDU DU CONTENU
LrsquoAFFICHAGE DES CHAMPS
Pour chaque type de contenu on peut reacutegler lrsquoaffichage des champs sur adminstructuretypesmanagecontent-typedisplay ougrave content-type est le nom machine du type de contenu
Il est possible de modifier lrsquoordre des champs lrsquoapparence des eacutetiquettes le format du champ
Les reacuteglages disponibles varient en fonction du type de champ
Les champs Texte peuvent ecirctre coupeacutes
Les champs Image peuvent ecirctre afficheacutes sous forme drsquoimage drsquoURL de fichier
Les champs Date peuvent utiliser un format diffeacuterent
Ces reacuteglages peuvent ecirctre diffeacuterents selon le mode drsquoaffichage (modes ldquoPar deacutefautldquo et ldquoAccrocheldquo) =gt Cela permet par exemple de masquer un champ en mode ldquoAccrocheldquo et de lrsquoafficher en mode ldquoPar deacutefautldquo (noeud inteacutegral)
7 RENDU DU CONTENU
LrsquoAFFICHAGE DES IMAGES
Les images transmises par les utilisateurs ne sont jamais aux bonnes dimensions
Le module Image (core) va nous permettre de preacutedeacutefinir des dimensions sous forme de styles drsquoimage par exemple
Vignette 70px x 110px (mise agrave lrsquoeacutechelle)
Normal 200px x 300px (mise agrave lrsquoeacutechelle et recadrage)
Ces dimensions pourront ensuite ecirctre appliqueacutees automatiquement aux champs Image depuis lrsquoeacutecran ldquogeacuterer lrsquoaffichageldquo vu preacuteceacutedemment
7 RENDU DU CONTENU
STYLE DrsquoIMAGE
7 RENDU DU CONTENU
STYLE DrsquoIMAGE
7 RENDU DU CONTENU
ALLER PLUS LOIN La gestion et la manipulation des champs est cependant
limiteacutee dans lrsquointerface drsquoadministration
On est parfois obligeacutes de modifier le code du template correspondant agrave notre champ ou type de contenu
Les reacuteglages de lrsquoadmin sont toujours pris en compte Par exemple les styles drsquoimage choisis seront ceux utiliseacutes mecircme si lrsquoon modifie le template
7 RENDU DU CONTENU
OUgrave SONT LES CHAMPS
Dans le fichier de template des noeuds (nodehtmltwig) on nrsquoa pas directement accegraves aux champs
Crsquoest la variable content qui contient tous les champs que lrsquoon affiche et en particulier ceux ajouteacutes via Field
Comment faire pour reacutecupeacuterer les champs un par un afin de les preacutesenter diffeacuteremment
7 RENDU DU CONTENU
LA VARIABLE lsquoCONTENTrsquo
Tout le contenu drsquoun noeud est afficheacute gracircce agrave la ligne content|without(comment links)
Pour connaitre le contenu de content on utilise la fonction kint() kint(content)
On deacutecouvre alors lrsquoensemble des champs et leurs proprieacuteteacutes qui sont afficheacutees en haut de page sous forme de var_dump()
On peut afficher seacutepareacutement chacun drsquoentre eux avec le code suivant contentnom_du_champ nodecreatedtime
7 RENDU DU CONTENU
NODE DE TYPE lsquoNEWSrsquo ET FORMAT lsquoTEASERrsquo
PREPROCESS8
8 PREPROCESS
FONCTIONS DE PREPROCESS
Pour chaque template on dispose de variables que lrsquoon affiche avec le formatage voulu
Ces variables sont creacuteeacutees en amont des templates dans lesquelles elles sont utiliseacutees
On dispose de fonctions dites de preprocess qui permettent de fabriquer les variables qui sont utiliseacutees dans les templates
Il est possible drsquoeacutetendre ces fonctions pour modifier les variables envoyeacutees aux templates ou en creacuteer de nouvelles
Pour ajouter une fonction de preprocess il faut la nommer comme suit THEMENAME_preprocess_HOOK() Par exemple drupal_france_preprocess_block()
8 PREPROCESS
FONCTIONS DE PREPROCESS
Pour chaque template on dispose de variables que lrsquoon affiche avec le formatage voulu
Ces variables sont creacuteeacutees en amont des templates dans lesquelles elles sont utiliseacutees
On dispose de fonctions dites de preprocess qui permettent de fabriquer les variables qui sont utiliseacutees dans les templates
Il est possible drsquoeacutetendre ces fonctions pour modifier les variables envoyeacutees aux templates ou en creacuteer de nouvelles
Pour ajouter une fonction de preprocess il faut la nommer comme suit THEMENAME_preprocess_HOOK() Par exemple drupal_france_preprocess_block()
8 PREPROCESS
LA VARIABLE lsquo$VARIABLESrsquo
Drupal
Preprocess en amont(core modules)
Preprocess du thegraveme
TemplateCreacuteation de $variables
$variables
$variables
$variables
$variables
En mode super simplifieacute
8 PREPROCESS
APPELLER UN PREPROCESS
Diffeacuterentes fonctions de preprocess peuvent ecirctre appeleacutees permettant agrave tous les modules et thegravemes de modifier les variables passeacutees aux templates Ces fonctions sont les suivantes pour le hook de thegraveme HOOK
template_preprocess_HOOK(array amp$variables)
MODULENAME_preprocess(array amp$variables $hook)
MODULENAME_preprocess_HOOK(array amp$variables)
THEMENAME_preprocess(array amp$variables $hook)
THEMENAME_preprocess_HOOK(array amp$variables)
8 PREPROCESS
CONCREgraveTEMENT Implements hook_preprocess_menu__account() function drupal_france_preprocess_menu__account(amp$variables) if (isset($variables[items][drupalfr_useraccountcompte])) $variables[items][drupalfr_useraccountcompte][attributes]-gtaddClass([ button primary button--user-account ])
$variables[items][drupalfr_useraccountcompte][title] = new FormattableMarkup( lti class=fa fa-user-circle-o aria-hidden=truegtltigtltspan class=sr-onlygtoriginal_titleltspangt [ original_title =gt $variables[items][drupalfr_useraccountcompte][title] ] )
JAVASCRIPT9
9 JAVASCRIPT
DRUPAL amp JAVASCRIPT Drupal integravegre de nombreuses libraries javascript (jQuery Modernizrhellip) et propose
eacutegalement des libraries drsquoutilitaires (coredrupal coredrupalSettings drupalajax drupalformhellip)
Par exemple Drupal 8 embarque
jQuery 321
jQuery UI 1121
Chaque librairie deacutefinit ses deacutependances jQuery UI deacutepend de jQuery par exemple
Lorsque lrsquoon utilise une librairie depuis un script custom il ne faut pas oublier de deacuteclarer cette deacutependance Pensez agrave tester en anonyme car aucune libraire nrsquoest chargeacutee par deacutefaut
Vous disposez de toutes les librairies deacutefinies dans le fichier corecorelibrairiesyml
9 JAVASCRIPT
CONCREgraveTEMENTPour pouvoir utiliser du code JS dans vos scripts avec Drupal la bonne pratique est drsquoencadrer votre code comme suit
file Shows status messages in a modal instead of inline (function ($ Drupal)
Displays status messages in a Foundation reveal modal DrupalbehaviorsfoundationStatusInReveal = attach function (context settings) $(status-messages)once(foundation-reveal)each(function() Move the status messages out of the highlighted region var $messages = $(this) var $region = $messagesparent() $messagesappendTo(body) $messagesfoundation(open)
This is required as this region will likely be empty after status messages are removed $regionhtml($regionhtml()replace(ng )) )
)(jQuery Drupal)
9 JAVASCRIPT
DRUPAL BEHAVIORS
Les scripts sont exeacutecuteacutes apregraves le chargement complet du DOM ($(document)ready() )Mais on a aussi parfois besoin de les reacute-exeacutecuter lorsque lrsquoon interagit avec la page (appel AJAX overlayhellip)
Pour ce faire il suffit drsquoattacher le script JS agrave lrsquoobjet Drupalbehaviors (librairie coredrupal) La fonction exeacutecuteacutee reccediloit 2 variables
context le DOM (le HTML chargeacute ou ajouteacute)
settings toutes les variables injecteacutees cocircteacute serveur
9 JAVASCRIPT
RAPPEL
Comme pour les fichiers de style les scripts JS doivent ecirctre deacuteclareacutes sous forme de bibliothegraveque via les fichiers THEMENAMEinfoyml et THEMENAMElibrariesyml
QUESTIONS 10
RTFM httpswwwdrupalorgdocs8theminghttpstwigsymfonycomdoc2x
MERCI Agrave VOUS
FlorisMoriceau
TWIG5
5 TWIG
UN MOTEUR DE TEMPLATE
Twig est capable drsquoafficher le contenu de nrsquoimporte quel type de variable (chaine tableau ou objet)
Il est possible de faire des boucles des conditionshellip
Chaque variable peut ecirctre filtreacutee avant drsquoecirctre afficheacutee
Les chaines peuvent ecirctre rendues traduites (la traduction est alors faite via le back-office de Drupal)
5 TWIG
LES BASES
Affiche le contenu de la variable var var
Affiche le contenu de la proprieacuteteacute title de la variable node nodetitle
Conditions if var else endif
Commentaires commentaire
Traduction trans chaine endtrans
Fonctions speacutecifiques
url(lsquoroute_namersquo)
path(lsquoentitynodecanonicalrsquo lsquonodersquo nodeid)
Les modules Twig tweak ou encore Bamboo Twig proposent encore davantage de fonctions
5 TWIG
LES FILTRES Date date|format_date(lsquomediumrsquo)
Chaine
Echappement content (par deacutefaut)
Interpreacutetation du contenu de la variable texte|raw (attention )
Placeholder text|placeholder
Exclusion content|without(lsquolinksrsquo)
string|lower (upper eacutegalement)
class_name|clean_class
id_name|clean_id
Documentation httpswwwdrupalorgdocs8themingtwigfilters-modifying-variables-in-twig-templateshttpstwigsymfonycomdoc2x
5 TWIG
CONCREgraveTEMENT if pagefooter_first or pagefooter_middle or pagefooter_last ltdiv class=l-footer row expandedgt ltfooter class=row footer medium-up-2 large-up-3gt if pagefooter_first ltdiv id=footer-first class=columngt pagefooter_first ltdivgt endif if pagefooter_middle ltdiv id=footer-middle class=columngt pagefooter_middle ltdivgt endif if pagefooter_last ltdiv id=footer-last class=columngt pagefooter_last ltdivgt endif ltfootergt ltdivgt endif ltdiv class=bottom-bar panel hiddengt ltdiv class=rowgt ltdiv class=large-12 columngt ampcopy now|date(Y) site_name All rights reserved|t ltdivgt ltdivgt ltdivgt
LES REacuteGIONS6
6 LES REacuteGIONS
STRUCTURE DE LA PAGE
adminstructureblock gt Demonstrate block regions
6 LES REacuteGIONS
DEacuteFINITION ET RENDU DES REacuteGIONS
Les reacutegions doivent ecirctre deacutefinies dans le fichier THEMENAMEinfoyml
Elles doivent ecirctre appeleacutees obligatoirement dans pagehtmltwig
6 LES REacuteGIONS
THEMENAMEINFOYML
PAGEHTMLTWIG
LE RENDU DU CONTENU
7
7 RENDU DU CONTENU
LrsquoAFFICHAGE DES CHAMPS
Pour chaque type de contenu on peut reacutegler lrsquoaffichage des champs sur adminstructuretypesmanagecontent-typedisplay ougrave content-type est le nom machine du type de contenu
Il est possible de modifier lrsquoordre des champs lrsquoapparence des eacutetiquettes le format du champ
Les reacuteglages disponibles varient en fonction du type de champ
Les champs Texte peuvent ecirctre coupeacutes
Les champs Image peuvent ecirctre afficheacutes sous forme drsquoimage drsquoURL de fichier
Les champs Date peuvent utiliser un format diffeacuterent
Ces reacuteglages peuvent ecirctre diffeacuterents selon le mode drsquoaffichage (modes ldquoPar deacutefautldquo et ldquoAccrocheldquo) =gt Cela permet par exemple de masquer un champ en mode ldquoAccrocheldquo et de lrsquoafficher en mode ldquoPar deacutefautldquo (noeud inteacutegral)
7 RENDU DU CONTENU
LrsquoAFFICHAGE DES IMAGES
Les images transmises par les utilisateurs ne sont jamais aux bonnes dimensions
Le module Image (core) va nous permettre de preacutedeacutefinir des dimensions sous forme de styles drsquoimage par exemple
Vignette 70px x 110px (mise agrave lrsquoeacutechelle)
Normal 200px x 300px (mise agrave lrsquoeacutechelle et recadrage)
Ces dimensions pourront ensuite ecirctre appliqueacutees automatiquement aux champs Image depuis lrsquoeacutecran ldquogeacuterer lrsquoaffichageldquo vu preacuteceacutedemment
7 RENDU DU CONTENU
STYLE DrsquoIMAGE
7 RENDU DU CONTENU
STYLE DrsquoIMAGE
7 RENDU DU CONTENU
ALLER PLUS LOIN La gestion et la manipulation des champs est cependant
limiteacutee dans lrsquointerface drsquoadministration
On est parfois obligeacutes de modifier le code du template correspondant agrave notre champ ou type de contenu
Les reacuteglages de lrsquoadmin sont toujours pris en compte Par exemple les styles drsquoimage choisis seront ceux utiliseacutes mecircme si lrsquoon modifie le template
7 RENDU DU CONTENU
OUgrave SONT LES CHAMPS
Dans le fichier de template des noeuds (nodehtmltwig) on nrsquoa pas directement accegraves aux champs
Crsquoest la variable content qui contient tous les champs que lrsquoon affiche et en particulier ceux ajouteacutes via Field
Comment faire pour reacutecupeacuterer les champs un par un afin de les preacutesenter diffeacuteremment
7 RENDU DU CONTENU
LA VARIABLE lsquoCONTENTrsquo
Tout le contenu drsquoun noeud est afficheacute gracircce agrave la ligne content|without(comment links)
Pour connaitre le contenu de content on utilise la fonction kint() kint(content)
On deacutecouvre alors lrsquoensemble des champs et leurs proprieacuteteacutes qui sont afficheacutees en haut de page sous forme de var_dump()
On peut afficher seacutepareacutement chacun drsquoentre eux avec le code suivant contentnom_du_champ nodecreatedtime
7 RENDU DU CONTENU
NODE DE TYPE lsquoNEWSrsquo ET FORMAT lsquoTEASERrsquo
PREPROCESS8
8 PREPROCESS
FONCTIONS DE PREPROCESS
Pour chaque template on dispose de variables que lrsquoon affiche avec le formatage voulu
Ces variables sont creacuteeacutees en amont des templates dans lesquelles elles sont utiliseacutees
On dispose de fonctions dites de preprocess qui permettent de fabriquer les variables qui sont utiliseacutees dans les templates
Il est possible drsquoeacutetendre ces fonctions pour modifier les variables envoyeacutees aux templates ou en creacuteer de nouvelles
Pour ajouter une fonction de preprocess il faut la nommer comme suit THEMENAME_preprocess_HOOK() Par exemple drupal_france_preprocess_block()
8 PREPROCESS
FONCTIONS DE PREPROCESS
Pour chaque template on dispose de variables que lrsquoon affiche avec le formatage voulu
Ces variables sont creacuteeacutees en amont des templates dans lesquelles elles sont utiliseacutees
On dispose de fonctions dites de preprocess qui permettent de fabriquer les variables qui sont utiliseacutees dans les templates
Il est possible drsquoeacutetendre ces fonctions pour modifier les variables envoyeacutees aux templates ou en creacuteer de nouvelles
Pour ajouter une fonction de preprocess il faut la nommer comme suit THEMENAME_preprocess_HOOK() Par exemple drupal_france_preprocess_block()
8 PREPROCESS
LA VARIABLE lsquo$VARIABLESrsquo
Drupal
Preprocess en amont(core modules)
Preprocess du thegraveme
TemplateCreacuteation de $variables
$variables
$variables
$variables
$variables
En mode super simplifieacute
8 PREPROCESS
APPELLER UN PREPROCESS
Diffeacuterentes fonctions de preprocess peuvent ecirctre appeleacutees permettant agrave tous les modules et thegravemes de modifier les variables passeacutees aux templates Ces fonctions sont les suivantes pour le hook de thegraveme HOOK
template_preprocess_HOOK(array amp$variables)
MODULENAME_preprocess(array amp$variables $hook)
MODULENAME_preprocess_HOOK(array amp$variables)
THEMENAME_preprocess(array amp$variables $hook)
THEMENAME_preprocess_HOOK(array amp$variables)
8 PREPROCESS
CONCREgraveTEMENT Implements hook_preprocess_menu__account() function drupal_france_preprocess_menu__account(amp$variables) if (isset($variables[items][drupalfr_useraccountcompte])) $variables[items][drupalfr_useraccountcompte][attributes]-gtaddClass([ button primary button--user-account ])
$variables[items][drupalfr_useraccountcompte][title] = new FormattableMarkup( lti class=fa fa-user-circle-o aria-hidden=truegtltigtltspan class=sr-onlygtoriginal_titleltspangt [ original_title =gt $variables[items][drupalfr_useraccountcompte][title] ] )
JAVASCRIPT9
9 JAVASCRIPT
DRUPAL amp JAVASCRIPT Drupal integravegre de nombreuses libraries javascript (jQuery Modernizrhellip) et propose
eacutegalement des libraries drsquoutilitaires (coredrupal coredrupalSettings drupalajax drupalformhellip)
Par exemple Drupal 8 embarque
jQuery 321
jQuery UI 1121
Chaque librairie deacutefinit ses deacutependances jQuery UI deacutepend de jQuery par exemple
Lorsque lrsquoon utilise une librairie depuis un script custom il ne faut pas oublier de deacuteclarer cette deacutependance Pensez agrave tester en anonyme car aucune libraire nrsquoest chargeacutee par deacutefaut
Vous disposez de toutes les librairies deacutefinies dans le fichier corecorelibrairiesyml
9 JAVASCRIPT
CONCREgraveTEMENTPour pouvoir utiliser du code JS dans vos scripts avec Drupal la bonne pratique est drsquoencadrer votre code comme suit
file Shows status messages in a modal instead of inline (function ($ Drupal)
Displays status messages in a Foundation reveal modal DrupalbehaviorsfoundationStatusInReveal = attach function (context settings) $(status-messages)once(foundation-reveal)each(function() Move the status messages out of the highlighted region var $messages = $(this) var $region = $messagesparent() $messagesappendTo(body) $messagesfoundation(open)
This is required as this region will likely be empty after status messages are removed $regionhtml($regionhtml()replace(ng )) )
)(jQuery Drupal)
9 JAVASCRIPT
DRUPAL BEHAVIORS
Les scripts sont exeacutecuteacutes apregraves le chargement complet du DOM ($(document)ready() )Mais on a aussi parfois besoin de les reacute-exeacutecuter lorsque lrsquoon interagit avec la page (appel AJAX overlayhellip)
Pour ce faire il suffit drsquoattacher le script JS agrave lrsquoobjet Drupalbehaviors (librairie coredrupal) La fonction exeacutecuteacutee reccediloit 2 variables
context le DOM (le HTML chargeacute ou ajouteacute)
settings toutes les variables injecteacutees cocircteacute serveur
9 JAVASCRIPT
RAPPEL
Comme pour les fichiers de style les scripts JS doivent ecirctre deacuteclareacutes sous forme de bibliothegraveque via les fichiers THEMENAMEinfoyml et THEMENAMElibrariesyml
QUESTIONS 10
RTFM httpswwwdrupalorgdocs8theminghttpstwigsymfonycomdoc2x
MERCI Agrave VOUS
FlorisMoriceau
5 TWIG
UN MOTEUR DE TEMPLATE
Twig est capable drsquoafficher le contenu de nrsquoimporte quel type de variable (chaine tableau ou objet)
Il est possible de faire des boucles des conditionshellip
Chaque variable peut ecirctre filtreacutee avant drsquoecirctre afficheacutee
Les chaines peuvent ecirctre rendues traduites (la traduction est alors faite via le back-office de Drupal)
5 TWIG
LES BASES
Affiche le contenu de la variable var var
Affiche le contenu de la proprieacuteteacute title de la variable node nodetitle
Conditions if var else endif
Commentaires commentaire
Traduction trans chaine endtrans
Fonctions speacutecifiques
url(lsquoroute_namersquo)
path(lsquoentitynodecanonicalrsquo lsquonodersquo nodeid)
Les modules Twig tweak ou encore Bamboo Twig proposent encore davantage de fonctions
5 TWIG
LES FILTRES Date date|format_date(lsquomediumrsquo)
Chaine
Echappement content (par deacutefaut)
Interpreacutetation du contenu de la variable texte|raw (attention )
Placeholder text|placeholder
Exclusion content|without(lsquolinksrsquo)
string|lower (upper eacutegalement)
class_name|clean_class
id_name|clean_id
Documentation httpswwwdrupalorgdocs8themingtwigfilters-modifying-variables-in-twig-templateshttpstwigsymfonycomdoc2x
5 TWIG
CONCREgraveTEMENT if pagefooter_first or pagefooter_middle or pagefooter_last ltdiv class=l-footer row expandedgt ltfooter class=row footer medium-up-2 large-up-3gt if pagefooter_first ltdiv id=footer-first class=columngt pagefooter_first ltdivgt endif if pagefooter_middle ltdiv id=footer-middle class=columngt pagefooter_middle ltdivgt endif if pagefooter_last ltdiv id=footer-last class=columngt pagefooter_last ltdivgt endif ltfootergt ltdivgt endif ltdiv class=bottom-bar panel hiddengt ltdiv class=rowgt ltdiv class=large-12 columngt ampcopy now|date(Y) site_name All rights reserved|t ltdivgt ltdivgt ltdivgt
LES REacuteGIONS6
6 LES REacuteGIONS
STRUCTURE DE LA PAGE
adminstructureblock gt Demonstrate block regions
6 LES REacuteGIONS
DEacuteFINITION ET RENDU DES REacuteGIONS
Les reacutegions doivent ecirctre deacutefinies dans le fichier THEMENAMEinfoyml
Elles doivent ecirctre appeleacutees obligatoirement dans pagehtmltwig
6 LES REacuteGIONS
THEMENAMEINFOYML
PAGEHTMLTWIG
LE RENDU DU CONTENU
7
7 RENDU DU CONTENU
LrsquoAFFICHAGE DES CHAMPS
Pour chaque type de contenu on peut reacutegler lrsquoaffichage des champs sur adminstructuretypesmanagecontent-typedisplay ougrave content-type est le nom machine du type de contenu
Il est possible de modifier lrsquoordre des champs lrsquoapparence des eacutetiquettes le format du champ
Les reacuteglages disponibles varient en fonction du type de champ
Les champs Texte peuvent ecirctre coupeacutes
Les champs Image peuvent ecirctre afficheacutes sous forme drsquoimage drsquoURL de fichier
Les champs Date peuvent utiliser un format diffeacuterent
Ces reacuteglages peuvent ecirctre diffeacuterents selon le mode drsquoaffichage (modes ldquoPar deacutefautldquo et ldquoAccrocheldquo) =gt Cela permet par exemple de masquer un champ en mode ldquoAccrocheldquo et de lrsquoafficher en mode ldquoPar deacutefautldquo (noeud inteacutegral)
7 RENDU DU CONTENU
LrsquoAFFICHAGE DES IMAGES
Les images transmises par les utilisateurs ne sont jamais aux bonnes dimensions
Le module Image (core) va nous permettre de preacutedeacutefinir des dimensions sous forme de styles drsquoimage par exemple
Vignette 70px x 110px (mise agrave lrsquoeacutechelle)
Normal 200px x 300px (mise agrave lrsquoeacutechelle et recadrage)
Ces dimensions pourront ensuite ecirctre appliqueacutees automatiquement aux champs Image depuis lrsquoeacutecran ldquogeacuterer lrsquoaffichageldquo vu preacuteceacutedemment
7 RENDU DU CONTENU
STYLE DrsquoIMAGE
7 RENDU DU CONTENU
STYLE DrsquoIMAGE
7 RENDU DU CONTENU
ALLER PLUS LOIN La gestion et la manipulation des champs est cependant
limiteacutee dans lrsquointerface drsquoadministration
On est parfois obligeacutes de modifier le code du template correspondant agrave notre champ ou type de contenu
Les reacuteglages de lrsquoadmin sont toujours pris en compte Par exemple les styles drsquoimage choisis seront ceux utiliseacutes mecircme si lrsquoon modifie le template
7 RENDU DU CONTENU
OUgrave SONT LES CHAMPS
Dans le fichier de template des noeuds (nodehtmltwig) on nrsquoa pas directement accegraves aux champs
Crsquoest la variable content qui contient tous les champs que lrsquoon affiche et en particulier ceux ajouteacutes via Field
Comment faire pour reacutecupeacuterer les champs un par un afin de les preacutesenter diffeacuteremment
7 RENDU DU CONTENU
LA VARIABLE lsquoCONTENTrsquo
Tout le contenu drsquoun noeud est afficheacute gracircce agrave la ligne content|without(comment links)
Pour connaitre le contenu de content on utilise la fonction kint() kint(content)
On deacutecouvre alors lrsquoensemble des champs et leurs proprieacuteteacutes qui sont afficheacutees en haut de page sous forme de var_dump()
On peut afficher seacutepareacutement chacun drsquoentre eux avec le code suivant contentnom_du_champ nodecreatedtime
7 RENDU DU CONTENU
NODE DE TYPE lsquoNEWSrsquo ET FORMAT lsquoTEASERrsquo
PREPROCESS8
8 PREPROCESS
FONCTIONS DE PREPROCESS
Pour chaque template on dispose de variables que lrsquoon affiche avec le formatage voulu
Ces variables sont creacuteeacutees en amont des templates dans lesquelles elles sont utiliseacutees
On dispose de fonctions dites de preprocess qui permettent de fabriquer les variables qui sont utiliseacutees dans les templates
Il est possible drsquoeacutetendre ces fonctions pour modifier les variables envoyeacutees aux templates ou en creacuteer de nouvelles
Pour ajouter une fonction de preprocess il faut la nommer comme suit THEMENAME_preprocess_HOOK() Par exemple drupal_france_preprocess_block()
8 PREPROCESS
FONCTIONS DE PREPROCESS
Pour chaque template on dispose de variables que lrsquoon affiche avec le formatage voulu
Ces variables sont creacuteeacutees en amont des templates dans lesquelles elles sont utiliseacutees
On dispose de fonctions dites de preprocess qui permettent de fabriquer les variables qui sont utiliseacutees dans les templates
Il est possible drsquoeacutetendre ces fonctions pour modifier les variables envoyeacutees aux templates ou en creacuteer de nouvelles
Pour ajouter une fonction de preprocess il faut la nommer comme suit THEMENAME_preprocess_HOOK() Par exemple drupal_france_preprocess_block()
8 PREPROCESS
LA VARIABLE lsquo$VARIABLESrsquo
Drupal
Preprocess en amont(core modules)
Preprocess du thegraveme
TemplateCreacuteation de $variables
$variables
$variables
$variables
$variables
En mode super simplifieacute
8 PREPROCESS
APPELLER UN PREPROCESS
Diffeacuterentes fonctions de preprocess peuvent ecirctre appeleacutees permettant agrave tous les modules et thegravemes de modifier les variables passeacutees aux templates Ces fonctions sont les suivantes pour le hook de thegraveme HOOK
template_preprocess_HOOK(array amp$variables)
MODULENAME_preprocess(array amp$variables $hook)
MODULENAME_preprocess_HOOK(array amp$variables)
THEMENAME_preprocess(array amp$variables $hook)
THEMENAME_preprocess_HOOK(array amp$variables)
8 PREPROCESS
CONCREgraveTEMENT Implements hook_preprocess_menu__account() function drupal_france_preprocess_menu__account(amp$variables) if (isset($variables[items][drupalfr_useraccountcompte])) $variables[items][drupalfr_useraccountcompte][attributes]-gtaddClass([ button primary button--user-account ])
$variables[items][drupalfr_useraccountcompte][title] = new FormattableMarkup( lti class=fa fa-user-circle-o aria-hidden=truegtltigtltspan class=sr-onlygtoriginal_titleltspangt [ original_title =gt $variables[items][drupalfr_useraccountcompte][title] ] )
JAVASCRIPT9
9 JAVASCRIPT
DRUPAL amp JAVASCRIPT Drupal integravegre de nombreuses libraries javascript (jQuery Modernizrhellip) et propose
eacutegalement des libraries drsquoutilitaires (coredrupal coredrupalSettings drupalajax drupalformhellip)
Par exemple Drupal 8 embarque
jQuery 321
jQuery UI 1121
Chaque librairie deacutefinit ses deacutependances jQuery UI deacutepend de jQuery par exemple
Lorsque lrsquoon utilise une librairie depuis un script custom il ne faut pas oublier de deacuteclarer cette deacutependance Pensez agrave tester en anonyme car aucune libraire nrsquoest chargeacutee par deacutefaut
Vous disposez de toutes les librairies deacutefinies dans le fichier corecorelibrairiesyml
9 JAVASCRIPT
CONCREgraveTEMENTPour pouvoir utiliser du code JS dans vos scripts avec Drupal la bonne pratique est drsquoencadrer votre code comme suit
file Shows status messages in a modal instead of inline (function ($ Drupal)
Displays status messages in a Foundation reveal modal DrupalbehaviorsfoundationStatusInReveal = attach function (context settings) $(status-messages)once(foundation-reveal)each(function() Move the status messages out of the highlighted region var $messages = $(this) var $region = $messagesparent() $messagesappendTo(body) $messagesfoundation(open)
This is required as this region will likely be empty after status messages are removed $regionhtml($regionhtml()replace(ng )) )
)(jQuery Drupal)
9 JAVASCRIPT
DRUPAL BEHAVIORS
Les scripts sont exeacutecuteacutes apregraves le chargement complet du DOM ($(document)ready() )Mais on a aussi parfois besoin de les reacute-exeacutecuter lorsque lrsquoon interagit avec la page (appel AJAX overlayhellip)
Pour ce faire il suffit drsquoattacher le script JS agrave lrsquoobjet Drupalbehaviors (librairie coredrupal) La fonction exeacutecuteacutee reccediloit 2 variables
context le DOM (le HTML chargeacute ou ajouteacute)
settings toutes les variables injecteacutees cocircteacute serveur
9 JAVASCRIPT
RAPPEL
Comme pour les fichiers de style les scripts JS doivent ecirctre deacuteclareacutes sous forme de bibliothegraveque via les fichiers THEMENAMEinfoyml et THEMENAMElibrariesyml
QUESTIONS 10
RTFM httpswwwdrupalorgdocs8theminghttpstwigsymfonycomdoc2x
MERCI Agrave VOUS
FlorisMoriceau
5 TWIG
LES BASES
Affiche le contenu de la variable var var
Affiche le contenu de la proprieacuteteacute title de la variable node nodetitle
Conditions if var else endif
Commentaires commentaire
Traduction trans chaine endtrans
Fonctions speacutecifiques
url(lsquoroute_namersquo)
path(lsquoentitynodecanonicalrsquo lsquonodersquo nodeid)
Les modules Twig tweak ou encore Bamboo Twig proposent encore davantage de fonctions
5 TWIG
LES FILTRES Date date|format_date(lsquomediumrsquo)
Chaine
Echappement content (par deacutefaut)
Interpreacutetation du contenu de la variable texte|raw (attention )
Placeholder text|placeholder
Exclusion content|without(lsquolinksrsquo)
string|lower (upper eacutegalement)
class_name|clean_class
id_name|clean_id
Documentation httpswwwdrupalorgdocs8themingtwigfilters-modifying-variables-in-twig-templateshttpstwigsymfonycomdoc2x
5 TWIG
CONCREgraveTEMENT if pagefooter_first or pagefooter_middle or pagefooter_last ltdiv class=l-footer row expandedgt ltfooter class=row footer medium-up-2 large-up-3gt if pagefooter_first ltdiv id=footer-first class=columngt pagefooter_first ltdivgt endif if pagefooter_middle ltdiv id=footer-middle class=columngt pagefooter_middle ltdivgt endif if pagefooter_last ltdiv id=footer-last class=columngt pagefooter_last ltdivgt endif ltfootergt ltdivgt endif ltdiv class=bottom-bar panel hiddengt ltdiv class=rowgt ltdiv class=large-12 columngt ampcopy now|date(Y) site_name All rights reserved|t ltdivgt ltdivgt ltdivgt
LES REacuteGIONS6
6 LES REacuteGIONS
STRUCTURE DE LA PAGE
adminstructureblock gt Demonstrate block regions
6 LES REacuteGIONS
DEacuteFINITION ET RENDU DES REacuteGIONS
Les reacutegions doivent ecirctre deacutefinies dans le fichier THEMENAMEinfoyml
Elles doivent ecirctre appeleacutees obligatoirement dans pagehtmltwig
6 LES REacuteGIONS
THEMENAMEINFOYML
PAGEHTMLTWIG
LE RENDU DU CONTENU
7
7 RENDU DU CONTENU
LrsquoAFFICHAGE DES CHAMPS
Pour chaque type de contenu on peut reacutegler lrsquoaffichage des champs sur adminstructuretypesmanagecontent-typedisplay ougrave content-type est le nom machine du type de contenu
Il est possible de modifier lrsquoordre des champs lrsquoapparence des eacutetiquettes le format du champ
Les reacuteglages disponibles varient en fonction du type de champ
Les champs Texte peuvent ecirctre coupeacutes
Les champs Image peuvent ecirctre afficheacutes sous forme drsquoimage drsquoURL de fichier
Les champs Date peuvent utiliser un format diffeacuterent
Ces reacuteglages peuvent ecirctre diffeacuterents selon le mode drsquoaffichage (modes ldquoPar deacutefautldquo et ldquoAccrocheldquo) =gt Cela permet par exemple de masquer un champ en mode ldquoAccrocheldquo et de lrsquoafficher en mode ldquoPar deacutefautldquo (noeud inteacutegral)
7 RENDU DU CONTENU
LrsquoAFFICHAGE DES IMAGES
Les images transmises par les utilisateurs ne sont jamais aux bonnes dimensions
Le module Image (core) va nous permettre de preacutedeacutefinir des dimensions sous forme de styles drsquoimage par exemple
Vignette 70px x 110px (mise agrave lrsquoeacutechelle)
Normal 200px x 300px (mise agrave lrsquoeacutechelle et recadrage)
Ces dimensions pourront ensuite ecirctre appliqueacutees automatiquement aux champs Image depuis lrsquoeacutecran ldquogeacuterer lrsquoaffichageldquo vu preacuteceacutedemment
7 RENDU DU CONTENU
STYLE DrsquoIMAGE
7 RENDU DU CONTENU
STYLE DrsquoIMAGE
7 RENDU DU CONTENU
ALLER PLUS LOIN La gestion et la manipulation des champs est cependant
limiteacutee dans lrsquointerface drsquoadministration
On est parfois obligeacutes de modifier le code du template correspondant agrave notre champ ou type de contenu
Les reacuteglages de lrsquoadmin sont toujours pris en compte Par exemple les styles drsquoimage choisis seront ceux utiliseacutes mecircme si lrsquoon modifie le template
7 RENDU DU CONTENU
OUgrave SONT LES CHAMPS
Dans le fichier de template des noeuds (nodehtmltwig) on nrsquoa pas directement accegraves aux champs
Crsquoest la variable content qui contient tous les champs que lrsquoon affiche et en particulier ceux ajouteacutes via Field
Comment faire pour reacutecupeacuterer les champs un par un afin de les preacutesenter diffeacuteremment
7 RENDU DU CONTENU
LA VARIABLE lsquoCONTENTrsquo
Tout le contenu drsquoun noeud est afficheacute gracircce agrave la ligne content|without(comment links)
Pour connaitre le contenu de content on utilise la fonction kint() kint(content)
On deacutecouvre alors lrsquoensemble des champs et leurs proprieacuteteacutes qui sont afficheacutees en haut de page sous forme de var_dump()
On peut afficher seacutepareacutement chacun drsquoentre eux avec le code suivant contentnom_du_champ nodecreatedtime
7 RENDU DU CONTENU
NODE DE TYPE lsquoNEWSrsquo ET FORMAT lsquoTEASERrsquo
PREPROCESS8
8 PREPROCESS
FONCTIONS DE PREPROCESS
Pour chaque template on dispose de variables que lrsquoon affiche avec le formatage voulu
Ces variables sont creacuteeacutees en amont des templates dans lesquelles elles sont utiliseacutees
On dispose de fonctions dites de preprocess qui permettent de fabriquer les variables qui sont utiliseacutees dans les templates
Il est possible drsquoeacutetendre ces fonctions pour modifier les variables envoyeacutees aux templates ou en creacuteer de nouvelles
Pour ajouter une fonction de preprocess il faut la nommer comme suit THEMENAME_preprocess_HOOK() Par exemple drupal_france_preprocess_block()
8 PREPROCESS
FONCTIONS DE PREPROCESS
Pour chaque template on dispose de variables que lrsquoon affiche avec le formatage voulu
Ces variables sont creacuteeacutees en amont des templates dans lesquelles elles sont utiliseacutees
On dispose de fonctions dites de preprocess qui permettent de fabriquer les variables qui sont utiliseacutees dans les templates
Il est possible drsquoeacutetendre ces fonctions pour modifier les variables envoyeacutees aux templates ou en creacuteer de nouvelles
Pour ajouter une fonction de preprocess il faut la nommer comme suit THEMENAME_preprocess_HOOK() Par exemple drupal_france_preprocess_block()
8 PREPROCESS
LA VARIABLE lsquo$VARIABLESrsquo
Drupal
Preprocess en amont(core modules)
Preprocess du thegraveme
TemplateCreacuteation de $variables
$variables
$variables
$variables
$variables
En mode super simplifieacute
8 PREPROCESS
APPELLER UN PREPROCESS
Diffeacuterentes fonctions de preprocess peuvent ecirctre appeleacutees permettant agrave tous les modules et thegravemes de modifier les variables passeacutees aux templates Ces fonctions sont les suivantes pour le hook de thegraveme HOOK
template_preprocess_HOOK(array amp$variables)
MODULENAME_preprocess(array amp$variables $hook)
MODULENAME_preprocess_HOOK(array amp$variables)
THEMENAME_preprocess(array amp$variables $hook)
THEMENAME_preprocess_HOOK(array amp$variables)
8 PREPROCESS
CONCREgraveTEMENT Implements hook_preprocess_menu__account() function drupal_france_preprocess_menu__account(amp$variables) if (isset($variables[items][drupalfr_useraccountcompte])) $variables[items][drupalfr_useraccountcompte][attributes]-gtaddClass([ button primary button--user-account ])
$variables[items][drupalfr_useraccountcompte][title] = new FormattableMarkup( lti class=fa fa-user-circle-o aria-hidden=truegtltigtltspan class=sr-onlygtoriginal_titleltspangt [ original_title =gt $variables[items][drupalfr_useraccountcompte][title] ] )
JAVASCRIPT9
9 JAVASCRIPT
DRUPAL amp JAVASCRIPT Drupal integravegre de nombreuses libraries javascript (jQuery Modernizrhellip) et propose
eacutegalement des libraries drsquoutilitaires (coredrupal coredrupalSettings drupalajax drupalformhellip)
Par exemple Drupal 8 embarque
jQuery 321
jQuery UI 1121
Chaque librairie deacutefinit ses deacutependances jQuery UI deacutepend de jQuery par exemple
Lorsque lrsquoon utilise une librairie depuis un script custom il ne faut pas oublier de deacuteclarer cette deacutependance Pensez agrave tester en anonyme car aucune libraire nrsquoest chargeacutee par deacutefaut
Vous disposez de toutes les librairies deacutefinies dans le fichier corecorelibrairiesyml
9 JAVASCRIPT
CONCREgraveTEMENTPour pouvoir utiliser du code JS dans vos scripts avec Drupal la bonne pratique est drsquoencadrer votre code comme suit
file Shows status messages in a modal instead of inline (function ($ Drupal)
Displays status messages in a Foundation reveal modal DrupalbehaviorsfoundationStatusInReveal = attach function (context settings) $(status-messages)once(foundation-reveal)each(function() Move the status messages out of the highlighted region var $messages = $(this) var $region = $messagesparent() $messagesappendTo(body) $messagesfoundation(open)
This is required as this region will likely be empty after status messages are removed $regionhtml($regionhtml()replace(ng )) )
)(jQuery Drupal)
9 JAVASCRIPT
DRUPAL BEHAVIORS
Les scripts sont exeacutecuteacutes apregraves le chargement complet du DOM ($(document)ready() )Mais on a aussi parfois besoin de les reacute-exeacutecuter lorsque lrsquoon interagit avec la page (appel AJAX overlayhellip)
Pour ce faire il suffit drsquoattacher le script JS agrave lrsquoobjet Drupalbehaviors (librairie coredrupal) La fonction exeacutecuteacutee reccediloit 2 variables
context le DOM (le HTML chargeacute ou ajouteacute)
settings toutes les variables injecteacutees cocircteacute serveur
9 JAVASCRIPT
RAPPEL
Comme pour les fichiers de style les scripts JS doivent ecirctre deacuteclareacutes sous forme de bibliothegraveque via les fichiers THEMENAMEinfoyml et THEMENAMElibrariesyml
QUESTIONS 10
RTFM httpswwwdrupalorgdocs8theminghttpstwigsymfonycomdoc2x
MERCI Agrave VOUS
FlorisMoriceau
5 TWIG
LES FILTRES Date date|format_date(lsquomediumrsquo)
Chaine
Echappement content (par deacutefaut)
Interpreacutetation du contenu de la variable texte|raw (attention )
Placeholder text|placeholder
Exclusion content|without(lsquolinksrsquo)
string|lower (upper eacutegalement)
class_name|clean_class
id_name|clean_id
Documentation httpswwwdrupalorgdocs8themingtwigfilters-modifying-variables-in-twig-templateshttpstwigsymfonycomdoc2x
5 TWIG
CONCREgraveTEMENT if pagefooter_first or pagefooter_middle or pagefooter_last ltdiv class=l-footer row expandedgt ltfooter class=row footer medium-up-2 large-up-3gt if pagefooter_first ltdiv id=footer-first class=columngt pagefooter_first ltdivgt endif if pagefooter_middle ltdiv id=footer-middle class=columngt pagefooter_middle ltdivgt endif if pagefooter_last ltdiv id=footer-last class=columngt pagefooter_last ltdivgt endif ltfootergt ltdivgt endif ltdiv class=bottom-bar panel hiddengt ltdiv class=rowgt ltdiv class=large-12 columngt ampcopy now|date(Y) site_name All rights reserved|t ltdivgt ltdivgt ltdivgt
LES REacuteGIONS6
6 LES REacuteGIONS
STRUCTURE DE LA PAGE
adminstructureblock gt Demonstrate block regions
6 LES REacuteGIONS
DEacuteFINITION ET RENDU DES REacuteGIONS
Les reacutegions doivent ecirctre deacutefinies dans le fichier THEMENAMEinfoyml
Elles doivent ecirctre appeleacutees obligatoirement dans pagehtmltwig
6 LES REacuteGIONS
THEMENAMEINFOYML
PAGEHTMLTWIG
LE RENDU DU CONTENU
7
7 RENDU DU CONTENU
LrsquoAFFICHAGE DES CHAMPS
Pour chaque type de contenu on peut reacutegler lrsquoaffichage des champs sur adminstructuretypesmanagecontent-typedisplay ougrave content-type est le nom machine du type de contenu
Il est possible de modifier lrsquoordre des champs lrsquoapparence des eacutetiquettes le format du champ
Les reacuteglages disponibles varient en fonction du type de champ
Les champs Texte peuvent ecirctre coupeacutes
Les champs Image peuvent ecirctre afficheacutes sous forme drsquoimage drsquoURL de fichier
Les champs Date peuvent utiliser un format diffeacuterent
Ces reacuteglages peuvent ecirctre diffeacuterents selon le mode drsquoaffichage (modes ldquoPar deacutefautldquo et ldquoAccrocheldquo) =gt Cela permet par exemple de masquer un champ en mode ldquoAccrocheldquo et de lrsquoafficher en mode ldquoPar deacutefautldquo (noeud inteacutegral)
7 RENDU DU CONTENU
LrsquoAFFICHAGE DES IMAGES
Les images transmises par les utilisateurs ne sont jamais aux bonnes dimensions
Le module Image (core) va nous permettre de preacutedeacutefinir des dimensions sous forme de styles drsquoimage par exemple
Vignette 70px x 110px (mise agrave lrsquoeacutechelle)
Normal 200px x 300px (mise agrave lrsquoeacutechelle et recadrage)
Ces dimensions pourront ensuite ecirctre appliqueacutees automatiquement aux champs Image depuis lrsquoeacutecran ldquogeacuterer lrsquoaffichageldquo vu preacuteceacutedemment
7 RENDU DU CONTENU
STYLE DrsquoIMAGE
7 RENDU DU CONTENU
STYLE DrsquoIMAGE
7 RENDU DU CONTENU
ALLER PLUS LOIN La gestion et la manipulation des champs est cependant
limiteacutee dans lrsquointerface drsquoadministration
On est parfois obligeacutes de modifier le code du template correspondant agrave notre champ ou type de contenu
Les reacuteglages de lrsquoadmin sont toujours pris en compte Par exemple les styles drsquoimage choisis seront ceux utiliseacutes mecircme si lrsquoon modifie le template
7 RENDU DU CONTENU
OUgrave SONT LES CHAMPS
Dans le fichier de template des noeuds (nodehtmltwig) on nrsquoa pas directement accegraves aux champs
Crsquoest la variable content qui contient tous les champs que lrsquoon affiche et en particulier ceux ajouteacutes via Field
Comment faire pour reacutecupeacuterer les champs un par un afin de les preacutesenter diffeacuteremment
7 RENDU DU CONTENU
LA VARIABLE lsquoCONTENTrsquo
Tout le contenu drsquoun noeud est afficheacute gracircce agrave la ligne content|without(comment links)
Pour connaitre le contenu de content on utilise la fonction kint() kint(content)
On deacutecouvre alors lrsquoensemble des champs et leurs proprieacuteteacutes qui sont afficheacutees en haut de page sous forme de var_dump()
On peut afficher seacutepareacutement chacun drsquoentre eux avec le code suivant contentnom_du_champ nodecreatedtime
7 RENDU DU CONTENU
NODE DE TYPE lsquoNEWSrsquo ET FORMAT lsquoTEASERrsquo
PREPROCESS8
8 PREPROCESS
FONCTIONS DE PREPROCESS
Pour chaque template on dispose de variables que lrsquoon affiche avec le formatage voulu
Ces variables sont creacuteeacutees en amont des templates dans lesquelles elles sont utiliseacutees
On dispose de fonctions dites de preprocess qui permettent de fabriquer les variables qui sont utiliseacutees dans les templates
Il est possible drsquoeacutetendre ces fonctions pour modifier les variables envoyeacutees aux templates ou en creacuteer de nouvelles
Pour ajouter une fonction de preprocess il faut la nommer comme suit THEMENAME_preprocess_HOOK() Par exemple drupal_france_preprocess_block()
8 PREPROCESS
FONCTIONS DE PREPROCESS
Pour chaque template on dispose de variables que lrsquoon affiche avec le formatage voulu
Ces variables sont creacuteeacutees en amont des templates dans lesquelles elles sont utiliseacutees
On dispose de fonctions dites de preprocess qui permettent de fabriquer les variables qui sont utiliseacutees dans les templates
Il est possible drsquoeacutetendre ces fonctions pour modifier les variables envoyeacutees aux templates ou en creacuteer de nouvelles
Pour ajouter une fonction de preprocess il faut la nommer comme suit THEMENAME_preprocess_HOOK() Par exemple drupal_france_preprocess_block()
8 PREPROCESS
LA VARIABLE lsquo$VARIABLESrsquo
Drupal
Preprocess en amont(core modules)
Preprocess du thegraveme
TemplateCreacuteation de $variables
$variables
$variables
$variables
$variables
En mode super simplifieacute
8 PREPROCESS
APPELLER UN PREPROCESS
Diffeacuterentes fonctions de preprocess peuvent ecirctre appeleacutees permettant agrave tous les modules et thegravemes de modifier les variables passeacutees aux templates Ces fonctions sont les suivantes pour le hook de thegraveme HOOK
template_preprocess_HOOK(array amp$variables)
MODULENAME_preprocess(array amp$variables $hook)
MODULENAME_preprocess_HOOK(array amp$variables)
THEMENAME_preprocess(array amp$variables $hook)
THEMENAME_preprocess_HOOK(array amp$variables)
8 PREPROCESS
CONCREgraveTEMENT Implements hook_preprocess_menu__account() function drupal_france_preprocess_menu__account(amp$variables) if (isset($variables[items][drupalfr_useraccountcompte])) $variables[items][drupalfr_useraccountcompte][attributes]-gtaddClass([ button primary button--user-account ])
$variables[items][drupalfr_useraccountcompte][title] = new FormattableMarkup( lti class=fa fa-user-circle-o aria-hidden=truegtltigtltspan class=sr-onlygtoriginal_titleltspangt [ original_title =gt $variables[items][drupalfr_useraccountcompte][title] ] )
JAVASCRIPT9
9 JAVASCRIPT
DRUPAL amp JAVASCRIPT Drupal integravegre de nombreuses libraries javascript (jQuery Modernizrhellip) et propose
eacutegalement des libraries drsquoutilitaires (coredrupal coredrupalSettings drupalajax drupalformhellip)
Par exemple Drupal 8 embarque
jQuery 321
jQuery UI 1121
Chaque librairie deacutefinit ses deacutependances jQuery UI deacutepend de jQuery par exemple
Lorsque lrsquoon utilise une librairie depuis un script custom il ne faut pas oublier de deacuteclarer cette deacutependance Pensez agrave tester en anonyme car aucune libraire nrsquoest chargeacutee par deacutefaut
Vous disposez de toutes les librairies deacutefinies dans le fichier corecorelibrairiesyml
9 JAVASCRIPT
CONCREgraveTEMENTPour pouvoir utiliser du code JS dans vos scripts avec Drupal la bonne pratique est drsquoencadrer votre code comme suit
file Shows status messages in a modal instead of inline (function ($ Drupal)
Displays status messages in a Foundation reveal modal DrupalbehaviorsfoundationStatusInReveal = attach function (context settings) $(status-messages)once(foundation-reveal)each(function() Move the status messages out of the highlighted region var $messages = $(this) var $region = $messagesparent() $messagesappendTo(body) $messagesfoundation(open)
This is required as this region will likely be empty after status messages are removed $regionhtml($regionhtml()replace(ng )) )
)(jQuery Drupal)
9 JAVASCRIPT
DRUPAL BEHAVIORS
Les scripts sont exeacutecuteacutes apregraves le chargement complet du DOM ($(document)ready() )Mais on a aussi parfois besoin de les reacute-exeacutecuter lorsque lrsquoon interagit avec la page (appel AJAX overlayhellip)
Pour ce faire il suffit drsquoattacher le script JS agrave lrsquoobjet Drupalbehaviors (librairie coredrupal) La fonction exeacutecuteacutee reccediloit 2 variables
context le DOM (le HTML chargeacute ou ajouteacute)
settings toutes les variables injecteacutees cocircteacute serveur
9 JAVASCRIPT
RAPPEL
Comme pour les fichiers de style les scripts JS doivent ecirctre deacuteclareacutes sous forme de bibliothegraveque via les fichiers THEMENAMEinfoyml et THEMENAMElibrariesyml
QUESTIONS 10
RTFM httpswwwdrupalorgdocs8theminghttpstwigsymfonycomdoc2x
MERCI Agrave VOUS
FlorisMoriceau
5 TWIG
CONCREgraveTEMENT if pagefooter_first or pagefooter_middle or pagefooter_last ltdiv class=l-footer row expandedgt ltfooter class=row footer medium-up-2 large-up-3gt if pagefooter_first ltdiv id=footer-first class=columngt pagefooter_first ltdivgt endif if pagefooter_middle ltdiv id=footer-middle class=columngt pagefooter_middle ltdivgt endif if pagefooter_last ltdiv id=footer-last class=columngt pagefooter_last ltdivgt endif ltfootergt ltdivgt endif ltdiv class=bottom-bar panel hiddengt ltdiv class=rowgt ltdiv class=large-12 columngt ampcopy now|date(Y) site_name All rights reserved|t ltdivgt ltdivgt ltdivgt
LES REacuteGIONS6
6 LES REacuteGIONS
STRUCTURE DE LA PAGE
adminstructureblock gt Demonstrate block regions
6 LES REacuteGIONS
DEacuteFINITION ET RENDU DES REacuteGIONS
Les reacutegions doivent ecirctre deacutefinies dans le fichier THEMENAMEinfoyml
Elles doivent ecirctre appeleacutees obligatoirement dans pagehtmltwig
6 LES REacuteGIONS
THEMENAMEINFOYML
PAGEHTMLTWIG
LE RENDU DU CONTENU
7
7 RENDU DU CONTENU
LrsquoAFFICHAGE DES CHAMPS
Pour chaque type de contenu on peut reacutegler lrsquoaffichage des champs sur adminstructuretypesmanagecontent-typedisplay ougrave content-type est le nom machine du type de contenu
Il est possible de modifier lrsquoordre des champs lrsquoapparence des eacutetiquettes le format du champ
Les reacuteglages disponibles varient en fonction du type de champ
Les champs Texte peuvent ecirctre coupeacutes
Les champs Image peuvent ecirctre afficheacutes sous forme drsquoimage drsquoURL de fichier
Les champs Date peuvent utiliser un format diffeacuterent
Ces reacuteglages peuvent ecirctre diffeacuterents selon le mode drsquoaffichage (modes ldquoPar deacutefautldquo et ldquoAccrocheldquo) =gt Cela permet par exemple de masquer un champ en mode ldquoAccrocheldquo et de lrsquoafficher en mode ldquoPar deacutefautldquo (noeud inteacutegral)
7 RENDU DU CONTENU
LrsquoAFFICHAGE DES IMAGES
Les images transmises par les utilisateurs ne sont jamais aux bonnes dimensions
Le module Image (core) va nous permettre de preacutedeacutefinir des dimensions sous forme de styles drsquoimage par exemple
Vignette 70px x 110px (mise agrave lrsquoeacutechelle)
Normal 200px x 300px (mise agrave lrsquoeacutechelle et recadrage)
Ces dimensions pourront ensuite ecirctre appliqueacutees automatiquement aux champs Image depuis lrsquoeacutecran ldquogeacuterer lrsquoaffichageldquo vu preacuteceacutedemment
7 RENDU DU CONTENU
STYLE DrsquoIMAGE
7 RENDU DU CONTENU
STYLE DrsquoIMAGE
7 RENDU DU CONTENU
ALLER PLUS LOIN La gestion et la manipulation des champs est cependant
limiteacutee dans lrsquointerface drsquoadministration
On est parfois obligeacutes de modifier le code du template correspondant agrave notre champ ou type de contenu
Les reacuteglages de lrsquoadmin sont toujours pris en compte Par exemple les styles drsquoimage choisis seront ceux utiliseacutes mecircme si lrsquoon modifie le template
7 RENDU DU CONTENU
OUgrave SONT LES CHAMPS
Dans le fichier de template des noeuds (nodehtmltwig) on nrsquoa pas directement accegraves aux champs
Crsquoest la variable content qui contient tous les champs que lrsquoon affiche et en particulier ceux ajouteacutes via Field
Comment faire pour reacutecupeacuterer les champs un par un afin de les preacutesenter diffeacuteremment
7 RENDU DU CONTENU
LA VARIABLE lsquoCONTENTrsquo
Tout le contenu drsquoun noeud est afficheacute gracircce agrave la ligne content|without(comment links)
Pour connaitre le contenu de content on utilise la fonction kint() kint(content)
On deacutecouvre alors lrsquoensemble des champs et leurs proprieacuteteacutes qui sont afficheacutees en haut de page sous forme de var_dump()
On peut afficher seacutepareacutement chacun drsquoentre eux avec le code suivant contentnom_du_champ nodecreatedtime
7 RENDU DU CONTENU
NODE DE TYPE lsquoNEWSrsquo ET FORMAT lsquoTEASERrsquo
PREPROCESS8
8 PREPROCESS
FONCTIONS DE PREPROCESS
Pour chaque template on dispose de variables que lrsquoon affiche avec le formatage voulu
Ces variables sont creacuteeacutees en amont des templates dans lesquelles elles sont utiliseacutees
On dispose de fonctions dites de preprocess qui permettent de fabriquer les variables qui sont utiliseacutees dans les templates
Il est possible drsquoeacutetendre ces fonctions pour modifier les variables envoyeacutees aux templates ou en creacuteer de nouvelles
Pour ajouter une fonction de preprocess il faut la nommer comme suit THEMENAME_preprocess_HOOK() Par exemple drupal_france_preprocess_block()
8 PREPROCESS
FONCTIONS DE PREPROCESS
Pour chaque template on dispose de variables que lrsquoon affiche avec le formatage voulu
Ces variables sont creacuteeacutees en amont des templates dans lesquelles elles sont utiliseacutees
On dispose de fonctions dites de preprocess qui permettent de fabriquer les variables qui sont utiliseacutees dans les templates
Il est possible drsquoeacutetendre ces fonctions pour modifier les variables envoyeacutees aux templates ou en creacuteer de nouvelles
Pour ajouter une fonction de preprocess il faut la nommer comme suit THEMENAME_preprocess_HOOK() Par exemple drupal_france_preprocess_block()
8 PREPROCESS
LA VARIABLE lsquo$VARIABLESrsquo
Drupal
Preprocess en amont(core modules)
Preprocess du thegraveme
TemplateCreacuteation de $variables
$variables
$variables
$variables
$variables
En mode super simplifieacute
8 PREPROCESS
APPELLER UN PREPROCESS
Diffeacuterentes fonctions de preprocess peuvent ecirctre appeleacutees permettant agrave tous les modules et thegravemes de modifier les variables passeacutees aux templates Ces fonctions sont les suivantes pour le hook de thegraveme HOOK
template_preprocess_HOOK(array amp$variables)
MODULENAME_preprocess(array amp$variables $hook)
MODULENAME_preprocess_HOOK(array amp$variables)
THEMENAME_preprocess(array amp$variables $hook)
THEMENAME_preprocess_HOOK(array amp$variables)
8 PREPROCESS
CONCREgraveTEMENT Implements hook_preprocess_menu__account() function drupal_france_preprocess_menu__account(amp$variables) if (isset($variables[items][drupalfr_useraccountcompte])) $variables[items][drupalfr_useraccountcompte][attributes]-gtaddClass([ button primary button--user-account ])
$variables[items][drupalfr_useraccountcompte][title] = new FormattableMarkup( lti class=fa fa-user-circle-o aria-hidden=truegtltigtltspan class=sr-onlygtoriginal_titleltspangt [ original_title =gt $variables[items][drupalfr_useraccountcompte][title] ] )
JAVASCRIPT9
9 JAVASCRIPT
DRUPAL amp JAVASCRIPT Drupal integravegre de nombreuses libraries javascript (jQuery Modernizrhellip) et propose
eacutegalement des libraries drsquoutilitaires (coredrupal coredrupalSettings drupalajax drupalformhellip)
Par exemple Drupal 8 embarque
jQuery 321
jQuery UI 1121
Chaque librairie deacutefinit ses deacutependances jQuery UI deacutepend de jQuery par exemple
Lorsque lrsquoon utilise une librairie depuis un script custom il ne faut pas oublier de deacuteclarer cette deacutependance Pensez agrave tester en anonyme car aucune libraire nrsquoest chargeacutee par deacutefaut
Vous disposez de toutes les librairies deacutefinies dans le fichier corecorelibrairiesyml
9 JAVASCRIPT
CONCREgraveTEMENTPour pouvoir utiliser du code JS dans vos scripts avec Drupal la bonne pratique est drsquoencadrer votre code comme suit
file Shows status messages in a modal instead of inline (function ($ Drupal)
Displays status messages in a Foundation reveal modal DrupalbehaviorsfoundationStatusInReveal = attach function (context settings) $(status-messages)once(foundation-reveal)each(function() Move the status messages out of the highlighted region var $messages = $(this) var $region = $messagesparent() $messagesappendTo(body) $messagesfoundation(open)
This is required as this region will likely be empty after status messages are removed $regionhtml($regionhtml()replace(ng )) )
)(jQuery Drupal)
9 JAVASCRIPT
DRUPAL BEHAVIORS
Les scripts sont exeacutecuteacutes apregraves le chargement complet du DOM ($(document)ready() )Mais on a aussi parfois besoin de les reacute-exeacutecuter lorsque lrsquoon interagit avec la page (appel AJAX overlayhellip)
Pour ce faire il suffit drsquoattacher le script JS agrave lrsquoobjet Drupalbehaviors (librairie coredrupal) La fonction exeacutecuteacutee reccediloit 2 variables
context le DOM (le HTML chargeacute ou ajouteacute)
settings toutes les variables injecteacutees cocircteacute serveur
9 JAVASCRIPT
RAPPEL
Comme pour les fichiers de style les scripts JS doivent ecirctre deacuteclareacutes sous forme de bibliothegraveque via les fichiers THEMENAMEinfoyml et THEMENAMElibrariesyml
QUESTIONS 10
RTFM httpswwwdrupalorgdocs8theminghttpstwigsymfonycomdoc2x
MERCI Agrave VOUS
FlorisMoriceau
LES REacuteGIONS6
6 LES REacuteGIONS
STRUCTURE DE LA PAGE
adminstructureblock gt Demonstrate block regions
6 LES REacuteGIONS
DEacuteFINITION ET RENDU DES REacuteGIONS
Les reacutegions doivent ecirctre deacutefinies dans le fichier THEMENAMEinfoyml
Elles doivent ecirctre appeleacutees obligatoirement dans pagehtmltwig
6 LES REacuteGIONS
THEMENAMEINFOYML
PAGEHTMLTWIG
LE RENDU DU CONTENU
7
7 RENDU DU CONTENU
LrsquoAFFICHAGE DES CHAMPS
Pour chaque type de contenu on peut reacutegler lrsquoaffichage des champs sur adminstructuretypesmanagecontent-typedisplay ougrave content-type est le nom machine du type de contenu
Il est possible de modifier lrsquoordre des champs lrsquoapparence des eacutetiquettes le format du champ
Les reacuteglages disponibles varient en fonction du type de champ
Les champs Texte peuvent ecirctre coupeacutes
Les champs Image peuvent ecirctre afficheacutes sous forme drsquoimage drsquoURL de fichier
Les champs Date peuvent utiliser un format diffeacuterent
Ces reacuteglages peuvent ecirctre diffeacuterents selon le mode drsquoaffichage (modes ldquoPar deacutefautldquo et ldquoAccrocheldquo) =gt Cela permet par exemple de masquer un champ en mode ldquoAccrocheldquo et de lrsquoafficher en mode ldquoPar deacutefautldquo (noeud inteacutegral)
7 RENDU DU CONTENU
LrsquoAFFICHAGE DES IMAGES
Les images transmises par les utilisateurs ne sont jamais aux bonnes dimensions
Le module Image (core) va nous permettre de preacutedeacutefinir des dimensions sous forme de styles drsquoimage par exemple
Vignette 70px x 110px (mise agrave lrsquoeacutechelle)
Normal 200px x 300px (mise agrave lrsquoeacutechelle et recadrage)
Ces dimensions pourront ensuite ecirctre appliqueacutees automatiquement aux champs Image depuis lrsquoeacutecran ldquogeacuterer lrsquoaffichageldquo vu preacuteceacutedemment
7 RENDU DU CONTENU
STYLE DrsquoIMAGE
7 RENDU DU CONTENU
STYLE DrsquoIMAGE
7 RENDU DU CONTENU
ALLER PLUS LOIN La gestion et la manipulation des champs est cependant
limiteacutee dans lrsquointerface drsquoadministration
On est parfois obligeacutes de modifier le code du template correspondant agrave notre champ ou type de contenu
Les reacuteglages de lrsquoadmin sont toujours pris en compte Par exemple les styles drsquoimage choisis seront ceux utiliseacutes mecircme si lrsquoon modifie le template
7 RENDU DU CONTENU
OUgrave SONT LES CHAMPS
Dans le fichier de template des noeuds (nodehtmltwig) on nrsquoa pas directement accegraves aux champs
Crsquoest la variable content qui contient tous les champs que lrsquoon affiche et en particulier ceux ajouteacutes via Field
Comment faire pour reacutecupeacuterer les champs un par un afin de les preacutesenter diffeacuteremment
7 RENDU DU CONTENU
LA VARIABLE lsquoCONTENTrsquo
Tout le contenu drsquoun noeud est afficheacute gracircce agrave la ligne content|without(comment links)
Pour connaitre le contenu de content on utilise la fonction kint() kint(content)
On deacutecouvre alors lrsquoensemble des champs et leurs proprieacuteteacutes qui sont afficheacutees en haut de page sous forme de var_dump()
On peut afficher seacutepareacutement chacun drsquoentre eux avec le code suivant contentnom_du_champ nodecreatedtime
7 RENDU DU CONTENU
NODE DE TYPE lsquoNEWSrsquo ET FORMAT lsquoTEASERrsquo
PREPROCESS8
8 PREPROCESS
FONCTIONS DE PREPROCESS
Pour chaque template on dispose de variables que lrsquoon affiche avec le formatage voulu
Ces variables sont creacuteeacutees en amont des templates dans lesquelles elles sont utiliseacutees
On dispose de fonctions dites de preprocess qui permettent de fabriquer les variables qui sont utiliseacutees dans les templates
Il est possible drsquoeacutetendre ces fonctions pour modifier les variables envoyeacutees aux templates ou en creacuteer de nouvelles
Pour ajouter une fonction de preprocess il faut la nommer comme suit THEMENAME_preprocess_HOOK() Par exemple drupal_france_preprocess_block()
8 PREPROCESS
FONCTIONS DE PREPROCESS
Pour chaque template on dispose de variables que lrsquoon affiche avec le formatage voulu
Ces variables sont creacuteeacutees en amont des templates dans lesquelles elles sont utiliseacutees
On dispose de fonctions dites de preprocess qui permettent de fabriquer les variables qui sont utiliseacutees dans les templates
Il est possible drsquoeacutetendre ces fonctions pour modifier les variables envoyeacutees aux templates ou en creacuteer de nouvelles
Pour ajouter une fonction de preprocess il faut la nommer comme suit THEMENAME_preprocess_HOOK() Par exemple drupal_france_preprocess_block()
8 PREPROCESS
LA VARIABLE lsquo$VARIABLESrsquo
Drupal
Preprocess en amont(core modules)
Preprocess du thegraveme
TemplateCreacuteation de $variables
$variables
$variables
$variables
$variables
En mode super simplifieacute
8 PREPROCESS
APPELLER UN PREPROCESS
Diffeacuterentes fonctions de preprocess peuvent ecirctre appeleacutees permettant agrave tous les modules et thegravemes de modifier les variables passeacutees aux templates Ces fonctions sont les suivantes pour le hook de thegraveme HOOK
template_preprocess_HOOK(array amp$variables)
MODULENAME_preprocess(array amp$variables $hook)
MODULENAME_preprocess_HOOK(array amp$variables)
THEMENAME_preprocess(array amp$variables $hook)
THEMENAME_preprocess_HOOK(array amp$variables)
8 PREPROCESS
CONCREgraveTEMENT Implements hook_preprocess_menu__account() function drupal_france_preprocess_menu__account(amp$variables) if (isset($variables[items][drupalfr_useraccountcompte])) $variables[items][drupalfr_useraccountcompte][attributes]-gtaddClass([ button primary button--user-account ])
$variables[items][drupalfr_useraccountcompte][title] = new FormattableMarkup( lti class=fa fa-user-circle-o aria-hidden=truegtltigtltspan class=sr-onlygtoriginal_titleltspangt [ original_title =gt $variables[items][drupalfr_useraccountcompte][title] ] )
JAVASCRIPT9
9 JAVASCRIPT
DRUPAL amp JAVASCRIPT Drupal integravegre de nombreuses libraries javascript (jQuery Modernizrhellip) et propose
eacutegalement des libraries drsquoutilitaires (coredrupal coredrupalSettings drupalajax drupalformhellip)
Par exemple Drupal 8 embarque
jQuery 321
jQuery UI 1121
Chaque librairie deacutefinit ses deacutependances jQuery UI deacutepend de jQuery par exemple
Lorsque lrsquoon utilise une librairie depuis un script custom il ne faut pas oublier de deacuteclarer cette deacutependance Pensez agrave tester en anonyme car aucune libraire nrsquoest chargeacutee par deacutefaut
Vous disposez de toutes les librairies deacutefinies dans le fichier corecorelibrairiesyml
9 JAVASCRIPT
CONCREgraveTEMENTPour pouvoir utiliser du code JS dans vos scripts avec Drupal la bonne pratique est drsquoencadrer votre code comme suit
file Shows status messages in a modal instead of inline (function ($ Drupal)
Displays status messages in a Foundation reveal modal DrupalbehaviorsfoundationStatusInReveal = attach function (context settings) $(status-messages)once(foundation-reveal)each(function() Move the status messages out of the highlighted region var $messages = $(this) var $region = $messagesparent() $messagesappendTo(body) $messagesfoundation(open)
This is required as this region will likely be empty after status messages are removed $regionhtml($regionhtml()replace(ng )) )
)(jQuery Drupal)
9 JAVASCRIPT
DRUPAL BEHAVIORS
Les scripts sont exeacutecuteacutes apregraves le chargement complet du DOM ($(document)ready() )Mais on a aussi parfois besoin de les reacute-exeacutecuter lorsque lrsquoon interagit avec la page (appel AJAX overlayhellip)
Pour ce faire il suffit drsquoattacher le script JS agrave lrsquoobjet Drupalbehaviors (librairie coredrupal) La fonction exeacutecuteacutee reccediloit 2 variables
context le DOM (le HTML chargeacute ou ajouteacute)
settings toutes les variables injecteacutees cocircteacute serveur
9 JAVASCRIPT
RAPPEL
Comme pour les fichiers de style les scripts JS doivent ecirctre deacuteclareacutes sous forme de bibliothegraveque via les fichiers THEMENAMEinfoyml et THEMENAMElibrariesyml
QUESTIONS 10
RTFM httpswwwdrupalorgdocs8theminghttpstwigsymfonycomdoc2x
MERCI Agrave VOUS
FlorisMoriceau
6 LES REacuteGIONS
STRUCTURE DE LA PAGE
adminstructureblock gt Demonstrate block regions
6 LES REacuteGIONS
DEacuteFINITION ET RENDU DES REacuteGIONS
Les reacutegions doivent ecirctre deacutefinies dans le fichier THEMENAMEinfoyml
Elles doivent ecirctre appeleacutees obligatoirement dans pagehtmltwig
6 LES REacuteGIONS
THEMENAMEINFOYML
PAGEHTMLTWIG
LE RENDU DU CONTENU
7
7 RENDU DU CONTENU
LrsquoAFFICHAGE DES CHAMPS
Pour chaque type de contenu on peut reacutegler lrsquoaffichage des champs sur adminstructuretypesmanagecontent-typedisplay ougrave content-type est le nom machine du type de contenu
Il est possible de modifier lrsquoordre des champs lrsquoapparence des eacutetiquettes le format du champ
Les reacuteglages disponibles varient en fonction du type de champ
Les champs Texte peuvent ecirctre coupeacutes
Les champs Image peuvent ecirctre afficheacutes sous forme drsquoimage drsquoURL de fichier
Les champs Date peuvent utiliser un format diffeacuterent
Ces reacuteglages peuvent ecirctre diffeacuterents selon le mode drsquoaffichage (modes ldquoPar deacutefautldquo et ldquoAccrocheldquo) =gt Cela permet par exemple de masquer un champ en mode ldquoAccrocheldquo et de lrsquoafficher en mode ldquoPar deacutefautldquo (noeud inteacutegral)
7 RENDU DU CONTENU
LrsquoAFFICHAGE DES IMAGES
Les images transmises par les utilisateurs ne sont jamais aux bonnes dimensions
Le module Image (core) va nous permettre de preacutedeacutefinir des dimensions sous forme de styles drsquoimage par exemple
Vignette 70px x 110px (mise agrave lrsquoeacutechelle)
Normal 200px x 300px (mise agrave lrsquoeacutechelle et recadrage)
Ces dimensions pourront ensuite ecirctre appliqueacutees automatiquement aux champs Image depuis lrsquoeacutecran ldquogeacuterer lrsquoaffichageldquo vu preacuteceacutedemment
7 RENDU DU CONTENU
STYLE DrsquoIMAGE
7 RENDU DU CONTENU
STYLE DrsquoIMAGE
7 RENDU DU CONTENU
ALLER PLUS LOIN La gestion et la manipulation des champs est cependant
limiteacutee dans lrsquointerface drsquoadministration
On est parfois obligeacutes de modifier le code du template correspondant agrave notre champ ou type de contenu
Les reacuteglages de lrsquoadmin sont toujours pris en compte Par exemple les styles drsquoimage choisis seront ceux utiliseacutes mecircme si lrsquoon modifie le template
7 RENDU DU CONTENU
OUgrave SONT LES CHAMPS
Dans le fichier de template des noeuds (nodehtmltwig) on nrsquoa pas directement accegraves aux champs
Crsquoest la variable content qui contient tous les champs que lrsquoon affiche et en particulier ceux ajouteacutes via Field
Comment faire pour reacutecupeacuterer les champs un par un afin de les preacutesenter diffeacuteremment
7 RENDU DU CONTENU
LA VARIABLE lsquoCONTENTrsquo
Tout le contenu drsquoun noeud est afficheacute gracircce agrave la ligne content|without(comment links)
Pour connaitre le contenu de content on utilise la fonction kint() kint(content)
On deacutecouvre alors lrsquoensemble des champs et leurs proprieacuteteacutes qui sont afficheacutees en haut de page sous forme de var_dump()
On peut afficher seacutepareacutement chacun drsquoentre eux avec le code suivant contentnom_du_champ nodecreatedtime
7 RENDU DU CONTENU
NODE DE TYPE lsquoNEWSrsquo ET FORMAT lsquoTEASERrsquo
PREPROCESS8
8 PREPROCESS
FONCTIONS DE PREPROCESS
Pour chaque template on dispose de variables que lrsquoon affiche avec le formatage voulu
Ces variables sont creacuteeacutees en amont des templates dans lesquelles elles sont utiliseacutees
On dispose de fonctions dites de preprocess qui permettent de fabriquer les variables qui sont utiliseacutees dans les templates
Il est possible drsquoeacutetendre ces fonctions pour modifier les variables envoyeacutees aux templates ou en creacuteer de nouvelles
Pour ajouter une fonction de preprocess il faut la nommer comme suit THEMENAME_preprocess_HOOK() Par exemple drupal_france_preprocess_block()
8 PREPROCESS
FONCTIONS DE PREPROCESS
Pour chaque template on dispose de variables que lrsquoon affiche avec le formatage voulu
Ces variables sont creacuteeacutees en amont des templates dans lesquelles elles sont utiliseacutees
On dispose de fonctions dites de preprocess qui permettent de fabriquer les variables qui sont utiliseacutees dans les templates
Il est possible drsquoeacutetendre ces fonctions pour modifier les variables envoyeacutees aux templates ou en creacuteer de nouvelles
Pour ajouter une fonction de preprocess il faut la nommer comme suit THEMENAME_preprocess_HOOK() Par exemple drupal_france_preprocess_block()
8 PREPROCESS
LA VARIABLE lsquo$VARIABLESrsquo
Drupal
Preprocess en amont(core modules)
Preprocess du thegraveme
TemplateCreacuteation de $variables
$variables
$variables
$variables
$variables
En mode super simplifieacute
8 PREPROCESS
APPELLER UN PREPROCESS
Diffeacuterentes fonctions de preprocess peuvent ecirctre appeleacutees permettant agrave tous les modules et thegravemes de modifier les variables passeacutees aux templates Ces fonctions sont les suivantes pour le hook de thegraveme HOOK
template_preprocess_HOOK(array amp$variables)
MODULENAME_preprocess(array amp$variables $hook)
MODULENAME_preprocess_HOOK(array amp$variables)
THEMENAME_preprocess(array amp$variables $hook)
THEMENAME_preprocess_HOOK(array amp$variables)
8 PREPROCESS
CONCREgraveTEMENT Implements hook_preprocess_menu__account() function drupal_france_preprocess_menu__account(amp$variables) if (isset($variables[items][drupalfr_useraccountcompte])) $variables[items][drupalfr_useraccountcompte][attributes]-gtaddClass([ button primary button--user-account ])
$variables[items][drupalfr_useraccountcompte][title] = new FormattableMarkup( lti class=fa fa-user-circle-o aria-hidden=truegtltigtltspan class=sr-onlygtoriginal_titleltspangt [ original_title =gt $variables[items][drupalfr_useraccountcompte][title] ] )
JAVASCRIPT9
9 JAVASCRIPT
DRUPAL amp JAVASCRIPT Drupal integravegre de nombreuses libraries javascript (jQuery Modernizrhellip) et propose
eacutegalement des libraries drsquoutilitaires (coredrupal coredrupalSettings drupalajax drupalformhellip)
Par exemple Drupal 8 embarque
jQuery 321
jQuery UI 1121
Chaque librairie deacutefinit ses deacutependances jQuery UI deacutepend de jQuery par exemple
Lorsque lrsquoon utilise une librairie depuis un script custom il ne faut pas oublier de deacuteclarer cette deacutependance Pensez agrave tester en anonyme car aucune libraire nrsquoest chargeacutee par deacutefaut
Vous disposez de toutes les librairies deacutefinies dans le fichier corecorelibrairiesyml
9 JAVASCRIPT
CONCREgraveTEMENTPour pouvoir utiliser du code JS dans vos scripts avec Drupal la bonne pratique est drsquoencadrer votre code comme suit
file Shows status messages in a modal instead of inline (function ($ Drupal)
Displays status messages in a Foundation reveal modal DrupalbehaviorsfoundationStatusInReveal = attach function (context settings) $(status-messages)once(foundation-reveal)each(function() Move the status messages out of the highlighted region var $messages = $(this) var $region = $messagesparent() $messagesappendTo(body) $messagesfoundation(open)
This is required as this region will likely be empty after status messages are removed $regionhtml($regionhtml()replace(ng )) )
)(jQuery Drupal)
9 JAVASCRIPT
DRUPAL BEHAVIORS
Les scripts sont exeacutecuteacutes apregraves le chargement complet du DOM ($(document)ready() )Mais on a aussi parfois besoin de les reacute-exeacutecuter lorsque lrsquoon interagit avec la page (appel AJAX overlayhellip)
Pour ce faire il suffit drsquoattacher le script JS agrave lrsquoobjet Drupalbehaviors (librairie coredrupal) La fonction exeacutecuteacutee reccediloit 2 variables
context le DOM (le HTML chargeacute ou ajouteacute)
settings toutes les variables injecteacutees cocircteacute serveur
9 JAVASCRIPT
RAPPEL
Comme pour les fichiers de style les scripts JS doivent ecirctre deacuteclareacutes sous forme de bibliothegraveque via les fichiers THEMENAMEinfoyml et THEMENAMElibrariesyml
QUESTIONS 10
RTFM httpswwwdrupalorgdocs8theminghttpstwigsymfonycomdoc2x
MERCI Agrave VOUS
FlorisMoriceau
6 LES REacuteGIONS
DEacuteFINITION ET RENDU DES REacuteGIONS
Les reacutegions doivent ecirctre deacutefinies dans le fichier THEMENAMEinfoyml
Elles doivent ecirctre appeleacutees obligatoirement dans pagehtmltwig
6 LES REacuteGIONS
THEMENAMEINFOYML
PAGEHTMLTWIG
LE RENDU DU CONTENU
7
7 RENDU DU CONTENU
LrsquoAFFICHAGE DES CHAMPS
Pour chaque type de contenu on peut reacutegler lrsquoaffichage des champs sur adminstructuretypesmanagecontent-typedisplay ougrave content-type est le nom machine du type de contenu
Il est possible de modifier lrsquoordre des champs lrsquoapparence des eacutetiquettes le format du champ
Les reacuteglages disponibles varient en fonction du type de champ
Les champs Texte peuvent ecirctre coupeacutes
Les champs Image peuvent ecirctre afficheacutes sous forme drsquoimage drsquoURL de fichier
Les champs Date peuvent utiliser un format diffeacuterent
Ces reacuteglages peuvent ecirctre diffeacuterents selon le mode drsquoaffichage (modes ldquoPar deacutefautldquo et ldquoAccrocheldquo) =gt Cela permet par exemple de masquer un champ en mode ldquoAccrocheldquo et de lrsquoafficher en mode ldquoPar deacutefautldquo (noeud inteacutegral)
7 RENDU DU CONTENU
LrsquoAFFICHAGE DES IMAGES
Les images transmises par les utilisateurs ne sont jamais aux bonnes dimensions
Le module Image (core) va nous permettre de preacutedeacutefinir des dimensions sous forme de styles drsquoimage par exemple
Vignette 70px x 110px (mise agrave lrsquoeacutechelle)
Normal 200px x 300px (mise agrave lrsquoeacutechelle et recadrage)
Ces dimensions pourront ensuite ecirctre appliqueacutees automatiquement aux champs Image depuis lrsquoeacutecran ldquogeacuterer lrsquoaffichageldquo vu preacuteceacutedemment
7 RENDU DU CONTENU
STYLE DrsquoIMAGE
7 RENDU DU CONTENU
STYLE DrsquoIMAGE
7 RENDU DU CONTENU
ALLER PLUS LOIN La gestion et la manipulation des champs est cependant
limiteacutee dans lrsquointerface drsquoadministration
On est parfois obligeacutes de modifier le code du template correspondant agrave notre champ ou type de contenu
Les reacuteglages de lrsquoadmin sont toujours pris en compte Par exemple les styles drsquoimage choisis seront ceux utiliseacutes mecircme si lrsquoon modifie le template
7 RENDU DU CONTENU
OUgrave SONT LES CHAMPS
Dans le fichier de template des noeuds (nodehtmltwig) on nrsquoa pas directement accegraves aux champs
Crsquoest la variable content qui contient tous les champs que lrsquoon affiche et en particulier ceux ajouteacutes via Field
Comment faire pour reacutecupeacuterer les champs un par un afin de les preacutesenter diffeacuteremment
7 RENDU DU CONTENU
LA VARIABLE lsquoCONTENTrsquo
Tout le contenu drsquoun noeud est afficheacute gracircce agrave la ligne content|without(comment links)
Pour connaitre le contenu de content on utilise la fonction kint() kint(content)
On deacutecouvre alors lrsquoensemble des champs et leurs proprieacuteteacutes qui sont afficheacutees en haut de page sous forme de var_dump()
On peut afficher seacutepareacutement chacun drsquoentre eux avec le code suivant contentnom_du_champ nodecreatedtime
7 RENDU DU CONTENU
NODE DE TYPE lsquoNEWSrsquo ET FORMAT lsquoTEASERrsquo
PREPROCESS8
8 PREPROCESS
FONCTIONS DE PREPROCESS
Pour chaque template on dispose de variables que lrsquoon affiche avec le formatage voulu
Ces variables sont creacuteeacutees en amont des templates dans lesquelles elles sont utiliseacutees
On dispose de fonctions dites de preprocess qui permettent de fabriquer les variables qui sont utiliseacutees dans les templates
Il est possible drsquoeacutetendre ces fonctions pour modifier les variables envoyeacutees aux templates ou en creacuteer de nouvelles
Pour ajouter une fonction de preprocess il faut la nommer comme suit THEMENAME_preprocess_HOOK() Par exemple drupal_france_preprocess_block()
8 PREPROCESS
FONCTIONS DE PREPROCESS
Pour chaque template on dispose de variables que lrsquoon affiche avec le formatage voulu
Ces variables sont creacuteeacutees en amont des templates dans lesquelles elles sont utiliseacutees
On dispose de fonctions dites de preprocess qui permettent de fabriquer les variables qui sont utiliseacutees dans les templates
Il est possible drsquoeacutetendre ces fonctions pour modifier les variables envoyeacutees aux templates ou en creacuteer de nouvelles
Pour ajouter une fonction de preprocess il faut la nommer comme suit THEMENAME_preprocess_HOOK() Par exemple drupal_france_preprocess_block()
8 PREPROCESS
LA VARIABLE lsquo$VARIABLESrsquo
Drupal
Preprocess en amont(core modules)
Preprocess du thegraveme
TemplateCreacuteation de $variables
$variables
$variables
$variables
$variables
En mode super simplifieacute
8 PREPROCESS
APPELLER UN PREPROCESS
Diffeacuterentes fonctions de preprocess peuvent ecirctre appeleacutees permettant agrave tous les modules et thegravemes de modifier les variables passeacutees aux templates Ces fonctions sont les suivantes pour le hook de thegraveme HOOK
template_preprocess_HOOK(array amp$variables)
MODULENAME_preprocess(array amp$variables $hook)
MODULENAME_preprocess_HOOK(array amp$variables)
THEMENAME_preprocess(array amp$variables $hook)
THEMENAME_preprocess_HOOK(array amp$variables)
8 PREPROCESS
CONCREgraveTEMENT Implements hook_preprocess_menu__account() function drupal_france_preprocess_menu__account(amp$variables) if (isset($variables[items][drupalfr_useraccountcompte])) $variables[items][drupalfr_useraccountcompte][attributes]-gtaddClass([ button primary button--user-account ])
$variables[items][drupalfr_useraccountcompte][title] = new FormattableMarkup( lti class=fa fa-user-circle-o aria-hidden=truegtltigtltspan class=sr-onlygtoriginal_titleltspangt [ original_title =gt $variables[items][drupalfr_useraccountcompte][title] ] )
JAVASCRIPT9
9 JAVASCRIPT
DRUPAL amp JAVASCRIPT Drupal integravegre de nombreuses libraries javascript (jQuery Modernizrhellip) et propose
eacutegalement des libraries drsquoutilitaires (coredrupal coredrupalSettings drupalajax drupalformhellip)
Par exemple Drupal 8 embarque
jQuery 321
jQuery UI 1121
Chaque librairie deacutefinit ses deacutependances jQuery UI deacutepend de jQuery par exemple
Lorsque lrsquoon utilise une librairie depuis un script custom il ne faut pas oublier de deacuteclarer cette deacutependance Pensez agrave tester en anonyme car aucune libraire nrsquoest chargeacutee par deacutefaut
Vous disposez de toutes les librairies deacutefinies dans le fichier corecorelibrairiesyml
9 JAVASCRIPT
CONCREgraveTEMENTPour pouvoir utiliser du code JS dans vos scripts avec Drupal la bonne pratique est drsquoencadrer votre code comme suit
file Shows status messages in a modal instead of inline (function ($ Drupal)
Displays status messages in a Foundation reveal modal DrupalbehaviorsfoundationStatusInReveal = attach function (context settings) $(status-messages)once(foundation-reveal)each(function() Move the status messages out of the highlighted region var $messages = $(this) var $region = $messagesparent() $messagesappendTo(body) $messagesfoundation(open)
This is required as this region will likely be empty after status messages are removed $regionhtml($regionhtml()replace(ng )) )
)(jQuery Drupal)
9 JAVASCRIPT
DRUPAL BEHAVIORS
Les scripts sont exeacutecuteacutes apregraves le chargement complet du DOM ($(document)ready() )Mais on a aussi parfois besoin de les reacute-exeacutecuter lorsque lrsquoon interagit avec la page (appel AJAX overlayhellip)
Pour ce faire il suffit drsquoattacher le script JS agrave lrsquoobjet Drupalbehaviors (librairie coredrupal) La fonction exeacutecuteacutee reccediloit 2 variables
context le DOM (le HTML chargeacute ou ajouteacute)
settings toutes les variables injecteacutees cocircteacute serveur
9 JAVASCRIPT
RAPPEL
Comme pour les fichiers de style les scripts JS doivent ecirctre deacuteclareacutes sous forme de bibliothegraveque via les fichiers THEMENAMEinfoyml et THEMENAMElibrariesyml
QUESTIONS 10
RTFM httpswwwdrupalorgdocs8theminghttpstwigsymfonycomdoc2x
MERCI Agrave VOUS
FlorisMoriceau
6 LES REacuteGIONS
THEMENAMEINFOYML
PAGEHTMLTWIG
LE RENDU DU CONTENU
7
7 RENDU DU CONTENU
LrsquoAFFICHAGE DES CHAMPS
Pour chaque type de contenu on peut reacutegler lrsquoaffichage des champs sur adminstructuretypesmanagecontent-typedisplay ougrave content-type est le nom machine du type de contenu
Il est possible de modifier lrsquoordre des champs lrsquoapparence des eacutetiquettes le format du champ
Les reacuteglages disponibles varient en fonction du type de champ
Les champs Texte peuvent ecirctre coupeacutes
Les champs Image peuvent ecirctre afficheacutes sous forme drsquoimage drsquoURL de fichier
Les champs Date peuvent utiliser un format diffeacuterent
Ces reacuteglages peuvent ecirctre diffeacuterents selon le mode drsquoaffichage (modes ldquoPar deacutefautldquo et ldquoAccrocheldquo) =gt Cela permet par exemple de masquer un champ en mode ldquoAccrocheldquo et de lrsquoafficher en mode ldquoPar deacutefautldquo (noeud inteacutegral)
7 RENDU DU CONTENU
LrsquoAFFICHAGE DES IMAGES
Les images transmises par les utilisateurs ne sont jamais aux bonnes dimensions
Le module Image (core) va nous permettre de preacutedeacutefinir des dimensions sous forme de styles drsquoimage par exemple
Vignette 70px x 110px (mise agrave lrsquoeacutechelle)
Normal 200px x 300px (mise agrave lrsquoeacutechelle et recadrage)
Ces dimensions pourront ensuite ecirctre appliqueacutees automatiquement aux champs Image depuis lrsquoeacutecran ldquogeacuterer lrsquoaffichageldquo vu preacuteceacutedemment
7 RENDU DU CONTENU
STYLE DrsquoIMAGE
7 RENDU DU CONTENU
STYLE DrsquoIMAGE
7 RENDU DU CONTENU
ALLER PLUS LOIN La gestion et la manipulation des champs est cependant
limiteacutee dans lrsquointerface drsquoadministration
On est parfois obligeacutes de modifier le code du template correspondant agrave notre champ ou type de contenu
Les reacuteglages de lrsquoadmin sont toujours pris en compte Par exemple les styles drsquoimage choisis seront ceux utiliseacutes mecircme si lrsquoon modifie le template
7 RENDU DU CONTENU
OUgrave SONT LES CHAMPS
Dans le fichier de template des noeuds (nodehtmltwig) on nrsquoa pas directement accegraves aux champs
Crsquoest la variable content qui contient tous les champs que lrsquoon affiche et en particulier ceux ajouteacutes via Field
Comment faire pour reacutecupeacuterer les champs un par un afin de les preacutesenter diffeacuteremment
7 RENDU DU CONTENU
LA VARIABLE lsquoCONTENTrsquo
Tout le contenu drsquoun noeud est afficheacute gracircce agrave la ligne content|without(comment links)
Pour connaitre le contenu de content on utilise la fonction kint() kint(content)
On deacutecouvre alors lrsquoensemble des champs et leurs proprieacuteteacutes qui sont afficheacutees en haut de page sous forme de var_dump()
On peut afficher seacutepareacutement chacun drsquoentre eux avec le code suivant contentnom_du_champ nodecreatedtime
7 RENDU DU CONTENU
NODE DE TYPE lsquoNEWSrsquo ET FORMAT lsquoTEASERrsquo
PREPROCESS8
8 PREPROCESS
FONCTIONS DE PREPROCESS
Pour chaque template on dispose de variables que lrsquoon affiche avec le formatage voulu
Ces variables sont creacuteeacutees en amont des templates dans lesquelles elles sont utiliseacutees
On dispose de fonctions dites de preprocess qui permettent de fabriquer les variables qui sont utiliseacutees dans les templates
Il est possible drsquoeacutetendre ces fonctions pour modifier les variables envoyeacutees aux templates ou en creacuteer de nouvelles
Pour ajouter une fonction de preprocess il faut la nommer comme suit THEMENAME_preprocess_HOOK() Par exemple drupal_france_preprocess_block()
8 PREPROCESS
FONCTIONS DE PREPROCESS
Pour chaque template on dispose de variables que lrsquoon affiche avec le formatage voulu
Ces variables sont creacuteeacutees en amont des templates dans lesquelles elles sont utiliseacutees
On dispose de fonctions dites de preprocess qui permettent de fabriquer les variables qui sont utiliseacutees dans les templates
Il est possible drsquoeacutetendre ces fonctions pour modifier les variables envoyeacutees aux templates ou en creacuteer de nouvelles
Pour ajouter une fonction de preprocess il faut la nommer comme suit THEMENAME_preprocess_HOOK() Par exemple drupal_france_preprocess_block()
8 PREPROCESS
LA VARIABLE lsquo$VARIABLESrsquo
Drupal
Preprocess en amont(core modules)
Preprocess du thegraveme
TemplateCreacuteation de $variables
$variables
$variables
$variables
$variables
En mode super simplifieacute
8 PREPROCESS
APPELLER UN PREPROCESS
Diffeacuterentes fonctions de preprocess peuvent ecirctre appeleacutees permettant agrave tous les modules et thegravemes de modifier les variables passeacutees aux templates Ces fonctions sont les suivantes pour le hook de thegraveme HOOK
template_preprocess_HOOK(array amp$variables)
MODULENAME_preprocess(array amp$variables $hook)
MODULENAME_preprocess_HOOK(array amp$variables)
THEMENAME_preprocess(array amp$variables $hook)
THEMENAME_preprocess_HOOK(array amp$variables)
8 PREPROCESS
CONCREgraveTEMENT Implements hook_preprocess_menu__account() function drupal_france_preprocess_menu__account(amp$variables) if (isset($variables[items][drupalfr_useraccountcompte])) $variables[items][drupalfr_useraccountcompte][attributes]-gtaddClass([ button primary button--user-account ])
$variables[items][drupalfr_useraccountcompte][title] = new FormattableMarkup( lti class=fa fa-user-circle-o aria-hidden=truegtltigtltspan class=sr-onlygtoriginal_titleltspangt [ original_title =gt $variables[items][drupalfr_useraccountcompte][title] ] )
JAVASCRIPT9
9 JAVASCRIPT
DRUPAL amp JAVASCRIPT Drupal integravegre de nombreuses libraries javascript (jQuery Modernizrhellip) et propose
eacutegalement des libraries drsquoutilitaires (coredrupal coredrupalSettings drupalajax drupalformhellip)
Par exemple Drupal 8 embarque
jQuery 321
jQuery UI 1121
Chaque librairie deacutefinit ses deacutependances jQuery UI deacutepend de jQuery par exemple
Lorsque lrsquoon utilise une librairie depuis un script custom il ne faut pas oublier de deacuteclarer cette deacutependance Pensez agrave tester en anonyme car aucune libraire nrsquoest chargeacutee par deacutefaut
Vous disposez de toutes les librairies deacutefinies dans le fichier corecorelibrairiesyml
9 JAVASCRIPT
CONCREgraveTEMENTPour pouvoir utiliser du code JS dans vos scripts avec Drupal la bonne pratique est drsquoencadrer votre code comme suit
file Shows status messages in a modal instead of inline (function ($ Drupal)
Displays status messages in a Foundation reveal modal DrupalbehaviorsfoundationStatusInReveal = attach function (context settings) $(status-messages)once(foundation-reveal)each(function() Move the status messages out of the highlighted region var $messages = $(this) var $region = $messagesparent() $messagesappendTo(body) $messagesfoundation(open)
This is required as this region will likely be empty after status messages are removed $regionhtml($regionhtml()replace(ng )) )
)(jQuery Drupal)
9 JAVASCRIPT
DRUPAL BEHAVIORS
Les scripts sont exeacutecuteacutes apregraves le chargement complet du DOM ($(document)ready() )Mais on a aussi parfois besoin de les reacute-exeacutecuter lorsque lrsquoon interagit avec la page (appel AJAX overlayhellip)
Pour ce faire il suffit drsquoattacher le script JS agrave lrsquoobjet Drupalbehaviors (librairie coredrupal) La fonction exeacutecuteacutee reccediloit 2 variables
context le DOM (le HTML chargeacute ou ajouteacute)
settings toutes les variables injecteacutees cocircteacute serveur
9 JAVASCRIPT
RAPPEL
Comme pour les fichiers de style les scripts JS doivent ecirctre deacuteclareacutes sous forme de bibliothegraveque via les fichiers THEMENAMEinfoyml et THEMENAMElibrariesyml
QUESTIONS 10
RTFM httpswwwdrupalorgdocs8theminghttpstwigsymfonycomdoc2x
MERCI Agrave VOUS
FlorisMoriceau
LE RENDU DU CONTENU
7
7 RENDU DU CONTENU
LrsquoAFFICHAGE DES CHAMPS
Pour chaque type de contenu on peut reacutegler lrsquoaffichage des champs sur adminstructuretypesmanagecontent-typedisplay ougrave content-type est le nom machine du type de contenu
Il est possible de modifier lrsquoordre des champs lrsquoapparence des eacutetiquettes le format du champ
Les reacuteglages disponibles varient en fonction du type de champ
Les champs Texte peuvent ecirctre coupeacutes
Les champs Image peuvent ecirctre afficheacutes sous forme drsquoimage drsquoURL de fichier
Les champs Date peuvent utiliser un format diffeacuterent
Ces reacuteglages peuvent ecirctre diffeacuterents selon le mode drsquoaffichage (modes ldquoPar deacutefautldquo et ldquoAccrocheldquo) =gt Cela permet par exemple de masquer un champ en mode ldquoAccrocheldquo et de lrsquoafficher en mode ldquoPar deacutefautldquo (noeud inteacutegral)
7 RENDU DU CONTENU
LrsquoAFFICHAGE DES IMAGES
Les images transmises par les utilisateurs ne sont jamais aux bonnes dimensions
Le module Image (core) va nous permettre de preacutedeacutefinir des dimensions sous forme de styles drsquoimage par exemple
Vignette 70px x 110px (mise agrave lrsquoeacutechelle)
Normal 200px x 300px (mise agrave lrsquoeacutechelle et recadrage)
Ces dimensions pourront ensuite ecirctre appliqueacutees automatiquement aux champs Image depuis lrsquoeacutecran ldquogeacuterer lrsquoaffichageldquo vu preacuteceacutedemment
7 RENDU DU CONTENU
STYLE DrsquoIMAGE
7 RENDU DU CONTENU
STYLE DrsquoIMAGE
7 RENDU DU CONTENU
ALLER PLUS LOIN La gestion et la manipulation des champs est cependant
limiteacutee dans lrsquointerface drsquoadministration
On est parfois obligeacutes de modifier le code du template correspondant agrave notre champ ou type de contenu
Les reacuteglages de lrsquoadmin sont toujours pris en compte Par exemple les styles drsquoimage choisis seront ceux utiliseacutes mecircme si lrsquoon modifie le template
7 RENDU DU CONTENU
OUgrave SONT LES CHAMPS
Dans le fichier de template des noeuds (nodehtmltwig) on nrsquoa pas directement accegraves aux champs
Crsquoest la variable content qui contient tous les champs que lrsquoon affiche et en particulier ceux ajouteacutes via Field
Comment faire pour reacutecupeacuterer les champs un par un afin de les preacutesenter diffeacuteremment
7 RENDU DU CONTENU
LA VARIABLE lsquoCONTENTrsquo
Tout le contenu drsquoun noeud est afficheacute gracircce agrave la ligne content|without(comment links)
Pour connaitre le contenu de content on utilise la fonction kint() kint(content)
On deacutecouvre alors lrsquoensemble des champs et leurs proprieacuteteacutes qui sont afficheacutees en haut de page sous forme de var_dump()
On peut afficher seacutepareacutement chacun drsquoentre eux avec le code suivant contentnom_du_champ nodecreatedtime
7 RENDU DU CONTENU
NODE DE TYPE lsquoNEWSrsquo ET FORMAT lsquoTEASERrsquo
PREPROCESS8
8 PREPROCESS
FONCTIONS DE PREPROCESS
Pour chaque template on dispose de variables que lrsquoon affiche avec le formatage voulu
Ces variables sont creacuteeacutees en amont des templates dans lesquelles elles sont utiliseacutees
On dispose de fonctions dites de preprocess qui permettent de fabriquer les variables qui sont utiliseacutees dans les templates
Il est possible drsquoeacutetendre ces fonctions pour modifier les variables envoyeacutees aux templates ou en creacuteer de nouvelles
Pour ajouter une fonction de preprocess il faut la nommer comme suit THEMENAME_preprocess_HOOK() Par exemple drupal_france_preprocess_block()
8 PREPROCESS
FONCTIONS DE PREPROCESS
Pour chaque template on dispose de variables que lrsquoon affiche avec le formatage voulu
Ces variables sont creacuteeacutees en amont des templates dans lesquelles elles sont utiliseacutees
On dispose de fonctions dites de preprocess qui permettent de fabriquer les variables qui sont utiliseacutees dans les templates
Il est possible drsquoeacutetendre ces fonctions pour modifier les variables envoyeacutees aux templates ou en creacuteer de nouvelles
Pour ajouter une fonction de preprocess il faut la nommer comme suit THEMENAME_preprocess_HOOK() Par exemple drupal_france_preprocess_block()
8 PREPROCESS
LA VARIABLE lsquo$VARIABLESrsquo
Drupal
Preprocess en amont(core modules)
Preprocess du thegraveme
TemplateCreacuteation de $variables
$variables
$variables
$variables
$variables
En mode super simplifieacute
8 PREPROCESS
APPELLER UN PREPROCESS
Diffeacuterentes fonctions de preprocess peuvent ecirctre appeleacutees permettant agrave tous les modules et thegravemes de modifier les variables passeacutees aux templates Ces fonctions sont les suivantes pour le hook de thegraveme HOOK
template_preprocess_HOOK(array amp$variables)
MODULENAME_preprocess(array amp$variables $hook)
MODULENAME_preprocess_HOOK(array amp$variables)
THEMENAME_preprocess(array amp$variables $hook)
THEMENAME_preprocess_HOOK(array amp$variables)
8 PREPROCESS
CONCREgraveTEMENT Implements hook_preprocess_menu__account() function drupal_france_preprocess_menu__account(amp$variables) if (isset($variables[items][drupalfr_useraccountcompte])) $variables[items][drupalfr_useraccountcompte][attributes]-gtaddClass([ button primary button--user-account ])
$variables[items][drupalfr_useraccountcompte][title] = new FormattableMarkup( lti class=fa fa-user-circle-o aria-hidden=truegtltigtltspan class=sr-onlygtoriginal_titleltspangt [ original_title =gt $variables[items][drupalfr_useraccountcompte][title] ] )
JAVASCRIPT9
9 JAVASCRIPT
DRUPAL amp JAVASCRIPT Drupal integravegre de nombreuses libraries javascript (jQuery Modernizrhellip) et propose
eacutegalement des libraries drsquoutilitaires (coredrupal coredrupalSettings drupalajax drupalformhellip)
Par exemple Drupal 8 embarque
jQuery 321
jQuery UI 1121
Chaque librairie deacutefinit ses deacutependances jQuery UI deacutepend de jQuery par exemple
Lorsque lrsquoon utilise une librairie depuis un script custom il ne faut pas oublier de deacuteclarer cette deacutependance Pensez agrave tester en anonyme car aucune libraire nrsquoest chargeacutee par deacutefaut
Vous disposez de toutes les librairies deacutefinies dans le fichier corecorelibrairiesyml
9 JAVASCRIPT
CONCREgraveTEMENTPour pouvoir utiliser du code JS dans vos scripts avec Drupal la bonne pratique est drsquoencadrer votre code comme suit
file Shows status messages in a modal instead of inline (function ($ Drupal)
Displays status messages in a Foundation reveal modal DrupalbehaviorsfoundationStatusInReveal = attach function (context settings) $(status-messages)once(foundation-reveal)each(function() Move the status messages out of the highlighted region var $messages = $(this) var $region = $messagesparent() $messagesappendTo(body) $messagesfoundation(open)
This is required as this region will likely be empty after status messages are removed $regionhtml($regionhtml()replace(ng )) )
)(jQuery Drupal)
9 JAVASCRIPT
DRUPAL BEHAVIORS
Les scripts sont exeacutecuteacutes apregraves le chargement complet du DOM ($(document)ready() )Mais on a aussi parfois besoin de les reacute-exeacutecuter lorsque lrsquoon interagit avec la page (appel AJAX overlayhellip)
Pour ce faire il suffit drsquoattacher le script JS agrave lrsquoobjet Drupalbehaviors (librairie coredrupal) La fonction exeacutecuteacutee reccediloit 2 variables
context le DOM (le HTML chargeacute ou ajouteacute)
settings toutes les variables injecteacutees cocircteacute serveur
9 JAVASCRIPT
RAPPEL
Comme pour les fichiers de style les scripts JS doivent ecirctre deacuteclareacutes sous forme de bibliothegraveque via les fichiers THEMENAMEinfoyml et THEMENAMElibrariesyml
QUESTIONS 10
RTFM httpswwwdrupalorgdocs8theminghttpstwigsymfonycomdoc2x
MERCI Agrave VOUS
FlorisMoriceau
7 RENDU DU CONTENU
LrsquoAFFICHAGE DES CHAMPS
Pour chaque type de contenu on peut reacutegler lrsquoaffichage des champs sur adminstructuretypesmanagecontent-typedisplay ougrave content-type est le nom machine du type de contenu
Il est possible de modifier lrsquoordre des champs lrsquoapparence des eacutetiquettes le format du champ
Les reacuteglages disponibles varient en fonction du type de champ
Les champs Texte peuvent ecirctre coupeacutes
Les champs Image peuvent ecirctre afficheacutes sous forme drsquoimage drsquoURL de fichier
Les champs Date peuvent utiliser un format diffeacuterent
Ces reacuteglages peuvent ecirctre diffeacuterents selon le mode drsquoaffichage (modes ldquoPar deacutefautldquo et ldquoAccrocheldquo) =gt Cela permet par exemple de masquer un champ en mode ldquoAccrocheldquo et de lrsquoafficher en mode ldquoPar deacutefautldquo (noeud inteacutegral)
7 RENDU DU CONTENU
LrsquoAFFICHAGE DES IMAGES
Les images transmises par les utilisateurs ne sont jamais aux bonnes dimensions
Le module Image (core) va nous permettre de preacutedeacutefinir des dimensions sous forme de styles drsquoimage par exemple
Vignette 70px x 110px (mise agrave lrsquoeacutechelle)
Normal 200px x 300px (mise agrave lrsquoeacutechelle et recadrage)
Ces dimensions pourront ensuite ecirctre appliqueacutees automatiquement aux champs Image depuis lrsquoeacutecran ldquogeacuterer lrsquoaffichageldquo vu preacuteceacutedemment
7 RENDU DU CONTENU
STYLE DrsquoIMAGE
7 RENDU DU CONTENU
STYLE DrsquoIMAGE
7 RENDU DU CONTENU
ALLER PLUS LOIN La gestion et la manipulation des champs est cependant
limiteacutee dans lrsquointerface drsquoadministration
On est parfois obligeacutes de modifier le code du template correspondant agrave notre champ ou type de contenu
Les reacuteglages de lrsquoadmin sont toujours pris en compte Par exemple les styles drsquoimage choisis seront ceux utiliseacutes mecircme si lrsquoon modifie le template
7 RENDU DU CONTENU
OUgrave SONT LES CHAMPS
Dans le fichier de template des noeuds (nodehtmltwig) on nrsquoa pas directement accegraves aux champs
Crsquoest la variable content qui contient tous les champs que lrsquoon affiche et en particulier ceux ajouteacutes via Field
Comment faire pour reacutecupeacuterer les champs un par un afin de les preacutesenter diffeacuteremment
7 RENDU DU CONTENU
LA VARIABLE lsquoCONTENTrsquo
Tout le contenu drsquoun noeud est afficheacute gracircce agrave la ligne content|without(comment links)
Pour connaitre le contenu de content on utilise la fonction kint() kint(content)
On deacutecouvre alors lrsquoensemble des champs et leurs proprieacuteteacutes qui sont afficheacutees en haut de page sous forme de var_dump()
On peut afficher seacutepareacutement chacun drsquoentre eux avec le code suivant contentnom_du_champ nodecreatedtime
7 RENDU DU CONTENU
NODE DE TYPE lsquoNEWSrsquo ET FORMAT lsquoTEASERrsquo
PREPROCESS8
8 PREPROCESS
FONCTIONS DE PREPROCESS
Pour chaque template on dispose de variables que lrsquoon affiche avec le formatage voulu
Ces variables sont creacuteeacutees en amont des templates dans lesquelles elles sont utiliseacutees
On dispose de fonctions dites de preprocess qui permettent de fabriquer les variables qui sont utiliseacutees dans les templates
Il est possible drsquoeacutetendre ces fonctions pour modifier les variables envoyeacutees aux templates ou en creacuteer de nouvelles
Pour ajouter une fonction de preprocess il faut la nommer comme suit THEMENAME_preprocess_HOOK() Par exemple drupal_france_preprocess_block()
8 PREPROCESS
FONCTIONS DE PREPROCESS
Pour chaque template on dispose de variables que lrsquoon affiche avec le formatage voulu
Ces variables sont creacuteeacutees en amont des templates dans lesquelles elles sont utiliseacutees
On dispose de fonctions dites de preprocess qui permettent de fabriquer les variables qui sont utiliseacutees dans les templates
Il est possible drsquoeacutetendre ces fonctions pour modifier les variables envoyeacutees aux templates ou en creacuteer de nouvelles
Pour ajouter une fonction de preprocess il faut la nommer comme suit THEMENAME_preprocess_HOOK() Par exemple drupal_france_preprocess_block()
8 PREPROCESS
LA VARIABLE lsquo$VARIABLESrsquo
Drupal
Preprocess en amont(core modules)
Preprocess du thegraveme
TemplateCreacuteation de $variables
$variables
$variables
$variables
$variables
En mode super simplifieacute
8 PREPROCESS
APPELLER UN PREPROCESS
Diffeacuterentes fonctions de preprocess peuvent ecirctre appeleacutees permettant agrave tous les modules et thegravemes de modifier les variables passeacutees aux templates Ces fonctions sont les suivantes pour le hook de thegraveme HOOK
template_preprocess_HOOK(array amp$variables)
MODULENAME_preprocess(array amp$variables $hook)
MODULENAME_preprocess_HOOK(array amp$variables)
THEMENAME_preprocess(array amp$variables $hook)
THEMENAME_preprocess_HOOK(array amp$variables)
8 PREPROCESS
CONCREgraveTEMENT Implements hook_preprocess_menu__account() function drupal_france_preprocess_menu__account(amp$variables) if (isset($variables[items][drupalfr_useraccountcompte])) $variables[items][drupalfr_useraccountcompte][attributes]-gtaddClass([ button primary button--user-account ])
$variables[items][drupalfr_useraccountcompte][title] = new FormattableMarkup( lti class=fa fa-user-circle-o aria-hidden=truegtltigtltspan class=sr-onlygtoriginal_titleltspangt [ original_title =gt $variables[items][drupalfr_useraccountcompte][title] ] )
JAVASCRIPT9
9 JAVASCRIPT
DRUPAL amp JAVASCRIPT Drupal integravegre de nombreuses libraries javascript (jQuery Modernizrhellip) et propose
eacutegalement des libraries drsquoutilitaires (coredrupal coredrupalSettings drupalajax drupalformhellip)
Par exemple Drupal 8 embarque
jQuery 321
jQuery UI 1121
Chaque librairie deacutefinit ses deacutependances jQuery UI deacutepend de jQuery par exemple
Lorsque lrsquoon utilise une librairie depuis un script custom il ne faut pas oublier de deacuteclarer cette deacutependance Pensez agrave tester en anonyme car aucune libraire nrsquoest chargeacutee par deacutefaut
Vous disposez de toutes les librairies deacutefinies dans le fichier corecorelibrairiesyml
9 JAVASCRIPT
CONCREgraveTEMENTPour pouvoir utiliser du code JS dans vos scripts avec Drupal la bonne pratique est drsquoencadrer votre code comme suit
file Shows status messages in a modal instead of inline (function ($ Drupal)
Displays status messages in a Foundation reveal modal DrupalbehaviorsfoundationStatusInReveal = attach function (context settings) $(status-messages)once(foundation-reveal)each(function() Move the status messages out of the highlighted region var $messages = $(this) var $region = $messagesparent() $messagesappendTo(body) $messagesfoundation(open)
This is required as this region will likely be empty after status messages are removed $regionhtml($regionhtml()replace(ng )) )
)(jQuery Drupal)
9 JAVASCRIPT
DRUPAL BEHAVIORS
Les scripts sont exeacutecuteacutes apregraves le chargement complet du DOM ($(document)ready() )Mais on a aussi parfois besoin de les reacute-exeacutecuter lorsque lrsquoon interagit avec la page (appel AJAX overlayhellip)
Pour ce faire il suffit drsquoattacher le script JS agrave lrsquoobjet Drupalbehaviors (librairie coredrupal) La fonction exeacutecuteacutee reccediloit 2 variables
context le DOM (le HTML chargeacute ou ajouteacute)
settings toutes les variables injecteacutees cocircteacute serveur
9 JAVASCRIPT
RAPPEL
Comme pour les fichiers de style les scripts JS doivent ecirctre deacuteclareacutes sous forme de bibliothegraveque via les fichiers THEMENAMEinfoyml et THEMENAMElibrariesyml
QUESTIONS 10
RTFM httpswwwdrupalorgdocs8theminghttpstwigsymfonycomdoc2x
MERCI Agrave VOUS
FlorisMoriceau
7 RENDU DU CONTENU
LrsquoAFFICHAGE DES IMAGES
Les images transmises par les utilisateurs ne sont jamais aux bonnes dimensions
Le module Image (core) va nous permettre de preacutedeacutefinir des dimensions sous forme de styles drsquoimage par exemple
Vignette 70px x 110px (mise agrave lrsquoeacutechelle)
Normal 200px x 300px (mise agrave lrsquoeacutechelle et recadrage)
Ces dimensions pourront ensuite ecirctre appliqueacutees automatiquement aux champs Image depuis lrsquoeacutecran ldquogeacuterer lrsquoaffichageldquo vu preacuteceacutedemment
7 RENDU DU CONTENU
STYLE DrsquoIMAGE
7 RENDU DU CONTENU
STYLE DrsquoIMAGE
7 RENDU DU CONTENU
ALLER PLUS LOIN La gestion et la manipulation des champs est cependant
limiteacutee dans lrsquointerface drsquoadministration
On est parfois obligeacutes de modifier le code du template correspondant agrave notre champ ou type de contenu
Les reacuteglages de lrsquoadmin sont toujours pris en compte Par exemple les styles drsquoimage choisis seront ceux utiliseacutes mecircme si lrsquoon modifie le template
7 RENDU DU CONTENU
OUgrave SONT LES CHAMPS
Dans le fichier de template des noeuds (nodehtmltwig) on nrsquoa pas directement accegraves aux champs
Crsquoest la variable content qui contient tous les champs que lrsquoon affiche et en particulier ceux ajouteacutes via Field
Comment faire pour reacutecupeacuterer les champs un par un afin de les preacutesenter diffeacuteremment
7 RENDU DU CONTENU
LA VARIABLE lsquoCONTENTrsquo
Tout le contenu drsquoun noeud est afficheacute gracircce agrave la ligne content|without(comment links)
Pour connaitre le contenu de content on utilise la fonction kint() kint(content)
On deacutecouvre alors lrsquoensemble des champs et leurs proprieacuteteacutes qui sont afficheacutees en haut de page sous forme de var_dump()
On peut afficher seacutepareacutement chacun drsquoentre eux avec le code suivant contentnom_du_champ nodecreatedtime
7 RENDU DU CONTENU
NODE DE TYPE lsquoNEWSrsquo ET FORMAT lsquoTEASERrsquo
PREPROCESS8
8 PREPROCESS
FONCTIONS DE PREPROCESS
Pour chaque template on dispose de variables que lrsquoon affiche avec le formatage voulu
Ces variables sont creacuteeacutees en amont des templates dans lesquelles elles sont utiliseacutees
On dispose de fonctions dites de preprocess qui permettent de fabriquer les variables qui sont utiliseacutees dans les templates
Il est possible drsquoeacutetendre ces fonctions pour modifier les variables envoyeacutees aux templates ou en creacuteer de nouvelles
Pour ajouter une fonction de preprocess il faut la nommer comme suit THEMENAME_preprocess_HOOK() Par exemple drupal_france_preprocess_block()
8 PREPROCESS
FONCTIONS DE PREPROCESS
Pour chaque template on dispose de variables que lrsquoon affiche avec le formatage voulu
Ces variables sont creacuteeacutees en amont des templates dans lesquelles elles sont utiliseacutees
On dispose de fonctions dites de preprocess qui permettent de fabriquer les variables qui sont utiliseacutees dans les templates
Il est possible drsquoeacutetendre ces fonctions pour modifier les variables envoyeacutees aux templates ou en creacuteer de nouvelles
Pour ajouter une fonction de preprocess il faut la nommer comme suit THEMENAME_preprocess_HOOK() Par exemple drupal_france_preprocess_block()
8 PREPROCESS
LA VARIABLE lsquo$VARIABLESrsquo
Drupal
Preprocess en amont(core modules)
Preprocess du thegraveme
TemplateCreacuteation de $variables
$variables
$variables
$variables
$variables
En mode super simplifieacute
8 PREPROCESS
APPELLER UN PREPROCESS
Diffeacuterentes fonctions de preprocess peuvent ecirctre appeleacutees permettant agrave tous les modules et thegravemes de modifier les variables passeacutees aux templates Ces fonctions sont les suivantes pour le hook de thegraveme HOOK
template_preprocess_HOOK(array amp$variables)
MODULENAME_preprocess(array amp$variables $hook)
MODULENAME_preprocess_HOOK(array amp$variables)
THEMENAME_preprocess(array amp$variables $hook)
THEMENAME_preprocess_HOOK(array amp$variables)
8 PREPROCESS
CONCREgraveTEMENT Implements hook_preprocess_menu__account() function drupal_france_preprocess_menu__account(amp$variables) if (isset($variables[items][drupalfr_useraccountcompte])) $variables[items][drupalfr_useraccountcompte][attributes]-gtaddClass([ button primary button--user-account ])
$variables[items][drupalfr_useraccountcompte][title] = new FormattableMarkup( lti class=fa fa-user-circle-o aria-hidden=truegtltigtltspan class=sr-onlygtoriginal_titleltspangt [ original_title =gt $variables[items][drupalfr_useraccountcompte][title] ] )
JAVASCRIPT9
9 JAVASCRIPT
DRUPAL amp JAVASCRIPT Drupal integravegre de nombreuses libraries javascript (jQuery Modernizrhellip) et propose
eacutegalement des libraries drsquoutilitaires (coredrupal coredrupalSettings drupalajax drupalformhellip)
Par exemple Drupal 8 embarque
jQuery 321
jQuery UI 1121
Chaque librairie deacutefinit ses deacutependances jQuery UI deacutepend de jQuery par exemple
Lorsque lrsquoon utilise une librairie depuis un script custom il ne faut pas oublier de deacuteclarer cette deacutependance Pensez agrave tester en anonyme car aucune libraire nrsquoest chargeacutee par deacutefaut
Vous disposez de toutes les librairies deacutefinies dans le fichier corecorelibrairiesyml
9 JAVASCRIPT
CONCREgraveTEMENTPour pouvoir utiliser du code JS dans vos scripts avec Drupal la bonne pratique est drsquoencadrer votre code comme suit
file Shows status messages in a modal instead of inline (function ($ Drupal)
Displays status messages in a Foundation reveal modal DrupalbehaviorsfoundationStatusInReveal = attach function (context settings) $(status-messages)once(foundation-reveal)each(function() Move the status messages out of the highlighted region var $messages = $(this) var $region = $messagesparent() $messagesappendTo(body) $messagesfoundation(open)
This is required as this region will likely be empty after status messages are removed $regionhtml($regionhtml()replace(ng )) )
)(jQuery Drupal)
9 JAVASCRIPT
DRUPAL BEHAVIORS
Les scripts sont exeacutecuteacutes apregraves le chargement complet du DOM ($(document)ready() )Mais on a aussi parfois besoin de les reacute-exeacutecuter lorsque lrsquoon interagit avec la page (appel AJAX overlayhellip)
Pour ce faire il suffit drsquoattacher le script JS agrave lrsquoobjet Drupalbehaviors (librairie coredrupal) La fonction exeacutecuteacutee reccediloit 2 variables
context le DOM (le HTML chargeacute ou ajouteacute)
settings toutes les variables injecteacutees cocircteacute serveur
9 JAVASCRIPT
RAPPEL
Comme pour les fichiers de style les scripts JS doivent ecirctre deacuteclareacutes sous forme de bibliothegraveque via les fichiers THEMENAMEinfoyml et THEMENAMElibrariesyml
QUESTIONS 10
RTFM httpswwwdrupalorgdocs8theminghttpstwigsymfonycomdoc2x
MERCI Agrave VOUS
FlorisMoriceau
7 RENDU DU CONTENU
STYLE DrsquoIMAGE
7 RENDU DU CONTENU
STYLE DrsquoIMAGE
7 RENDU DU CONTENU
ALLER PLUS LOIN La gestion et la manipulation des champs est cependant
limiteacutee dans lrsquointerface drsquoadministration
On est parfois obligeacutes de modifier le code du template correspondant agrave notre champ ou type de contenu
Les reacuteglages de lrsquoadmin sont toujours pris en compte Par exemple les styles drsquoimage choisis seront ceux utiliseacutes mecircme si lrsquoon modifie le template
7 RENDU DU CONTENU
OUgrave SONT LES CHAMPS
Dans le fichier de template des noeuds (nodehtmltwig) on nrsquoa pas directement accegraves aux champs
Crsquoest la variable content qui contient tous les champs que lrsquoon affiche et en particulier ceux ajouteacutes via Field
Comment faire pour reacutecupeacuterer les champs un par un afin de les preacutesenter diffeacuteremment
7 RENDU DU CONTENU
LA VARIABLE lsquoCONTENTrsquo
Tout le contenu drsquoun noeud est afficheacute gracircce agrave la ligne content|without(comment links)
Pour connaitre le contenu de content on utilise la fonction kint() kint(content)
On deacutecouvre alors lrsquoensemble des champs et leurs proprieacuteteacutes qui sont afficheacutees en haut de page sous forme de var_dump()
On peut afficher seacutepareacutement chacun drsquoentre eux avec le code suivant contentnom_du_champ nodecreatedtime
7 RENDU DU CONTENU
NODE DE TYPE lsquoNEWSrsquo ET FORMAT lsquoTEASERrsquo
PREPROCESS8
8 PREPROCESS
FONCTIONS DE PREPROCESS
Pour chaque template on dispose de variables que lrsquoon affiche avec le formatage voulu
Ces variables sont creacuteeacutees en amont des templates dans lesquelles elles sont utiliseacutees
On dispose de fonctions dites de preprocess qui permettent de fabriquer les variables qui sont utiliseacutees dans les templates
Il est possible drsquoeacutetendre ces fonctions pour modifier les variables envoyeacutees aux templates ou en creacuteer de nouvelles
Pour ajouter une fonction de preprocess il faut la nommer comme suit THEMENAME_preprocess_HOOK() Par exemple drupal_france_preprocess_block()
8 PREPROCESS
FONCTIONS DE PREPROCESS
Pour chaque template on dispose de variables que lrsquoon affiche avec le formatage voulu
Ces variables sont creacuteeacutees en amont des templates dans lesquelles elles sont utiliseacutees
On dispose de fonctions dites de preprocess qui permettent de fabriquer les variables qui sont utiliseacutees dans les templates
Il est possible drsquoeacutetendre ces fonctions pour modifier les variables envoyeacutees aux templates ou en creacuteer de nouvelles
Pour ajouter une fonction de preprocess il faut la nommer comme suit THEMENAME_preprocess_HOOK() Par exemple drupal_france_preprocess_block()
8 PREPROCESS
LA VARIABLE lsquo$VARIABLESrsquo
Drupal
Preprocess en amont(core modules)
Preprocess du thegraveme
TemplateCreacuteation de $variables
$variables
$variables
$variables
$variables
En mode super simplifieacute
8 PREPROCESS
APPELLER UN PREPROCESS
Diffeacuterentes fonctions de preprocess peuvent ecirctre appeleacutees permettant agrave tous les modules et thegravemes de modifier les variables passeacutees aux templates Ces fonctions sont les suivantes pour le hook de thegraveme HOOK
template_preprocess_HOOK(array amp$variables)
MODULENAME_preprocess(array amp$variables $hook)
MODULENAME_preprocess_HOOK(array amp$variables)
THEMENAME_preprocess(array amp$variables $hook)
THEMENAME_preprocess_HOOK(array amp$variables)
8 PREPROCESS
CONCREgraveTEMENT Implements hook_preprocess_menu__account() function drupal_france_preprocess_menu__account(amp$variables) if (isset($variables[items][drupalfr_useraccountcompte])) $variables[items][drupalfr_useraccountcompte][attributes]-gtaddClass([ button primary button--user-account ])
$variables[items][drupalfr_useraccountcompte][title] = new FormattableMarkup( lti class=fa fa-user-circle-o aria-hidden=truegtltigtltspan class=sr-onlygtoriginal_titleltspangt [ original_title =gt $variables[items][drupalfr_useraccountcompte][title] ] )
JAVASCRIPT9
9 JAVASCRIPT
DRUPAL amp JAVASCRIPT Drupal integravegre de nombreuses libraries javascript (jQuery Modernizrhellip) et propose
eacutegalement des libraries drsquoutilitaires (coredrupal coredrupalSettings drupalajax drupalformhellip)
Par exemple Drupal 8 embarque
jQuery 321
jQuery UI 1121
Chaque librairie deacutefinit ses deacutependances jQuery UI deacutepend de jQuery par exemple
Lorsque lrsquoon utilise une librairie depuis un script custom il ne faut pas oublier de deacuteclarer cette deacutependance Pensez agrave tester en anonyme car aucune libraire nrsquoest chargeacutee par deacutefaut
Vous disposez de toutes les librairies deacutefinies dans le fichier corecorelibrairiesyml
9 JAVASCRIPT
CONCREgraveTEMENTPour pouvoir utiliser du code JS dans vos scripts avec Drupal la bonne pratique est drsquoencadrer votre code comme suit
file Shows status messages in a modal instead of inline (function ($ Drupal)
Displays status messages in a Foundation reveal modal DrupalbehaviorsfoundationStatusInReveal = attach function (context settings) $(status-messages)once(foundation-reveal)each(function() Move the status messages out of the highlighted region var $messages = $(this) var $region = $messagesparent() $messagesappendTo(body) $messagesfoundation(open)
This is required as this region will likely be empty after status messages are removed $regionhtml($regionhtml()replace(ng )) )
)(jQuery Drupal)
9 JAVASCRIPT
DRUPAL BEHAVIORS
Les scripts sont exeacutecuteacutes apregraves le chargement complet du DOM ($(document)ready() )Mais on a aussi parfois besoin de les reacute-exeacutecuter lorsque lrsquoon interagit avec la page (appel AJAX overlayhellip)
Pour ce faire il suffit drsquoattacher le script JS agrave lrsquoobjet Drupalbehaviors (librairie coredrupal) La fonction exeacutecuteacutee reccediloit 2 variables
context le DOM (le HTML chargeacute ou ajouteacute)
settings toutes les variables injecteacutees cocircteacute serveur
9 JAVASCRIPT
RAPPEL
Comme pour les fichiers de style les scripts JS doivent ecirctre deacuteclareacutes sous forme de bibliothegraveque via les fichiers THEMENAMEinfoyml et THEMENAMElibrariesyml
QUESTIONS 10
RTFM httpswwwdrupalorgdocs8theminghttpstwigsymfonycomdoc2x
MERCI Agrave VOUS
FlorisMoriceau
7 RENDU DU CONTENU
STYLE DrsquoIMAGE
7 RENDU DU CONTENU
ALLER PLUS LOIN La gestion et la manipulation des champs est cependant
limiteacutee dans lrsquointerface drsquoadministration
On est parfois obligeacutes de modifier le code du template correspondant agrave notre champ ou type de contenu
Les reacuteglages de lrsquoadmin sont toujours pris en compte Par exemple les styles drsquoimage choisis seront ceux utiliseacutes mecircme si lrsquoon modifie le template
7 RENDU DU CONTENU
OUgrave SONT LES CHAMPS
Dans le fichier de template des noeuds (nodehtmltwig) on nrsquoa pas directement accegraves aux champs
Crsquoest la variable content qui contient tous les champs que lrsquoon affiche et en particulier ceux ajouteacutes via Field
Comment faire pour reacutecupeacuterer les champs un par un afin de les preacutesenter diffeacuteremment
7 RENDU DU CONTENU
LA VARIABLE lsquoCONTENTrsquo
Tout le contenu drsquoun noeud est afficheacute gracircce agrave la ligne content|without(comment links)
Pour connaitre le contenu de content on utilise la fonction kint() kint(content)
On deacutecouvre alors lrsquoensemble des champs et leurs proprieacuteteacutes qui sont afficheacutees en haut de page sous forme de var_dump()
On peut afficher seacutepareacutement chacun drsquoentre eux avec le code suivant contentnom_du_champ nodecreatedtime
7 RENDU DU CONTENU
NODE DE TYPE lsquoNEWSrsquo ET FORMAT lsquoTEASERrsquo
PREPROCESS8
8 PREPROCESS
FONCTIONS DE PREPROCESS
Pour chaque template on dispose de variables que lrsquoon affiche avec le formatage voulu
Ces variables sont creacuteeacutees en amont des templates dans lesquelles elles sont utiliseacutees
On dispose de fonctions dites de preprocess qui permettent de fabriquer les variables qui sont utiliseacutees dans les templates
Il est possible drsquoeacutetendre ces fonctions pour modifier les variables envoyeacutees aux templates ou en creacuteer de nouvelles
Pour ajouter une fonction de preprocess il faut la nommer comme suit THEMENAME_preprocess_HOOK() Par exemple drupal_france_preprocess_block()
8 PREPROCESS
FONCTIONS DE PREPROCESS
Pour chaque template on dispose de variables que lrsquoon affiche avec le formatage voulu
Ces variables sont creacuteeacutees en amont des templates dans lesquelles elles sont utiliseacutees
On dispose de fonctions dites de preprocess qui permettent de fabriquer les variables qui sont utiliseacutees dans les templates
Il est possible drsquoeacutetendre ces fonctions pour modifier les variables envoyeacutees aux templates ou en creacuteer de nouvelles
Pour ajouter une fonction de preprocess il faut la nommer comme suit THEMENAME_preprocess_HOOK() Par exemple drupal_france_preprocess_block()
8 PREPROCESS
LA VARIABLE lsquo$VARIABLESrsquo
Drupal
Preprocess en amont(core modules)
Preprocess du thegraveme
TemplateCreacuteation de $variables
$variables
$variables
$variables
$variables
En mode super simplifieacute
8 PREPROCESS
APPELLER UN PREPROCESS
Diffeacuterentes fonctions de preprocess peuvent ecirctre appeleacutees permettant agrave tous les modules et thegravemes de modifier les variables passeacutees aux templates Ces fonctions sont les suivantes pour le hook de thegraveme HOOK
template_preprocess_HOOK(array amp$variables)
MODULENAME_preprocess(array amp$variables $hook)
MODULENAME_preprocess_HOOK(array amp$variables)
THEMENAME_preprocess(array amp$variables $hook)
THEMENAME_preprocess_HOOK(array amp$variables)
8 PREPROCESS
CONCREgraveTEMENT Implements hook_preprocess_menu__account() function drupal_france_preprocess_menu__account(amp$variables) if (isset($variables[items][drupalfr_useraccountcompte])) $variables[items][drupalfr_useraccountcompte][attributes]-gtaddClass([ button primary button--user-account ])
$variables[items][drupalfr_useraccountcompte][title] = new FormattableMarkup( lti class=fa fa-user-circle-o aria-hidden=truegtltigtltspan class=sr-onlygtoriginal_titleltspangt [ original_title =gt $variables[items][drupalfr_useraccountcompte][title] ] )
JAVASCRIPT9
9 JAVASCRIPT
DRUPAL amp JAVASCRIPT Drupal integravegre de nombreuses libraries javascript (jQuery Modernizrhellip) et propose
eacutegalement des libraries drsquoutilitaires (coredrupal coredrupalSettings drupalajax drupalformhellip)
Par exemple Drupal 8 embarque
jQuery 321
jQuery UI 1121
Chaque librairie deacutefinit ses deacutependances jQuery UI deacutepend de jQuery par exemple
Lorsque lrsquoon utilise une librairie depuis un script custom il ne faut pas oublier de deacuteclarer cette deacutependance Pensez agrave tester en anonyme car aucune libraire nrsquoest chargeacutee par deacutefaut
Vous disposez de toutes les librairies deacutefinies dans le fichier corecorelibrairiesyml
9 JAVASCRIPT
CONCREgraveTEMENTPour pouvoir utiliser du code JS dans vos scripts avec Drupal la bonne pratique est drsquoencadrer votre code comme suit
file Shows status messages in a modal instead of inline (function ($ Drupal)
Displays status messages in a Foundation reveal modal DrupalbehaviorsfoundationStatusInReveal = attach function (context settings) $(status-messages)once(foundation-reveal)each(function() Move the status messages out of the highlighted region var $messages = $(this) var $region = $messagesparent() $messagesappendTo(body) $messagesfoundation(open)
This is required as this region will likely be empty after status messages are removed $regionhtml($regionhtml()replace(ng )) )
)(jQuery Drupal)
9 JAVASCRIPT
DRUPAL BEHAVIORS
Les scripts sont exeacutecuteacutes apregraves le chargement complet du DOM ($(document)ready() )Mais on a aussi parfois besoin de les reacute-exeacutecuter lorsque lrsquoon interagit avec la page (appel AJAX overlayhellip)
Pour ce faire il suffit drsquoattacher le script JS agrave lrsquoobjet Drupalbehaviors (librairie coredrupal) La fonction exeacutecuteacutee reccediloit 2 variables
context le DOM (le HTML chargeacute ou ajouteacute)
settings toutes les variables injecteacutees cocircteacute serveur
9 JAVASCRIPT
RAPPEL
Comme pour les fichiers de style les scripts JS doivent ecirctre deacuteclareacutes sous forme de bibliothegraveque via les fichiers THEMENAMEinfoyml et THEMENAMElibrariesyml
QUESTIONS 10
RTFM httpswwwdrupalorgdocs8theminghttpstwigsymfonycomdoc2x
MERCI Agrave VOUS
FlorisMoriceau
7 RENDU DU CONTENU
ALLER PLUS LOIN La gestion et la manipulation des champs est cependant
limiteacutee dans lrsquointerface drsquoadministration
On est parfois obligeacutes de modifier le code du template correspondant agrave notre champ ou type de contenu
Les reacuteglages de lrsquoadmin sont toujours pris en compte Par exemple les styles drsquoimage choisis seront ceux utiliseacutes mecircme si lrsquoon modifie le template
7 RENDU DU CONTENU
OUgrave SONT LES CHAMPS
Dans le fichier de template des noeuds (nodehtmltwig) on nrsquoa pas directement accegraves aux champs
Crsquoest la variable content qui contient tous les champs que lrsquoon affiche et en particulier ceux ajouteacutes via Field
Comment faire pour reacutecupeacuterer les champs un par un afin de les preacutesenter diffeacuteremment
7 RENDU DU CONTENU
LA VARIABLE lsquoCONTENTrsquo
Tout le contenu drsquoun noeud est afficheacute gracircce agrave la ligne content|without(comment links)
Pour connaitre le contenu de content on utilise la fonction kint() kint(content)
On deacutecouvre alors lrsquoensemble des champs et leurs proprieacuteteacutes qui sont afficheacutees en haut de page sous forme de var_dump()
On peut afficher seacutepareacutement chacun drsquoentre eux avec le code suivant contentnom_du_champ nodecreatedtime
7 RENDU DU CONTENU
NODE DE TYPE lsquoNEWSrsquo ET FORMAT lsquoTEASERrsquo
PREPROCESS8
8 PREPROCESS
FONCTIONS DE PREPROCESS
Pour chaque template on dispose de variables que lrsquoon affiche avec le formatage voulu
Ces variables sont creacuteeacutees en amont des templates dans lesquelles elles sont utiliseacutees
On dispose de fonctions dites de preprocess qui permettent de fabriquer les variables qui sont utiliseacutees dans les templates
Il est possible drsquoeacutetendre ces fonctions pour modifier les variables envoyeacutees aux templates ou en creacuteer de nouvelles
Pour ajouter une fonction de preprocess il faut la nommer comme suit THEMENAME_preprocess_HOOK() Par exemple drupal_france_preprocess_block()
8 PREPROCESS
FONCTIONS DE PREPROCESS
Pour chaque template on dispose de variables que lrsquoon affiche avec le formatage voulu
Ces variables sont creacuteeacutees en amont des templates dans lesquelles elles sont utiliseacutees
On dispose de fonctions dites de preprocess qui permettent de fabriquer les variables qui sont utiliseacutees dans les templates
Il est possible drsquoeacutetendre ces fonctions pour modifier les variables envoyeacutees aux templates ou en creacuteer de nouvelles
Pour ajouter une fonction de preprocess il faut la nommer comme suit THEMENAME_preprocess_HOOK() Par exemple drupal_france_preprocess_block()
8 PREPROCESS
LA VARIABLE lsquo$VARIABLESrsquo
Drupal
Preprocess en amont(core modules)
Preprocess du thegraveme
TemplateCreacuteation de $variables
$variables
$variables
$variables
$variables
En mode super simplifieacute
8 PREPROCESS
APPELLER UN PREPROCESS
Diffeacuterentes fonctions de preprocess peuvent ecirctre appeleacutees permettant agrave tous les modules et thegravemes de modifier les variables passeacutees aux templates Ces fonctions sont les suivantes pour le hook de thegraveme HOOK
template_preprocess_HOOK(array amp$variables)
MODULENAME_preprocess(array amp$variables $hook)
MODULENAME_preprocess_HOOK(array amp$variables)
THEMENAME_preprocess(array amp$variables $hook)
THEMENAME_preprocess_HOOK(array amp$variables)
8 PREPROCESS
CONCREgraveTEMENT Implements hook_preprocess_menu__account() function drupal_france_preprocess_menu__account(amp$variables) if (isset($variables[items][drupalfr_useraccountcompte])) $variables[items][drupalfr_useraccountcompte][attributes]-gtaddClass([ button primary button--user-account ])
$variables[items][drupalfr_useraccountcompte][title] = new FormattableMarkup( lti class=fa fa-user-circle-o aria-hidden=truegtltigtltspan class=sr-onlygtoriginal_titleltspangt [ original_title =gt $variables[items][drupalfr_useraccountcompte][title] ] )
JAVASCRIPT9
9 JAVASCRIPT
DRUPAL amp JAVASCRIPT Drupal integravegre de nombreuses libraries javascript (jQuery Modernizrhellip) et propose
eacutegalement des libraries drsquoutilitaires (coredrupal coredrupalSettings drupalajax drupalformhellip)
Par exemple Drupal 8 embarque
jQuery 321
jQuery UI 1121
Chaque librairie deacutefinit ses deacutependances jQuery UI deacutepend de jQuery par exemple
Lorsque lrsquoon utilise une librairie depuis un script custom il ne faut pas oublier de deacuteclarer cette deacutependance Pensez agrave tester en anonyme car aucune libraire nrsquoest chargeacutee par deacutefaut
Vous disposez de toutes les librairies deacutefinies dans le fichier corecorelibrairiesyml
9 JAVASCRIPT
CONCREgraveTEMENTPour pouvoir utiliser du code JS dans vos scripts avec Drupal la bonne pratique est drsquoencadrer votre code comme suit
file Shows status messages in a modal instead of inline (function ($ Drupal)
Displays status messages in a Foundation reveal modal DrupalbehaviorsfoundationStatusInReveal = attach function (context settings) $(status-messages)once(foundation-reveal)each(function() Move the status messages out of the highlighted region var $messages = $(this) var $region = $messagesparent() $messagesappendTo(body) $messagesfoundation(open)
This is required as this region will likely be empty after status messages are removed $regionhtml($regionhtml()replace(ng )) )
)(jQuery Drupal)
9 JAVASCRIPT
DRUPAL BEHAVIORS
Les scripts sont exeacutecuteacutes apregraves le chargement complet du DOM ($(document)ready() )Mais on a aussi parfois besoin de les reacute-exeacutecuter lorsque lrsquoon interagit avec la page (appel AJAX overlayhellip)
Pour ce faire il suffit drsquoattacher le script JS agrave lrsquoobjet Drupalbehaviors (librairie coredrupal) La fonction exeacutecuteacutee reccediloit 2 variables
context le DOM (le HTML chargeacute ou ajouteacute)
settings toutes les variables injecteacutees cocircteacute serveur
9 JAVASCRIPT
RAPPEL
Comme pour les fichiers de style les scripts JS doivent ecirctre deacuteclareacutes sous forme de bibliothegraveque via les fichiers THEMENAMEinfoyml et THEMENAMElibrariesyml
QUESTIONS 10
RTFM httpswwwdrupalorgdocs8theminghttpstwigsymfonycomdoc2x
MERCI Agrave VOUS
FlorisMoriceau
7 RENDU DU CONTENU
OUgrave SONT LES CHAMPS
Dans le fichier de template des noeuds (nodehtmltwig) on nrsquoa pas directement accegraves aux champs
Crsquoest la variable content qui contient tous les champs que lrsquoon affiche et en particulier ceux ajouteacutes via Field
Comment faire pour reacutecupeacuterer les champs un par un afin de les preacutesenter diffeacuteremment
7 RENDU DU CONTENU
LA VARIABLE lsquoCONTENTrsquo
Tout le contenu drsquoun noeud est afficheacute gracircce agrave la ligne content|without(comment links)
Pour connaitre le contenu de content on utilise la fonction kint() kint(content)
On deacutecouvre alors lrsquoensemble des champs et leurs proprieacuteteacutes qui sont afficheacutees en haut de page sous forme de var_dump()
On peut afficher seacutepareacutement chacun drsquoentre eux avec le code suivant contentnom_du_champ nodecreatedtime
7 RENDU DU CONTENU
NODE DE TYPE lsquoNEWSrsquo ET FORMAT lsquoTEASERrsquo
PREPROCESS8
8 PREPROCESS
FONCTIONS DE PREPROCESS
Pour chaque template on dispose de variables que lrsquoon affiche avec le formatage voulu
Ces variables sont creacuteeacutees en amont des templates dans lesquelles elles sont utiliseacutees
On dispose de fonctions dites de preprocess qui permettent de fabriquer les variables qui sont utiliseacutees dans les templates
Il est possible drsquoeacutetendre ces fonctions pour modifier les variables envoyeacutees aux templates ou en creacuteer de nouvelles
Pour ajouter une fonction de preprocess il faut la nommer comme suit THEMENAME_preprocess_HOOK() Par exemple drupal_france_preprocess_block()
8 PREPROCESS
FONCTIONS DE PREPROCESS
Pour chaque template on dispose de variables que lrsquoon affiche avec le formatage voulu
Ces variables sont creacuteeacutees en amont des templates dans lesquelles elles sont utiliseacutees
On dispose de fonctions dites de preprocess qui permettent de fabriquer les variables qui sont utiliseacutees dans les templates
Il est possible drsquoeacutetendre ces fonctions pour modifier les variables envoyeacutees aux templates ou en creacuteer de nouvelles
Pour ajouter une fonction de preprocess il faut la nommer comme suit THEMENAME_preprocess_HOOK() Par exemple drupal_france_preprocess_block()
8 PREPROCESS
LA VARIABLE lsquo$VARIABLESrsquo
Drupal
Preprocess en amont(core modules)
Preprocess du thegraveme
TemplateCreacuteation de $variables
$variables
$variables
$variables
$variables
En mode super simplifieacute
8 PREPROCESS
APPELLER UN PREPROCESS
Diffeacuterentes fonctions de preprocess peuvent ecirctre appeleacutees permettant agrave tous les modules et thegravemes de modifier les variables passeacutees aux templates Ces fonctions sont les suivantes pour le hook de thegraveme HOOK
template_preprocess_HOOK(array amp$variables)
MODULENAME_preprocess(array amp$variables $hook)
MODULENAME_preprocess_HOOK(array amp$variables)
THEMENAME_preprocess(array amp$variables $hook)
THEMENAME_preprocess_HOOK(array amp$variables)
8 PREPROCESS
CONCREgraveTEMENT Implements hook_preprocess_menu__account() function drupal_france_preprocess_menu__account(amp$variables) if (isset($variables[items][drupalfr_useraccountcompte])) $variables[items][drupalfr_useraccountcompte][attributes]-gtaddClass([ button primary button--user-account ])
$variables[items][drupalfr_useraccountcompte][title] = new FormattableMarkup( lti class=fa fa-user-circle-o aria-hidden=truegtltigtltspan class=sr-onlygtoriginal_titleltspangt [ original_title =gt $variables[items][drupalfr_useraccountcompte][title] ] )
JAVASCRIPT9
9 JAVASCRIPT
DRUPAL amp JAVASCRIPT Drupal integravegre de nombreuses libraries javascript (jQuery Modernizrhellip) et propose
eacutegalement des libraries drsquoutilitaires (coredrupal coredrupalSettings drupalajax drupalformhellip)
Par exemple Drupal 8 embarque
jQuery 321
jQuery UI 1121
Chaque librairie deacutefinit ses deacutependances jQuery UI deacutepend de jQuery par exemple
Lorsque lrsquoon utilise une librairie depuis un script custom il ne faut pas oublier de deacuteclarer cette deacutependance Pensez agrave tester en anonyme car aucune libraire nrsquoest chargeacutee par deacutefaut
Vous disposez de toutes les librairies deacutefinies dans le fichier corecorelibrairiesyml
9 JAVASCRIPT
CONCREgraveTEMENTPour pouvoir utiliser du code JS dans vos scripts avec Drupal la bonne pratique est drsquoencadrer votre code comme suit
file Shows status messages in a modal instead of inline (function ($ Drupal)
Displays status messages in a Foundation reveal modal DrupalbehaviorsfoundationStatusInReveal = attach function (context settings) $(status-messages)once(foundation-reveal)each(function() Move the status messages out of the highlighted region var $messages = $(this) var $region = $messagesparent() $messagesappendTo(body) $messagesfoundation(open)
This is required as this region will likely be empty after status messages are removed $regionhtml($regionhtml()replace(ng )) )
)(jQuery Drupal)
9 JAVASCRIPT
DRUPAL BEHAVIORS
Les scripts sont exeacutecuteacutes apregraves le chargement complet du DOM ($(document)ready() )Mais on a aussi parfois besoin de les reacute-exeacutecuter lorsque lrsquoon interagit avec la page (appel AJAX overlayhellip)
Pour ce faire il suffit drsquoattacher le script JS agrave lrsquoobjet Drupalbehaviors (librairie coredrupal) La fonction exeacutecuteacutee reccediloit 2 variables
context le DOM (le HTML chargeacute ou ajouteacute)
settings toutes les variables injecteacutees cocircteacute serveur
9 JAVASCRIPT
RAPPEL
Comme pour les fichiers de style les scripts JS doivent ecirctre deacuteclareacutes sous forme de bibliothegraveque via les fichiers THEMENAMEinfoyml et THEMENAMElibrariesyml
QUESTIONS 10
RTFM httpswwwdrupalorgdocs8theminghttpstwigsymfonycomdoc2x
MERCI Agrave VOUS
FlorisMoriceau
7 RENDU DU CONTENU
LA VARIABLE lsquoCONTENTrsquo
Tout le contenu drsquoun noeud est afficheacute gracircce agrave la ligne content|without(comment links)
Pour connaitre le contenu de content on utilise la fonction kint() kint(content)
On deacutecouvre alors lrsquoensemble des champs et leurs proprieacuteteacutes qui sont afficheacutees en haut de page sous forme de var_dump()
On peut afficher seacutepareacutement chacun drsquoentre eux avec le code suivant contentnom_du_champ nodecreatedtime
7 RENDU DU CONTENU
NODE DE TYPE lsquoNEWSrsquo ET FORMAT lsquoTEASERrsquo
PREPROCESS8
8 PREPROCESS
FONCTIONS DE PREPROCESS
Pour chaque template on dispose de variables que lrsquoon affiche avec le formatage voulu
Ces variables sont creacuteeacutees en amont des templates dans lesquelles elles sont utiliseacutees
On dispose de fonctions dites de preprocess qui permettent de fabriquer les variables qui sont utiliseacutees dans les templates
Il est possible drsquoeacutetendre ces fonctions pour modifier les variables envoyeacutees aux templates ou en creacuteer de nouvelles
Pour ajouter une fonction de preprocess il faut la nommer comme suit THEMENAME_preprocess_HOOK() Par exemple drupal_france_preprocess_block()
8 PREPROCESS
FONCTIONS DE PREPROCESS
Pour chaque template on dispose de variables que lrsquoon affiche avec le formatage voulu
Ces variables sont creacuteeacutees en amont des templates dans lesquelles elles sont utiliseacutees
On dispose de fonctions dites de preprocess qui permettent de fabriquer les variables qui sont utiliseacutees dans les templates
Il est possible drsquoeacutetendre ces fonctions pour modifier les variables envoyeacutees aux templates ou en creacuteer de nouvelles
Pour ajouter une fonction de preprocess il faut la nommer comme suit THEMENAME_preprocess_HOOK() Par exemple drupal_france_preprocess_block()
8 PREPROCESS
LA VARIABLE lsquo$VARIABLESrsquo
Drupal
Preprocess en amont(core modules)
Preprocess du thegraveme
TemplateCreacuteation de $variables
$variables
$variables
$variables
$variables
En mode super simplifieacute
8 PREPROCESS
APPELLER UN PREPROCESS
Diffeacuterentes fonctions de preprocess peuvent ecirctre appeleacutees permettant agrave tous les modules et thegravemes de modifier les variables passeacutees aux templates Ces fonctions sont les suivantes pour le hook de thegraveme HOOK
template_preprocess_HOOK(array amp$variables)
MODULENAME_preprocess(array amp$variables $hook)
MODULENAME_preprocess_HOOK(array amp$variables)
THEMENAME_preprocess(array amp$variables $hook)
THEMENAME_preprocess_HOOK(array amp$variables)
8 PREPROCESS
CONCREgraveTEMENT Implements hook_preprocess_menu__account() function drupal_france_preprocess_menu__account(amp$variables) if (isset($variables[items][drupalfr_useraccountcompte])) $variables[items][drupalfr_useraccountcompte][attributes]-gtaddClass([ button primary button--user-account ])
$variables[items][drupalfr_useraccountcompte][title] = new FormattableMarkup( lti class=fa fa-user-circle-o aria-hidden=truegtltigtltspan class=sr-onlygtoriginal_titleltspangt [ original_title =gt $variables[items][drupalfr_useraccountcompte][title] ] )
JAVASCRIPT9
9 JAVASCRIPT
DRUPAL amp JAVASCRIPT Drupal integravegre de nombreuses libraries javascript (jQuery Modernizrhellip) et propose
eacutegalement des libraries drsquoutilitaires (coredrupal coredrupalSettings drupalajax drupalformhellip)
Par exemple Drupal 8 embarque
jQuery 321
jQuery UI 1121
Chaque librairie deacutefinit ses deacutependances jQuery UI deacutepend de jQuery par exemple
Lorsque lrsquoon utilise une librairie depuis un script custom il ne faut pas oublier de deacuteclarer cette deacutependance Pensez agrave tester en anonyme car aucune libraire nrsquoest chargeacutee par deacutefaut
Vous disposez de toutes les librairies deacutefinies dans le fichier corecorelibrairiesyml
9 JAVASCRIPT
CONCREgraveTEMENTPour pouvoir utiliser du code JS dans vos scripts avec Drupal la bonne pratique est drsquoencadrer votre code comme suit
file Shows status messages in a modal instead of inline (function ($ Drupal)
Displays status messages in a Foundation reveal modal DrupalbehaviorsfoundationStatusInReveal = attach function (context settings) $(status-messages)once(foundation-reveal)each(function() Move the status messages out of the highlighted region var $messages = $(this) var $region = $messagesparent() $messagesappendTo(body) $messagesfoundation(open)
This is required as this region will likely be empty after status messages are removed $regionhtml($regionhtml()replace(ng )) )
)(jQuery Drupal)
9 JAVASCRIPT
DRUPAL BEHAVIORS
Les scripts sont exeacutecuteacutes apregraves le chargement complet du DOM ($(document)ready() )Mais on a aussi parfois besoin de les reacute-exeacutecuter lorsque lrsquoon interagit avec la page (appel AJAX overlayhellip)
Pour ce faire il suffit drsquoattacher le script JS agrave lrsquoobjet Drupalbehaviors (librairie coredrupal) La fonction exeacutecuteacutee reccediloit 2 variables
context le DOM (le HTML chargeacute ou ajouteacute)
settings toutes les variables injecteacutees cocircteacute serveur
9 JAVASCRIPT
RAPPEL
Comme pour les fichiers de style les scripts JS doivent ecirctre deacuteclareacutes sous forme de bibliothegraveque via les fichiers THEMENAMEinfoyml et THEMENAMElibrariesyml
QUESTIONS 10
RTFM httpswwwdrupalorgdocs8theminghttpstwigsymfonycomdoc2x
MERCI Agrave VOUS
FlorisMoriceau
7 RENDU DU CONTENU
NODE DE TYPE lsquoNEWSrsquo ET FORMAT lsquoTEASERrsquo
PREPROCESS8
8 PREPROCESS
FONCTIONS DE PREPROCESS
Pour chaque template on dispose de variables que lrsquoon affiche avec le formatage voulu
Ces variables sont creacuteeacutees en amont des templates dans lesquelles elles sont utiliseacutees
On dispose de fonctions dites de preprocess qui permettent de fabriquer les variables qui sont utiliseacutees dans les templates
Il est possible drsquoeacutetendre ces fonctions pour modifier les variables envoyeacutees aux templates ou en creacuteer de nouvelles
Pour ajouter une fonction de preprocess il faut la nommer comme suit THEMENAME_preprocess_HOOK() Par exemple drupal_france_preprocess_block()
8 PREPROCESS
FONCTIONS DE PREPROCESS
Pour chaque template on dispose de variables que lrsquoon affiche avec le formatage voulu
Ces variables sont creacuteeacutees en amont des templates dans lesquelles elles sont utiliseacutees
On dispose de fonctions dites de preprocess qui permettent de fabriquer les variables qui sont utiliseacutees dans les templates
Il est possible drsquoeacutetendre ces fonctions pour modifier les variables envoyeacutees aux templates ou en creacuteer de nouvelles
Pour ajouter une fonction de preprocess il faut la nommer comme suit THEMENAME_preprocess_HOOK() Par exemple drupal_france_preprocess_block()
8 PREPROCESS
LA VARIABLE lsquo$VARIABLESrsquo
Drupal
Preprocess en amont(core modules)
Preprocess du thegraveme
TemplateCreacuteation de $variables
$variables
$variables
$variables
$variables
En mode super simplifieacute
8 PREPROCESS
APPELLER UN PREPROCESS
Diffeacuterentes fonctions de preprocess peuvent ecirctre appeleacutees permettant agrave tous les modules et thegravemes de modifier les variables passeacutees aux templates Ces fonctions sont les suivantes pour le hook de thegraveme HOOK
template_preprocess_HOOK(array amp$variables)
MODULENAME_preprocess(array amp$variables $hook)
MODULENAME_preprocess_HOOK(array amp$variables)
THEMENAME_preprocess(array amp$variables $hook)
THEMENAME_preprocess_HOOK(array amp$variables)
8 PREPROCESS
CONCREgraveTEMENT Implements hook_preprocess_menu__account() function drupal_france_preprocess_menu__account(amp$variables) if (isset($variables[items][drupalfr_useraccountcompte])) $variables[items][drupalfr_useraccountcompte][attributes]-gtaddClass([ button primary button--user-account ])
$variables[items][drupalfr_useraccountcompte][title] = new FormattableMarkup( lti class=fa fa-user-circle-o aria-hidden=truegtltigtltspan class=sr-onlygtoriginal_titleltspangt [ original_title =gt $variables[items][drupalfr_useraccountcompte][title] ] )
JAVASCRIPT9
9 JAVASCRIPT
DRUPAL amp JAVASCRIPT Drupal integravegre de nombreuses libraries javascript (jQuery Modernizrhellip) et propose
eacutegalement des libraries drsquoutilitaires (coredrupal coredrupalSettings drupalajax drupalformhellip)
Par exemple Drupal 8 embarque
jQuery 321
jQuery UI 1121
Chaque librairie deacutefinit ses deacutependances jQuery UI deacutepend de jQuery par exemple
Lorsque lrsquoon utilise une librairie depuis un script custom il ne faut pas oublier de deacuteclarer cette deacutependance Pensez agrave tester en anonyme car aucune libraire nrsquoest chargeacutee par deacutefaut
Vous disposez de toutes les librairies deacutefinies dans le fichier corecorelibrairiesyml
9 JAVASCRIPT
CONCREgraveTEMENTPour pouvoir utiliser du code JS dans vos scripts avec Drupal la bonne pratique est drsquoencadrer votre code comme suit
file Shows status messages in a modal instead of inline (function ($ Drupal)
Displays status messages in a Foundation reveal modal DrupalbehaviorsfoundationStatusInReveal = attach function (context settings) $(status-messages)once(foundation-reveal)each(function() Move the status messages out of the highlighted region var $messages = $(this) var $region = $messagesparent() $messagesappendTo(body) $messagesfoundation(open)
This is required as this region will likely be empty after status messages are removed $regionhtml($regionhtml()replace(ng )) )
)(jQuery Drupal)
9 JAVASCRIPT
DRUPAL BEHAVIORS
Les scripts sont exeacutecuteacutes apregraves le chargement complet du DOM ($(document)ready() )Mais on a aussi parfois besoin de les reacute-exeacutecuter lorsque lrsquoon interagit avec la page (appel AJAX overlayhellip)
Pour ce faire il suffit drsquoattacher le script JS agrave lrsquoobjet Drupalbehaviors (librairie coredrupal) La fonction exeacutecuteacutee reccediloit 2 variables
context le DOM (le HTML chargeacute ou ajouteacute)
settings toutes les variables injecteacutees cocircteacute serveur
9 JAVASCRIPT
RAPPEL
Comme pour les fichiers de style les scripts JS doivent ecirctre deacuteclareacutes sous forme de bibliothegraveque via les fichiers THEMENAMEinfoyml et THEMENAMElibrariesyml
QUESTIONS 10
RTFM httpswwwdrupalorgdocs8theminghttpstwigsymfonycomdoc2x
MERCI Agrave VOUS
FlorisMoriceau
PREPROCESS8
8 PREPROCESS
FONCTIONS DE PREPROCESS
Pour chaque template on dispose de variables que lrsquoon affiche avec le formatage voulu
Ces variables sont creacuteeacutees en amont des templates dans lesquelles elles sont utiliseacutees
On dispose de fonctions dites de preprocess qui permettent de fabriquer les variables qui sont utiliseacutees dans les templates
Il est possible drsquoeacutetendre ces fonctions pour modifier les variables envoyeacutees aux templates ou en creacuteer de nouvelles
Pour ajouter une fonction de preprocess il faut la nommer comme suit THEMENAME_preprocess_HOOK() Par exemple drupal_france_preprocess_block()
8 PREPROCESS
FONCTIONS DE PREPROCESS
Pour chaque template on dispose de variables que lrsquoon affiche avec le formatage voulu
Ces variables sont creacuteeacutees en amont des templates dans lesquelles elles sont utiliseacutees
On dispose de fonctions dites de preprocess qui permettent de fabriquer les variables qui sont utiliseacutees dans les templates
Il est possible drsquoeacutetendre ces fonctions pour modifier les variables envoyeacutees aux templates ou en creacuteer de nouvelles
Pour ajouter une fonction de preprocess il faut la nommer comme suit THEMENAME_preprocess_HOOK() Par exemple drupal_france_preprocess_block()
8 PREPROCESS
LA VARIABLE lsquo$VARIABLESrsquo
Drupal
Preprocess en amont(core modules)
Preprocess du thegraveme
TemplateCreacuteation de $variables
$variables
$variables
$variables
$variables
En mode super simplifieacute
8 PREPROCESS
APPELLER UN PREPROCESS
Diffeacuterentes fonctions de preprocess peuvent ecirctre appeleacutees permettant agrave tous les modules et thegravemes de modifier les variables passeacutees aux templates Ces fonctions sont les suivantes pour le hook de thegraveme HOOK
template_preprocess_HOOK(array amp$variables)
MODULENAME_preprocess(array amp$variables $hook)
MODULENAME_preprocess_HOOK(array amp$variables)
THEMENAME_preprocess(array amp$variables $hook)
THEMENAME_preprocess_HOOK(array amp$variables)
8 PREPROCESS
CONCREgraveTEMENT Implements hook_preprocess_menu__account() function drupal_france_preprocess_menu__account(amp$variables) if (isset($variables[items][drupalfr_useraccountcompte])) $variables[items][drupalfr_useraccountcompte][attributes]-gtaddClass([ button primary button--user-account ])
$variables[items][drupalfr_useraccountcompte][title] = new FormattableMarkup( lti class=fa fa-user-circle-o aria-hidden=truegtltigtltspan class=sr-onlygtoriginal_titleltspangt [ original_title =gt $variables[items][drupalfr_useraccountcompte][title] ] )
JAVASCRIPT9
9 JAVASCRIPT
DRUPAL amp JAVASCRIPT Drupal integravegre de nombreuses libraries javascript (jQuery Modernizrhellip) et propose
eacutegalement des libraries drsquoutilitaires (coredrupal coredrupalSettings drupalajax drupalformhellip)
Par exemple Drupal 8 embarque
jQuery 321
jQuery UI 1121
Chaque librairie deacutefinit ses deacutependances jQuery UI deacutepend de jQuery par exemple
Lorsque lrsquoon utilise une librairie depuis un script custom il ne faut pas oublier de deacuteclarer cette deacutependance Pensez agrave tester en anonyme car aucune libraire nrsquoest chargeacutee par deacutefaut
Vous disposez de toutes les librairies deacutefinies dans le fichier corecorelibrairiesyml
9 JAVASCRIPT
CONCREgraveTEMENTPour pouvoir utiliser du code JS dans vos scripts avec Drupal la bonne pratique est drsquoencadrer votre code comme suit
file Shows status messages in a modal instead of inline (function ($ Drupal)
Displays status messages in a Foundation reveal modal DrupalbehaviorsfoundationStatusInReveal = attach function (context settings) $(status-messages)once(foundation-reveal)each(function() Move the status messages out of the highlighted region var $messages = $(this) var $region = $messagesparent() $messagesappendTo(body) $messagesfoundation(open)
This is required as this region will likely be empty after status messages are removed $regionhtml($regionhtml()replace(ng )) )
)(jQuery Drupal)
9 JAVASCRIPT
DRUPAL BEHAVIORS
Les scripts sont exeacutecuteacutes apregraves le chargement complet du DOM ($(document)ready() )Mais on a aussi parfois besoin de les reacute-exeacutecuter lorsque lrsquoon interagit avec la page (appel AJAX overlayhellip)
Pour ce faire il suffit drsquoattacher le script JS agrave lrsquoobjet Drupalbehaviors (librairie coredrupal) La fonction exeacutecuteacutee reccediloit 2 variables
context le DOM (le HTML chargeacute ou ajouteacute)
settings toutes les variables injecteacutees cocircteacute serveur
9 JAVASCRIPT
RAPPEL
Comme pour les fichiers de style les scripts JS doivent ecirctre deacuteclareacutes sous forme de bibliothegraveque via les fichiers THEMENAMEinfoyml et THEMENAMElibrariesyml
QUESTIONS 10
RTFM httpswwwdrupalorgdocs8theminghttpstwigsymfonycomdoc2x
MERCI Agrave VOUS
FlorisMoriceau
8 PREPROCESS
FONCTIONS DE PREPROCESS
Pour chaque template on dispose de variables que lrsquoon affiche avec le formatage voulu
Ces variables sont creacuteeacutees en amont des templates dans lesquelles elles sont utiliseacutees
On dispose de fonctions dites de preprocess qui permettent de fabriquer les variables qui sont utiliseacutees dans les templates
Il est possible drsquoeacutetendre ces fonctions pour modifier les variables envoyeacutees aux templates ou en creacuteer de nouvelles
Pour ajouter une fonction de preprocess il faut la nommer comme suit THEMENAME_preprocess_HOOK() Par exemple drupal_france_preprocess_block()
8 PREPROCESS
FONCTIONS DE PREPROCESS
Pour chaque template on dispose de variables que lrsquoon affiche avec le formatage voulu
Ces variables sont creacuteeacutees en amont des templates dans lesquelles elles sont utiliseacutees
On dispose de fonctions dites de preprocess qui permettent de fabriquer les variables qui sont utiliseacutees dans les templates
Il est possible drsquoeacutetendre ces fonctions pour modifier les variables envoyeacutees aux templates ou en creacuteer de nouvelles
Pour ajouter une fonction de preprocess il faut la nommer comme suit THEMENAME_preprocess_HOOK() Par exemple drupal_france_preprocess_block()
8 PREPROCESS
LA VARIABLE lsquo$VARIABLESrsquo
Drupal
Preprocess en amont(core modules)
Preprocess du thegraveme
TemplateCreacuteation de $variables
$variables
$variables
$variables
$variables
En mode super simplifieacute
8 PREPROCESS
APPELLER UN PREPROCESS
Diffeacuterentes fonctions de preprocess peuvent ecirctre appeleacutees permettant agrave tous les modules et thegravemes de modifier les variables passeacutees aux templates Ces fonctions sont les suivantes pour le hook de thegraveme HOOK
template_preprocess_HOOK(array amp$variables)
MODULENAME_preprocess(array amp$variables $hook)
MODULENAME_preprocess_HOOK(array amp$variables)
THEMENAME_preprocess(array amp$variables $hook)
THEMENAME_preprocess_HOOK(array amp$variables)
8 PREPROCESS
CONCREgraveTEMENT Implements hook_preprocess_menu__account() function drupal_france_preprocess_menu__account(amp$variables) if (isset($variables[items][drupalfr_useraccountcompte])) $variables[items][drupalfr_useraccountcompte][attributes]-gtaddClass([ button primary button--user-account ])
$variables[items][drupalfr_useraccountcompte][title] = new FormattableMarkup( lti class=fa fa-user-circle-o aria-hidden=truegtltigtltspan class=sr-onlygtoriginal_titleltspangt [ original_title =gt $variables[items][drupalfr_useraccountcompte][title] ] )
JAVASCRIPT9
9 JAVASCRIPT
DRUPAL amp JAVASCRIPT Drupal integravegre de nombreuses libraries javascript (jQuery Modernizrhellip) et propose
eacutegalement des libraries drsquoutilitaires (coredrupal coredrupalSettings drupalajax drupalformhellip)
Par exemple Drupal 8 embarque
jQuery 321
jQuery UI 1121
Chaque librairie deacutefinit ses deacutependances jQuery UI deacutepend de jQuery par exemple
Lorsque lrsquoon utilise une librairie depuis un script custom il ne faut pas oublier de deacuteclarer cette deacutependance Pensez agrave tester en anonyme car aucune libraire nrsquoest chargeacutee par deacutefaut
Vous disposez de toutes les librairies deacutefinies dans le fichier corecorelibrairiesyml
9 JAVASCRIPT
CONCREgraveTEMENTPour pouvoir utiliser du code JS dans vos scripts avec Drupal la bonne pratique est drsquoencadrer votre code comme suit
file Shows status messages in a modal instead of inline (function ($ Drupal)
Displays status messages in a Foundation reveal modal DrupalbehaviorsfoundationStatusInReveal = attach function (context settings) $(status-messages)once(foundation-reveal)each(function() Move the status messages out of the highlighted region var $messages = $(this) var $region = $messagesparent() $messagesappendTo(body) $messagesfoundation(open)
This is required as this region will likely be empty after status messages are removed $regionhtml($regionhtml()replace(ng )) )
)(jQuery Drupal)
9 JAVASCRIPT
DRUPAL BEHAVIORS
Les scripts sont exeacutecuteacutes apregraves le chargement complet du DOM ($(document)ready() )Mais on a aussi parfois besoin de les reacute-exeacutecuter lorsque lrsquoon interagit avec la page (appel AJAX overlayhellip)
Pour ce faire il suffit drsquoattacher le script JS agrave lrsquoobjet Drupalbehaviors (librairie coredrupal) La fonction exeacutecuteacutee reccediloit 2 variables
context le DOM (le HTML chargeacute ou ajouteacute)
settings toutes les variables injecteacutees cocircteacute serveur
9 JAVASCRIPT
RAPPEL
Comme pour les fichiers de style les scripts JS doivent ecirctre deacuteclareacutes sous forme de bibliothegraveque via les fichiers THEMENAMEinfoyml et THEMENAMElibrariesyml
QUESTIONS 10
RTFM httpswwwdrupalorgdocs8theminghttpstwigsymfonycomdoc2x
MERCI Agrave VOUS
FlorisMoriceau
8 PREPROCESS
FONCTIONS DE PREPROCESS
Pour chaque template on dispose de variables que lrsquoon affiche avec le formatage voulu
Ces variables sont creacuteeacutees en amont des templates dans lesquelles elles sont utiliseacutees
On dispose de fonctions dites de preprocess qui permettent de fabriquer les variables qui sont utiliseacutees dans les templates
Il est possible drsquoeacutetendre ces fonctions pour modifier les variables envoyeacutees aux templates ou en creacuteer de nouvelles
Pour ajouter une fonction de preprocess il faut la nommer comme suit THEMENAME_preprocess_HOOK() Par exemple drupal_france_preprocess_block()
8 PREPROCESS
LA VARIABLE lsquo$VARIABLESrsquo
Drupal
Preprocess en amont(core modules)
Preprocess du thegraveme
TemplateCreacuteation de $variables
$variables
$variables
$variables
$variables
En mode super simplifieacute
8 PREPROCESS
APPELLER UN PREPROCESS
Diffeacuterentes fonctions de preprocess peuvent ecirctre appeleacutees permettant agrave tous les modules et thegravemes de modifier les variables passeacutees aux templates Ces fonctions sont les suivantes pour le hook de thegraveme HOOK
template_preprocess_HOOK(array amp$variables)
MODULENAME_preprocess(array amp$variables $hook)
MODULENAME_preprocess_HOOK(array amp$variables)
THEMENAME_preprocess(array amp$variables $hook)
THEMENAME_preprocess_HOOK(array amp$variables)
8 PREPROCESS
CONCREgraveTEMENT Implements hook_preprocess_menu__account() function drupal_france_preprocess_menu__account(amp$variables) if (isset($variables[items][drupalfr_useraccountcompte])) $variables[items][drupalfr_useraccountcompte][attributes]-gtaddClass([ button primary button--user-account ])
$variables[items][drupalfr_useraccountcompte][title] = new FormattableMarkup( lti class=fa fa-user-circle-o aria-hidden=truegtltigtltspan class=sr-onlygtoriginal_titleltspangt [ original_title =gt $variables[items][drupalfr_useraccountcompte][title] ] )
JAVASCRIPT9
9 JAVASCRIPT
DRUPAL amp JAVASCRIPT Drupal integravegre de nombreuses libraries javascript (jQuery Modernizrhellip) et propose
eacutegalement des libraries drsquoutilitaires (coredrupal coredrupalSettings drupalajax drupalformhellip)
Par exemple Drupal 8 embarque
jQuery 321
jQuery UI 1121
Chaque librairie deacutefinit ses deacutependances jQuery UI deacutepend de jQuery par exemple
Lorsque lrsquoon utilise une librairie depuis un script custom il ne faut pas oublier de deacuteclarer cette deacutependance Pensez agrave tester en anonyme car aucune libraire nrsquoest chargeacutee par deacutefaut
Vous disposez de toutes les librairies deacutefinies dans le fichier corecorelibrairiesyml
9 JAVASCRIPT
CONCREgraveTEMENTPour pouvoir utiliser du code JS dans vos scripts avec Drupal la bonne pratique est drsquoencadrer votre code comme suit
file Shows status messages in a modal instead of inline (function ($ Drupal)
Displays status messages in a Foundation reveal modal DrupalbehaviorsfoundationStatusInReveal = attach function (context settings) $(status-messages)once(foundation-reveal)each(function() Move the status messages out of the highlighted region var $messages = $(this) var $region = $messagesparent() $messagesappendTo(body) $messagesfoundation(open)
This is required as this region will likely be empty after status messages are removed $regionhtml($regionhtml()replace(ng )) )
)(jQuery Drupal)
9 JAVASCRIPT
DRUPAL BEHAVIORS
Les scripts sont exeacutecuteacutes apregraves le chargement complet du DOM ($(document)ready() )Mais on a aussi parfois besoin de les reacute-exeacutecuter lorsque lrsquoon interagit avec la page (appel AJAX overlayhellip)
Pour ce faire il suffit drsquoattacher le script JS agrave lrsquoobjet Drupalbehaviors (librairie coredrupal) La fonction exeacutecuteacutee reccediloit 2 variables
context le DOM (le HTML chargeacute ou ajouteacute)
settings toutes les variables injecteacutees cocircteacute serveur
9 JAVASCRIPT
RAPPEL
Comme pour les fichiers de style les scripts JS doivent ecirctre deacuteclareacutes sous forme de bibliothegraveque via les fichiers THEMENAMEinfoyml et THEMENAMElibrariesyml
QUESTIONS 10
RTFM httpswwwdrupalorgdocs8theminghttpstwigsymfonycomdoc2x
MERCI Agrave VOUS
FlorisMoriceau
8 PREPROCESS
LA VARIABLE lsquo$VARIABLESrsquo
Drupal
Preprocess en amont(core modules)
Preprocess du thegraveme
TemplateCreacuteation de $variables
$variables
$variables
$variables
$variables
En mode super simplifieacute
8 PREPROCESS
APPELLER UN PREPROCESS
Diffeacuterentes fonctions de preprocess peuvent ecirctre appeleacutees permettant agrave tous les modules et thegravemes de modifier les variables passeacutees aux templates Ces fonctions sont les suivantes pour le hook de thegraveme HOOK
template_preprocess_HOOK(array amp$variables)
MODULENAME_preprocess(array amp$variables $hook)
MODULENAME_preprocess_HOOK(array amp$variables)
THEMENAME_preprocess(array amp$variables $hook)
THEMENAME_preprocess_HOOK(array amp$variables)
8 PREPROCESS
CONCREgraveTEMENT Implements hook_preprocess_menu__account() function drupal_france_preprocess_menu__account(amp$variables) if (isset($variables[items][drupalfr_useraccountcompte])) $variables[items][drupalfr_useraccountcompte][attributes]-gtaddClass([ button primary button--user-account ])
$variables[items][drupalfr_useraccountcompte][title] = new FormattableMarkup( lti class=fa fa-user-circle-o aria-hidden=truegtltigtltspan class=sr-onlygtoriginal_titleltspangt [ original_title =gt $variables[items][drupalfr_useraccountcompte][title] ] )
JAVASCRIPT9
9 JAVASCRIPT
DRUPAL amp JAVASCRIPT Drupal integravegre de nombreuses libraries javascript (jQuery Modernizrhellip) et propose
eacutegalement des libraries drsquoutilitaires (coredrupal coredrupalSettings drupalajax drupalformhellip)
Par exemple Drupal 8 embarque
jQuery 321
jQuery UI 1121
Chaque librairie deacutefinit ses deacutependances jQuery UI deacutepend de jQuery par exemple
Lorsque lrsquoon utilise une librairie depuis un script custom il ne faut pas oublier de deacuteclarer cette deacutependance Pensez agrave tester en anonyme car aucune libraire nrsquoest chargeacutee par deacutefaut
Vous disposez de toutes les librairies deacutefinies dans le fichier corecorelibrairiesyml
9 JAVASCRIPT
CONCREgraveTEMENTPour pouvoir utiliser du code JS dans vos scripts avec Drupal la bonne pratique est drsquoencadrer votre code comme suit
file Shows status messages in a modal instead of inline (function ($ Drupal)
Displays status messages in a Foundation reveal modal DrupalbehaviorsfoundationStatusInReveal = attach function (context settings) $(status-messages)once(foundation-reveal)each(function() Move the status messages out of the highlighted region var $messages = $(this) var $region = $messagesparent() $messagesappendTo(body) $messagesfoundation(open)
This is required as this region will likely be empty after status messages are removed $regionhtml($regionhtml()replace(ng )) )
)(jQuery Drupal)
9 JAVASCRIPT
DRUPAL BEHAVIORS
Les scripts sont exeacutecuteacutes apregraves le chargement complet du DOM ($(document)ready() )Mais on a aussi parfois besoin de les reacute-exeacutecuter lorsque lrsquoon interagit avec la page (appel AJAX overlayhellip)
Pour ce faire il suffit drsquoattacher le script JS agrave lrsquoobjet Drupalbehaviors (librairie coredrupal) La fonction exeacutecuteacutee reccediloit 2 variables
context le DOM (le HTML chargeacute ou ajouteacute)
settings toutes les variables injecteacutees cocircteacute serveur
9 JAVASCRIPT
RAPPEL
Comme pour les fichiers de style les scripts JS doivent ecirctre deacuteclareacutes sous forme de bibliothegraveque via les fichiers THEMENAMEinfoyml et THEMENAMElibrariesyml
QUESTIONS 10
RTFM httpswwwdrupalorgdocs8theminghttpstwigsymfonycomdoc2x
MERCI Agrave VOUS
FlorisMoriceau
8 PREPROCESS
APPELLER UN PREPROCESS
Diffeacuterentes fonctions de preprocess peuvent ecirctre appeleacutees permettant agrave tous les modules et thegravemes de modifier les variables passeacutees aux templates Ces fonctions sont les suivantes pour le hook de thegraveme HOOK
template_preprocess_HOOK(array amp$variables)
MODULENAME_preprocess(array amp$variables $hook)
MODULENAME_preprocess_HOOK(array amp$variables)
THEMENAME_preprocess(array amp$variables $hook)
THEMENAME_preprocess_HOOK(array amp$variables)
8 PREPROCESS
CONCREgraveTEMENT Implements hook_preprocess_menu__account() function drupal_france_preprocess_menu__account(amp$variables) if (isset($variables[items][drupalfr_useraccountcompte])) $variables[items][drupalfr_useraccountcompte][attributes]-gtaddClass([ button primary button--user-account ])
$variables[items][drupalfr_useraccountcompte][title] = new FormattableMarkup( lti class=fa fa-user-circle-o aria-hidden=truegtltigtltspan class=sr-onlygtoriginal_titleltspangt [ original_title =gt $variables[items][drupalfr_useraccountcompte][title] ] )
JAVASCRIPT9
9 JAVASCRIPT
DRUPAL amp JAVASCRIPT Drupal integravegre de nombreuses libraries javascript (jQuery Modernizrhellip) et propose
eacutegalement des libraries drsquoutilitaires (coredrupal coredrupalSettings drupalajax drupalformhellip)
Par exemple Drupal 8 embarque
jQuery 321
jQuery UI 1121
Chaque librairie deacutefinit ses deacutependances jQuery UI deacutepend de jQuery par exemple
Lorsque lrsquoon utilise une librairie depuis un script custom il ne faut pas oublier de deacuteclarer cette deacutependance Pensez agrave tester en anonyme car aucune libraire nrsquoest chargeacutee par deacutefaut
Vous disposez de toutes les librairies deacutefinies dans le fichier corecorelibrairiesyml
9 JAVASCRIPT
CONCREgraveTEMENTPour pouvoir utiliser du code JS dans vos scripts avec Drupal la bonne pratique est drsquoencadrer votre code comme suit
file Shows status messages in a modal instead of inline (function ($ Drupal)
Displays status messages in a Foundation reveal modal DrupalbehaviorsfoundationStatusInReveal = attach function (context settings) $(status-messages)once(foundation-reveal)each(function() Move the status messages out of the highlighted region var $messages = $(this) var $region = $messagesparent() $messagesappendTo(body) $messagesfoundation(open)
This is required as this region will likely be empty after status messages are removed $regionhtml($regionhtml()replace(ng )) )
)(jQuery Drupal)
9 JAVASCRIPT
DRUPAL BEHAVIORS
Les scripts sont exeacutecuteacutes apregraves le chargement complet du DOM ($(document)ready() )Mais on a aussi parfois besoin de les reacute-exeacutecuter lorsque lrsquoon interagit avec la page (appel AJAX overlayhellip)
Pour ce faire il suffit drsquoattacher le script JS agrave lrsquoobjet Drupalbehaviors (librairie coredrupal) La fonction exeacutecuteacutee reccediloit 2 variables
context le DOM (le HTML chargeacute ou ajouteacute)
settings toutes les variables injecteacutees cocircteacute serveur
9 JAVASCRIPT
RAPPEL
Comme pour les fichiers de style les scripts JS doivent ecirctre deacuteclareacutes sous forme de bibliothegraveque via les fichiers THEMENAMEinfoyml et THEMENAMElibrariesyml
QUESTIONS 10
RTFM httpswwwdrupalorgdocs8theminghttpstwigsymfonycomdoc2x
MERCI Agrave VOUS
FlorisMoriceau
8 PREPROCESS
CONCREgraveTEMENT Implements hook_preprocess_menu__account() function drupal_france_preprocess_menu__account(amp$variables) if (isset($variables[items][drupalfr_useraccountcompte])) $variables[items][drupalfr_useraccountcompte][attributes]-gtaddClass([ button primary button--user-account ])
$variables[items][drupalfr_useraccountcompte][title] = new FormattableMarkup( lti class=fa fa-user-circle-o aria-hidden=truegtltigtltspan class=sr-onlygtoriginal_titleltspangt [ original_title =gt $variables[items][drupalfr_useraccountcompte][title] ] )
JAVASCRIPT9
9 JAVASCRIPT
DRUPAL amp JAVASCRIPT Drupal integravegre de nombreuses libraries javascript (jQuery Modernizrhellip) et propose
eacutegalement des libraries drsquoutilitaires (coredrupal coredrupalSettings drupalajax drupalformhellip)
Par exemple Drupal 8 embarque
jQuery 321
jQuery UI 1121
Chaque librairie deacutefinit ses deacutependances jQuery UI deacutepend de jQuery par exemple
Lorsque lrsquoon utilise une librairie depuis un script custom il ne faut pas oublier de deacuteclarer cette deacutependance Pensez agrave tester en anonyme car aucune libraire nrsquoest chargeacutee par deacutefaut
Vous disposez de toutes les librairies deacutefinies dans le fichier corecorelibrairiesyml
9 JAVASCRIPT
CONCREgraveTEMENTPour pouvoir utiliser du code JS dans vos scripts avec Drupal la bonne pratique est drsquoencadrer votre code comme suit
file Shows status messages in a modal instead of inline (function ($ Drupal)
Displays status messages in a Foundation reveal modal DrupalbehaviorsfoundationStatusInReveal = attach function (context settings) $(status-messages)once(foundation-reveal)each(function() Move the status messages out of the highlighted region var $messages = $(this) var $region = $messagesparent() $messagesappendTo(body) $messagesfoundation(open)
This is required as this region will likely be empty after status messages are removed $regionhtml($regionhtml()replace(ng )) )
)(jQuery Drupal)
9 JAVASCRIPT
DRUPAL BEHAVIORS
Les scripts sont exeacutecuteacutes apregraves le chargement complet du DOM ($(document)ready() )Mais on a aussi parfois besoin de les reacute-exeacutecuter lorsque lrsquoon interagit avec la page (appel AJAX overlayhellip)
Pour ce faire il suffit drsquoattacher le script JS agrave lrsquoobjet Drupalbehaviors (librairie coredrupal) La fonction exeacutecuteacutee reccediloit 2 variables
context le DOM (le HTML chargeacute ou ajouteacute)
settings toutes les variables injecteacutees cocircteacute serveur
9 JAVASCRIPT
RAPPEL
Comme pour les fichiers de style les scripts JS doivent ecirctre deacuteclareacutes sous forme de bibliothegraveque via les fichiers THEMENAMEinfoyml et THEMENAMElibrariesyml
QUESTIONS 10
RTFM httpswwwdrupalorgdocs8theminghttpstwigsymfonycomdoc2x
MERCI Agrave VOUS
FlorisMoriceau
JAVASCRIPT9
9 JAVASCRIPT
DRUPAL amp JAVASCRIPT Drupal integravegre de nombreuses libraries javascript (jQuery Modernizrhellip) et propose
eacutegalement des libraries drsquoutilitaires (coredrupal coredrupalSettings drupalajax drupalformhellip)
Par exemple Drupal 8 embarque
jQuery 321
jQuery UI 1121
Chaque librairie deacutefinit ses deacutependances jQuery UI deacutepend de jQuery par exemple
Lorsque lrsquoon utilise une librairie depuis un script custom il ne faut pas oublier de deacuteclarer cette deacutependance Pensez agrave tester en anonyme car aucune libraire nrsquoest chargeacutee par deacutefaut
Vous disposez de toutes les librairies deacutefinies dans le fichier corecorelibrairiesyml
9 JAVASCRIPT
CONCREgraveTEMENTPour pouvoir utiliser du code JS dans vos scripts avec Drupal la bonne pratique est drsquoencadrer votre code comme suit
file Shows status messages in a modal instead of inline (function ($ Drupal)
Displays status messages in a Foundation reveal modal DrupalbehaviorsfoundationStatusInReveal = attach function (context settings) $(status-messages)once(foundation-reveal)each(function() Move the status messages out of the highlighted region var $messages = $(this) var $region = $messagesparent() $messagesappendTo(body) $messagesfoundation(open)
This is required as this region will likely be empty after status messages are removed $regionhtml($regionhtml()replace(ng )) )
)(jQuery Drupal)
9 JAVASCRIPT
DRUPAL BEHAVIORS
Les scripts sont exeacutecuteacutes apregraves le chargement complet du DOM ($(document)ready() )Mais on a aussi parfois besoin de les reacute-exeacutecuter lorsque lrsquoon interagit avec la page (appel AJAX overlayhellip)
Pour ce faire il suffit drsquoattacher le script JS agrave lrsquoobjet Drupalbehaviors (librairie coredrupal) La fonction exeacutecuteacutee reccediloit 2 variables
context le DOM (le HTML chargeacute ou ajouteacute)
settings toutes les variables injecteacutees cocircteacute serveur
9 JAVASCRIPT
RAPPEL
Comme pour les fichiers de style les scripts JS doivent ecirctre deacuteclareacutes sous forme de bibliothegraveque via les fichiers THEMENAMEinfoyml et THEMENAMElibrariesyml
QUESTIONS 10
RTFM httpswwwdrupalorgdocs8theminghttpstwigsymfonycomdoc2x
MERCI Agrave VOUS
FlorisMoriceau
9 JAVASCRIPT
DRUPAL amp JAVASCRIPT Drupal integravegre de nombreuses libraries javascript (jQuery Modernizrhellip) et propose
eacutegalement des libraries drsquoutilitaires (coredrupal coredrupalSettings drupalajax drupalformhellip)
Par exemple Drupal 8 embarque
jQuery 321
jQuery UI 1121
Chaque librairie deacutefinit ses deacutependances jQuery UI deacutepend de jQuery par exemple
Lorsque lrsquoon utilise une librairie depuis un script custom il ne faut pas oublier de deacuteclarer cette deacutependance Pensez agrave tester en anonyme car aucune libraire nrsquoest chargeacutee par deacutefaut
Vous disposez de toutes les librairies deacutefinies dans le fichier corecorelibrairiesyml
9 JAVASCRIPT
CONCREgraveTEMENTPour pouvoir utiliser du code JS dans vos scripts avec Drupal la bonne pratique est drsquoencadrer votre code comme suit
file Shows status messages in a modal instead of inline (function ($ Drupal)
Displays status messages in a Foundation reveal modal DrupalbehaviorsfoundationStatusInReveal = attach function (context settings) $(status-messages)once(foundation-reveal)each(function() Move the status messages out of the highlighted region var $messages = $(this) var $region = $messagesparent() $messagesappendTo(body) $messagesfoundation(open)
This is required as this region will likely be empty after status messages are removed $regionhtml($regionhtml()replace(ng )) )
)(jQuery Drupal)
9 JAVASCRIPT
DRUPAL BEHAVIORS
Les scripts sont exeacutecuteacutes apregraves le chargement complet du DOM ($(document)ready() )Mais on a aussi parfois besoin de les reacute-exeacutecuter lorsque lrsquoon interagit avec la page (appel AJAX overlayhellip)
Pour ce faire il suffit drsquoattacher le script JS agrave lrsquoobjet Drupalbehaviors (librairie coredrupal) La fonction exeacutecuteacutee reccediloit 2 variables
context le DOM (le HTML chargeacute ou ajouteacute)
settings toutes les variables injecteacutees cocircteacute serveur
9 JAVASCRIPT
RAPPEL
Comme pour les fichiers de style les scripts JS doivent ecirctre deacuteclareacutes sous forme de bibliothegraveque via les fichiers THEMENAMEinfoyml et THEMENAMElibrariesyml
QUESTIONS 10
RTFM httpswwwdrupalorgdocs8theminghttpstwigsymfonycomdoc2x
MERCI Agrave VOUS
FlorisMoriceau
9 JAVASCRIPT
CONCREgraveTEMENTPour pouvoir utiliser du code JS dans vos scripts avec Drupal la bonne pratique est drsquoencadrer votre code comme suit
file Shows status messages in a modal instead of inline (function ($ Drupal)
Displays status messages in a Foundation reveal modal DrupalbehaviorsfoundationStatusInReveal = attach function (context settings) $(status-messages)once(foundation-reveal)each(function() Move the status messages out of the highlighted region var $messages = $(this) var $region = $messagesparent() $messagesappendTo(body) $messagesfoundation(open)
This is required as this region will likely be empty after status messages are removed $regionhtml($regionhtml()replace(ng )) )
)(jQuery Drupal)
9 JAVASCRIPT
DRUPAL BEHAVIORS
Les scripts sont exeacutecuteacutes apregraves le chargement complet du DOM ($(document)ready() )Mais on a aussi parfois besoin de les reacute-exeacutecuter lorsque lrsquoon interagit avec la page (appel AJAX overlayhellip)
Pour ce faire il suffit drsquoattacher le script JS agrave lrsquoobjet Drupalbehaviors (librairie coredrupal) La fonction exeacutecuteacutee reccediloit 2 variables
context le DOM (le HTML chargeacute ou ajouteacute)
settings toutes les variables injecteacutees cocircteacute serveur
9 JAVASCRIPT
RAPPEL
Comme pour les fichiers de style les scripts JS doivent ecirctre deacuteclareacutes sous forme de bibliothegraveque via les fichiers THEMENAMEinfoyml et THEMENAMElibrariesyml
QUESTIONS 10
RTFM httpswwwdrupalorgdocs8theminghttpstwigsymfonycomdoc2x
MERCI Agrave VOUS
FlorisMoriceau
9 JAVASCRIPT
DRUPAL BEHAVIORS
Les scripts sont exeacutecuteacutes apregraves le chargement complet du DOM ($(document)ready() )Mais on a aussi parfois besoin de les reacute-exeacutecuter lorsque lrsquoon interagit avec la page (appel AJAX overlayhellip)
Pour ce faire il suffit drsquoattacher le script JS agrave lrsquoobjet Drupalbehaviors (librairie coredrupal) La fonction exeacutecuteacutee reccediloit 2 variables
context le DOM (le HTML chargeacute ou ajouteacute)
settings toutes les variables injecteacutees cocircteacute serveur
9 JAVASCRIPT
RAPPEL
Comme pour les fichiers de style les scripts JS doivent ecirctre deacuteclareacutes sous forme de bibliothegraveque via les fichiers THEMENAMEinfoyml et THEMENAMElibrariesyml
QUESTIONS 10
RTFM httpswwwdrupalorgdocs8theminghttpstwigsymfonycomdoc2x
MERCI Agrave VOUS
FlorisMoriceau
9 JAVASCRIPT
RAPPEL
Comme pour les fichiers de style les scripts JS doivent ecirctre deacuteclareacutes sous forme de bibliothegraveque via les fichiers THEMENAMEinfoyml et THEMENAMElibrariesyml
QUESTIONS 10
RTFM httpswwwdrupalorgdocs8theminghttpstwigsymfonycomdoc2x
MERCI Agrave VOUS
FlorisMoriceau
QUESTIONS 10
RTFM httpswwwdrupalorgdocs8theminghttpstwigsymfonycomdoc2x
MERCI Agrave VOUS
FlorisMoriceau
MERCI Agrave VOUS
FlorisMoriceau
