0Vergrößertes Bild bei Mauszeiger in WordPress anzeigen

Als Teil der jüngsten Verbesserungen, die ich an verschiedenen Websites vorgenommen habe, wollte ich Bilder in Galerien vergrößern, wenn sie mit der Maus darüber bewegt werden. Mach das mit Basic CSS ist ziemlich trivial, aber ich wollte nicht nur das Originalbild erweitern, Ich wollte, dass der Browser ein neues schnappt (größer) Bild auch…

Alle Bilder stellen bereits ein vollständiges src-Set bereit, also musste ich nur ein wenig jQuery verwenden (was ohnehin schon von WordPress geladen wird) um die Zielanzeigegröße zu ändern, damit der Browser ein größeres Bild zieht. Das Schöne ist, dass die CSS funktioniert sofort, sodass Sie ein größeres Bild mit der Originaldatei erhalten, und dann verbessert sich die Qualität einen Bruchteil einer Sekunde später, wenn die Datei mit höherer Auflösung geladen wird.

Das CSS

Das CSS Ich habe es wie folgt verwendet. Ich habe dies einfach der style.css meines Themes hinzugefügt (oder besser untergeordnetes Thema – immer eine gute Idee, eines zu verwenden)

dt.gallery-icon a img.size-thumbnail:schweben
{
verwandeln: Rahmen(3.0);
}

Anmerkung (1) - obenstehendes CSS gilt nur für Galeriebilder. Es ist unwahrscheinlich, dass jemand diese Funktion für alle Bilder haben möchte, die irgendwo auf der Seite angezeigt werden, aber vielleicht möchten Sie es für den Hauptinhaltsbereich. Sie müssen überprüfen, wie Ihr Theme dies strukturiert, aber in meinem Fall ist der Hauptinhaltsbereich ein "Abschnitt", also würde der folgende Code die Arbeit erledigen

Abschnitt.Eintrag-Inhalt p a img.size-thumbnail:schweben
{
verwandeln: Rahmen(3.0);
}

Anmerkung (2) — Dieser Code gilt nur für Miniaturbilder. Für mittlere Bilder würden Sie „size-thumbnail“ durch „size-medium“ ersetzen., und für groß mit „size-large“.

Anmerkung (3) — Da meine Thumbnails 120x80px groß sind, möchte ich sie auf das Dreifache ihrer Originalgröße vergrößern. Ich habe bereits eine benutzerdefinierte Bildgröße von 360 × 240, die WordPress für mich erstellt und die im src-Set enthalten ist. Für Hi-dpi-Bildschirme gibt es auch noch größere Bildgrößen, die ich habe (e.g. 720×480). Das Erstellen zusätzlicher Bildgrößen in WordPress ist einfach – es gibt viele gute Anleitungen online, wenn Sie dies tun müssen.

Wenn Sie auf 1,5x oder 2,0x skalieren möchten, ändern Sie einfach die 3.0 wie gewünscht

Die jQuery

Fügen Sie Folgendes zu Ihrem . hinzu (Kind) Skriptdatei des Themes (vorausgesetzt es hat einen). Wenn es keinen hat, erstelle deine eigenen, und 'einreihen' sie mit einer benutzerdefinierten Funktion in die (Kind) Die Funktionen des Themas.php

jQuery(Dokument).bereit(Funktion(){

  jQuery("dt.gallery-icon a img.size-thumbnail").schweben(Funktion(){
    jQuery(dies).attr("Größen","(maximale Breite: 360px) 100vw, 360px");
    }, Funktion(){
    jQuery(dies).attr("Größen","(maximale Breite: 120px) 100vw, 120px");
  });

  //Wiederholen Sie das obige 5 Zeilen hier für jede unterschiedliche Bildgröße, die Sie ändern möchten

});

Der obige Code gilt für Bilder mit Klassen-Thumbnail, die in jedem dt mit einer Galerie-Icon-Klasse gefunden werden – also mit anderen Worten – nur für Bilder innerhalb der in WordPress integrierten Galeriestruktur. Beim Schweben wird die maximale Breite von erhöht 120 zu 360 (eine 3-fache Erhöhung, um meinem zu entsprechen CSS!), und dann stellt der zweite Teil der Funktion das Original wieder her 120 Breite, wenn der Schwebeflug stoppt.

