responsive pics
Version 1.8.3
ResponsivePics est un plugin WordPress qui permet aux auteurs de thèmes WordPress de redimensionner automatiquement les images * dans des mises en page réactives.
*ReponsivePics ne gère pas les images dans l'éditeur WordPress wysiwig, il n'est utile que pour les auteurs de thèmes qui utilisent des images ou des photos dans leurs thèmes. Il gère automatiquement les images rétine ou HDPI via des requêtes multimédias.
Pour une documentation complète et des exemples, visitez : responsive.pics
| Condition préalable | Comment vérifier |
|---|---|
| PHP >= 5.6.x | php -v |
| WordPress >= 3.5.x | wp core version |
| WP-Cron activé ou une véritable tâche cron configurée | test WP-Cron |
Vous pouvez installer ce plugin via la ligne de commande ou le panneau d'administration WordPress.
Si vous utilisez Composer pour gérer WordPress, ajoutez ResponsivePics aux dépendances de votre projet.
composer require clarifynl/responsive-picsActivez ensuite le plugin via wp-cli.
wp plugin activate responsive-pics Actuellement, l'élément <picture> et les attributs srcset et sizes sur l'élément <img> sont pris en charge dans tous les navigateurs modernes à l'exception d' Internet Explorer 11 .
Afin d'activer la prise en charge de l'élément image et des fonctionnalités associées dans les navigateurs qui ne les prennent pas encore en charge, vous pouvez utiliser un polyfill. Nous vous recommandons d'utiliser Picturefill.
Pour installer Picturefill dans votre thème wordpress en tant que module de nœud, exécutez la commande suivante depuis le répertoire de votre thème :
npm install --save picturefill
yarn add picturefill
Et importez le package dans le fichier javascript global de votre thème : import 'picturefill';
ResponsivePics utilise les variables par défaut suivantes :
| Variable | Taper | Défaut | Définition |
|---|---|---|---|
$columns | nombre | 12 | Le nombre de colonnes utilisées par votre disposition de grille |
$gutter | nombre | 30 | La largeur de la gouttière en pixels (espace entre les colonnes de la grille) |
$breakpoints | tableau | ['xs' => 0, 'sm' => 576, 'md' => 768, 'lg' => 992, 'xl' => 1200, 'xxl' => 1400] | Les points d'arrêt de requête multimédia que ResponsivePics utilisera pour créer et servir vos sources d'images |
$grid_widths | tableau | ['xs' => 576, 'sm' => 540, 'md' => 720, 'lg' => 960, 'xl' => 1140, 'xxl' => 1320] | Les largeurs maximales de votre mise en page en pixels que ResponsivePics utilisera pour redimensionner vos images |
$max_width_factor | nombre | 2 | Le facteur maximum de largeur à utiliser pour redimensionner et recadrer la hauteur d'une source d'image |
$lazyload_class | chaîne | lazyload | La classe CSS à ajouter sur la balise img lorsque lazyload est activé |
$lqip_width | nombre | 100 | La largeur de l'image à utiliser pour le LQIP (espace réservé pour l'image de basse qualité) |
$lqip_class | chaîne | blur-up | La classe CSS à ajouter sur la balise img lorsque LQIP (espace réservé pour l'image de basse qualité) est activé |
$image_quality | nombre | 90 | La qualité de compression de l'image en pourcentage utilisée dans WP_Image_Editor lors du redimensionnement des images |
$wp_rest_cache | booléen | false | S'il faut activer le cache dans les en-têtes de réponse de l'API WP Rest |
$wp_rest_cache_duration | nombre | 3600 | La durée du cache (âge maximum) en secondes de l'en-tête Cache-Control de l'API WP Rest |
Par défaut, ResponsivePics utilisera les variables Bootstrap 4 SCSS pour définir :
Le nombre de colonnes de la grille : $grid-columns: 12;
La largeur de la gouttière de la grille en pixels : $grid-gutter-width: 30px;
Les points d'arrêt de la grille en pixels :
$grid-breakpoints : (
xs : 0 ,
sm : 576 px ,
md : 768 px ,
lg : 992 px ,
xl : 1200 px ,
xxl : 1400 px
);Et les largeurs maximales des conteneurs en pixels :
$container-max-widths : (
sm : 540 px ,
md : 720 px ,
lg : 960 px ,
xl : 1140 px ,
xxl : 1320 px
); Remarque : ResponsivePics ajoutera la largeur maximale du conteneur xs (= 576), en fonction du point d'arrêt par défaut de la grille sm (= 576 px).
Si vous avez personnalisé les valeurs par défaut du bootstrap ou si vous utilisez un système de grille différent (Foundation, Materialise, etc.), ou même si vous souhaitez ajouter des points d'arrêt et des largeurs de conteneur supplémentaires, vous pouvez transmettre vos propres variables de grille à la bibliothèque ResponsivePics.
Ajoutez ces lignes au fichier function.php de votre thème et assurez-vous de vérifier si la classe ResponsivePics existe :
/*
* Set ResponsivePics variables
*/
if ( class_exists ( ' ResponsivePics ' )) {
ResponsivePics:: setColumns ( 12 );
ResponsivePics:: setGutter ( 30 );
ResponsivePics:: setBreakPoints ([
' xs ' => 0 ,
' sm ' => 576 ,
' md ' => 768 ,
' lg ' => 992 ,
' xl ' => 1200 ,
' xxl ' => 1400 ,
' xxxl ' => 1600 ,
' xxxxl ' => 1920
]);
ResponsivePics:: setGridWidths ([
' xs ' => 576 ,
' sm ' => 768 ,
' md ' => 992 ,
' lg ' => 1200 ,
' xl ' => 1400 ,
' xxl ' => 1600 ,
' xxxl ' => 1920
]);
ResponsivePics:: setMaxWidthFactor ( 4 );
ResponsivePics:: setLazyLoadClass ( ' lozad ' );
ResponsivePics:: setLqipWidth ( 200 );
ResponsivePics:: setLqipClass ( ' blurred ' );
ResponsivePics:: setImageQuality ( 85 );
ResponsivePics:: setRestApiCache ( true );
ResponsivePics:: setRestApiCacheDuration ( 86400 );
}Vous pouvez récupérer toutes les variables utilisées dans ResponsivePics en exécutant l'une de ces fonctions d'assistance :
ResponsivePics:: getColumns (); // Will return $columns
ResponsivePics:: getGutter (); // Will return $gutter
ResponsivePics:: getBreakpoints (); // Will return $breakpoints
ResponsivePics:: getGridWidths (); // Will return $grid_widths
ResponsivePics:: getMaxWidthFactor (); // Will return $max_width_factor
ResponsivePics:: getLqipWidth (); // Will return $max_width_factor
ResponsivePics:: getLazyLoadClass (); // Will return $lazyload_class
ResponsivePics:: getLqipWidth (); // Will return $lqip_width
ResponsivePics:: getLqipClass (); // Will return $lqip_class
ResponsivePics:: getImageQuality (); // Will return $image_quality
ResponsivePics:: getRestApiCache (); // Will return $wp_rest_cache
ResponsivePics:: getRestApiCacheDuration (); // Will return $wp_rest_cache_duration Pour insérer un élément réactif <img> dans votre modèle, utilisez la fonction get_image ou le point de terminaison de l'API responsive-pics/v1/image avec les paramètres disponibles.
ResponsivePics:: get_image (id, sizes, crop, classes, lazyload, lqip); GET /wp-json/responsive-pics/v1/image/<id>?sizes=<sizes>&crop=<crop>&classes=<classes>&lazyload=<lazyload>&lqip=<lqip>
| Paramètre | Taper | Requis | Défaut | Définition |
|---|---|---|---|---|
| identifiant | nombre | Oui | L'identifiant de l'image WordPress (par exemple 1). | |
| tailles | chaîne | Oui | Une chaîne de tailles d'image préférées séparées par des virgules (par exemple 'xs-12, sm-6, md-4, lg-3' ). Voir la section Tailles pour plus d'informations. | |
| recadrer | nombre/chaîne | facultatif | false | Un facteur de recadrage de la largeur pour la hauteur souhaitée dans la plage par défaut de 0-2 (par exemple 0.75 ) avec des positions de recadrage (facultatif) (par exemple 0.75|ct ). Voir la section Recadrage pour plus d'informations. |
| cours | chaîne | facultatif | null | Une chaîne de classes CSS supplémentaires séparées par des virgules que vous souhaitez ajouter à l'élément img (par exemple 'my_img_class' ou 'my_img_class, my_second_img_class' ). |
| chargement paresseux | booléen/chaîne | facultatif | false | Lorsque true active les classes lazyload et les attributs data-srcset. Lorsque native active l'attribut natif loading="lazy" . Voir la section Lazyloading pour plus d’informations. |
| lqip | booléen | facultatif | false | Lorsque true active les classes LQIP et l’attribut src. Voir la section LQIP pour plus d'informations. |
Pour récupérer les données réactives <img> dans votre thème, vous pouvez utiliser la fonction get_image_data ou le point de terminaison de l'API responsive-pics/v1/image-data avec les paramètres disponibles id , sizes , crop , classes , lazyload et lqip .
ResponsivePics:: get_image_data (id, sizes, crop, classes, lazyload, lqip); GET /wp-json/responsive-pics/v1/image-data/<id>?sizes=<sizes>&crop=<crop>&classes=<classes>&lazyload=<lazyload>&lqip=<lqip>
Cela renverra un tableau contenant les sources d'images disponibles par point d'arrêt, le texte alternatif, le type MIME, les valeurs booléennes pour le canal alpha et lazyload, une URL pour l'image lqip et un tableau pour les classes CSS.
[
' sources ' => ( array ) $ sources ,
' alt ' => ( string ) $ alt ,
' mimetype ' => ( string ) $ mime_type ,
' alpha ' => ( bool ) $ alpha ,
' lazyload ' => ( bool ) $ lazyload ,
' lqip ' => ( string ) $ lqip ,
' classes ' => ( array ) $ classes
]; Pour insérer un élément <picture> réactif dans votre modèle, utilisez la fonction get_picture ou le point de terminaison de l'API responsive-pics/v1/picture avec les paramètres disponibles.
ResponsivePics:: get_picture (id, sizes, classes, lazyload, intrinsic); GET /wp-json/responsive-pics/v1/picture/<id>?sizes=<sizes>&classes=<classes>&lazyload=<lazyload>&intrinsic=<intrinsic>
| Paramètre | Taper | Requis | Défaut | Définition |
|---|---|---|---|---|
| identifiant | nombre | Oui | L'identifiant de l'image WordPress (par exemple 1). | |
| tailles | chaîne | Oui | Une chaîne de tailles d'image préférées séparées par des virgules (par exemple 'xs-12, sm-6, md-4, lg-3' ). Voir la section Tailles pour plus d'informations. | |
| cours | chaîne | facultatif | null | Une chaîne de classes CSS supplémentaires séparées par des virgules que vous souhaitez ajouter à l'élément image (par exemple 'my_picture_class' ou 'my_picture_class, my_second_picture_class' ). |
| chargement paresseux | booléen/chaîne | facultatif | false | Lorsque true active les classes lazyload et les attributs data-srcset. Lorsque native active l'attribut natif loading="lazy" . Voir la section Lazyloading pour plus d’informations. |
| intrinsèque | booléen | facultatif | false | Lorsque true les classes intrinsic et les attributs de rapport d'aspect des données sont activés. Voir la section Aspectratio intrinsèque pour plus d'informations. |
Pour récupérer les données réactives <picture> dans votre thème, vous pouvez utiliser la fonction get_picture_data ou le point de terminaison de l'API responsive-pics/v1/picture-data avec les paramètres disponibles id , sizes , classes , lazyload et intrinsic .
ResponsivePics:: get_picture_data (id, sizes, classes, lazyload, intrinsic); GET /wp-json/responsive-pics/v1/picture-data/<id>?sizes=<sizes>&classes=<classes>&lazyload=<lazyload>&intrinsic=<intrinsic>
Cela renverra un tableau contenant les sources d'images disponibles par point d'arrêt, texte alternatif, type MIME, valeurs booléennes pour le canal alpha et intrinsèque, un tableau pour les classes CSS d'images et un tableau pour les classes CSS img.
[
' sources ' => ( array ) $ sources ,
' alt ' => ( string ) $ alt ,
' mimetype ' => ( string ) $ mime_type ,
' alpha ' => ( bool ) $ alpha ,
' lazyload ' => ( bool ) $ lazyload ,
' intrinsic ' => ( bool ) $ intrinsic ,
' picture_classes ' => ( array ) $ picture_classes ,
' image_classes ' => ( array ) $ image_classes
]; Pour insérer une image d'arrière-plan réactive dans votre modèle, utilisez la fonction get_background ou le point de terminaison de l'API responsive-pics/v1/background avec les paramètres disponibles.
ResponsivePics:: get_background (id, sizes, classes); GET /wp-json/responsive-pics/v1/background/<id>?sizes=<sizes>&classes=<classes>
| Paramètre | Taper | Requis | Défaut | Définition |
|---|---|---|---|---|
| identifiant | nombre | Oui | L'identifiant de l'image WordPress (par exemple 1). | |
| tailles | chaîne | Oui | Une chaîne de tailles d'image préférées séparées par des virgules (par exemple 'xs-12, sm-6, md-4, lg-3' ). Voir la section Tailles pour plus d'informations. | |
| cours | chaîne | facultatif | null | Une chaîne de classes CSS supplémentaires séparées par des virgules que vous souhaitez ajouter à l'élément d'arrière-plan (par exemple 'my_bg_class' ou 'my_bg_class, my_second_bg_class' ). |
Pour récupérer les données d'image d'arrière-plan réactives dans votre thème, vous pouvez utiliser la fonction get_background_data ou le point de terminaison de l'API responsive-pics/v1/background-data avec les paramètres disponibles id , sizes et classes .
ResponsivePics:: get_background_data (id, sizes, classes); GET /wp-json/responsive-pics/v1/background-data/<id>?sizes=<sizes>&classes=<classes>
Cela renverra un tableau contenant les sources d'images d'arrière-plan disponibles par point d'arrêt, texte alternatif, type MIME, une valeur booléenne si l'image a un canal alpha, un identifiant pour l'arrière-plan et un tableau pour les classes CSS d'arrière-plan.
[
' sources ' => ( array ) $ sources ,
' alt ' => ( string ) $ alt ,
' mimetype ' => ( string ) $ mime_type ,
' alpha ' => ( bool ) $ alpha ,
' id ' => ( string ) $ id ,
' classes ' => ( array ) $ classes
];Les formats de fichiers image suivants sont pris en charge :
| Format de fichier | Type MIME | Propriétés |
|---|---|---|
| jp(e)g | image/jpeg | |
| webp | image/site Web | Nécessite Wordpress version 5.8 ou supérieure. |
| png | image/png | Lorsque le png contient un canal alpha , une classe supplémentaire 'has-alpha' sera ajoutée à l'élément d'image pour un style supplémentaire. |
| gif | image/gif | Lorsque le gif est animé (il vérifiera la présence de plusieurs images d'en-tête), aucun redimensionnement ou recadrage de l'image ne sera effectué pour éviter de supprimer l'animation. |
Tout autre format d’image ne sera ni redimensionné ni recadré.
La syntaxe suivante est disponible pour chaque taille d'image dans le paramètre sizes :
breakpoint:width| Paramètre | Taper | Requis | Défaut | Définition |
|---|---|---|---|---|
| point d'arrêt | nombre ou chaîne | Oui | S’il n’est pas défini et que width est un nombre, le point d’arrêt sera identique à la largeur. S'il n'est pas défini et que width est une définition de colonne, le point d'arrêt sera le point d'arrêt correspondant (par exemple, si la largeur est 'xs-8' , le point d'arrêt sera 'xs' ). | |
| largeur | nombre ou chaîne | Oui | Une définition de colonne est une clé dans $grid_widths plus un tiret et un numéro d'étendue de colonne (par exemple 'xs-8' ).Si le numéro d'étendue de la colonne est suffixé par -full (par exemple 'xs-8-full' ), la largeur de la colonne est calculée en pourcentage de $grid_width , mais comme la prochaine largeur $breakpoint correspondante (comme dans un .container-fluid ).Vous pouvez également utiliser full comme numéro de span (par exemple 'xs-full' ) pour la taille pleine largeur en fonction de la prochaine largeur $breakpoint correspondant. |
Étant donné que l'élément <picture> et les images d'arrière-plan prennent en charge les images artistiques, la syntaxe complète suivante est disponible pour chaque taille d'image dans le paramètre sizes :
breakpoint:width [/factor|height]|crop_x crop_yLes paramètres suivants sont disponibles dans la syntaxe des tailles :
| Paramètre | Taper | Requis | Défaut | Définition |
|---|---|---|---|---|
| point d'arrêt | nombre ou chaîne | Oui | S’il n’est pas défini et que width est un nombre, le point d’arrêt sera identique à la largeur. S'il n'est pas défini et que width est une définition de colonne, le point d'arrêt sera le point d'arrêt correspondant (par exemple, si la largeur est 'xs-8' , le point d'arrêt sera 'xs' ). | |
| largeur | nombre ou chaîne | Oui | La largeur souhaitée (max) de l'image (par exemple 800 ). Une définition de colonne est une clé dans $grid_widths plus un tiret et un numéro d'étendue de colonne (par exemple 'xs-8' ).Si le numéro d'étendue de la colonne est suffixé par -full (par exemple 'xs-8-full' ), la largeur de la colonne est calculée en pourcentage de $grid_width , mais comme la prochaine largeur $breakpoint correspondante (comme dans un .container-fluid ).Vous pouvez également utiliser full comme numéro de span (par exemple 'xs-full' ) pour la taille pleine largeur en fonction de la prochaine largeur $breakpoint correspondant. | |
| hauteur | nombre | facultatif | La hauteur souhaitée (max) de l'image (par exemple 500 ). | |
| facteur | nombre | facultatif | Un facteur de recadrage de la largeur pour la hauteur souhaitée dans la plage par défaut de 0-2 (par exemple 0.75 ). | |
| récolte_x | nombre ou chaîne | facultatif | c | Position de recadrage dans le sens horizontal (par exemple c ). Voir la section Recadrage pour plus d'informations. |
| crop_y | nombre ou chaîne | facultatif | c | Position de recadrage dans le sens vertical (par exemple b ). Voir la section Recadrage pour plus d'informations. |
Les options suivantes sont disponibles en tant que positions de recadrage valides :
Vous pouvez utiliser les raccourcis de position de recadrage suivants dans la direction horizontale (x) :
l : gauchec : centrer : à droitef : point focal (Voir la section Point Focal pour plus d'informations)Et dans la direction verticale (y) :
t : hautc : centreb : en bas Si la direction verticale n'est pas définie, la direction horizontale x sera traitée comme un raccourci :
c : centre centret : en haut au centrer : centre droitb : centre en basl : centre gauchef : point focal (Voir la section Point Focal pour plus d'informations)Vous pouvez également utiliser des pourcentages comme syntaxe de position de recadrage valide :
75 10 : 75% de gauche, 10% de haut25 80 : 25% de gauche, 80% de haut50 100 : 50 % depuis la gauche, 100 % depuis le haut (équivaut center bottom ) Dans ce cas, les coordonnées x et y doivent être transmises.
Lorsque vous souhaitez recadrer une image tout en gardant une certaine zone de l'image visible, vous pouvez utiliser la fonction de raccourci f(ocal) . Afin de définir cette zone focale d'une image, nous avons ajouté une interface de sélection de point focal à plusieurs vues du framework multimédia Wordpress.
Lorsque vous cliquez sur une vignette dans la vue en grille de la bibliothèque multimédia Wordpress, vous verrez le modal Attachment details . Ce sera la vue la plus précise pour sélectionner votre point focal : 
Lorsque vous définissez ou remplacez une image en vedette dans une page ou une publication, vous verrez le modal Featured image . Dans cette vue, vous pouvez sélectionner votre point focal dans la vignette en haut de la barre latérale droite : 
Lorsque vous téléchargez ou modifiez une image dans l'éditeur WYSIWYG ou un champ méta dans une page ou une publication, vous verrez le modal Edit image . Dans cette vue, vous pouvez sélectionner votre point focal dans la vignette en haut à gauche : 
Il existe 3 manières de définir le point focal d'une image avec l'interface :
En utilisant l'une de ces options, une clé méta de publication nommée responsive_pics_focal_point sera ajoutée ou mise à jour dans la pièce jointe avec une valeur de tableau contenant les coordonnées x et y sous forme de pourcentages :
[
' x ' => ' 86 ' ,
' y ' => ' 39 '
]Pour utiliser cette valeur ailleurs dans votre thème, vous pouvez la récupérer en appelant :
$ focal_point = get_post_meta ( $ attachment_id , ' responsive_pics_focal_point ' , true );ResponsivePics est effectué, cette bibliothèque ajoutera la tâche de redimensionnement et/ou de recadrage de l'image en tant que tâche à la file d'attente du processus en arrière-plan à l'aide d'Action Scheduler.La bibliothèque de traitement en arrière-plan Action Scheduler dispose d'un écran d'administration intégré pour la surveillance, le débogage et le déclenchement manuel des tâches de redimensionnement d'image planifiées. L'interface d'administration est accessible via :
Tools > Scheduled ActionsChaque travail de redimensionnement sera regroupé par son identifiant d'image WordPress
Lorsque vous utilisez WP-Cron intégré, la file d'attente des processus en arrière-plan ne traitera que les tâches à chaque chargement de page.
Si vous avez désactivé WP-Cron dans votre configuration et que vous utilisez votre propre tâche cron sur votre serveur, Action Scheduler utilisera l'intervalle défini dans cette tâche cron pour traiter le prochain lot de tâches.
define ( ' DISABLE_WP_CRON ' , true ); Si vous utilisez Trellis comme nous ❤️, l'intervalle cron par défaut est défini sur toutes les 15 minutes.
Vous pouvez remplacer cela par exemple par 1 minute en définissant la variable cron_interval (ou cron_interval_multisite pour multisite) par site wordpress sur */1 :
Dans par exemple trellis/group_vars/development/wordpress_sites.yml :
wordpress_sites :
example.com :
site_hosts :
- canonical : example.test
redirects :
- www.example.test
local_path : ../site # path targeting local Bedrock site directory (relative to Ansible root)
admin_email : [email protected]
multisite :
enabled : false
ssl :
enabled : false
provider : self-signed
cache :
enabled : false
cron_interval : ' */1 'N'oubliez pas de réapprovisionner votre serveur après avoir modifié cette valeur.
Si une erreur se produit pendant le processus de redimensionnement ou s'il y a une syntaxe invalide, ResponsivePics affichera ou renverra une erreur.
Erreurs ResponsivePics - le point d'arrêt xxs n'est ni défini ni un nombre
{
"code" : " responsive_pics_invalid " ,
"message" : " breakpoint xxs is neither defined nor a number " ,
"data" : {
"xs" : 0 ,
"sm" : 576 ,
"md" : 768 ,
"lg" : 992 ,
"xl" : 1200 ,
"xxl" : 1400
}
}Les actions suivantes vous permettent de vous connecter à la chronologie du processus de redimensionnement de l'image. Vous pouvez les placer dans le fichier function.php de votre thème.
responsive_pics_request_scheduledCette action se déclenche lorsque ResponsivePics a planifié une nouvelle demande de redimensionnement d'image dans la file d'attente ActionScheduler.
do_action ( ' responsive_pics_request_scheduled ' , ( int ) $ post_id , ( array ) $ resize_request ); $post_id
(entier) L'ID de la pièce jointe
$resize_request
(tableau) Les paramètres de la demande de redimensionnement :
[
' id ' => ( int ) The attachment ID ,
' quality ' => ( int ) The requested image quality,
' width ' => ( int ) The requested image width,
' height ' => ( int ) The requested image height,
' crop ' => ( array ) The requested image crop positions,
' ratio ' => ( float ) The requested image ratio,
' path ' => ( string ) The requested image file path,
' rest_route ' => ( string ) The requested rest api route
]responsive_pics_request_processedCette action se déclenche lorsque ActionScheduler a traité une demande de redimensionnement d'image dans la file d'attente.
do_action ( ' responsive_pics_request_processed ' , ( int ) $ post_id , ( int ) $ quality , ( int ) $ width , ( int ) $ height , ( array ) $ crop , ( float ) $ ratio , ( string ) $ resize_path , ( string ) $ rest_route ); $post_id
(int) L'ID de la pièce jointe
$qualité
(int) La qualité d'image demandée
$largeur
(int) La largeur de l'image demandée
$hauteur
(int) La hauteur de l'image demandée
$recadrage
(tableau) Les positions de recadrage de l'image demandées en pourcentage :
[
' x ' => ( int ) The horizontal crop position as percentage,
' y ' => ( int ) The vertical crop position as percentage
] rapport $
(float) Le rapport d'image demandé
$resize_path
(chaîne) Le chemin du fichier image demandé
responsive_pics_file_saved_localCette action se déclenche lorsque ResponsivePics a enregistré avec succès un fichier image redimensionné localement.
do_action ( ' responsive_pics_file_saved_local ' , ( int ) $ post_id , ( array ) $ file ); $post_id
(int) L'ID de la pièce jointe
$fichier
(tableau) Le fichier enregistré contenant :
[
' path ' => ( string ) The saved image filepath,
' file ' => ( string ) The saved image filename,
' width ' => ( int ) The saved image file width,
' height ' => ( int ) The saved image file height,
' mime-type ' => ( string ) The saved image file mime-type,
' filesize ' => ( int ) The saved image filesize
]responsive_pics_file_s3_uploadedCette action se déclenche lorsque WP Offload Media a téléchargé le fichier image redimensionné sur votre stockage S3.
do_action ( ' responsive_pics_file_s3_uploaded ' , ( int ) $ post_id , ( array ) $ file ); $post_id
(int) L'ID de la pièce jointe
$fichier
(tableau) Le fichier téléchargé S3 contenant :
[
' path ' => ( string ) The uploaded image filepath,
' file ' => ( string ) The uploaded image filename,
' width ' => ( int ) The uploaded image file width,
' height ' => ( int ) The uploaded image file height,
' mime-type ' => ( string ) The uploaded image file mime-type,
' filesize ' => ( int ) The uploaded image filesize
]responsive_pics_file_deleted_localCette action se déclenche lorsque ResponsivePics a supprimé avec succès un fichier image redimensionné localement.
do_action ( ' responsive_pics_file_deleted_local ' , ( int ) $ post_id , ( string ) $ file ); $post_id
(int) L'ID de la pièce jointe
$fichier
(chaîne) Le chemin du fichier image supprimé
responsive_pics_file_s3_deletedCette action se déclenche lorsque WP Offload Media a supprimé un fichier image redimensionné dans votre stockage S3.
do_action ( ' responsive_pics_file_s3_deleted ' , ( int ) $ post_id , ( array ) $ file_paths ); $post_id
(int) L'ID de la pièce jointe
$file_paths
(tableau) Les chemins de fichiers redimensionnés supprimés dans votre stockage S3.
Lorsque vous avez installé et activé le plugin WP Offload Media (Lite), cette bibliothèque automatiquement :
NOTE
Lorsque l'option Supprimer les fichiers du serveur est activée dans les paramètres Offload Media Lite , ce plugin ne supprimera PAS les images redimensionnées/recadrées générées par ce plugin !
Lors de l'activation de l'option lazyload dans les fonctions get_picture ou get_image ou les points de terminaison de l'API avec une valeur booléenne true , cette bibliothèque :
lazyload à l'élément <img> .srcset avec l'attribut data-srcset sur l'image <source> ou les éléments <img> .Cela vous permettra d'utiliser un plugin de chargement paresseux tel que Lazysizes.
Vous pouvez également définir votre propre classe lazyload en la transmettant à la bibliothèque ResponsivePics dans le fichier function.php de votre thème :
if ( class_exists ( ' ResponsivePics ' )) {
ResponsivePics:: setLazyLoadClass ( ' lazy ' );
}Pour installer Lazysizes dans votre thème wordpress en tant que module de nœud, exécutez la commande suivante depuis le répertoire de votre thème :
npm install --save lazysizes
yarn add lazysizes
Et importez le package dans le fichier javascript global de votre thème :
import 'lazysizes' ; Lors de l'activation lazyload avec une valeur de chaîne native , cette bibliothèque :
loading="lazy" à l'élément <img> . Lors de l'activation de l'option lqip dans la fonction get_image ou du point de terminaison de l'API /responsive-pics/v1/image , cette bibliothèque :
blur-up à l'élément <img> .src de secours sur l'élément <img> avec une image d'espace réservé de faible qualité avec une largeur par défaut de 100 px.Cela vous permettra de styliser votre image d'espace réservé avant que l'image réelle de haute qualité ne soit chargée.
Vous pouvez également définir votre propre classe lqip en la transmettant à la bibliothèque ResponsivePics dans le fichier function.php de votre thème :
if ( class_exists ( ' ResponsivePics ' )) {
ResponsivePics:: setLqipClass ( ' blurred ' );
} Lors de l'activation de l'option intrinsic dans la fonction get_picture ou le point de terminaison de l'API /responsive-pics/v1/picture , cette bibliothèque :
<picture> et une classe intrinsic__item à l'élément Picture <img> .data-aspectratio sur les éléments d'image <source> et <img> avec le rapport d'image source calculé.Cela vous permettra de préoccuper l'espace nécessaire à une image en calculant la hauteur à partir de la largeur de l'image ou la largeur à partir de la hauteur avec un plugin intrinsèque tel que l'extension lazysizes aspectratio.
Pour utiliser l' extension Lazysizes aspectratio dans votre thème wordpress, installez d'abord lazysizes en tant que module de nœud comme décrit dans la section Lazyloading et importez l'extension dans le fichier javascript global de votre thème :
import 'lazysizes/plugins/aspectratio/ls.aspectratio.js' ; Veuillez soumettre tout problème que vous rencontrez avec la bibliothèque ResponsivePics sur Github.
ResponsivePics est développé et maintenu par :
@monokai (créateur)
@twansparant (créateur)
Code et documentation protégés par copyright 2017-2023 par Clarify.
Code publié sous la licence MIT.
Documents publiés sous Creative Commons.
