wp_get_attachment_image WordPress Block Editor (Gutenberg) Äquivalent ist getMedia

Suchen Sie, wie Sie das Beitrags-Thumbnail oder eine Anhangs-URL anhand ihrer ID in WordPress Gutenberg abrufen können?

Möglicherweise haben Sie ein zurückgegebenes Post-Objekt, indem Sie das WordPress Gutenberg-Äquivalent von WP_Query (oder das WordPress Gutenberg-Äquivalent von get_post) verwenden.

Beachten Sie, dass Sie im Beitragsobjekt die vorgestellte Medien-ID abrufen können, die in der featured_mediaEigenschaft gespeichert ist.

Sie können dann verwenden getMedia, um die Eigenschaften für diesen Anhang anhand seiner ID abzurufen, etwa so:

wp.data.select( 'core' ).getMedia( 42 );

Hier in der Konsole:

Verwenden von getMedia in der Konsole.

Wir können das Bildobjekt untersuchen, das in der Konsole zurückgegeben wird, und feststellen, dass wir alle Daten, Alternativtexte, Metadaten und Bildgrößen abrufen können, die wir zum Anzeigen des Bilds benötigen.

Beachten Sie, dass die Bildgrößen in den Beispieldaten unten abgekürzt wurden, sonst geht es ziemlich lange weiter.

id: 101
date: "2020-03-21T14:02:00"
date_gmt: "2020-03-21T14:02:00"
guid: {
    rendered: "https://wholesomecode.ltd/wp-content/uploads/2020/03/Code-Example.png"
    raw: "https://wholesomecode.ltd/wp-content/uploads/2020/03/Code-Example.png"
}
modified: "2020-03-21T14:02:00"
modified_gmt: "2020-03-21T14:02:00"
slug: "code-example"
status: "inherit"
type: "attachment"
link: "https://wholesomecode.ltd/code-example/"
title: {
    raw: "Code Example"
    rendered: "Code Example"
}
author: 1
comment_status: "closed"
ping_status: "closed"
template: ""
meta: {
    _wcltd_meta_example_1: "1"         
    _wcltd_meta_example_2: "Hello"
}
permalink_template: "https://wholesomecode.ltd/wp-content/uploads/2020/03/Code-Example.png/?attachment_id=101"
generated_slug: "code-example"
description: {
    raw: "Code Example"
    rendered: "..."
}
caption: {
    raw: "Code Example"
    rendered: "<p>Code Example</p>↵"
}
alt_text: "Code Example"
media_type: "image"
mime_type: "image/png"
media_details: {
    width: 2310
    height: 1400
    file: "2020/03/Code-Example.png"
    sizes: {
        ...
        large: {
            file: "Code-Example-1024x621.png"
            width: 1024
            height: 621
            mime_type: "image/png"
            source_url: "https://wholesomecode.ltd/wp-content/uploads/2020/03/Code-Example-1024x621.png"
        }
    }
    image_meta: {
        aperture: "0"
        credit: ""
        camera: ""
        caption: ""
        created_timestamp: "0"
        copyright: ""
        focal_length: "0"
        iso: "0"
        shutter_speed: "0"
        title: ""
        orientation: "0"
    }
}
post: null
source_url: "https://wholesomecode.ltdwp-content/uploads/2020/03/Code-Example.png"

Sehen Sie dies in Aktion im WordPress Gutenberg-Post-Loop-Beispiel.