I. Quand le GIF rencontre l’alinéa..
Précédemment, le GIF Néon avait déjà mené une première bataillesans merci. Mais, ce combat terminé, il reste une toute dernière étape à franchir : ajouter le GIFdans l’en-tête du menu.
Pour ce faire, le GIFest chargé sur le site GIPHY. En effet,pour essayer de ne pas ralentir (trop) le site, il vaut mieux ne pas charger le GIFdirectement sur le site et le stocker ailleurs.
Ensuite, l’URL du GIFest chargée dans un widget éditeur de texte. Ce choix pourrait sembler étrange puisque, comme son nom l’indique, un widget texte est fait pour… placer du texte à l’intérieur, ce qui n’empêche pas que cette technique puisse quand même fonctionner.
Il aurait été aussi possible d’intégrer directement le GIFen utilisant la fonction embedproposée par GIPHY. Il s’agit alors de cliquer sur le bouton embed, puis de cliquer sur le bouton on pour activer l’option responsive, puis de copier le code fourni pour le coller dans un widget html. Lorsque l’on suit ces indications, le résultat suivant est obtenu :
On peut noter la présence du « via GIPHY » écrit en bas du GIF,raison pour laquelle c’est l’autre technique qui a été retenue 😉
Ainsi, une fois placé dans le widget texte, le GIFsemble, à première vue, se comporter de manière attendue. Pourtant, un petit tour d’inspection sur le site révèle qu’une anomalie est présente sur la page Mes Romans.
Comme l’image le laisse voir, le GIF semble subitement victime d’une certaine bougeotte…
II. Un GIF qui gesticule
Mais, rapidement, une explication au comportement étrange du GIFest trouvée.
En réalité, la page Mes Romansprésente une spécificité. Sur cette page, les paragraphes du synopsis possèdent tous un alinéa, comme visible ci-dessous :
Sauf que réaliser cette mise en forme n’est pas si évidente (surtout lorsque l’on débute). En effet, contrairement à Word, la touche tabulationne permet pas de faire un retrait au début d’un paragraphe. Il n’est pas non plus possible d’appuyer plusieurs fois sur la touche espacepour créer un alinéa au début d’un paragraphe. (Croyez-moi, cela ne fonctionne pas non plus…)
Ainsi, pour réaliser cette mise en forme, une seule solution a été trouvée : appliquer un morceau de codeau widget textede cette page.
C’est ainsi que, dans la partie CSS personnalisédu widget texte, un code a été écrit pour ajouter un alinéa au début de chaque paragraphe, comme le montre l’image ci-dessous :
(Et par l’expression un code a été écrit, il faut bien entendu comprendre par là qu’une recherche incessante a été menée sur Google avant que le code tant désiré soit trouvé pour être copié et collé… 🤣)
Sauf qu’il ne faut pas oublier que le GIFse trouve lui aussi dans un widget texte. Du coup, ce code s’applique aussi au GIF et c’est la raison pour laquelle le GIFse déplace lorsque l’on se trouve sur la page Mes Romans.
III. L’option du menu salvatrice
Après avoir cliqué un peu partout au hasard (une méthode qui est très souvent appliquée sur le site en cas de problème…), une découverte est faite : lorsque l’on clique sur le GIF dans le widget texte, un petit menu apparaît dans lequel on retrouve l’icône d’un crayon. Et lorsque cette icône est survolée avec la souris, la légende modifierapparaît.
Après avoir cliqué sur cette icône, un autre menu apparaît. Cette fois-ci, un petit clic supplémentaire sur le bouton centréest fait.
Et là un miracle s’opère : le GIFest désormais centré sur la page Mes Romans.
Et, depuis ce jour-là, le GIFa su rester sagement à sa place pour égayer comme il se doit l’en-tête du site.
Bref, tout est bien qui finit bien !