Médias

Lors de la création de contenu dans Grav, vous devez souvent afficher différents types de médias tels que des images, des vidéos et divers autres fichiers. Ces fichiers sont automatiquement trouvés et traités par Grav et sont mis à disposition pour être utilisés par n'importe quelle page. Ceci est particulièrement pratique car vous pouvez ensuite utiliser la fonctionnalité intégrée de la page pour exploiter les vignettes, accéder aux métadonnées et modifier les médias de manière dynamique (par exemple, redimensionner les images, définir la taille d'affichage des vidéos, etc.) selon vos besoins.

Grav utilise un système de mise en cache intelligent qui crée automatiquement des copies en cache des médias générés dynamiquement si nécessaire. De cette façon, toutes les requêtes ultérieures peuvent utiliser la version mise en cache au lieu d'avoir à générer à nouveau le média.

Fichiers multimédia pris en charge

Les types de fichiers multimédias suivants sont pris en charge nativement par Grav. Une prise en charge supplémentaire des fichiers multimédias et des intégrations de streaming peut être ajoutée via des plugins.

Une liste complète des types mime pris en charge se trouve dans le fichier system/config/media.yaml. S'il existe un type mime qui n'est pas actuellement pris en charge, vous pouvez simplement créer votre propre user/config/media.yaml et l'y ajouter. Assurez-vous simplement de suivre le même format que le fichier system d'origine. L'approche la plus simple consiste à copier l'intégralité du fichier d'origine et à apporter vos modifications.

Où placer vos fichiers multimédias

Habituellement, vous utiliserez un fichier multimédia dans une page, il vous suffit donc de placer le fichier dans le dossier de la page, et vous pouvez le référencer dans le Markdown de la page, par exemple :

Si vous souhaitez mettre toutes vos images dans un seul dossier, vous pouvez les mettre dans un dossier /user/pages/images. De cette façon, dans Twig, vous pouvez les joindre via :

{% set my_image = page.find('/images').media['my-image.jpg'] %}

et vous pouvez également les trouver facilement via markdown et effectuer des opérations dessus :

Alternativement, vous pouvez les mettre dans votre thème, car cela est facilement accessible via des références CSS ou à partir d'un fichier Markdown en utilisant le flux theme:// :

Une autre option est user/images, où vous pouvez utiliser le flux image:// pour y accéder :

Vous pouvez en fait utiliser n'importe quel flux, y compris n'importe quel dossier à l'intérieur de user/ via le flux user:// :

Vous pouvez également faire ce même genre de choses en utilisant l'objet Twig Media :

{{ media['user://themes/mytheme/images/my-image.jpg'].html()|raw }}

Vous pouvez également placer tous les fichiers multimédias dans leur propre dossier, afin qu'ils soient tous accessibles en une seule fois. Par exemple, vous pouvez conserver tous vos fichiers MP3 dans un dossier user/pages/mp3s (non visible) et mettre le nom du fichier MP3 associé à une page particulière dans un champ d'en-tête appelé thistrack. Si vous souhaitez ensuite accéder au fichier d'une page particulière et le lire à l'aide de l'élément audio HTML5, vous aurez besoin d'un code comme celui-ci :

1 | <audio controls>
2 |    <source src="{{ page.find('mp3s').media[page.header.thistrack~'.mp3']|e }}">
3 | </audio>

Modes d'affichage

Grav fournit quelques modes d'affichage différents pour chaque type d'objet multimédia.

Emplacement de la vignette

Il y a trois endroits où Grav cherchera votre vignette.

1. Dans le même dossier que votre fichier multimédia : [media-name].[media-extension].thumb.[thumb-extension] où media-name et media-extension sont respectivement le nom et l'extension du fichier multimédia d'origine et la thumb-extension est toute extension prise en charge par le type de média image. Les exemples sont my_video.mp4.thumb.jpg et my-image.jpg.thumb.png Pour les images uniquement ! L'image elle-même sera utilisée comme vignette.
2. Votre dossier utilisateur : user/images/media/thumb-[media-extension].png où media-extension est l'extension du fichier multimédia d'origine. Les exemples sont thumb-mp4.png et thumb-jpg.jpg.
3. Le dossier système : system/images/media/thumb-[media-extension].png où media-extension est l'extension du fichier multimédia d'origine. Les vignettes dans les dossiers système sont pré-fournies par Grav.

