Cramnurbel

Cette page est en lecture seule. Vous pouvez afficher le texte source, mais ne pourrez pas le modifier. Contactez votre administrateur si vous pensez qu'il s'agit d'une erreur.

====== Gérer les images avec LiipImagine ======

Sources:
  * Symfony: [[https://symfony.com/doc/2.0/bundles/LiipImagineBundle/index.html]]
  * YouTube: [[https://www.youtube.com/watch?v=dS8QSIQdTRs|Gérer l'affichage des images avec Symfony 4 (avec LiipImagine)]]

===== Installation dans le projet =====

<code bash>
composer require liip/imagine-bundle
</code>

Un fichier de configuration est ajouté :

<code yaml /config/packages/liip_imagine.yaml>
liip_imagine:
    # valid drivers options include "gd" or "gmagick" or "imagick"
    driver: "gd"
</code>

Si on utilise le driver ''"gd"'' comme indiqué ci-dessus, l'extension **php-gd** doit être installée.

<code bash>
sudo apt install php-gd
sudo systemctl restart apache2
</code>

===== Filtres =====

Ajouter des filtres :

<code yaml /config/packages/liip_imagine.yaml>
liip_imagine:
    driver: "gd"
    
    filter_sets:
    
        # filtre nommé "miniature200x200"
        miniature200x200:
            quality: 75
            filters:
                thumbnail:
                    size: [200, 200]
                    mode: outbound
        
        # filtre nommé "image_article"
        image_article:
            quality: 80
            filters:
                upscale:
                    min: [800, 400]
                thumbnail:
                    size: [800, 400]
                    mode: outbound
</code>

===== Utilisation d'un filtre =====

Le fichier image est stocké dans le dossier ''public''

^ Chemin de l'image     ^
| /public/img/photo.jpg |

Dans un template twig, on accède à l'image comme ceci :

<code twig>
<img src="{{ asset('img/photo.jpg') }}" >
</code>

Pour y ajouter le filtre ''miniature200x200'' défini dans l'exemple ci-dessus :

<code twig>
<img src="{{ asset('img/photo.jpg') | imagine_filter('miniature200x200') }}" >
</code>

===== Mise en cache =====

L'image est mise en cache, dans un dossier ''/public/media/cache'' créé automatiquement.

Le chemin complet de l'image est :

  /public/media/cache/NOM-DU-FILTRE/CHEMIN-DE-L'IMAGE

Donc pour reprendre l'exemple ci-dessus, cela donne :

  /public/media/cache/miniature200x200/img/photo.jpg

Cramnurbel

Outils pour utilisateurs

Outils du site

Outils de la page