Grav - Médias

Les fichiers multimédias contiennent différents types de contenu d'affichage tels que des images, des vidéos et de nombreux autres fichiers. Grav trouve et traite ces fichiers automatiquement pour être utilisés par n'importe quelle page. En utilisant la fonctionnalité intégrée de la page, vous pouvez accéder aux métadonnées et modifier le média de manière dynamique.

Smart-cachingest utilisé par Grav qui crée des médias générés dans le cache si nécessaire. De cette façon, tous peuvent utiliser la version mise en cache au lieu de générer des médias encore et encore.

Fichiers multimédias pris en charge

Voici les types de fichiers multimédias pris en charge par Grav -

  • Image - jpg, jpeg, png

  • Animated Image - gif

  • vectorized Image - svg

  • Video - mp4, mov, m4v, swf

  • Data/information - txt, doc, pdf, html, zip, gz

Modes d'affichage

Voici quelques types de modes d'affichage dans Grav -

  • Source - C'est l'affichage visuel de l'image, de la vidéo ou d'un fichier.

  • text - Présentation textuelle des fichiers multimédias.

  • thumbnail - Image miniature pour le fichier multimédia.

Localisation des miniatures

Vous pouvez localiser les miniatures en utilisant trois emplacements -

  • In the same folder where your media files exists- [nom-média]. [Extension-média] .thumb. [Extension-pouce]; ici, le nom du support et l'extension du support sont le nom et l'extension du fichier multimédia réel et l'extension du pouce est l'extension prise en charge par le type de support d'image.

  • User Folder − user / images / media / thumb- [media-extension] .png; ici, l'extension de support est l'extension du fichier multimédia réel.

  • System folder- system / images / media / thumb- [media-extension] .png; ici, media-extension est l'extension du fichier multimédia actuel.

Lightboxes et liens

Grav donne une sortie d'une balise d'ancrage qui contient certains des éléments que le plugin lightbox doit lire. Si vous souhaitez utiliser une bibliothèque lightbox qui n'est pas incluse dans vos plugins, vous pouvez utiliser les attributs suivants pour créer votre propre plugin.

  • rel- Indique le lien lightbox. La valeur est lightbox.

  • href - Il s'agit d'une URL vers l'objet multimédia.

  • data-width - Réglez la largeur de la lightbox choisie par l'utilisateur.

  • data-height - Réglez la hauteur de la lightbox choisie par l'utilisateur.

  • data-srcset - La chaîne srcset est utilisée dans le cas d'un support d'image.

Actions

Le modèle Builder dans Grav est utilisé pour gérer les médias, pour effectuer plusieurs actions. Certains types d'actions sont pris en charge pour tous les supports, tandis que d'autres ne sont disponibles que pour un support spécifique.

Général

Il existe 6 types d'actions générales disponibles pour les types de média. Chaque action est expliquée ci-dessous.

N ° Sr. Action et description
1 URL ()

url () rend raw url path aux médias.

2 html ([titre] [, alt] [, classes]

La sortie aura une balise html valide pour les médias.

3

display(mode)

Il est utilisé pour basculer entre les différents modes d'affichage. Lorsque vous passez en mode d'affichage, toutes les actions sont réinitialisées.

4 lien()

Les actions appliquées avant le lien s'appliquent à la cible du lien.

5 lightbox ([largeur, hauteur])

Lightbox est similaire à l'action de lien, mais a une petite différence car elle crée un lien avec des attributs supplémentaires.

6 La vignette

Sélectionnez entre la page et la valeur par défaut pour tout type de fichier multimédia et cela peut être fait manuellement.

Actions sur les images

Le tableau suivant répertorie quelques actions appliquées aux images.

N ° Sr. Action et description
1 redimensionner (largeur, hauteur, [arrière-plan])

Modifie la largeur et la hauteur de l'image en redimensionnant.

2 forceResize (largeur, hauteur)

Étire l'image selon les besoins, quel que soit le rapport d'origine.

3 cropResize (largeur, hauteur)

Redimensionne l'image à une taille plus petite ou plus grande en fonction de sa largeur et de sa hauteur.

4 rognage (x, y, largeur, hauteur)

Recadre l'image comme décrit par la largeur et la hauteur à partir des emplacements x et y.

5 cropZoom (largeur, hauteur)

Aide à zoomer et à recadrer les images selon la demande.

6 qualité (valeur)

Définit la valeur de la qualité d'image entre 0 et 100.

sept nier()

Les couleurs s'inversent en négation.

8 luminosité (valeur)

Avec un value de -255 à +255, un filtre de luminosité est ajouté à l'image.

9 contraste (valeur)

La valeur de -100 à +100 est utilisée pour appliquer le filtre de contraste à l'image.

dix niveaux de gris ()

Le filtre en niveaux de gris est utilisé pour traiter l'image.

11 gaufrer()

Le filtre de gaufrage est également utilisé pour traiter l'image.

12 lisse (valeur)

Le filtre de lissage est appliqué aux images en définissant la valeur de -10 à +10.

13 tranchant()

Le filtre de netteté est ajouté sur l'image.

14 bord()

Le filtre de recherche de bord est ajouté sur l'image.

15 coloriser (rouge, vert, bleu)

Colorise l'image en ajustant les couleurs rouge, verte et bleue.

16 sépia()

Le filtre sépia est ajouté pour donner un look vintage.

Animation et vectorisation d'images et de vidéos

Des actions animées et vectorisées sont effectuées sur des images et des vidéos. Voici l'action qui se déroule sur les images et les vidéos.

N ° Sr. Action et description
1 redimensionner (largeur, hauteur)

L'action de redimensionnement sera définie width, height, data-width et data-height les attributs.

Combinaisons

Grav a une fonctionnalité de manipulation d'image qui facilite le travail avec des images.

![My New Image](/images/maxresdefault.jpg?negate&cropZoom = 500, 500&lightbox & cropZoom = 600,
200&contrast = -100&sharp&sepia)

Le code ci-dessus générera une sortie comme indiqué ci-dessous -

Images réactives

Le tableau suivant répertorie quelques types d'images réactives.

N ° Sr. Action et description
1 Écrans de densité plus élevée

Ajoutez un suffixe au nom de fichier et vous pouvez ajouter une image de densité plus élevée à la page.

2 Tailles avec requêtes multimédias

Ajoutez un suffixe au nom de fichier et vous pouvez ajouter une image de densité plus élevée à la page.

Métafichiers

image1.jpg, archive.zipou toute autre référence a la capacité de définir des variables ou peut être remplacée par un métafichier. Ces fichiers prennent alors le format de<filename>.meta.yaml. Par exemple, si vous avez une image commeimage2.jpg, alors votre métafichier peut être créé comme image2.jpg.meta.yaml. Le contenu doit être dans la syntaxe yaml. Vous pouvez ajouter tous les fichiers ou métadonnées de votre choix en utilisant cette méthode.