Liens et Lightbox

Les modes d'affichage ci-dessus peuvent également être utilisés en combinaison avec des liens et des lightboxes, qui sont expliqués plus en détail plus tard. Il est toutefois important de noter :

Lorsque vous utilisez la fonctionnalité multimédia de Grav pour rendre une lightbox, tout ce que fait Grav est de générer une balise d'ancrage qui a certains attributs à lire par le plugin lightbox. Si vous souhaitez utiliser une bibliothèque lightbox qui ne se trouve pas dans notre référentiel de plugins ou si vous souhaitez créer votre propre plugin, vous pouvez utiliser le tableau ci-dessous comme référence.

Actions

Grav utilise un modèle de construction lors de la gestion des médias, vous pouvez donc effectuer plusieurs actions sur un support particulier. Certaines actions sont disponibles pour chaque type de support tandis que d'autres sont spécifiques au support.

Général

Ces actions sont disponibles pour tous les types de médias.

url

Cela renvoie le chemin d'URL brut vers le média.

{{ page.media['sample-image.jpg'].url|e }}

/images/a/f/2/8/f/af28f2ad724f1e05248ac8dd518b2a5789c6cd41-sample-image.jpg

html

L'action html générera une balise HTML valide pour le média en fonction du mode d'affichage actuel.

![Some ALT text](sample-image.jpg?classes=myclass "My title")

{{ page.media['sample-image.jpg'].html('My title', 'Some ALT text',
 'myclass')|raw }}

<img title="My title" alt="Some ALT text" class="myclass"
src="/images/a/f/2/8/f/af28f2ad724f1e05248ac8dd518b2a5789c6cd41
-sample-image.jpg" />

affichage

Utilisez cette action pour basculer entre les différents modes d'affichage fournis par Grav. Une fois que vous avez changé de mode d'affichage, toutes les actions précédentes seront réinitialisées. Les exceptions à cette règle sont les actions lightbox et link et toutes les actions qui ont été utilisées avant ces deux actions.

Par exemple, la vignette qui résulte de l'appel de page.media['sample-image.jpg'].sepia().display('thumbnail').html() n'aura pas l'action sepia() appliquée, mais page.media ['sample-image.jpg'].display('thumbnail').sepia().html() le fera.

lien

Transformez votre objet média en lien. Toutes les actions que vous appelez avant link() seront appliquées à la cible du lien, tandis que toutes les actions appelées après s'appliqueront à ce qui est affiché sur votre page.

L'exemple suivant affiche un lien textuel (display('text')) vers une version sépia du fichier sample-image.jpg :

![Image link](sample-image.jpg?sepia&link&display=text)

{{ page.media['sample-image.jpg'].sepia().link().
display('text').html('Image link')|raw }}

<a href="/images/3/7/7/1/c/3771c3fabb6d7bc0035dd119281718f9143c4653-sample
-image.jpg">><img title="Image link" alt="" src="/images/a/f/2/8/
faf28f2ad724f1e05248ac8dd518b2a5789c6cd41-sample-image.jpg" />

Cache uniquement

Grav peut être configuré pour mettre en cache tous les fichiers image, cela peut augmenter la vitesse à laquelle les fichiers sont servis. Cependant, les images passeront par le système de manipulation d'images Grav, ce qui peut entraîner une taille de fichier considérablement plus grande pour les images qui ont déjà été optimisées avant Grav. La manipulation d'image peut être contournée.

Activer cache_all dans system/config/system.yaml.

images:
  default_image_quality: 85
  cache_all: false

Désactivez la manipulation d'image avec l'option cache.

![]\(sample-image.jpg?cache)

{{ page.media['sample-image.jpg'].cache.html()|raw }}

<img alt="" src="/images/a/f/2/8/f/af28f2ad724f1e05248ac8dd518b2a5789c6cd41
-sample-image.jpg" />

lightbox

