wp_get_attachment_image WordPressi plokiredaktor (Gutenberg) ekvivalent on getMedia

Kas otsite, kuidas hankida WordPressis gutenbergis postituse pisipilt või manuse URL selle ID järgi?

Teil võib olla tagastatud postitusobjekt, kasutades WordPressi Gutenbergi vastet WP_Query (või WordPressi Gutenbergi ekvivalenti get_post ).

Pange tähele, et postitusobjektis saate esiletoodud meediumi ID, mis on featured_mediaatribuudis salvestatud.

Seejärel saate kasutada getMediaselle manuse atribuutide hankimiseks selle ID abil, näiteks järgmiselt:

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

Siin on see konsoolis:

GetMedia kasutamine konsoolis.

Saame uurida konsoolis tagastatavat pildiobjekti ja näha, et suudame haarata kõik pildi kuvamiseks vajalikud andmed, alternatiivteksti, meta ja pildi suurused.

Pange tähele, et piltide suurused allolevates näidisandmetes on lühendatud, vastasel juhul jätkub see üsna kaua.

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"

Vaadake seda WordPressi Gutenbergi postitustsükli näites.