Wie bei der CSS oben, Sie können die Zahlen anpassen, um zu ändern, wie stark das Bild vergrößert wird, und du kannst das ändern dt.gallery-icon a img.size-thumbnail Abschnitt, um auf ein anderes Element oder eine andere Klasse abzuzielen, je nachdem, auf welche Bilder Sie abzielen möchten.

Stellen Sie Ihr eigenes Skript in die Warteschlange ein

Wenn Ihr Theme keine Skriptdatei hatte und Sie Ihr eigenes in die Warteschlange stellen müssen, fügen Sie Folgendes zu Ihrem hinzu (Kind) Die Funktionen des Themas.php (Angenommen, Sie haben Ihre Skriptdatei image-zoom.js aufgerufen und im Stammordner des Themes gespeichert)

wp_register_script( 'img-zoom', get_stylesheet_directory_uri() . '/image-zoom.js', Feld( 'jquery' ), '', true);
wp_enqueue_script( 'img-zoom' );

Das Obige wird Ihr Skript registrieren, in der Fußzeile, Stellen Sie sicher, dass es nach jquery platziert wird (jquery sollte also bereits verfügbar sein, wenn es ausgeführt wird)

Bildgrößen hinzufügen

Der Vollständigkeit halber erfahren Sie hier, wie Sie WordPress benutzerdefinierte Bildgrößen hinzufügen. Wieder, füge dies zu deinem hinzu (Kind) Die Funktionen des Themas.php

add_image_size( 'Viertelbreite', 192, 144, falsch );

Oben habe ich eine neue Bildgröße namens "Viertelbreite" mit einer maximalen Breite von 192px und einer maximalen Höhe von 144px hinzugefügt. Das Bild wird nicht zugeschnitten (daher das Falsche am Ende).

WordPress erstellt jetzt automatisch Bilder dieser Größe, wenn Sie Bilder hochladen (Sie müssen ein Thumbnail-Rebuild-Plugin verwenden, um die Thumbnails für bereits hochgeladene Bilder neu zu erstellen).

Diese neue Bildgröße wird jedoch NICHT zum Einfügen im Editor angezeigt. Um es verfügbar zu machen, fügen Sie auch den folgenden Code zu Ihrer functions.php hinzu

Funktion my_custom_image_sizes( $Größen ) {
    return array_merge( $Größen, Feld(
        'Viertelbreite' => __('Viertelbreite'),
    ) );
}

Bestehende Einstellungen respektieren

Eine weitere Sache, die Sie vielleicht tun möchten (um sicherzustellen, dass responsive Bilder gut funktionieren) ist größer zu schaffen (d.h.. hallo-dpi) Thumbnail-Größen, die die respektieren GUI ob Thumbnails zugeschnitten werden sollen oder nicht. Verwenden Sie dazu den folgenden Code, der, wie Sie sehen werden, vom einfacheren oben leicht modifiziert ist

add_image_size( 'bzw.-Daumen-2x', (get_option( 'thumbnail_size_w' ) == 0 ? 0 : '240'), 160, get_option( 'thumbnail_crop' ) );

Der obige Code prüft auf 2 Dinge – zuerst prüft es, ob die Zuschneideoption eingestellt ist, und wenn es ist, es spiegelt es für unsere neue responsive Größe wieder. Es prüft auch, ob die Breite auf eingestellt ist 0 (d.h.. kein Maximum) in diesem Fall wird unser neues Bild auch kein Maximum haben. Ich habe die neue Bildgröße „resp-thumb-2x“ genannt, da es sich um eine „responsive“ Kopie des Thumbnails handelt, die doppelt so groß ist (für Hi-dpi-Bildschirme mit doppelter normaler Pixeldichte). Ich habe auch eine Reihe anderer Größen erstellt, um ein ziemlich vollständiges Set zu erstellen.

Hinweis – Da meine ursprünglichen Miniaturansichten 120 × 80 groß waren, möchte ich, dass meine neuen 240 × 160 groß sind, also sind dies die Größen, die ich angegeben habe (hartcodiert). Es wäre möglich, sowohl die Höhe als auch die Breite des ursprünglichen Thumbnails zu erhalten und beide mit zu multiplizieren 2 um diese Funktion vollständig generisch zu machen, Aber ich habe es nicht getan, als ich es entwickelt habe, also überlasse ich es Ihnen, es herauszufinden!

