wake-up-neo.net

Bildskalierung mit get_the_post_thumbnail in Wordpress

Ausgabe-URL - http://www.creativescripters.com/clients/testwp/uncategorized/image-resized/

Ich verwende die neueste Version von WordPress (selbst gehostet). Das Problem besteht darin, dass ich eine Miniaturansicht des verkleinerten/skalierten Bilds erhalten möchte. Wenn ich dies tue, gibt WordPress die Datei test-150x150.jpg zurück, dh eine Miniaturansicht des Originalbilds und nicht der Größe des Bildes sollte geändert werden. test-e1513229707262-150x150.jpg

Schritt, um das Problem zu reproduzieren

  1. Laden Sie ein Bild hoch, skalieren Sie es (klicken Sie auf Bearbeiten, ändern Sie die Breite und klicken Sie auf Skalieren). Wordpress benennt das Bild um und fügt dem Namen eine Suffix-ID hinzu, damit Sie bestätigen können, dass das Bild skaliert wurde. Wenn Sie beispielsweise test.jpg nach dem Skalieren hochgeladen haben, wird der Name des Bildes zu test-randomstring.jpg

 enter image description here 

  1. Wenn ich get_the_post_thumbnail ($ post, 'full') aufrufe, erhalte ich das richtige Bild. Die Größe wurde geändert, d. H. Test-randomstring.jpg  enter image description here 

  2. Wenn ich versuche, eine andere Größe des skalierten Bildes zu erhalten, z. B. ein aus der Bildgröße generiertes Vorschaubild und die Funktion get_the_post_thumbnail ($ post, 'thumbnail'), dann gibt wordpress den THUMBNAIL vom tatsächlichen Bild zurück (das ich ursprünglich hochgeladen habe). jpg und nicht die verkleinerte test-randomstring.jpg)

Screenshot - https://i.imgur.com/sQKoZcF.png

4
June

REGENERIEREN SIE IMMER DIE QUELLE, DIE BEI ​​DER BILDBEARBEITUNG EINGESTELLT WURDE

(Neues Material, insbesondere die benutzerdefinierte Funktion, folgt der Konversation im Kommentarthread.)

Die folgende Funktion generiert nach einer Bildbearbeitungsaktion automatisch einen vollständigen Quellensatz neu.

/**
 * ALWAYS REGENERATE FULL SOURCE SET AFTER EDITING IMAGE
 * answering StackExchange WordPress Development Question
 * see: https://wordpress.stackexchange.com/questions/288581/image-scaling-using-get-the-post-thumbnail-issue-in-wordpress/
 * exploits code already worked out in Regenerate Thumbnails Plugin
 */
add_action( 'edit_attachment', 'wpse_always_regenerate', 99);

function wpse_always_regenerate( $postID ) {

    $new_url = get_attached_file( $postID );

    $metadata = wp_generate_attachment_metadata( $postID, $new_url );

    wp_update_attachment_metadata( $postID, $metadata );

}

Sie würden dies zu Ihrer Datei theme functions.php hinzufügen, wenn Sie dies wünschen - wenn Sie mit der generierten und dem Originalbild hinzugefügten Indexnummer zufrieden sind und wenn Sie damit zufrieden sind, dass der gesamte Quellensatz von der bearbeiteten (neu erstellten) Datei verwaltet wird. skaliertes) Bild. Es passiert, dass der ursprüngliche Upload und sein Satz im Ordner verbleiben. (Das Hinzufügen eines optionalen "Bereinigungs" -Vorgangs ist etwas, worauf ich noch nicht gekommen bin, aber es gibt Plugins, die nicht angehängte/nicht verwendete Bilder aus einem Ordner bereinigen - einer kann auf halbjährlicher Basis angewendet werden.)

Ich habe es nicht auf mögliche unerwünschte zusätzliche Interaktionen getestet. In den meisten Installationen würde es nicht schaden, könnte sogar helfen, obwohl ich mir einige Umstände vorstellen kann, unter denen Sie NICHT möchten, dass alle Bildbearbeitungsaktionen "Thumbnails neu generieren" (was wahrscheinlich "Quellensatz neu generieren" heißen sollte). Für diese Installationen möchten Sie natürlich etwas Raffinierteres.


VOLLSTÄNDIGE DISKUSSION

Obwohl ein wenig mehr Klarheit in Bezug auf die ursprüngliche Frage und die genaue Reproduzierbarkeit hilfreich wäre, glaube ich, dass die Antwort in diese Richtung lautet:

