WordPress-Bilder werden nicht richtig abgeschnitten

Ich habe meine Post-Bild-Thumbnails gesetzt mit:

add_theme_support('post-thumbnails'); set_post_thumbnail_size(1280, 436, true); add_image_size('general-thumb', 600, 339, true); 

Sie werden in zwei Spalten mit den folgenden CSS Größen geändert:

  max-width: 100%; height: auto; 

Die Spalten, in denen sie angezeigt werden, sind etwa 348 Pixel breit.

Das Problem ist, dass wenn ich ein Bild hochlade, das weniger als die Abmessungen 600×339 in Höhe oder Breite hat, erscheinen sie falsch auf der Seite.

Ich denke, der Grund dafür ist, dass 600×339 die Startbox ist, in der ein Bild beschnitten wird. Anschließend wird die Größe angepasst, um die Breite der Spalte zu füllen, während das Seitenverhältnis der ursprünglichen Bildgröße beibehalten wird.

Was kann ich mit WordPress-functionen oder CSS-Hacks beheben?

Was ich denke, damit die Bilder dynamisch skalieren können, ist, dass jedes hochgeladene Bild automatisch auf das richtige Seitenverhältnis zugeschnitten wird, ohne es zu vergrößern. Dies muss jedoch mit der Breite und Höhe des Originalbilds beginnen, nicht mit den vordefinierten Boxdimensionen.

Vielen Dank!

Solutions Collecting From Web of "WordPress-Bilder werden nicht richtig abgeschnitten"

Es scheint, dass Ihr Problem auftritt, bevor das Bild beschnitten / verkleinert und auf der Seite angezeigt wird – das Originalbild ist zu klein.

Sie können Mindestabmessungen für hochgeladene Bilder verlangen, siehe: Wie wird eine Mindestbildgröße für das Hochladen benötigt?

Um die Größe des hochgeladenen Bildes zu ändern, ohne es zu beschneiden, definieren Sie die Bildgröße mit einem “weichen Schnitt”, indem Sie im dritten Parameter “false” verwenden:

 add_image_size('general-thumb', 600, 339, false); 

Schließlich kann die Verwendung des Bilds als Hintergrundbild für ein Element eine alternative Methode sein, um die Bemaßung richtig zu machen.

Sie können das Element innerhalb Ihres Layouts mit beliebiger Höhe, Breite, Mindesthöhe usw. positionieren und die CSS- background-size , um das Bild innerhalb des Elements zu füllen / zu positionieren.

Beispielsweise:

 background-size: contain; 

Stellt sicher, dass das Bild so groß wie möglich ist, ohne einen Teil davon zu verstecken.

Siehe: https://developer.mozilla.org/en-US/docs/Web/CSS/background-size

Das Problem ist, dass wenn ich ein Bild hochlade, das weniger als die Abmessungen 600×339 in Höhe oder Breite hat, erscheinen sie falsch auf der Seite.

Ich habe diese Aussage nicht verstanden, als du sie geschrieben hast, aber als ich angefangen habe zu recherchieren, habe ich gefunden, was du meintest. Deshalb schreibe ich diese Antwort, um dies für andere zu dokumentieren, die deine Bedeutung nicht verstehen oder wie WP Bilder verarbeitet.

Wenn Sie Bilder in WordPress hochladen, werden diese automatisch verarbeitet und je nach Einstellungen werden mehrere Größen abgeschnitten oder in der Größe angepasst.

Ein Entwickler kann seine benutzerdefinierten Größen mit dem Code angeben, der in dieser Frage verwendet wurde.

 add_theme_support('post-thumbnails'); set_post_thumbnail_size(1280, 436, true); add_image_size('general-thumb', 600, 339, true); 

for set_post_thumbnail() Die erste Variable ist Width, die zweite Height und die dritte gibt den Zuschnittstyp an: Hard (true) oder Soft (false)

for add_image_size() Die erste Zeichenfolge ist der Name, den Sie das Bild aufrufen möchten, gefolgt von Breite, Höhe und Zuschneiden.

Bei hartem Beschneiden wird die Bemaßung proportional zur angeforderten Anzahl reduziert und dann wird alles abgeschnitten, um der ungeraden Bemaßung zu entsprechen. Beispiel: Wenn Sie ein 800×600-Foto hochladen, das auf 600×200 verkleinert werden soll, reduziert WP 800W auf 600W und reduziert die verbleibenden 450h auf 200h. Ich glaube, es zentriert das Bild und nimmt es gleichmäßig von oben und unten.

