responsive pics
Version 1.8.3
ResponsivePics ist ein WordPress-Plugin, das es Autoren von WordPress-Themes ermöglicht, die Größe von Bildern * in responsiven Layouts automatisch zu ändern.
*ReponsivePics verarbeitet keine Bilder im WordPress-Wysiwig-Editor, es ist nur für Theme-Autoren nützlich, die Bilder oder Fotos in ihren Themes verwenden. Es verarbeitet Retina- oder HDPI-Bilder automatisch über Medienabfragen.
Eine vollständige Dokumentation und Beispiele finden Sie unter: responsive.pics
| Voraussetzung | So überprüfen Sie |
|---|---|
| PHP >= 5.6.x | php -v |
| Wordpress >= 3.5.x | wp core version |
| WP-Cron aktiviert oder ein echter Cron-Job eingerichtet | test WP-Cron |
Sie können dieses Plugin über die Befehlszeile oder das WordPress-Admin-Panel installieren.
Wenn Sie Composer zum Verwalten von WordPress verwenden, fügen Sie ResponsivePics zu den Abhängigkeiten Ihres Projekts hinzu.
composer require clarifynl/responsive-picsAnschließend aktivieren Sie das Plugin über wp-cli.
wp plugin activate responsive-pics Derzeit werden das <picture> -Element und srcset und sizes Attribute für das <img> -Element in allen modernen Browsern außer Internet Explorer 11 unterstützt.
Um die Unterstützung des Bildelements und der damit verbundenen Funktionen in Browsern zu ermöglichen, die diese noch nicht unterstützen, können Sie eine Polyfüllung verwenden. Wir empfehlen die Verwendung von Picturefill.
Um Picturefill als Knotenmodul in Ihrem WordPress-Theme zu installieren, führen Sie den folgenden Befehl in Ihrem Theme-Verzeichnis aus:
npm install --save picturefill
yarn add picturefill
Und importieren Sie das Paket in die globale Javascript-Datei Ihres Themes: import 'picturefill';
ResponsivePics verwendet die folgenden Standardvariablen:
| Variable | Typ | Standard | Definition |
|---|---|---|---|
$columns | Nummer | 12 | Die Anzahl der Spalten, die Ihr Rasterlayout verwendet |
$gutter | Nummer | 30 | Die Bundstegbreite in Pixel (Abstand zwischen den Rasterspalten) |
$breakpoints | Array | ['xs' => 0, 'sm' => 576, 'md' => 768, 'lg' => 992, 'xl' => 1200, 'xxl' => 1400] | Die Medienabfrage-Haltepunkte, die ResponsivePics zum Erstellen und Bereitstellen Ihrer Bildquellen verwendet |
$grid_widths | Array | ['xs' => 576, 'sm' => 540, 'md' => 720, 'lg' => 960, 'xl' => 1140, 'xxl' => 1320] | Die maximale Breite Ihres Layouts in Pixeln, die ResponsivePics zum Ändern der Größe Ihrer Bilder verwendet |
$max_width_factor | Nummer | 2 | Der maximale Faktor der Breite, der zum Ändern der Größe und zum Zuschneiden der Höhe einer Bildquelle verwendet werden soll |
$lazyload_class | Zeichenfolge | lazyload | Die CSS-Klasse, die dem img -Tag hinzugefügt werden soll, wenn lazyload aktiviert ist |
$lqip_width | Nummer | 100 | Die Bildbreite, die für das LQIP (Bildplatzhalter mit niedriger Qualität) verwendet werden soll. |
$lqip_class | Zeichenfolge | blur-up | Die CSS-Klasse, die dem img -Tag hinzugefügt werden soll, wenn LQIP (Bildplatzhalter mit niedriger Qualität) aktiviert ist |
$image_quality | Nummer | 90 | Die Bildkomprimierungsqualität in Prozent, die im WP_Image_Editor bei der Größenänderung von Bildern verwendet wird |
$wp_rest_cache | Boolescher Wert | false | Ob der Cache in den Antwortheadern der WP Rest API aktiviert werden soll |
$wp_rest_cache_duration | Nummer | 3600 | Die Cache-Dauer (max-age) des WP Rest API Cache-Control-Headers in Sekunden |
Standardmäßig verwendet ResponsivePics die Bootstrap 4 SCSS-Variablen zum Definieren von:
Die Anzahl der Rasterspalten : $grid-columns: 12;
Die Rasterstegbreite in Pixel: $grid-gutter-width: 30px;
Die Rasterhaltepunkte in Pixel:
$grid-breakpoints : (
xs : 0 ,
sm : 576 px ,
md : 768 px ,
lg : 992 px ,
xl : 1200 px ,
xxl : 1400 px
);Und die maximalen Breiten der Container in Pixel:
$container-max-widths : (
sm : 540 px ,
md : 720 px ,
lg : 960 px ,
xl : 1140 px ,
xxl : 1320 px
); Hinweis: ResponsivePics fügt für Sie die maximale Breite xs Containers (= 576) hinzu, basierend auf dem Standard-SM-Raster-Haltepunkt (= 576px).
Wenn Sie die Bootstrap-Standardeinstellungen angepasst haben oder ein anderes Rastersystem (Foundation, Materialise usw.) verwenden oder sogar zusätzliche Haltepunkte und Containerbreiten hinzufügen möchten, können Sie Ihre eigenen Rastervariablen an die ResponsivePics-Bibliothek übergeben.
Fügen Sie diese Zeilen zur „functions.php“ Ihres Themes hinzu und prüfen Sie, ob die ResponsivePics -Klasse vorhanden ist:
/*
* 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 );
}Sie können alle in ResponsivePics verwendeten Variablen abrufen, indem Sie eine dieser Hilfsfunktionen ausführen:
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 Um ein responsives <img> -Element in Ihre Vorlage einzufügen, verwenden Sie die Funktion get_image oder den API-Endpunkt responsive-pics/v1/image mit den verfügbaren Parametern.
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>
| Parameter | Typ | Erforderlich | Standard | Definition |
|---|---|---|---|---|
| Ausweis | Nummer | Ja | Die WordPress-Bild-ID (z. B. 1). | |
| Größen | Zeichenfolge | Ja | Eine durch Kommas getrennte Zeichenfolge mit bevorzugten Bildgrößen (z. B. 'xs-12, sm-6, md-4, lg-3' ). Weitere Informationen finden Sie im Abschnitt „Größen“. | |
| Ernte | Zahl/Zeichenfolge | optional | false | Ein Zuschneidefaktor der Breite für die gewünschte Höhe im Standardbereich von 0-2 (z. B. 0.75 ) mit (optionalen) Zuschneidepositionen (z. B. 0.75|ct ). Weitere Informationen finden Sie im Abschnitt „Zuschneiden“. |
| Klassen | Zeichenfolge | optional | null | Eine durch Kommas getrennte Zeichenfolge zusätzlicher CSS-Klassen, die Sie dem img-Element hinzufügen möchten (z. B. 'my_img_class' oder 'my_img_class, my_second_img_class' ). |
| Lazyload | Boolescher Wert/Zeichenfolge | optional | false | Bei true werden lazyload Klassen und Data-Srcset-Attribute aktiviert. Wenn native “ aktiviert ist, wird das native loading="lazy" -Attribut aktiviert. Weitere Informationen finden Sie im Abschnitt „Lazyloading“. |
| lqip | Boolescher Wert | optional | false | Wenn true werden LQIP -Klassen und das src-Attribut aktiviert. Weitere Informationen finden Sie im Abschnitt LQIP. |
Um die responsiven <img> -Daten in Ihrem Theme abzurufen, können Sie die Funktion get_image_data oder den API-Endpunkt responsive-pics/v1/image-data mit den verfügbaren Parametern id , sizes , crop , classes , lazyload und lqip verwenden.
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>
Dadurch wird ein Array zurückgegeben, das die verfügbaren Bildquellen pro Haltepunkt, Alternativtext, MIME-Typ, boolesche Werte für Alphakanal und Lazyload, eine URL für das LQIP-Bild und ein Array für die CSS-Klassen enthält.
[
' sources ' => ( array ) $ sources ,
' alt ' => ( string ) $ alt ,
' mimetype ' => ( string ) $ mime_type ,
' alpha ' => ( bool ) $ alpha ,
' lazyload ' => ( bool ) $ lazyload ,
' lqip ' => ( string ) $ lqip ,
' classes ' => ( array ) $ classes
]; Um ein responsives <picture> -Element in Ihre Vorlage einzufügen, verwenden Sie die Funktion get_picture oder den API-Endpunkt responsive-pics/v1/picture mit den verfügbaren Parametern.
ResponsivePics:: get_picture (id, sizes, classes, lazyload, intrinsic); GET /wp-json/responsive-pics/v1/picture/<id>?sizes=<sizes>&classes=<classes>&lazyload=<lazyload>&intrinsic=<intrinsic>
| Parameter | Typ | Erforderlich | Standard | Definition |
|---|---|---|---|---|
| Ausweis | Nummer | Ja | Die WordPress-Bild-ID (z. B. 1). | |
| Größen | Zeichenfolge | Ja | Eine durch Kommas getrennte Zeichenfolge mit bevorzugten Bildgrößen (z. B. 'xs-12, sm-6, md-4, lg-3' ). Weitere Informationen finden Sie im Abschnitt „Größen“. | |
| Klassen | Zeichenfolge | optional | null | Eine durch Kommas getrennte Zeichenfolge zusätzlicher CSS-Klassen, die Sie dem Bildelement hinzufügen möchten (z. B. 'my_picture_class' oder 'my_picture_class, my_second_picture_class' ). |
| Lazyload | Boolescher Wert/Zeichenfolge | optional | false | Bei true werden lazyload Klassen und Data-Srcset-Attribute aktiviert. Wenn native “ aktiviert ist, wird das native loading="lazy" -Attribut aktiviert. Weitere Informationen finden Sie im Abschnitt „Lazyloading“. |
| intrinsisch | Boolescher Wert | optional | false | Bei true werden intrinsic Klassen und Datenaspektverhältnisattribute aktiviert. Weitere Informationen finden Sie im Abschnitt „Intrinsisches Seitenverhältnis“. |
Zum Abrufen der responsiven <picture> -Daten in Ihrem Theme können Sie die Funktion get_picture_data oder den API-Endpunkt responsive-pics/v1/picture-data mit den verfügbaren Parametern id , sizes , classes , lazyload und intrinsic verwenden.
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>
Dadurch wird ein Array zurückgegeben, das die verfügbaren Bildquellen pro Haltepunkt, Alternativtext, Mime-Typ, boolesche Werte für Alphakanal und intrinsisch, ein Array für die Bild-CSS-Klassen und ein Array für die IMG-CSS-Klassen enthält.
[
' 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
]; Um ein responsives Hintergrundbild in Ihre Vorlage einzufügen, verwenden Sie die Funktion get_background oder den API-Endpunkt responsive-pics/v1/background mit den verfügbaren Parametern.
ResponsivePics:: get_background (id, sizes, classes); GET /wp-json/responsive-pics/v1/background/<id>?sizes=<sizes>&classes=<classes>
| Parameter | Typ | Erforderlich | Standard | Definition |
|---|---|---|---|---|
| Ausweis | Nummer | Ja | Die WordPress-Bild-ID (z. B. 1). | |
| Größen | Zeichenfolge | Ja | Eine durch Kommas getrennte Zeichenfolge mit bevorzugten Bildgrößen (z. B. 'xs-12, sm-6, md-4, lg-3' ). Weitere Informationen finden Sie im Abschnitt „Größen“. | |
| Klassen | Zeichenfolge | optional | null | Eine durch Kommas getrennte Zeichenfolge zusätzlicher CSS-Klassen, die Sie dem Hintergrundelement hinzufügen möchten (z. B. 'my_bg_class' oder 'my_bg_class, my_second_bg_class' ). |
Zum Abrufen der responsiven Hintergrundbilddaten in Ihrem Theme können Sie die Funktion get_background_data oder den API-Endpunkt responsive-pics/v1/background-data mit den verfügbaren Parametern id , sizes classes verwenden.
ResponsivePics:: get_background_data (id, sizes, classes); GET /wp-json/responsive-pics/v1/background-data/<id>?sizes=<sizes>&classes=<classes>
Dadurch wird ein Array zurückgegeben, das die verfügbaren Hintergrundbildquellen pro Haltepunkt, Alternativtext, MIME-Typ, einen booleschen Wert, wenn das Bild einen Alphakanal hat, eine ID für den Hintergrund und ein Array für die Hintergrund-CSS-Klassen enthält.
[
' sources ' => ( array ) $ sources ,
' alt ' => ( string ) $ alt ,
' mimetype ' => ( string ) $ mime_type ,
' alpha ' => ( bool ) $ alpha ,
' id ' => ( string ) $ id ,
' classes ' => ( array ) $ classes
];Die folgenden Bilddateiformate werden unterstützt:
| Dateiformat | MIME-Typ | Eigenschaften |
|---|---|---|
| jp(e)g | Bild/JPEG | |
| webp | Bild/webp | Erfordert WordPress-Version 5.8 oder höher. |
| png | Bild/PNG | Wenn das PNG einen Alphakanal enthält, wird dem Bildelement eine zusätzliche 'has-alpha' -Klasse für zusätzliches Styling hinzugefügt. |
| GIF | Bild/GIF | Wenn das GIF animiert ist (es wird geprüft, ob mehrere Header-Frames vorhanden sind), wird keine Größenänderung oder Beschneidung des Bildes vorgenommen, um zu verhindern, dass die Animation verworfen wird. |
Alle anderen Bildformate werden weder in der Größe geändert noch beschnitten.
Für jede Bildgröße steht im Parameter sizes die folgende Syntax zur Verfügung:
breakpoint:width| Parameter | Typ | Erforderlich | Standard | Definition |
|---|---|---|---|---|
| Haltepunkt | Zahl oder Zeichenfolge | Ja | Wenn nicht definiert und width eine Zahl ist, entspricht der Haltepunkt der Breite. Wenn nicht definiert und width eine Spaltendefinition ist, ist der Haltepunkt der entsprechende Haltepunkt (z. B. wenn die Breite 'xs-8' ist, ist der Haltepunkt 'xs' ). | |
| Breite | Zahl oder Zeichenfolge | Ja | Eine Spaltendefinition ist ein Schlüssel in $grid_widths plus einem Bindestrich und einer Spaltenbereichsnummer (z. B. 'xs-8' ).Wenn der Spaltenspannennummer das Suffix -full hinzugefügt wird (z. B. 'xs-8-full' ), wird die Spaltenbreite als Prozentsatz der $grid_width berechnet, jedoch als nächste passende $breakpoint Breite (wie in einer .container-fluid ).Sie können auch full als Span-Nummer (z. B. 'xs-full' ) für die volle Breite basierend auf der nächsten passenden $breakpoint Breite verwenden. |
Da das <picture> -Element und die Hintergrundbilder künstlerische Bilder unterstützen, steht für jede Bildgröße im Parameter sizes die folgende vollständige Syntax zur Verfügung:
breakpoint:width [/factor|height]|crop_x crop_yDie folgenden Parameter stehen in der Größensyntax zur Verfügung:
| Parameter | Typ | Erforderlich | Standard | Definition |
|---|---|---|---|---|
| Haltepunkt | Zahl oder Zeichenfolge | Ja | Wenn nicht definiert und width eine Zahl ist, entspricht der Haltepunkt der Breite. Wenn nicht definiert und width eine Spaltendefinition ist, ist der Haltepunkt der entsprechende Haltepunkt (z. B. wenn die Breite 'xs-8' ist, ist der Haltepunkt 'xs' ). | |
| Breite | Zahl oder Zeichenfolge | Ja | Die gewünschte (maximale) Breite des Bildes (z. B. 800 ). Eine Spaltendefinition ist ein Schlüssel in $grid_widths plus einem Bindestrich und einer Spaltenbereichsnummer (z. B. 'xs-8' ).Wenn der Spaltenspannennummer das Suffix -full hinzugefügt wird (z. B. 'xs-8-full' ), wird die Spaltenbreite als Prozentsatz der $grid_width berechnet, jedoch als nächste passende $breakpoint Breite (wie in einer .container-fluid ).Sie können auch full als Span-Nummer (z. B. 'xs-full' ) für die volle Breite basierend auf der nächsten passenden $breakpoint Breite verwenden. | |
| Höhe | Nummer | optional | Die gewünschte (maximale) Höhe des Bildes (z. B. 500 ). | |
| Faktor | Nummer | optional | Ein Crop-Faktor der Breite für die gewünschte Höhe im Standardbereich von 0-2 (z. B. 0.75 ). | |
| Crop_x | Zahl oder Zeichenfolge | optional | C | Beschneidungsposition in horizontaler Richtung (z. B. c ). Weitere Informationen finden Sie im Abschnitt „Zuschneiden“. |
| Crop_y | Zahl oder Zeichenfolge | optional | C | Beschneidungsposition in vertikaler Richtung (z. B. b ). Weitere Informationen finden Sie im Abschnitt „Zuschneiden“. |
Als gültige Zuschneidepositionen stehen folgende Optionen zur Verfügung:
In horizontaler Richtung (x) können Sie die folgenden Abkürzungen für die Zuschneideposition verwenden:
l : linksc : Mitter : richtigf : Brennpunkt (Weitere Informationen finden Sie im Abschnitt „Brennpunkt“).Und in vertikaler Richtung (y):
t : obenc : Mitteb : unten Wenn die vertikale Richtung nicht festgelegt ist, wird die horizontale Richtung x als Abkürzung behandelt:
c : Mitte Mittet : oben in der Mitter : rechte Mitteb : Mitte untenl : linke Mittef : Brennpunkt (Weitere Informationen finden Sie im Abschnitt „Brennpunkt“).Sie können auch Prozentsätze als gültige Zuschneidepositionssyntax verwenden:
75 10 : 75 % von links, 10 % von oben25 80 : 25 % von links, 80 % von oben50 100 : 50 % von links, 100 % von oben (entspricht center bottom ) In diesem Fall müssen sowohl die Koordinaten x als auch y übergeben werden.
Wenn Sie ein Bild zuschneiden, aber einen bestimmten Bildbereich im Blick behalten möchten, können Sie die Kurzformfunktion f(ocal) verwenden. Um diesen Schwerpunktbereich eines Bildes festzulegen, haben wir mehreren Ansichten des Wordpress-Medienframeworks eine Schnittstelle zur Schwerpunktauswahl hinzugefügt.
Wenn Sie in der Rasteransicht der Wordpress-Medienbibliothek auf eine Miniaturansicht klicken, wird das Modal Attachment details angezeigt. Dies ist die genaueste Ansicht zur Auswahl Ihres Schwerpunkts: 
Wenn Sie ein hervorgehobenes Bild auf einer Seite oder in einem Beitrag festlegen oder ersetzen, wird das Modal Featured image angezeigt. In dieser Ansicht können Sie Ihren Schwerpunkt in der Miniaturansicht oben in der rechten Seitenleiste auswählen: 
Wenn Sie ein Bild im WYSIWYG-Editor oder im Metafeld einer Seite oder eines Beitrags hochladen oder bearbeiten, wird das Modal Edit image angezeigt. In dieser Ansicht können Sie in der Miniaturansicht oben links Ihren Schwerpunkt auswählen: 
Es gibt drei Möglichkeiten, den Fokus eines Bildes über die Benutzeroberfläche festzulegen:
Durch die Verwendung einer dieser Optionen wird ein Post-Metaschlüssel mit dem Namen responsive_pics_focal_point zum Anhang hinzugefügt oder mit einem Array-Wert aktualisiert, der die x- und y-Koordinaten als Prozentsätze enthält:
[
' x ' => ' 86 ' ,
' y ' => ' 39 '
]Um diesen Wert an anderer Stelle in Ihrem Theme zu verwenden, können Sie ihn abrufen, indem Sie Folgendes aufrufen:
$ focal_point = get_post_meta ( $ attachment_id , ' responsive_pics_focal_point ' , true );ResponsivePics -Funktionsaufruf erfolgt, fügt diese Bibliothek mithilfe des Aktionsplaners die Aufgabe zum Ändern der Größe und/oder zum Zuschneiden von Bildern als Job zur Hintergrundprozesswarteschlange hinzu.Der Action Scheduler der Hintergrundverarbeitungsbibliothek verfügt über einen integrierten Verwaltungsbildschirm zum Überwachen, Debuggen und manuellen Auslösen geplanter Bildgrößenänderungsaufträge. Die Administrationsoberfläche ist erreichbar über:
Tools > Scheduled ActionsJeder Größenänderungsauftrag wird nach seiner WordPress-Bild-ID gruppiert
Wenn Sie das integrierte WP-Cron verwenden, verarbeitet die Hintergrundprozesswarteschlange nur alle Aufgaben bei jedem Seitenladevorgang.
Wenn Sie WP-Cron in Ihrem Setup deaktiviert haben und Ihren eigenen Cron-Job auf Ihrem Server verwenden, verwendet Action Scheduler das in diesem Cron-Job festgelegte Intervall, um den nächsten Job-Batch zu verarbeiten.
define ( ' DISABLE_WP_CRON ' , true ); Wenn Sie wie wir Trellis verwenden ❤️, ist das Standard-Cron-Intervall auf alle 15 Minuten eingestellt.
Sie können dies beispielsweise auf 1 Minute überschreiben, indem Sie die Variable cron_interval (oder cron_interval_multisite für Multisite) pro WordPress-Site auf */1 setzen:
In zum Beispiel 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 'Vergessen Sie nicht, Ihren Server neu bereitzustellen, nachdem Sie diesen Wert geändert haben.
Wenn während der Größenänderung ein Fehler auftritt oder die Syntax ungültig ist, zeigt ResponsivePics einen Fehler an oder gibt ihn zurück.
ResponsivePics-Fehler - Haltepunkt xxs ist weder definiert noch eine Zahl
{
"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
}
}Mit den folgenden Aktionen können Sie sich in die Zeitleiste des Bildgrößenänderungsprozesses einklinken. Sie können sie in der Datei „functions.php“ Ihres Themes platzieren.
responsive_pics_request_scheduledDiese Aktion wird ausgelöst, wenn ResponsivePics eine neue Anforderung zur Bildgrößenänderung an die ActionScheduler-Warteschlange geplant hat.
do_action ( ' responsive_pics_request_scheduled ' , ( int ) $ post_id , ( array ) $ resize_request ); $post_id
(Ganzzahl) Die Anhang-ID
$resize_request
(Array) Die Parameter der Größenänderungsanforderung:
[
' 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_processedDiese Aktion wird ausgelöst, wenn der ActionScheduler eine Anforderung zur Bildgrößenänderung in der Warteschlange verarbeitet hat.
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) Die Anhang-ID
$Qualität
(int) Die angeforderte Bildqualität
$Breite
(int) Die angeforderte Bildbreite
$Höhe
(int) Die angeforderte Bildhöhe
$ernte
(Array) Die angeforderten Bildausschnittpositionen in Prozent:
[
' x ' => ( int ) The horizontal crop position as percentage,
' y ' => ( int ) The vertical crop position as percentage
] $Verhältnis
(float) Das angeforderte Bildverhältnis
$resize_path
(string) Der angeforderte Bilddateipfad
responsive_pics_file_saved_localDiese Aktion wird ausgelöst, wenn ResponsivePics eine Bilddatei mit geänderter Größe erfolgreich lokal gespeichert hat.
do_action ( ' responsive_pics_file_saved_local ' , ( int ) $ post_id , ( array ) $ file ); $post_id
(int) Die Anhang-ID
$datei
(Array) Die gespeicherte Datei mit:
[
' 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_uploadedDiese Aktion wird ausgelöst, wenn WP Offload Media die Bilddatei mit geänderter Größe in Ihren S3-Speicher hochgeladen hat.
do_action ( ' responsive_pics_file_s3_uploaded ' , ( int ) $ post_id , ( array ) $ file ); $post_id
(int) Die Anhang-ID
$datei
(Array) Die von S3 hochgeladene Datei enthält:
[
' 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_localDiese Aktion wird ausgelöst, wenn ResponsivePics eine Bilddatei mit geänderter Größe erfolgreich lokal gelöscht hat.
do_action ( ' responsive_pics_file_deleted_local ' , ( int ) $ post_id , ( string ) $ file ); $post_id
(int) Die Anhang-ID
$datei
(string) Der Pfad der gelöschten Bilddatei
responsive_pics_file_s3_deletedDiese Aktion wird ausgelöst, wenn WP Offload Media eine Bilddatei mit geänderter Größe in Ihrem S3-Speicher gelöscht hat.
do_action ( ' responsive_pics_file_s3_deleted ' , ( int ) $ post_id , ( array ) $ file_paths ); $post_id
(int) Die Anhang-ID
$file_paths
(Array) Die gelöschten Dateipfade mit geänderter Größe in Ihrem S3-Speicher.
Wenn Sie das WP Offload Media (Lite)-Plugin installiert und aktiviert haben, wird diese Bibliothek automatisch:
NOTIZ
Wenn die Option „Dateien vom Server entfernen“ in den Offload Media Lite -Einstellungen aktiviert ist, entfernt dieses Plugin KEINE von diesem Plugin generierten verkleinerten/zugeschnittenen Bilder!
Wenn die Option lazyload in den Funktionen get_picture oder get_image oder API-Endpunkten mit einem booleschen Wert true aktiviert wird, führt diese Bibliothek automatisch Folgendes aus:
<img> -Element eine lazyload Klasse hinzu.srcset mit data-srcset -Attribut für das Bild <source> oder die <img> -Elemente aus.Dadurch können Sie ein Lazy-Loading-Plugin wie Lazysizes verwenden.
Sie können auch Ihre eigene Lazyload-Klasse festlegen, indem Sie sie in der Functions.php Ihres Themes an die ResponsivePics -Bibliothek übergeben:
if ( class_exists ( ' ResponsivePics ' )) {
ResponsivePics:: setLazyLoadClass ( ' lazy ' );
}Um Lazysizes in Ihrem WordPress-Theme als Knotenmodul zu installieren, führen Sie den folgenden Befehl in Ihrem Theme-Verzeichnis aus:
npm install --save lazysizes
yarn add lazysizes
Und importieren Sie das Paket in die globale Javascript-Datei Ihres Themes:
import 'lazysizes' ; Beim Aktivieren lazyload mit einem Zeichenfolgenwert native führt diese Bibliothek automatisch Folgendes aus:
<img> -Element das native Attribut loading="lazy" hinzu. Wenn Sie die Option lqip in der Funktion get_image oder im API-Endpunkt /responsive-pics/v1/image aktivieren, führt diese Bibliothek automatisch Folgendes aus:
<img> -Element eine blur-up hinzu.<img> -Element ein Fallback src Attribut mit einem Platzhalterbild geringer Qualität und einer Standardbreite von 100 Pixeln hinzu.Dadurch können Sie Ihr Platzhalterbild formatieren, bevor das eigentliche Bild mit hoher Qualität geladen wird.
Sie können auch Ihre eigene lqip Klasse festlegen, indem Sie sie in der Functions.php Ihres Themes an die ResponsivePics -Bibliothek übergeben:
if ( class_exists ( ' ResponsivePics ' )) {
ResponsivePics:: setLqipClass ( ' blurred ' );
} Wenn die intrinsic Option in der Funktion get_picture oder im API-Endpunkt /responsive-pics/v1/picture aktiviert wird, führt diese Bibliothek automatisch Folgendes aus:
<picture> -Element und eine intrinsic__item -Klasse zum picture <img> -Element hinzu.data-aspectratio -Attribute zu den Bildelementen <source> und <img> mit dem berechneten Quellbildverhältnis hinzu.Dies ermöglicht es Ihnen, den für ein Bild benötigten Platz vorab zu belegen, indem Sie die Höhe aus der Bildbreite oder die Breite aus der Höhe mit einem intrinsischen Plugin wie der Lazysizes-Aspectratio-Erweiterung berechnen.
Um die Lazysizes-Aspectratio-Erweiterung in Ihrem WordPress-Theme zu verwenden, installieren Sie zunächst lazysizes als Knotenmodul, wie im Abschnitt „Lazyloading“ beschrieben, und importieren Sie die Erweiterung in die globale Javascript-Datei Ihres Themes:
import 'lazysizes/plugins/aspectratio/ls.aspectratio.js' ; Bitte melden Sie alle Probleme, die Sie mit der ResponsivePics -Bibliothek haben, bei Github.
ResponsivePics wird entwickelt und gepflegt von:
@monokai (Ersteller)
@twansparant (Ersteller)
Code und Dokumentation unterliegen dem Copyright 2017–2023 von Clarify.
Code veröffentlicht unter der MIT-Lizenz.
Unter Creative Commons veröffentlichte Dokumente.
