Grav - Liaison d'images
Dans ce chapitre, nous allons comprendre la liaison d'images dans Grav. Grav vous permet de lier des images d'une page à une autre et même à des pages distantes. Si vous avez lié les fichiers en utilisant HTML, ce serait très facile à comprendre le lien d'image dans Grav.
En utilisant cette structure, nous verrons comment afficher les fichiers multimédias dans la page en utilisant différents types de liens. Chaque dossier sous cette structure contient des images et il y a un répertoire spécial sous/02.green/img01 qui agit comme une page mais ne contient que des fichiers multimédias.
Examinons certains des éléments communs de la balise d'image basée sur le markdown Grav.
! - Il indique une balise d'image lorsque vous la placez au début de la balise de lien markdown.
[] - Il spécifie un texte alternatif facultatif pour l'image.
() - Il est placé directement après le crochet carré qui contient le chemin du fichier.
../ - Il indique un déplacement vers le haut d'un répertoire.
Grav utilise cinq types de liens d'image comme indiqué ci-dessous -
Slug Relative
Directory Relative
Absolute
Remote
Media Actions on Images
Relatif Slug
Il définit des liens d'image relatifs vers la page actuelle et lie un autre fichier dans le même répertoire. Lors de l'utilisation de liens relatifs, l'emplacement du fichier source est aussi important que celui de la destination. Si vous modifiez le chemin d'accès dans le fichier pendant le déplacement, le lien peut être rompu. L'avantage d'utiliser cette structure de liaison d'image est que vous pouvez basculer entre le serveur de développement local et un serveur live avec un nom de domaine différent, tant que la structure de fichier reste constante.
Exemple
Ici ../ indique que votre lien se déplace vers le haut d'un dossier, puis vers le bas d'un dossier et img.jpg est la destination.
Lorsque vous utilisez le chemin ci-dessus, vous recevrez la sortie suivante -
Grav prend en charge les slugs dans l'en-tête du fichier de démarquage principal de la page et ce slug remplace le nom de dossier de la page donnée.
Si 01.sky le dossier a un slug défini via son .md fichier, c'est-à-dire /pages/01.blue/01.sky/text.md, alors l'en-tête du fichier serait comme -
---
title: Sky
slug: test-slug
taxonomy:
category: blog
---Dans le code ci-dessus, nous avons défini le slug test-slugqui est facultatif. Une fois que vous avez défini le slug, vous pouvez ensuite créer un lien vers le fichier multimédia qui auraSlug Relative ou Absolute URL définie pour le lien.
Relatif à l'annuaire
Dans ce type de lien, vous pouvez définir des liens d'image relative de répertoire vers la page actuelle. Au lieu d'utiliser les slugs d'URL, vous pouvez faire référence via le chemin complet avec leurs noms de dossier dans les liens d'image relative du répertoire.
Exemple
Lorsque vous utilisez le chemin ci-dessus, il affichera la sortie comme indiqué ci-dessous -
Absolu
Les liens absolus sont identiques aux liens relatifs mais la seule différence est qu'ils sont relatifs à la racine du site et présents dans le /user/pages/ annuaire.
Vous pouvez utiliser des liens absolus de deux manières différentes -
Vous pouvez utiliser Slug Relative style qui inclut des noms de slug ou de répertoire dans le chemin et couramment utilisé dans la liaison absolue.
Vous pouvez utiliser Absolute Link qui ouvre le lien avec a/.
Lorsque vous utilisez le chemin ci-dessus, vous recevrez la sortie suivante -
Éloigné
Les liens d'image distants permettent d'afficher n'importe quel fichier multimédia directement via son URL. Ces liens n'incluent pas le contenu de votre propre site. L'exemple suivant montre comment afficher une image à l'aide d'une URL distante -
Lorsque vous cliquez sur le lien comme indiqué dans l'image ci-dessous, il affichera l'image de l'URL donnée.
Actions multimédias sur les images
Les images associées aux pages nous permettent de profiter des actions média de Grav . Vous pouvez afficher certains fichiers multimédias tels que des images, des vidéos et d'autres fichiers lors de la création de contenu dans Grav.
Exemple
Vous pouvez charger une image en utilisant le format indiqué ci-dessous -
Lorsque vous utilisez le chemin ci-dessus, vous recevrez une sortie comme indiqué ci-dessous -
