Liaison d'images

Grav propose une variété d'options de liaison flexibles qui vous permettent de lier des images d'une page à une autre, et même à partir de sources distantes. Si vous avez déjà lié des fichiers à l'aide de HTML ou travaillé avec un système de fichiers à l'aide d'une ligne de commande, une grande partie de cela devrait être élémentaire à comprendre.

Nous allons passer à quelques exemples simples en utilisant ce modèle très basique et réduit de ce à quoi pourrait ressembler le répertoire Pages d'un site Grav.

En utilisant cette structure de répertoires comme exemple, nous examinerons les différents types de liens que vous pouvez utiliser pour afficher des fichiers multimédias dans votre contenu. Nous avons des fichiers image dans chaque dossier, y compris une image pour chaque article de blog, et trois images dans un répertoire spécial /images qui agit comme une page mais ne contient que des fichiers multimédias.

L'utilisation du dossier /images sert d'exemple de la manière dont vous pouvez gérer un répertoire d'images simple et centralisé pour stocker les fichiers fréquemment utilisés par plusieurs pages. Cela simplifie le processus de liaison dans ces cas.

Pour commencer, voici un bref aperçu de certains des composants standard d'une balise d'image basée sur Grav Markdown.

Slug Relatif

Les liens d'image relatifs utilisent des destinations définies par rapport à la page actuelle. Cela peut être aussi simple que de créer un lien vers un autre fichier dans le répertoire en cours, tel qu'un fichier image associé à la page en cours, ou aussi complexe que de remonter plusieurs niveaux de répertoire, puis de revenir au dossier/fichier spécifique où une image peut résider.

Avec des liens relatifs, l'emplacement du fichier source est tout aussi important que celui de la destination. Si l'un ou l'autre des fichiers de l'ensemble est déplacé, en modifiant le chemin entre eux, le lien peut être rompu.

L'avantage de ce type de structure de liaison est que vous pouvez basculer rapidement entre un serveur de développement local et un serveur live avec un nom de domaine différent et tant que la structure de fichiers reste cohérente, les liens devraient fonctionner sans problème.

Un lien de fichier pointe vers un fichier particulier par son nom, plutôt que par son répertoire ou son slug. Si vous créez un lien d'image dans pages/01.blog/test-post-1/item.md vers /pages/01.blog/test-post-3/test-image-3.jpg vous utiliserez la commande suivante :

Ce lien monte d'un dossier, comme indiqué par ../, puis descend d'un dossier, pointant directement vers test-image-3.jpg comme destination.

Si nous voulons charger blog-header.jpg depuis le répertoire .blog, nous procéderions comme suit :

Grav a intégré la prise en charge des slugs dans l'en-tête du fichier de démarquage principal de la page. Ce slug remplace le nom du dossier de la page et tous les fichiers multimédias qu'il contient.

Par exemple, Test Post 2 a un slug défini via son fichier Markdown (/pages/01.blog/test-post-2/item.md). L'en-tête de ce fichier contient les éléments suivants :

1 | ---
2 | title: Test Post 2
3 | slug: test-slug
4 | taxonomy:
5 |    category: blog
6 |---

Vous remarquerez que le slug test-slug a été défini. Les slugs définis de cette manière sont complètement facultatifs et n'ont pas besoin d'être présents. Comme mentionné dans le dernier chapitre, ils fournissent un moyen facile de créer des liens. Si un slug est défini, tout lien que vous créez vers un fichier multimédia dans ce dossier devra être Slug Relatif ou Absolu avec une URL complète définie pour le lien.

Si nous voulons lier test-image-2.jpg de Test Post 2, nous entrerons ce qui suit :

Vous remarquerez que nous avons navigué vers le haut d'un répertoire en utilisant (../) puis vers le bas dans le dossier de page test-slug en utilisant le slug qui a été défini dans le fichier/pages/01.blog/test-post-2/item.md.

Répertoire Relatif

Les liens d'image relatifs au répertoire utilisent des destinations définies par rapport à la page actuelle. La principale différence entre un lien relatif au slug et un lien relatif au répertoire est qu'au lieu d'utiliser les slugs d'URL, vous faites référence via le chemin complet avec les noms de dossier.

Un exemple de ceci serait quelque chose comme :

Absolu

Les liens absolus sont similaires aux liens relatifs, mais sont relatifs à la racine du site. Dans Grav, ceci est généralement basé dans votre répertoire /user/pages/. Ce type de lien peut se faire de deux manières différentes.

Vous pouvez le faire de la même manière que le style Slug Relatif qui utilise le slug ou le nom du répertoire dans le chemin pour plus de simplicité. Cette méthode supprime les problèmes potentiels de changements de commande ultérieurs (changement du numéro au début du nom du dossier) rompant le lien. Ce serait la méthode de liaison absolue la plus couramment utilisée.

Dans un lien absolu, le lien s'ouvre avec un /. Voici un exemple de lien absolu fait vers pages/01.blog/test-post-2/test-image-2.jpg dans le style Slug depuis pages/01.blog/blog.md.

PHP Streams

Grav a également la capacité de référencer et de lier des images via des flux PHP. Il existe plusieurs flux PHP intégrés disponibles qui sont utiles, notamment :

• user:// - dossier utilisateur, par exemple: user/
• page:// - dossier de pages, par exemple : user/pages/
• image:// - dossier d'images, par exemple : user/images/
• plugins:// - dossier des plugins, par exemple : user/plugins/
• theme:// - thème actuel, par exemple : user/thèmes/antimatter/

Ceux-ci vous permettent d'accéder facilement aux images qui sont traditionnellement en dehors de la hiérarchie des pages (user/pages/).

ou alors:

Pour obtenir la liste complète des emplacements de flux par défaut, consultez Configuration multisite - Flux.

Remote

Les liens d'image remote vous permettent d'afficher directement à peu près n'importe quel fichier multimédia via son URL. Cela ne doit pas nécessairement inclure le contenu de votre propre site, mais c'est possible. Voici un exemple d'affichage d'un fichier image distant.

Vous pouvez créer un lien vers pratiquement n'importe quelle URL directe, y compris les liens HTTPS sécurisés.

Actions media sur les images

L'un des principaux avantages de l'utilisation d'images associées à des pages est qu'elle vous permet de profiter des puissantes actions média de Grav. Par exemple, voici une ligne que vous utiliseriez pour charger une image depuis une autre page :

ou profiter des streams pour accéder à une image dans votre thème actuel :

Vous trouverez plus d'informations sur les actions et les autres fonctionnalités des fichiers multimédias dans le chapitre suivant.

Attributs d'image

Une nouvelle fonctionnalité intéressante dont vous pouvez profiter consiste à fournir des attributs d'image directement via la syntaxe markdown. Cela vous permet d'ajouter facilement des classes et des id HTML sans avoir besoin de Markdown Extra.

Voici quelques exemples :

Attribut de classe unique

qui se traduira par un code HTML similaire à :

<img src="/your/pages/some-page/my-image.jpg" class="float-left" />

Attribut de plusieurs classes

qui se traduira par un code HTML similaire à :

<img src="/your/pages/some-page/my-image.jpg" class="float-left shadow" />

Attribut d'id

qui se traduira par un code HTML similaire à :

<img src="/your/pages/some-page/my-image.jpg" id="special-id" />