Dans tous les sites web, et dans notre blog, nous devons gérer l'affichage d'images sur différentes pages.
Ces images sont à afficher dans différents formats, comme des miniatures, des images carrées, des images rectangulaires...
Ce n'est pas à l'utilisateur du site de prévoir les différentes tailles pour ses images, nous devons le gérer durant le développement, en faisant en sorte que toute image envoyée par le visiteur soit redimensionnée automatiquement.
Avec Symfony 4, nous avons accès à un "bundle" qui propose de le faire pour nous.
Ce bundle s'appelle "LiipImagine" et s'intègre directement dans le générateur de vues "Twig".
ATTENTION : ce tutoriel s'applique aux versions de Symfony jusqu'à la 4.3.x incluse, aucune garantie pour la 4.4 et ultérieures.
Son fonctionnement est assez simple, il permet de créer des "filtres Twig" qui vont générer une copie de l'image à afficher dans les dimensions et avec les paramètres souhaités.
Installation de LiipImagine
Pour installer "LiipImagine", nous allons utiliser composer et la commande ci-dessous
composer require liip/imagine-bundle
Une fois le bundle installé, le fichier "liip_imagine.yaml" est créé. Il contient le code ci-dessous.
# See dos how to configure the bundle: https://symfony.com/doc/current/bundles/LiipImagineBundle/basic-usage.html
liip_imagine:
# valid drivers options include "gd" or "gmagick" or "imagick"
driver: "gd"
C'est dans ce fichier que nous allons travailler pour configurer le bundle.
La dernière ligne de ce fichier permet de spécifier le pilote graphique à utiliser pour la gestion des images (variable en fonction du serveur et de l'hébergeur)
Configuration des filtres
Il existe de nombreuses options de filtres permettant de répondre à presque tous les besoins, elles sont listées sur le site de Symfony. Nous allons en traiter quelques unes ci-dessous.
Les miniatures (thumbnails)
Nous allons commencer par créer une miniature de nos images mises en avant de nos articles au format 200 par 200. Nous appellerons ce filtre "carre" (sans accent)
Pour ce faire, nous allons modifier le fichier "liip_imagine.yaml" comme ci-dessous
liip_imagine:
# valid drivers options include "gd" or "gmagick" or "imagick"
driver: "gd"
filter_sets: # Contient la liste des filtres
carre: # Nom du filtre
quality: 75 # Qualité de l'image
filters: # Liste des filtres à appliquer
thumbnail: # Filtre "Thumbnail"
size: [200, 200] # Taille de l'image de sortie
mode: outbound # Découpage de l'image
Dans cet exemple, les options size
et mode
du filtre thumbnail
permettent un redimensionnement et un découpage de l'image de sortie.
Mise à l'échelle
Il arrive régulièrement de devoir réduire ou agrandir la taille d'une image sans découpe et sans modification des proportions.
Dans ce cas, nous utiliserons le code ci-dessous pour définir les tailles souhaitées.
reduc:
quality: 85
filters:
scale:
dim: [ 250, 250 ]
L'option dim
du filtre scale
permet de définir les dimensions souhaitées. LiipImagine réduira ou agrandira l'image de façon à atteindre la valeur demandée pour la plus grande des deux dimensions.
Ajout d'un filigrane (watermark)
Il est parfois nécessaire d'ajouter un filigrane aux images pour en revendiquer la propriété.
Pour ce faire, nous aurons besoin d'une image, généralement sur fond transparent, qui servira de filigrane.
Pour ajouter ce filigrane, nous utiliserons le code suivant, qui redimensionnera en 800 par 400 avec découpe et ajoutera le filigrane en bas à droite
article:
quality: 80
filters:
upscale:
min: [800, 400]
thumbnail:
size: [800, 400]
mode: outbound
watermark:
# chemin vers le fichier
image: ../public/assets/img/watermark.png
# Taille relative de l'image
size: 0.1
# set the position of the watermark
position: bottomright
Utiliser un filtre LiipImagine
Une fois les filtres déclarés, nous pouvons les utiliser pour afficher les images. Il suffit de placer le filtre directement à l'emplacement auquel se situe l'image.
Ainsi, pour le filtre "article", nous pourrons le charger de la façon suivante
<img src="{{ vich_uploader_asset(article, 'imageFile')|imagine_filter('article') }}" alt="Image">
Le filtre est placé en ajoutant |imagine_filter('nom du filtre')
après le chargement de l'image.
Les images redimensionnées sont placées dans un dossier "media" créé par le bundle.
Obtenir de l'aide
Pour obtenir de l'aide, vous pouvez accéder au serveur Discord pour une entraide par chat