Wenn Sie ein Bild hochladen, lädt WordPress die Vollversion des Bildes zusammen mit den normalen Miniaturansichten hoch. Wenn Sie das Bild skalieren, wird auch eine bestimmte Variation mit der Zufallszahl hinzugefügt. Wenn ich bei einer Installation ein Bild als Bild nach dem Hochladen hochlade und es neu skaliere, wird in meinem Upload-Ordner Folgendes angezeigt:

 ![enter image description here 

Wenn ich nach get_the_post_thumbnail( $postID, $type ) frage, bekomme ich:

voll :

<img 
    width="500" 
    height="651" 
    src="http://ckmswp.com/wp-content/uploads/2017/12/pingdom_topline_before-e1514050718361.jpg" 
    class="attachment-full size-full wp-post-image" 
    alt="" 
    sizes="100vw" 
/>

Post-Thumbnail :

<img 
    width="500" 
    height="651" 
    src="http://ckmswp.com/wp-content/uploads/2017/12/pingdom_topline_before-e1514050718361.jpg" 
    class="attachment-post-thumbnail size-post-thumbnail wp-post-image" 
    alt="" 
    sizes="100vw" 
/>

thumbnail :

<img 
    width="150" 
    height="150" 
    src="http://ckmswp.com/wp-content/uploads/2017/12/pingdom_topline_before-150x150.jpg" 
    class="attachment-thumbnail size-thumbnail wp-post-image" alt="" 
    srcset="https://ckmswp.com/wp-content/uploads/2017/12/pingdom_topline_before-150x150.jpg 150w, 
            https://ckmswp.com/wp-content/uploads/2017/12/pingdom_topline_before-100x100.jpg 100w" 
    sizes="100vw" 
/>

Wenn ich das Bild beim Hochladen skaliere, erstelle ich eine neue "vollständige" Version des Bildes - mit dem "zufälligen" Code, der dem ursprünglichen Dateinamen hinzugefügt wurde. Da ich es als "Empfohlenes Bild" hochgeladen habe, ist es jetzt auch mit Slots versehen als "Post-Thumbnail" -Bild.

Dies kann auch mit wp_get_attachment_image_src () überprüft werden, was für "full" oben Folgendes zurückgibt:

(
    [0] => http://ckmswp.com/wp-content/uploads/2017/12/pingdom_topline_before-e1514050718361.jpg
    [1] => 500
    [2] => 651
    [3] => 
)

Kurz gesagt, wenn Sie eines der genannten Bilder im üblichen Bildsatz aufrufen, erhalten Sie die Bilder, die vor dem Skalieren des Bildes erstellt wurden. Wenn Sie - vorausgesetzt, Sie haben das Bild beim Hochladen als ausgewähltes Bild skaliert - entweder das vollständige Bild oder das (in dieser Installation) post-thumbnail-Bild aufrufen, erhalten Sie auch das neue skalierte Bild.

Um das ursprüngliche Vollbild zu erhalten, müssen Sie möglicherweise auf das Anhangsobjekt zugreifen, das folgendermaßen aussieht:

[64755] => WP_Post Object
        (
            [ID] => 64755
            [post_author] => 1
            [post_date] => 2017-12-23 17:38:24
            [post_date_gmt] => 2017-12-23 17:38:24
            [post_content] => 
            [post_title] => pingdom_topline_before
            [post_excerpt] => 
            [post_status] => inherit
            [comment_status] => open
            [ping_status] => closed
            [post_password] => 
            [post_name] => pingdom_topline_before
            [to_ping] => 
            [pinged] => 
            [post_modified] => 2017-12-23 17:38:24
            [post_modified_gmt] => 2017-12-23 17:38:24
            [post_content_filtered] => 
            [post_parent] => 64752
            [guid] => **http://ckmswp.com/wp-content/uploads/2017/12/pingdom_topline_before.jpg**
            [menu_order] => 0
            [post_type] => attachment
            [post_mime_type] => image/jpeg
            [comment_count] => 0
            [filter] => raw
        )

)

Wenn Sie eine 150x150-Version (oder was auch immer für Ihre Installation als Miniaturbild festgelegt ist) des skalierten Bildes erhalten möchten, müssen Sie entweder:

1) Laden Sie das skalierte Bild separat hoch und lassen Sie WordPress die Datei test-image-random-150x150.jpg für Sie erstellen. oder

2) Erzielen Sie einen ähnlichen Effekt, indem Sie "Thumbnails regenerieren".

Nach einer solchen Regenerationsaktion wird in meinem Upload-Ordner Folgendes angezeigt:

 enter image description here 

Beachten Sie, dass der ursprüngliche Bildsatz im Ordner unverändert bleibt.

Das Erstellen eines solchen neu generierten Abbildsatzes ist die bevorzugte Methode, insbesondere wenn Sie das skalierte Abbild für andere Zwecke verwenden möchten, da das erneute Hochladen und Generieren des vollständigen, für Ihre Installation geeigneten Abbildsatzes die Reaktionszeit verbessern und verbessern kann Konsistenz.

Um diese Ziele zu erreichen, benötigen Sie eine benutzerdefinierte Funktion (wie die zu Beginn dieser Antwort bereitgestellte), und eine komplexere, optionale Implementierung ist möglicherweise eine Überlegung wert, auch wenn ich nicht davon überzeugt bin, dass sie sehr häufig verwendet wird häufig. (Wenn ich ein Bild auf bestimmte Dimensionen skalieren möchte, mache ich es fast immer getrennt von WP und gebe ihm einen Namen, der für mich sinnvoll ist, aber ich kann nicht für andere sprechen.)