L'action lightbox est essentiellement la même que l'action lien mais avec quelques extras. Comme expliqué ci-dessus (Liens et lightboxes), l'action lightbox ne fera rien de plus que de créer un lien avec des attributs supplémentaires. Elle diffère de l'action de lien en ce qu'elle ajoute un attribut rel="lightbox" et accepte un attribut width et height.

Si possible (actuellement uniquement dans le cas des images), Grav redimensionnera votre média à la largeur et à la hauteur demandées. Sinon, il ajoutera simplement un attribut data-width et data-height au lien.

![Sample Image](sample-image.jpg?lightbox=600,400&resize=200,200)

{{ page.media['sample-image.jpg'].lightbox(600,400).resize(200,200).html
('Sample Image')|raw }}

<a rel="lightbox" data-width="600" data-height="400" href="/images/b/5/e/b/3/b5eb31744b96349b1a711697692b897624202cb1-sample-image.jpg">
<img title="Sample Image" alt="" src="/images/4/5/5/e/4/455e41587c2cd25f34cfdccd8ab5078707aabe6b-sample-image.jpg" /></a>

Résultat :

miniature

Choisissez manuellement la vignette que Grav doit utiliser. Vous pouvez choisir entre page et défault pour tout type de média ainsi que média pour le média image si vous souhaitez utiliser l'objet média lui-même comme vignette.

![Sample Image](sample-image.jpg?thumbnail=default&display=thumbnail)

{{ page.media['sample-image.jpg'].thumbnail('default').display('thumbnail')
.html('Sample Image')|raw }}

<img title="Sample Image" alt="" src="/system/images/media/thumb-jpg.png" />

Résultat :

attribut

Cela ajoute un attribut HTML supplémentaire à la sortie.

![Sample Image](sample-image.jpg?thumbnail=default&display=thumbnail)

{{ page.media['sample-image.jpg'].thumbnail('default').display('thumbnail')
.html('Sample Image')|raw }}

<img title="Sample Image" alt="" src="/system/images/media/thumb-jpg.png" />

Actions sur les images

redimensionner

Le redimensionnement fait exactement ce que vous attendez de lui. resize vous permet de créer une nouvelle image basée sur width (la largeur) et height (la hauteur). Le rapport d'aspect est conservé et la nouvelle image contiendra des zones vides dans la couleur de la couleur d'arrière-plan facultativefournie sous forme de hex value (valeur hexadécimale), par ex. 0xffffff. Le paramètre d'arrière-plan est facultatif et, s'il n'est pas fourni, il sera par défaut transparent si l'image est au format PNG ou blanc s'il s'agit d'un JPEG.

![Sample Image](sample-image.jpg?resize=400,200)

{{ page.media['sample-image.jpg'].resize(400, 200).html()|raw }}

Résultat :

forcer le redimensionnement

Redimensionne l'image à la largeur widht et à la hauteur height fournies. forceResize ne respectera pas le format d'image d'origine et étirera l'image selon les besoins pour s'adapter à la nouvelle taille de l'image.

![Sample Image](sample-image.jpg?forceResize=200,300)

{{ page.media['sample-image.jpg'].forceResize(200, 300).html()|raw }}

Résultat :

cropResize

cropResize redimensionne une image à une taille plus petite ou plus grande en fonction de la largeur widht et de la hauteur height. Le rapport d'aspect est conservé et la nouvelle image sera redimensionnée pour s'adapter à la boîte englobante comme décrit par la largeur widht et la hauteur height fournies. En d'autres termes, toute zone d'arrière-plan que vous verriez dans un resize normal est recadrée.

Par exemple, si vous avez une image de 640 x 480 et que vous effectuez une action cropResize(100, 100) dessus, vous obtiendrez une image de 100 x 75.

![Sample Image](sample-image.jpg?cropResize=300,300)

{{ page.media['sample-image.jpg'].cropResize(300, 300).html()|raw }}

Résultat :

crop

crop ne redimensionnera pas du tout l'image, il recadrera simplement l'image d'origine de sorte que seule la partie de la boîte englobante telle que décrite par la largeur widht et la hauteur height provenant de l'emplacement x et y soit utilisée pour créer la nouvelle image.

