wp_get_attachment_image Éditeur de blocs WordPress (Gutenberg) L’équivalent est getMedia

Vous cherchez comment obtenir la vignette de la publication ou une URL de pièce jointe par son identifiant dans WordPress gutenberg ?

Vous pouvez avoir un objet post renvoyé en utilisant l’équivalent WordPress Gutenberg de WP_Query (ou l’ équivalent WordPress Gutenberg de get_post ).

Notez que dans l’objet de publication, vous pouvez obtenir l’ID de média en vedette, qui est stocké dans la featured_mediapropriété.

Vous pouvez ensuite utiliser le getMediapour obtenir les propriétés de cette pièce jointe par son identifiant, comme ceci :

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

Le voici dans la console :

Utilisation de getMedia dans la console.

Nous pouvons explorer l’objet image qui est renvoyé dans la console et voir que nous pouvons saisir toutes les tailles de données, de texte alternatif, de méta et d’image dont nous avons besoin pour afficher l’image.

Notez que les tailles d’image dans les exemples de données ci-dessous ont été abrégées, sinon cela dure un peu.

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"

Voyez cela en action dans l’ exemple de boucle de publication WordPress Gutenberg.