Weiches Beschneiden reduziert das gesamte Bild proportional und behält das gesamte Bild bei. Beispiel: Das von Ihnen hochgeladene 800 x 600-Bild wird weich auf die kleinste maximale Abmessung von 200 Stunden reduziert, wobei die Breite im Verhältnis 267 Watt beträgt.

In diesem Fall, glaube ich, will das OP definitiv Hard Crop , wie im Code angegeben.

Das Problem, das auftritt, ist, dass WP ein Bild nicht so skaliert, dass es den Proportionen entspricht. Wenn Sie das 600 x 200-Stunden-Bild möchten, aber 550 x 300 h hochladen, werden die 300 h auf 200 h reduziert, die 550-w-Bilder bleiben jedoch erhalten. Die meisten Dokumente, die ich durchgelesen habe, machen dies sehr deutlich. Die “Lösung”, die ich kenne, besteht darin, das Bild in einem Desktop-Programm zu skalieren, bevor es hochgeladen wird, wenn es nicht bereits in größerem Maßstab erworben werden kann.

OP sucht nach einer Lösung, mit der WP das Bild auf die gewünschten Dimensionen skalieren kann. Diese Lösung finden Sie hier: Wie skaliert man das Bild in das Vorschaubild, ohne es zu verzerren?

Axlmedia (die Quelle zitiert) fügt auch diese Warnung über die Lösung hinzu:

Der leichte Nachteil (nicht viel mit dem Server Platz, den wir heute haben) ist, dass, wenn Sie zum Beispiel ein 16 × 16 Favicon in Ihre Medienbibliothek hochladen, wird es zugeschnitten und auf alle größeren verfügbaren Miniaturansichten skaliert. Also, einige weitere Bilder werden erstellt.

Wie bei älteren Bildern geht WordPress nicht zurück und setzt Ihre älteren Thumbnails zurück. Diese Einstellungen funktionieren nur bei Neuinstallationen ab dem Zeitpunkt der Installation. Sobald Ihre Lösung eingestellt ist, können Sie ein oder zwei Plugins finden, die wieder in die neuen Einstellungen zurückkehren und jedes Bild neu skalieren. Ich weiß nicht, ob es mit der hinzugefügten gehobenen function funktioniert. Die zwei Plugins, die vom Benutzer Stanislau Ladutska vorgeschlagen wurden, können eine schnellere Gesamtlösung bieten.

Sie können versuchen, das Bild an den Stellen zu beschneiden, die Sie manuell mit der WP_Image_Editor class verwenden WP_Image_Editor . Hier ist ein einfaches Beispiel

 $image = 'http://img.daswordpress.com/images/lanterns.jpg'; $img_size = getimagesize($image); $img_process = wp_get_image_editor( $image ); // Return an implementation that extends WP_Image_Editor if ( ! is_wp_error( $img_process ) ) { //$img_process->resize( 1920, 661, array( 'left', 'top' ) ); $img_process->crop( 0, 0, $img_size[0], $img_size[1], 600, 339 ); $img_process->save( $image ); $img_process->set_quality( 100 ); } 

Dies liegt daran, dass WordPress standardmäßig keine Upscale für Thumbnails verwendet.

Sie könnten dieses Plugin verwenden, um dieses Problem zu lösen: https://wordpress.org/plugins/thumbnail-upscale/

Dies betrifft nur neu hochgeladene Bilder. Um deine alten Bilder zu regenerieren benutze dieses Plugin: https://wordpress.org/plugins/regenerate-thumbnails/

Eine Lösung haben:

Registrieren Sie zuerst die Miniaturansicht in function.php

 add_image_size( 'cp-thumb', 600, 339, true ); // (cropped) Generate thumbnail while uploading image. 

Dann rufe es in der Post-Schleife auf folgende Weise an:

 
< ?php get_the_post_thumbnail( $thumbnail->ID, 'cp-thumb' ); ?>

Legen Sie das innere div als Tabellenzelle fest und richten Sie das Zentrum vertikal und horizontal aus. In diesem Fall, wenn die Bildgröße kleiner als die Anforderung ist. Positionierung oder Layout werden nicht gestört.

Versuche es.

Danke, Vee