Par exemple, une image de 640 x 480 sur laquelle l'action de recadrage cro (0, 0, 400, 100) est appliquée obtiendra simplement la largeur et la hauteur recadrées de sorte que l'image résultante soit une image d'une largeur de 400 et une hauteur de 100 provenait du coin supérieur gauche comme décrit par 0, 0.

![Sample Image](sample-image.jpg?crop=100,100,300,200)

{{ page.media['sample-image.jpg'].crop(100,100,300,200).html()|raw }}

Résultat :

cropZoom

Semblable à cropResize, cropZoom prend également une largeur width et une hauteur hright mais redimensionne et recadre l'image pour s'assurer que l'image résultante a la taille exacte que vous avez demandée. Le rapport d'aspect est conservé mais certaines parties de l'image peuvent être recadrées, mais l'image résultante est centrée.

La principale différence entre cropResize et cropZoom est que dans cropResize, l'image est redimensionnée en conservant les proportions de sorte que l'image entière soit affichée, et tout espace supplémentaire est considéré comme un arrière-plan.

Avec cropZoom, l'image est redimensionnée de sorte qu'il n'y ait pas d'arrière-plan visible, et la zone d'image supplémentaire de l'image en dehors de la nouvelle taille d'image est recadrée.

Par exemple, si vous avez une image de 640 x 480 et que vous effectuez une action cropZoom(400, 100), l'image résultante sera redimensionnée à 400 x 300, puis la hauteur est recadrée, ce qui donne une image de 400 x 100.

![Sample Image]\(sample-image.jpg?cropZoom=600,200)

{{ page.media['sample-image.jpg'].cropZoom(600,200).html()\|raw }}

Résultat :

qualité

Permet dynamiquement de définir une valeur value de pourcentage de compression pour l'image entre 0 et 100. Un nombre inférieur signifie une qualité moindre, où 100 signifie une qualité maximale.

![Sample Image]\(sample-image.jpg?cropZoom=300,200&quality=25)

{{ page.media['sample-image.jpg'].cropZoom(300,200).quality(25).html()|raw }}

Résultat :

négatif

Applique un filtre négatif à l'image où les couleurs sont inversées.

![Sample Image](sample-image.jpg?cropZoom=300,200&negate)

{{ page.media['sample-image.jpg'].cropZoom(300,200).negate.html()|raw }}

Résultat :

luminosité

Applique un filtre de luminosité à l'image avec une valeur value comprise entre -255 et +255. Des nombres négatifs plus grands rendront l'image plus sombre, tandis que des nombres positifs plus grands rendront l'image plus lumineuse.

![Sample Image](sample-image.jpg?cropZoom=300,200&brightness=-100)

{{ page.media['sample-image.jpg'].cropZoom(300,200).brightness(-100)
.html()|raw }}

Résultat :

contraste

Ceci applique un filtre de contraste à l'image avec une valeur value de -100 à +100. Des nombres négatifs plus grands augmenteront le contraste, tandis que des nombres positifs plus grands réduiront le contraste.

![Sample Image](sample-image.jpg?cropZoom=300,200&contrast=-50)

{{ page.media['sample-image.jpg'].cropZoom(300,200).contrast(-50).html()|raw }}

Résultat :

niveau de gris

Cela traite l'image avec un filtre en niveaux de gris.

![Sample Image](sample-image.jpg?cropZoom=300,200&grayscale)

{{ page.media['sample-image.jpg'].cropZoom(300,200).grayscale.html()|raw }}

Résultat :

gaufrer

Cela traite l'image avec un filtre de gaufrage.

![Sample Image](sample-image.jpg?cropZoom=300,200&emboss)

{{ page.media['sample-image.jpg'].cropZoom(300,200).emboss.html()|raw }}

Résultat :

lisser

Cela applique un filtre de lissage à l'image en fonction du réglage de la valeur value de lissage de -10 à 10.

![Sample Image](sample-image.jpg?cropZoom=300,200&smooth=5)

{{ page.media['sample-image.jpg'].cropZoom(300,200).smooth(5).html()|raw }}

Résultat :

bordure

Cela applique un filtre de bordure sur l'image.

![Sample Image](sample-image.jpg?cropZoom=300,200&sharp)

{{ page.media['sample-image.jpg'].cropZoom(300,200).sharp.html()|raw }}

Résultat :

contours

