wp_get_attachment_image Редактор блоків WordPress (Gutenberg) Еквівалент getMedia

Шукаєте, як отримати мініатюру допису або URL-адресу вкладення за його ідентифікатором у WordPress gutenberg?

Ви можете повернути об’єкт post, використовуючи еквівалент WordPress Gutenberg WP_Query (або еквівалент WordPress Gutenberg get_post ).

Зауважте, що в об’єкті публікації ви можете отримати ідентифікатор рекомендованого медіа, який зберігається у featured_mediaвластивості.

Потім ви можете використовувати, getMediaщоб отримати властивості для цього вкладення за його ідентифікатором, наприклад:

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

Ось це в консолі:

Використання getMedia в консолі.

Ми можемо дослідити об’єкт зображення, який повертається на консолі, і побачити, що ми можемо отримати всі дані, текст заміщення, мета та розміри зображення, необхідні для відображення зображення.

Зауважте, що розміри зображень у наведених нижче прикладах даних були скорочені, інакше вони триватимуть досить довго.

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"

Перегляньте це в дії на прикладі циклу публікації WordPress Gutenberg.