Gérer l'affichage des images avec Symfony 4 (avec LiipImagine)

28 janvier 2020 - : MVC Tutoriel Symfony - : 4 commentaires - Tutoriel MVC PHP Symfony

Visualisez les fichiers de cette série sur GitHub

Dernière modification le 24 février 2020

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 aux forums de Nouvelle-Techno.fr ou au serveur Discord pour une entraide par chat

Visualisez les fichiers de cette série sur GitHub

Partager

Partager sur Facebook Partager sur Twitter Partager sur LinkedIn

Commentaires

Ecrire un commentaire

devlo a écrit le 24 février 2020 à 17:26

Symfony CLI version v4.12.8

mais j ai pas liip... qui s affiche sous le  packages/test!!

merci

Répondre

Nouvelle-Techno.fr a répondu le 24 février 2020 à 18:28

Bonsoir,

Il s'agit de la version de Symfony CLI. Je parlais de la version de Symfony lui-même, visible, par exemple, en bas à droite dans la barre de debug.

Répondre

devlo a écrit le 24 février 2020 à 14:59

merci pour le tuto mais maintenant le framewk ne marche plus,on a le msg d erreur :

Package zendframework/zend-code is abandoned, you should avoid using it. Use laminas/laminas-code instead.
Package zendframework/zend-eventmanager is abandoned, you should avoid using it. Use laminas/laminas-eventmanager instead.

sinon y a pas un autre qui permet de mettre des photos

merci

Répondre

Nouvelle-Techno.fr a répondu le 24 février 2020 à 15:20

Bonjour,

Ces erreurs n'impactent pas le fonctionnement de LiipImagine, le tutoriel fonctionne jusqu'à la version 4.3.x de Symfony, est-ce votre version ?

Répondre

Ecrire un commentaire