Cela applique un filtre de contours sur l'image.

![Sample Image](sample-image.jpg?cropZoom=300,200&edge)

{{ page.media['sample-image.jpg'].cropZoom(300,200).edge.html()|raw }}

Résultat :

coloriser

Vous pouvez coloriser l'image en ajustant les valeurs de rouge red, de vert green et de bleu blue de l'image de -255 à +255 pour chaque couleur.

![Sample Image](sample-image.jpg?cropZoom=300,200&colorize=100,-100,40)

{{ page.media['sample-image.jpg'].cropZoom(300,200).colorize(100,-100,40
html()|raw }}

Résultat :

sépia

Cela applique un filtre sépia sur l'image pour produire un look vintage.

![Sample Image](sample-image.jpg?cropZoom=300,200&sepia)

{{ page.media['sample-image.jpg'].cropZoom(300,200).sepia.html()|raw }}

Résultat :

flou gaussien

Brouille l'image en définissant la fréquence à laquelle le filtre de flou est appliqué à l'image. La valeur par défaut est 1 fois.

![Sample Image](sample-image.jpg?gaussianBlur=3)

{{ page.media['sample-image.jpg'].gaussianBlur(3).html()|raw }}

Résultat :

tourner

Fait pivoter l'image d'un angle angle en degrés dans le sens inverse des aiguilles d'une montre, les valeurs négatives tournent dans le sens des aiguilles d'une montre.

![Sample Image](sample-image.jpg?cropZoom=300,200&rotate=-90)

{{ page.media['sample-image.jpg'].cropZoom(300,200).rotate(-90).html()|raw }}

Résultat :

retourner

Retourne l'image dans les directions données. Les deux paramètres peuvent être 0|1. Les deux 0 équivaut à aucun retournement dans les deux sens.

![Sample Image](sample-image.jpg?cropZoom=300,200&flip=0,1)

{{ page.media['sample-image.jpg'].cropZoom(300,200).flip(0,1).html()|raw }}

Résultat :

fixOrientation

Corrige l'orientation de l'image lors de la rotation via les données EXIF ​​(s'applique aux images jpeg prises avec des téléphones et des appareils photo).

![Sample Image](sample-image.jpg?fixOrientation)

{{ page.media['sample-image.jpg'].fixOrientation().html()|raw }}

Chargement

L'attribution du chargement aux images permet aux auteurs de contrôler le moment où le navigateur doit commencer à charger la ressource. La valeur de l'attribut de chargement peut être auto (par défaut), lazy, eager. La valeur peut être définie dans system.images.defaults.loading comme valeur par défaut, ou par image md avec ?loading=lazy Lorsque la valeur auto est choisie, aucun loading attribut de chargement n'est ajouté et le navigateur déterminera la stratégie à utiliser.

![Sample Image](sample-image.jpg?loading=lazy)

{# Using default value as defined in 'config.system.images.defaults.loading' #}
{{ page.media['sample-image.jpg'].loading.html('Sample Image')|raw }}

{# Using explicit value #}
{{ page.media['sample-image.jpg'].loading('lazy').html('Sample Image')|raw }}

<img loading="lazy" title="Sample Image"  src="/images/e/f/1/0/5/
ef10554cd3a99f2e65136e79dce170d4f8a7a1b9-sample-image.jpg" />

Actions animées / vectorisées

redimensionner

Étant donné que PHP ne peut pas gérer le redimensionnement dynamique de ces types de médias, l'action de redimensionnement s'assurera uniquement qu'un attribut width et height ou data-width et data-height est défini sur votre balise <img>/<video> ou <a> respectivement. Cela signifie que votre image ou vidéo sera affichée dans la taille demandée, mais l'image ou le fichier vidéo réel ne sera en aucun cas converti.

![Sample Trailer](sample-trailer.mov?resize=400,200)

{{ page.media['sample-trailer.mov'].resize(400, 200).html('Sample Trailer')|raw }}}

<video controls="1" style="width: 400px;height: 200px;" title="Sample Trailer"
 alt=""><source src="/user/pages/02.content/07.media/sample-trailer.mov?
loading=auto">Your browser does not support the video tag.<video>
      

exemples

Quelques exemples de ceci :

Image Vectorielle

![Sample Vector](img/sample-vector.svg?resize=300,300)

Image Animée

![Animated Gif](img/sample-animated.gif?resize=300,300)

Vidéo

![Sample Trailer](sample-trailer.mov?resize=400,200)



      

Actions audio

Le média audio affichera un lien audio HTML5 :

![Hal 9000: I'm Sorry Dave](hal9000.mp3)

{{ page.media['hal9000.mp3'].html()|raw }}

Résultat :

controls

Permet de définir ou de supprimer explicitement les contrôles HTML5 par défaut. Passer 0 masque les commandes du navigateur pour la lecture, le volume, etc.

![Hal 9000: I'm Sorry Dave](hal9000.mp3?controls=0)

{{ page.media['hal9000.mp3'].controls(0)|raw }}

<audio alt=""><source src="/user/pages/02.content/07.media/hal9000.mp3?
loading=auto">Your browser does not support the audio tag.</audio>
      

préchargement

Permet de définir la propriété de préchargement preload, qui est par défaut sur auto. Les paramètres autorisés sont auto, metadata et none.

![Hal 9000: I'm Sorry Dave](hal9000.mp3?preload=metadata)

{{ page.media['hal9000.mp3'].preload('metadata')|raw }}

lecture automatique

Permet de définir si l'audio sera lu autoplay lors du chargement de la page. La valeur par défaut est false par omission si elle n'est pas définie.

![Hal 9000: I'm Sorry Dave](hal9000.mp3?autoplay=1)

{{ page.media['hal9000.mp3'].autoplay(1)|raw }}

contrôle de liste

Permet de définir la propriété controlsList, qui prend une ou plusieurs des trois valeurs possibles : nodownload, nofullscreen et noremoteplayback.

![Hal 9000: I'm Sorry Dave](hal9000.mp3?controlsList=
nodownload-nofullscreen-noremoteplayback)

{{ page.media['hal9000.mp3'].controlsList('nodownload nofullscreen 
noremoteplayback')|raw }}

sourdine

Permet de définir si le son est coupé muted lors du chargement. La valeur par défaut est false par omission si elle n'est pas définie.

![Hal 9000: I'm Sorry Dave](hal9000.mp3?muted=1)

{{ page.media['hal9000.mp3'].muted(1)|raw }}

boucle

Permet de définir si l'audio sera en boucle loop lors de la lecture jusqu'à la fin. La valeur par défaut est false par omission si elle n'est pas définie.

![Hal 9000: I'm Sorry Dave](hal9000.mp3?loop=1)

{{ page.media['hal9000.mp3'].loop(1)|raw }}

Actions sur fichiers

Grav ne fournit aucune action personnalisée sur les fichiers pour le moment et il n'est pas prévu d'en ajouter. Si vous pensez à quelque chose, veuillez nous contacter.

[View Text File](acronyms.txt)

<a href="{{ page.media['acronyms.txt'].url()|raw }}">
View Text File</a>

Résultat:

Afficher le fichier texte

Combinaisons

Comme vous pouvez le voir : Grav fournit de puissantes fonctionnalités de manipulation d'images qui facilitent vraiment le travail avec elles ! Cette véritable puissance est visible lorsque vous combinez plusieurs effets et produisez des manipulations d'images dynamiques très sophistiquées. Par exemple, ceci est tout à fait valable :

![Sample Image](sampleimage.jpgnegate&lightbox&cropZoom=200,200)

{{ page.media['sample-image.jpg']
.negate.lightbox.cropZoom(200,200)|raw }}

Résultat:

Réinitialiser plusieurs appels à la même image

Lorsque vous accédez plusieurs fois à la même image dans une même page, les actions que vous avez fournies à l'image ne sont pas réinitialisées par défaut. Ainsi, si vous redimensionnez une image et affichez le code HTML, puis plus tard dans la même page, affichez simplement l'URL de l'image, vous obtiendrez également l'URL de l'image redimensionnée. Vous vous attendiez probablement à l'URL de l'image d'origine.

Pour lutter contre cela, vous pouvez réinitialiser les actions sur les images en passant false à la méthode url() :

{% for item in page.header.gallery %}
    {% set image = page.media[item.src].cropZoom(800, 600).quality(70) %}
    <a href="{{ image.url(false)|e }}">
      <img src="{{ image.url|e }}" alt="{{ item.alt|e }}" title="{{ item.title|e }}" />
    </a>
{% endfor %}

Images réactives

Écrans à haute densité

Grav a un support intégré pour les images réactives pour les écrans à haute densité (par exemple, les écrans Retina). Grav accomplit cela en implémentant srcset à partir de la proposition HTML de l'élément Picture. Un bon article à lire si vous voulez mieux comprendre cela est ce billet de blog d'Eric Portis.

Pour commencer à utiliser des images réactives, il vous suffit d'ajouter des images de densité supérieure à vos pages en ajoutant un suffixe au nom du fichier. Si vous ne fournissez que des images de densité plus élevée, Grav générera automatiquement des versions de qualité inférieure pour vous. Le nommage fonctionne comme suit : [image-name]@[density-ratio]x.[image-extension], donc par exemple en ajoutant sample-image@3x.jpg à votre page, Grav créera une version 2xet un 1x (taille normale) par défaut.

Supposons que vous ayez un fichier appelé retina@2x.jpg, vous feriez en fait référence à cela dans vos liens comme retina.jpg, puis Grav ne trouvera pas cette image et commencera à rechercher les tailles d'image retrina. Il trouvera retina@2x.jpg puis réalisera qu'il doit créer une variante @1x et afficher la sortie srcset appropriée :

![Retina Image](retina.jpg?sizes=80vw)

{{ page.media['retina.jpg'].sizes('80vw').html()|raw }}

<img alt="Retina Image" src="/images/3/7/f/0/c/37f0ca845b3eb054374d6a1ac2e36e13c59e14f8
-retina.jpg" srcset="/images/b/a/c/1/9/bac199ed46f9188dafad759760afd27da935e564
-retina2x.jpg 2880w, /images/3/7/f/0/c/37f0ca845b3eb054374d6a1ac2e36e13c59e14f8
-retina.jpg 1440w" sizes="80vw">

Résultat :

Tailles avec media queries

Grav prend également en charge les requêtes multimédias dans l'attribut sizes tailles, vous permettant d'utiliser différentes largeurs en fonction de la taille de l'écran de l'appareil. Contrairement à la première méthode, vous n'avez pas besoin de créer plusieurs images ; elles seront créées automatiquement. L'image de secours est l'image actuelle, donc un navigateur sans prise en charge de srcset affichera l'image d'origine.

![Retina Image](retina.jpg?sizes=%28max-width%3A26em%29+100vw%2C+50vw)

{{ page.media['retina.jpg'].sizes('(max-width:26em) 100vw, 50vw').html('Retina Image')|raw }}

<img alt="Retina Image" src="/images/3/7/f/0/c/37f0ca845b3eb054374d6a1ac2e36e13c59e14f8
-retina.jpg" srcset="/images/b/a/c/1/9/bac199ed46f9188dafad759760afd27da935e564
-retina2x.jpg 2880w, /images/3/7/f/0/c/37f0ca845b3eb054374d6a1ac2e36e13c59e14f8
-retina.jpg 1440w" sizes="(max-width:26em)+100vw">

Résultat :

Tailles avec media queries utilisant des dérivées

Si vous souhaitez personnaliser les tailles des fichiers créés automatiquement, vous pouvez utiliser la méthode derivatives() (comme indiqué ci-dessous). Le premier paramètre est la largeur de la plus petite des images générées. La seconde est la largeur maximale des images générées. Le troisième, et seul paramètre facultatif, dicte les intervalles avec lesquels générer les photos (la valeur par défaut est 200). Par exemple, si vous définissez le premier paramètre sur 320 et le troisième sur 100, Grav générera une image pour 320, 420, 520, 620, et ainsi de suite jusqu'à ce qu'il atteigne son maximum défini.

Dans notre exemple, nous avons défini le maximum sur 1600. Cela se traduira par des incréments de 300 de 320 à 1520, car 1620 serait au-dessus du seuil.

![Retina Image](retina.jpg?derivatives=320,1600,300
&sizes=%28max-width%3A26em%29+100vw%2C+50vw)

{{ page.media['retina.jpg'].derivatives(320,1600,300)
.sizes('(max-width:26em) 100vw, 50vw').html()|raw }}

<img alt="Retina Image" src="/images/3/7/f/0/c/37f0ca845b3eb054374d6a1ac2e36e13c59e14f8-retina.jpg" srcset="/images/b/a/c/1/9/bac199ed46f9188dafad759760afd27da935e564-retina2x.jpg 2880w, /images/d/c/e/f/7/dcef77ec0cc8efd0a66851a7750b530d8bfe093a-retina320w.jpg 320w, /images/1/5/d/a/1/15da17d9989ac18738474b1fab5ff6104b96be41-retina620w.jpg 620w,
 /images/e/c/e/3/f/ece3fa30474b851808a485197b481d202d8f3811-retina920w.jpg920w, /images/3/8/8/2/4/3882463d358fc22a189380da7b7d14db2a5b260a-retina1220w.jpg 1220w, /images/6/0/5/0/e/6050e7409d6040b3737b6562cdec89854cac3f9a-retina1520w.jpg 1520w, /images/3/7/f/0/c/37f0ca845b3eb054374d6a1ac2e36e13c59e14f8-retina.jpg 1440w" sizes="(max-width:26em)+100vw">

Résultat :

Définition manuelle de la taille

Au lieu de laisser Grav générer les tailles par étapes régulières entre des limites données, vous pouvez définir manuellement les tailles que Grav doit générer :

![Image rétine](retina.jpg?derivatives=[360,720,1200])

Cela générera des versions réduites de l'image retina.jpg en trois largeurs : 360, 720 et 1200px.

Métafichiers

Chaque média que vous référencez dans Grav, par ex. image1.jpg, sample-trailer.mov ou même archive.zip a la possibilité d'avoir des variables définies ou même remplacées via un métafichier. Ces fichiers prennent le format <filename>.meta.yaml. Par exemple, pour une image avec le nom de fichier image1.jpg, vous pouvez créer un métafichier appelé image1.jpg.meta.yaml.

Vous pouvez ajouter à peu près n'importe quel paramètre ou élément de métadonnées en utilisant cette méthode.

Le contenu de ce fichier doit être en syntaxe YAML, un exemple pourrait être :

image:
   filters:
      default:
         - [cropResize, 300, 300]
         - sharp
alt_text: My Alt Text

Si vous utilisez cette méthode pour ajouter un style spécifique à un fichier ou des balises META pour un seul fichier, vous souhaiterez placer le fichier YAML dans le même dossier que le fichier référencé. Cela garantira que le fichier est extrait avec les données YAML. C'est un moyen pratique de définir même des métadonnées spécifiques à un fichier, car vous ne pouvez pas le faire à partir de la page elle-même.

Supposons que vous souhaitiez simplement extraire la valeur alt_text répertoriée pour le fichier image sample-image.jpg. Vous créerez ensuite un fichier appelé sample-image.jpg.meta.yaml et le placerez dans le dossier avec le fichier image référencé. Ensuite, insérez les données utilisées dans l'exemple ci-dessus et enregistrez ce fichier YAML. Dans le fichier Markdown de la page, vous pouvez afficher ces données en utilisant la ligne suivante :

{{ page.media['sample-image.jpg'].meta.alt_text|e }}

Cela affichera l'exemple de phrase My Alt Text au lieu de l'image. Ceci n'est qu'un exemple de base. Vous pouvez utiliser cette méthode pour un certain nombre de choses, y compris la création d'une galerie avec plusieurs points de données uniques que vous souhaitez référencer pour chaque image. Vos images, par essence, ont un ensemble de données uniques qui peuvent être facilement référencées et extraites selon les besoins.

Options vidéo

Les options de contrôle vidéo en ligne sont une autre fonctionnalité intégrée à Grav. Ces options, ajoutées en ligne avec le nom du fichier, vous permettent de déterminer les paramètres de lecture autoplay automatique, de contrôle controlset de boucle loop d'une vidéo intégrée.

Voici un exemple:

![video.mov]\(video.mov?loop=1&controls=0&autoplay=1&muet)

Les options sont les suivantes :