Ein letzter Tipp

Wenn, wie ich, Sie erstellen Ihren eigenen vollständigen Satz neuer Bildgrößen, Sie möchten möglicherweise nicht, dass WordPress seine eigenen zusätzlichen versteckten Größen erstellt. Zusätzlich zum Originalbild, und das Thumbnail, das Medium, und das große Bild, WordPress erstellt auch ein "Post-Thumbnail", ein „mittelgroßer“, ein 1536×1536 und ein 2048×2048. Diese sind deaktiviert in 2 verschiedene Wege…

Um die zu entfernen 1536 und 2048 Bilder ist einfach

remove_image_size( '1536x1536' ); //entferne das 1536 wir brauchen es nicht
remove_image_size( '2048x2048' ); //entferne das 2048 wir brauchen es nicht

Der Post-Daumen und mittelgroß sind etwas komplizierter

//Entfernen Sie das eingebaute Medium-Large
add_filter('intermediate_image_sizes', Funktion($Größen) {
    return array_diff($Größen, ['mittelgroß']);
});

//Entfernen Sie die integrierte Post-Miniaturansicht
add_filter('intermediate_image_sizes', Funktion($Größen) {
    return array_diff($Größen, ['nach-Miniaturansicht']);
});

Beachten Sie, dass das Entfernen des Post-Thumbnails manchmal seltsame Auswirkungen auf die Bildbibliothek im Editor zu haben scheint.

Eine letzte letzte Anmerkung

Bei der Entscheidung für Bildgrößen (für größere Bilder, weniger Thumbnails) Sie möchten idealerweise eine Größe, auf die gängige Bildseitenverhältnisse immer gut skaliert werden. Aus diesem Grund empfehle ich folgende Größen

Beachten Sie, dass die angegebenen Breiten für alle ganzzahlige Höhen erzeugen 3 der gängigsten Seitenverhältnisse. Das bekommst du nicht mit Breiten wie 150 oder 200.

Beachten Sie auch das Muster der Zunahmen. Springen 2 Zeilen in der Tabelle und die Größe verdoppelt sich! Die geraden Reihen (288,576,1152 und 1535) sind auch das 1,5-fache der vorherigen Größe, sodass diese gut auf Semi-Hi-dpi-Bildschirmen mit a . funktionieren 50% dpi-Anstieg. Mit diesem Satz von set 7 Größen haben Sie eine gute Auswahl an verwendbaren Optionen für die meisten Ansichtsfenster UND einen guten Satz reaktionsschneller Bilder, die WordPress automatisch zum src-Set hinzufügt, da sie konsistente Seitenverhältnisse ohne Brüche haben, die zu Qualitätsverlusten oder Beschneidungen führen würden.

Derzeit tendiere ich bei Miniaturansichten dazu, entweder eine unbegrenzte Breite zuzulassen ODER ich hart auf eine feste Größe zuzuschneiden 3:2 Verhältnis, also verwende ich ganze Zahlengrößen für Miniaturansichten, aber ich kann irgendwann mein Thema optimieren und das obige System rückwärts erweitern, indem ich die Optionen 48px und 96px breit habe (Beachten Sie, dass es keinen Wert zwischen diesen gibt 2 das würde leider funktionieren – und da ich 60px breite Mini-Thumbnails verwende, habe ich mich nicht dafür entschieden, nach hinten zu verlängern). 72px würde für beide funktionieren 4:3 und 3:2 (und 64px würde funktionieren mit 4:3 und 16:9). Da die meisten meiner Bilder mit meiner dSLR aufgenommen wurden, sind dies normalerweise 3:2 (das gleiche Seitenverhältnis wie bei herkömmlichen 35-mm-Filmen) also könnte ich auch diese größe gebrauchen, das würde dann mit den großen Größen ganz nach oben funktionieren, aber die größeren Größen werden nicht beschnitten, während meine Thumbnails es sind – ich freue mich, wenn größere Bilder sowohl im Quer- als auch im Hochformat sind, aber ich möchte, dass Miniaturansichten normalerweise im Querformat sind, nur um zu meinem Design zu passen, deshalb habe ich nicht nach hinten verlängert. Hoffentlich, da immer mehr Logos verfügbar sind als SVG'S, und einmal JPEG-XL kommt in naher Zukunft im Browser an, vieles wird gelöst.