LiipImagineBundle
2.13.3
| PHPUnit | PHP-CS-Fixeur | Couverture | Téléchargements | Libérer |
|---|---|---|---|---|
Ce bundle fournit une boîte à outils d'abstraction de manipulation d'images pour les projets basés sur Symfony.
Ensembles de filtres : à l'aide de n'importe quel langage de configuration pris en charge par Symfony (tel que YML et XML), vous pouvez créer des définitions d'ensemble de filtres qui spécifient des routines de transformation. Ces définitions incluent un ensemble de filtres et de post-processeurs , ainsi que d'autres paramètres facultatifs.
Filtres : les transformations d'image sont appliquées à l'aide de filtres . Un ensemble de filtres intégrés sont fournis par le bundle, implémentant les transformations les plus courantes ; les exemples incluent la vignette, l'échelle, le recadrage, le retournement, la bande et le filigrane. Pour des transformations plus avancées, vous pouvez facilement créer vos propres filtres personnalisés.
Post-processeurs : Les modifications du fichier image binaire résultant (créé à partir de vos filtres ) sont gérées par des post-processeurs . Les exemples incluent JPEG Optim, Moz JPEG, Opti PNG et PNG Quant. Tout comme les filtres, vous pouvez facilement créer vos propres post-processeurs personnalisés.
Supposons que vous ayez défini un ensemble de filtres my_thumb , qui peut être configuré pour effectuer un nombre illimité de transformations différentes. L'invocation la plus simple serait de rediriger le chemin de votre image vers le filtre imagine_filter Twig fourni.
< img src = " {{ asset( ' /relative/path/to/image.jpg ' ) | imagine_filter( ' my_thumb ' ) }} " />Ce projet est publié avec un code de conduite des contributeurs. En participant à ce projet, vous acceptez d'en respecter les termes.
Merci aux nombreux contributeurs qui ont consacré leur temps et leur code à ce projet.
La bibliothèque PHP Imagine autonome est utilisée par ce bundle pour les transformations d'images.
Ce package a été dérivé d'AvalancheImagineBundle dans le but de rendre le code plus extensible. Référencez AvalancheImagineBundle#25 pour plus d'informations sur le raisonnement de ce fork.
L'utilisation de ce package est similaire à tous les bundles Symfony. Les étapes suivantes doivent être effectuées
Des instructions de configuration détaillées peuvent être trouvées dans le chapitre d'installation de la documentation.
Des informations détaillées sur toutes les options de configuration disponibles sont disponibles dans le chapitre configuration de la documentation.
Généralement, cet ensemble fonctionne en appliquant des ensembles de filtres aux images à partir d'un modèle. Vos ensembles de filtres sont définis dans le fichier de configuration de l'application (souvent app/config/config.yml ) et comprennent un ensemble de filtres , de post-processeurs et d'autres paramètres facultatifs.
Nous en apprendrons plus sur les post-processeurs et les autres paramètres disponibles plus tard, mais pour l'instant, concentrons-nous sur la façon de définir un ensemble de filtres simple composé de quelques filtres .
Avant de commencer, une petite quantité de configuration est nécessaire pour garantir le bon fonctionnement de nos chargeurs de données et de nos résolveurs de cache. Utilisez le passe-partout suivant dans votre fichier de configuration.
# app/config/config.yml
liip_imagine :
# configure resolvers
resolvers :
# setup the default resolver
default :
# use the default web path
web_path : ~
# your filter sets are defined here
filter_sets :
# use the default cache configuration
cache : ~Une fois la configuration de base en place, nous commencerons par un exemple qui répond à un cas d'utilisation courant : la création de vignettes. Supposons que nous souhaitions que les miniatures résultantes reçoivent les transformations suivantes :
En ajoutant à notre passe-partout ci-dessus, nous devons définir un ensemble de filtres (que nous nommerons my_thumb ) avec deux filtres configurés : les filtres thumbnail et background .
# app/config/config.yml
liip_imagine :
resolvers :
default :
web_path : ~
filter_sets :
cache : ~
# the name of the "filter set"
my_thumb :
# adjust the image quality to 75%
quality : 75
# list of transformations to apply (the "filters")
filters :
# create a thumbnail: set size to 120x90 and use the "outbound" mode
# to crop the image when the size ratio of the input differs
thumbnail : { size : [120, 90], mode : outbound }
# create a 2px black border: center the thumbnail on a black background
# 4px larger to create a 2px border around the final image
background : { size : [124, 94], position : center, color : '#000000' } Vous avez maintenant créé un ensemble de filtres appelé my_thumb qui effectue une transformation en miniature. Le filtre thumbnail redimensionne l'image à la largeur et à la hauteur souhaitées (dans cet exemple, 120x90px), et son option mode: outbound entraîne le recadrage de l'image résultante si le rapport d'entrée diffère. Le filtre background génère une bordure noire de 2 px en créant un canevas noir de 124 x 94 px et en positionnant la vignette en son centre.
Remarque : Un ensemble de filtres peut avoir n'importe quel nombre de filtres définis. Les transformations simples peuvent nécessiter un seul filtre , tandis que les transformations complexes peuvent avoir un nombre illimité de filtres définis pour elles.
Il existe un certain nombre de filtres supplémentaires, mais pour l'instant, vous pouvez utiliser votre ensemble de filtres my_thumb nouvellement défini immédiatement dans un modèle.
Pour le modèle basé sur Twig, utilisez :
< img src = " {{ asset( ' /relative/path/to/image.jpg ' ) | imagine_filter( ' my_thumb ' ) }} " />Ou, pour un modèle basé sur PHP, utilisez :
<img src=" <?php $ this ['imagine']->filter('/relative/path/to/image.jpg', 'my_thumb') ?> " /> En coulisses, l'ensemble applique le(s) filtre(s) à l'image à la volée lorsque la première demande de page est servie. L'image transformée est ensuite mise en cache pour les requêtes ultérieures. Le chemin final de l'image mise en cache serait similaire à /media/cache/my_thumb/relative/path/to/image.jpg .
Remarque : *En utilisant l'environnement dev , vous constaterez peut-être que les images ne sont pas correctement rendues via l'assistant de modèle. Cela est souvent dû à l'activation intercept_redirect dans la configuration de votre application. Pour garantir le rendu des images, il est fortement suggéré de désactiver cette option :
# app/config/config_dev.yml
web_profiler :
intercept_redirects : falseParfois, vous pouvez définir un filtre qui répond à 99 % de vos scénarios d'utilisation. Au lieu de définir un nouveau filtre pour les 1 % de cas erronés, vous pouvez choisir de modifier le comportement d'un filtre au moment de l'exécution en transmettant à l'assistant de modèle un tableau d'options.
Pour le modèle basé sur Twig, utilisez :
{% set runtimeConfig = { " thumbnail " : { " size " : [ 50 , 50 ] }} %}
< img src = " {{ asset( ' /relative/path/to/image.jpg ' ) | imagine_filter( ' my_thumb ' , runtimeConfig ) }} " />Ou, pour un modèle basé sur PHP, utilisez :
<?php
$ runtimeConfig = array (
" thumbnail " => array (
" size " => array ( 50 , 50 )
)
);
?>
<img src=" <?php $ this [ ' imagine ' ]-> filter ( ' /relative/path/to/image.jpg ' , ' my_thumb ' , $ runtimeConfig ) ?> " />Parfois, vous devez résoudre le chemin de l'image renvoyé par ce bundle pour une image filtrée. Ceci peut facilement être réalisé en utilisant le binaire de la console Symfony ou par programme à partir d'un contrôleur ou d'un autre morceau de code.
Vous pouvez résoudre l'URL d'une image à l'aide de la commande de console liip:imagine:cache:resolve . Le seul argument obligatoire est un ou plusieurs chemins d'image relatifs (qui doivent être séparés par un espace).
$ php bin/console liip:imagine:cache:resolve relative/path/to/image1.jpg relative/path/to/image2.jpg De plus, vous pouvez utiliser l'option --filter pour spécifier le filtre que vous souhaitez résoudre (si l'option --filter est omise, tous les filtres disponibles seront résolus).
$ php bin/console liip:imagine:cache:resolve relative/path/to/image1.jpg --filter=my_thumb Vous pouvez résoudre l'URL de l'image dans votre code à l'aide de la méthode getBrowserPath du service liip_imagine.cache.manager . En supposant que le service soit déjà attribué à une variable appelée $imagineCacheManager , vous exécuterez :
$ imagineCacheManager -> getBrowserPath ( ' /relative/path/to/image.jpg ' , ' my_thumb ' ); Souvent, vous devez effectuer cette opération dans un contrôleur. En supposant que votre contrôleur hérite du contrôleur Symfony de base, vous pouvez profiter de la méthode get héritée pour demander le service liip_imagine.cache.manager , à partir duquel vous pouvez appeler getBrowserPath sur un chemin d'image relatif pour obtenir son emplacement résolu.
/** @var CacheManager */
$ imagineCacheManager = $ this -> get ( ' liip_imagine.cache.manager ' );
/** @var string */
$ resolvedPath = $ imagineCacheManager -> getBrowserPath ( ' /relative/path/to/image.jpg ' , ' my_thumb ' );Cet ensemble fournit un ensemble de filtres intégrés et vous pouvez également facilement définir vos propres filtres. Référencez le chapitre sur les filtres de notre documentation.
Si vous devez utiliser vos « ensembles de filtres » définis à partir de votre contrôleur, vous pouvez récupérer le FilterService de cet ensemble à partir du conteneur de services pour faire le gros du travail à votre place.
<?php
class MyController extends Controller
{
public function indexAction ()
{
/** @var FilterService */
$ imagine = $ this
-> container
-> get ( ' liip_imagine.service.filter ' );
// 1) Simple filter, OR
$ resourcePath = $ imagine -> getUrlOfFilteredImage ( ' uploads/foo.jpg ' , ' my_thumb ' );
// 2) Runtime configuration
$ runtimeConfig = [
' thumbnail ' => [
' size ' => [ 200 , 200 ]
],
];
$ resourcePath = $ imagine -> getUrlOfFilteredImageWithRuntimeFilters (
' uploads/foo.jpg ' ,
' my_thumb ' ,
$ runtimeConfig
);
// ..
}
}
?> Par défaut, le répertoire web/ de Symfony est enregistré en tant que racine de données à partir de laquelle charger les ressources. Pour de nombreuses installations, cela sera suffisant, mais vous devrez parfois charger des images depuis d'autres emplacements. Pour ce faire, vous devez définir le paramètre data_root dans votre configuration (souvent situé dans app/config/config.yml ).
liip_imagine :
loaders :
default :
filesystem :
data_root : /path/to/source/images/dir À partir de la version 1.7.2 vous pouvez enregistrer plusieurs chemins racine de données et le localisateur de fichiers recherchera chacun le fichier demandé.
liip_imagine :
loaders :
default :
filesystem :
data_root :
- /path/foo
- /path/bar À partir de la version 1.7.3 vous demandez que les chemins de ressources publics de tous les bundles enregistrés soient automatiquement enregistrés en tant que racines de données. Cela vous permet de charger des ressources à partir des dossiers Resources/public qui résident dans les bundles chargés. Pour activer cette fonctionnalité, définissez l'option de configuration bundle_resources.enabled sur true .
liip_imagine :
loaders :
default :
filesystem :
bundle_resources :
enabled : true Si vous souhaitez enregistrer certains dossiers Resource/public , mais pas tous, vous pouvez le faire en mettant sur liste noire les ensembles que vous ne souhaitez pas enregistrer ou en mettant sur liste blanche les ensembles que vous souhaitez enregistrer. Par exemple, pour mettre sur liste noire (et non enregistrer) les bundles « FooBundle » et « BarBundle », vous utiliserez la configuration suivante.
liip_imagine :
loaders :
default :
filesystem :
bundle_resources :
enabled : true
access_control_type : blacklist
access_control_list :
- FooBundle
- BarBundleAlternativement, si vous souhaitez mettre sur liste blanche (enregistrer uniquement) les bundles « FooBundle » et « BarBundle », vous utiliserez la configuration suivante.
liip_imagine :
loaders :
default :
filesystem :
bundle_resources :
enabled : true
access_control_type : whitelist
access_control_list :
- FooBundle
- BarBundle Les emplacements des images doivent être lisibles par votre serveur Web. Sur un système prenant en charge setfacl (tel que Linux/BSD), utilisez
HTTPDUSER= ` ps axo user,comm | grep -E ' [a]pache|[h]ttpd|[_]www|[w]ww-data|[n]ginx ' | grep -v root | head -1 | cut -d -f1 `
sudo setfacl -R -m u: " $HTTPDUSER " :rwX -m u: ` whoami ` :rwX /path/to/source/images/dir
sudo setfacl -dR -m u: " $HTTPDUSER " :rwX -m u: ` whoami ` :rwX /path/to/source/images/dirConsultez la documentation Symfony Permissions pour les commandes compatibles avec macOS et d'autres environnements.
Vous devez accorder l'accès en lecture à Apache en ajoutant ce qui suit à votre configuration Apache VHost
< VirtualHost *:80>
<!-- Rest of directives like DocumentRoot or ServerName -->
Alias /FavouriteAlias /path/to/source/images/dir
< Directory " /path/to/source/images/dir " >
AllowOverride None
Allow from All
</ Directory >
</ VirtualHost > Vous pouvez également placer la directive dans un fichier séparé de votre projet et l'inclure dans votre configuration Apache VHost. Par exemple, vous pouvez créer le fichier app/config/apache/photos.xml et ajouter ce qui suit à votre fichier VHost
< VirtualHost *:80>
<!-- Rest of directives like DocumentRoot or ServerName -->
Include "/path/to/your/project/app/config/apache/photos.xml"
</ VirtualHost >Cette méthode conserve le fichier avec le reste de votre code, vous permettant de le modifier facilement ou de créer différents fichiers de configuration dépendant de l'environnement.
Une fois que vous avez correctement configuré Apache, le chemin relatif vers une image avec le chemin absolu suivant /path/to/source/images/dir/logo.png doit être /FavouriteAlias/logo.png .
Pour des informations plus détaillées sur les fonctionnalités de ce bundle, reportez-vous à la documentation.
