Benutzerdefinierte Bildgröße / Miniaturansicht - Verhältnis von Zuschneiden zu Seiten, auch wenn das Quellbild kleiner als die festgelegten Abmessungen ist

11

Normalerweise erhalten Sie add_image_size( 'custom-size', 400, 400, true );die folgenden Ergebnisse, wenn Sie eine benutzerdefinierte Bildgröße mit hartem Zuschneiden festlegen - z. B. -

  • # 1 Hochgeladenes Bild: 600x500> Miniaturbild: 400x400.
  • # 2 Hochgeladenes Bild: 500x300> Miniaturbild: 400x300.
  • # 3 Hochgeladenes Bild: 300x200> Miniaturbild: 300x200.

Was ich jedoch tun möchte, ist, wenn das hochgeladene Bild kleiner als die festgelegte Breite oder Höhe oder beides der benutzerdefinierten Bildgröße ist, z. B. Beispiele 2 und 3 oben - anstatt dass das Bild nur passend zugeschnitten wird Innerhalb dieser Dimensionen wird es auch so zugeschnitten, dass es dem Seitenverhältnis (in diesem Fall 1: 1) entspricht:

  • # 1 Hochgeladenes Bild: 600x500> Miniaturbild: 400x400.
  • # 2 hochgeladenes Bild: 500x300> Miniaturbild: 300x300 .
  • # 3 Hochgeladenes Bild: 300x200> Miniaturbild: 200x200 .

Ich glaube nicht, dass dies mit den Standardoptionen add_image_size möglich ist, aber ist es möglich, eine andere Funktion oder einen Hook zu verwenden, der die Funktion add_image_size ändert?

Oder gibt es ein Plugin, das diese Funktionalität hinzufügt?

Alle Informationen, die jemand zur Verfügung stellen kann, wären sehr dankbar.

images cropping Joey Joe Joe Junior Shabadoo
quelle
Um meine Frage weiter zu klären. Ich möchte in der Lage sein, das zu konfigurieren add_image_size, was ich oben beschrieben habe. Ich bin mir ziemlich sicher, dass dies mit den Standardparametern nicht möglich ist, aber ich hoffe, dass dies mit einem Hook, einer Aktion oder einem Filter möglich ist.
Joey Joe Joe Junior Shabadoo

Antworten:

2

Sie haben Recht, dass es einfach nicht so funktioniert.

Wenn es in Ordnung ist, Ihre Frage umgekehrt zu betrachten, können Sie in modernen Browsern mit einer Auswahl an Bildgrößen und reaktionsschnellen Bildern das richtige Ergebnis erzielen.

Wenn Sie folgenden Code verwenden:

add_image_size( 'custom-size-small', 200, 200, true );
add_image_size( 'custom-size-medium', 300, 300, true );
add_image_size( 'custom-size-large', 400, 400, true );

... und in Ihren Vorlagen so etwas wie:

wp_get_attachment_image( $image_ID, 'custom-size-small' )

... dann erhalten Sie standardmäßig (WP 4.4 und höher) ein Bild-Tag mit der kleinsten Version aus Ihrem Set als srcund den größeren Größen im srcsetAttribut, aus dem neuere Browser die größte geeignete Version auswählen und anzeigen.

Wenn ein bestimmtes Bild keine größere Version hat, spielt dies keine Rolle. Für ein Bild, 300x200für das eine 200x200Version erstellt wurde, ist diese Version die einzige im HTML-Code, und alle Browser zeigen sie an.

Ich habe dies herausgefunden, während ich reaktionsschnelle Bilder optimiert habe, damit ich eine gute Leistung in Browsern erhalte, die nur unterstützen srcund nicht srcset.

Andy Macaulay-Brook
quelle
Danke für die Antwort. Dies ist eine interessante Lösung, aber leider glaube ich nicht, dass sie für meine Situation funktionieren würde. Bilder werden vom Endbenutzer hochgeladen - und können von beliebiger Größe sein. Diese Lösung funktioniert nur, wenn die hochgeladenen Bilder eine feste Größe haben, es sei denn, ich verstehe sie falsch. Der obige Code funktioniert beispielsweise für ein Bild mit einer Größe von 500 x 200, jedoch nicht für ein Bild mit einer Größe von 500 x 199.
Joey Joe Joe Junior Shabadoo
2

Dies ist keine wirklich gute Lösung, da es sich um eine neuere CSS-Lösung handelt und nur in 78,9% der Benutzerbrowser funktioniert. Es gibt jedoch einige Polyfills, die diese Objekt-Fit-Bilder und Fitie überwinden können

img {
    display: block;
    overflow: hidden;
    width: 400px;
    height: 400px;
    -o-object-fit: cover;
       object-fit: cover;
}

Im Idealfall wäre es besser, wenn die kleineren Bilder beim Hochladen proportional skaliert würden, aber ich konnte keine Lösung dafür finden.

Bryan Willis
quelle
Danke für die Antwort. Ich war mir dieser Eigenschaft nicht einmal bewusst, aber ja, wie Sie sagten, macht der Mangel an Browser-Unterstützung es zu einem No-Go. Vielleicht in ein paar Jahren vielleicht.
Joey Joe Joe Junior Shabadoo
Ich habe gerade erst angefangen, "Objekt-Pass-Bilder" -Polyfill zu verwenden, und obwohl es Joey zu funktionieren scheint, habe ich noch nicht im IE getestet, da ich nur Macs habe. Hier ist es jedoch in Aktion, wenn Sie einen Blick darauf werfen möchten . Es wird für die Raster-Miniaturansichten auf dieser Seite verwendet. Ich weiß, dass es ein Plugin geben muss, das dieses Problem löst. Bisher ist YoImages jedoch ein gutes Addon zur Objektanpassung, da Sie die Zuschneideposition für jedes Bild in eine beliebige Position ändern können.
Bryan Willis