Wenn Sie einen vollständigen Quellensatz von Bildern (im Verhältnis zum neuen skalierten Bild) erhalten möchten und das neue skalierte Bild nicht erneut hochladen möchten, oder sich auf die Funktion verlassen möchten, die dies für Sie erledigt, wenn Sie ein Bild in bearbeiten In der Bibliothek können Sie Thumbnails neu generieren oder ein ähnliches Plugin verwenden. Schließlich können Sie das Bild auch zuschneiden (oder falsch zuschneiden), um die Miniaturansichten zu erstellen.

Letzteres ist einfach auszuführen: Zusätzlich zum erneuten Skalieren des Bildes können Sie unter "Bild bearbeiten" mit dem Beschneidungswerkzeug eine virtuelle Kopie des Originals erstellen - und WordPress erstellt beim Speichern den vollständigen Quellensatz das Bild. Ich sage Near-Copy, weil der Editor in Tests nicht zulässt, dass Sie eine "Kopie" vollständig speichern, die tatsächlich mit dem Original identisch ist, aber an dieser Stelle habe ich keine andere Wahl, als den Code im Detail zu untersuchen, wenn ich das verstehen möchte, und das ist etwas Ich gehe zu einem anderen Tag und schreibe vielleicht woanders - es sei denn, jemand anderes kommt zuerst mit der vollständigen Einweisung.

Also, in der Summe,

1. Wenn Sie zum ersten Mal ein Bild hochladen, erstellt WordPress eine Reihe von Miniaturen basierend auf der hochgeladenen Datei.

2. Wenn Sie das Bild einfach neu skalieren, wird ein einzelnes skaliertes Bild erstellt, dessen generierter Dateiname auf dem ursprünglichen Namen basiert. Hinzu kommt ein "zufälliges" Element (tatsächlich eine heterogene Indexnummer).

3. Wenn Sie das neue skalierte Bild erneut hochladen oder Miniaturansichten mithilfe einer benutzerdefinierten Funktion, eines Plugins oder eines Bearbeitungstricks neu generieren, können Sie mit dem generierten Bild einen neuen Satz von Bildern basierend auf dem skalierten Bild erstellen Dateiname.

4
CK MacLeod

Verwenden Sie post-thumbnail anstelle von thumbnail. Ihr endgültiger Code lautet get_the_post_thumbnail($post, 'post-thumbnail');. Bitte beziehen Sie sich auf diese Link

2
BlueSuiter

Verwendetes img-Tag und Anzeigebild

<img src="<?= $img_url=get_the_post_thumbnail_url($post->ID,'full'); ?>" alt="image" />
2
Tarang koradiya

Sie müssen die entsprechende Bildgröße in die Datei functions.php Ihres Themas einfügen

add_image_size('my_post_thumbnial', 400, 99999, false);

400 ist Breite, 99999 ist Höhe, falsch ist nicht beschneiden. Dies muss "nach" add_theme_support (Post-Thumbnails) sein; Also finde das und setze den obigen Code dahinter.

Sie müssen nicht alle Ihre Bilder neu generieren. Laden Sie einfach die Bilder hoch, die Sie benötigen. Optional fügt das Regenerate Thumbnails Plugin ( https://wordpress.org/plugins/regenerate-thumbnails/ ) einen Link zu jedem Bild in Ihrer Medienbibliothek hinzu, um dieses bestimmte Bild neu zu generieren.

Rufen Sie dann Ihr Thumbnail mit the_post_thumbnail('my_post_thumbnial'); auf

2
Ted

Möglicherweise möchten Sie versuchen, eine IMAGE_EDIT_OVERWRITE-Konstante in Ihre wp-config-Datei einzufügen, um WP zu zwingen, alte Bilder zu löschen und neue zu verwenden.

Die Funktion wp_save_image() verarbeitet das Bild und wird von wp_ajax_image_editor() aufgerufen, dem AJAX -Handler für Image Editor AJAX -Endpunkte.

Weitere Informationen zur Funktionsweise finden Sie in der Datei /wp-includes/image-edit.php oder online im Quellcode. @ https://developer.wordpress.org/reference/functions/wp_save_image/

Ich bin mir jedoch immer noch nicht sicher, ob dies wirklich ein Problem ist.

  1. Das Originalbild ist beispielsweise 1024x707
  2. WP konvertiert es zusammen mit anderen Größen in die Thumbnail-Größe.
  3. Sie erhalten eine Miniaturansicht von diesem Bild mit einer Größe von 150 x 150.
  4. Sie ändern die Größe auf 400x276.
  5. Das Vorschaubild für dieses Bild ist nun identisch mit dem Vorschaubild des ersten Bildes.

Das Ergebnis ist also so oder so ziemlich dasselbe :)

2
shramee