{"id":228195,"date":"2022-10-17T12:33:00","date_gmt":"2022-10-17T09:33:00","guid":{"rendered":"https:\/\/wordpress.mediadoma.com\/?p=228195"},"modified":"2022-11-09T01:13:44","modified_gmt":"2022-11-08T22:13:44","slug":"wp_get_attachment_image-wordpress-block-editor-gutenberg-motsvarande-aer-getmedia","status":"publish","type":"post","link":"https:\/\/wordpress.mediadoma.com\/sv\/wp_get_attachment_image-wordpress-block-editor-gutenberg-motsvarande-aer-getmedia\/","title":{"rendered":"wp_get_attachment_image WordPress Block Editor (Gutenberg) Motsvarande \u00e4r getMedia"},"content":{"rendered":"

Letar du efter hur man f\u00e5r inl\u00e4ggets miniatyrbild, eller en bifogad webbadress med dess Id i WordPress gutenberg?<\/p>\n

Du kan ha ett returnerat postobjekt genom att anv\u00e4nda WordPress Gutenberg-motsvarigheten till WP_Query<\/a> (eller WordPress Gutenberg-motsvarigheten till get_post<\/a> ).<\/p>\n

Observera att i postobjektet kan du f\u00e5 det utvalda media-ID:t, som lagras i featured_media<\/code>egenskapen.<\/p>\n

Du kan sedan anv\u00e4nda f\u00f6r getMedia<\/code>att f\u00e5 egenskaperna f\u00f6r den h\u00e4r bilagan efter dess ID, s\u00e5 h\u00e4r:<\/p>\n

wp.data.select( 'core' ).getMedia( 42 );\n<\/code><\/pre>\n
H\u00e4r \u00e4r den i konsolen:<\/p>\n
Anv\u00e4nder getMedia i konsolen.<\/p>\n
Vi kan utforska bildobjektet som returneras i konsolen, och se att vi kan ta tag i all data, alt-text, meta- och bildstorlekar som vi beh\u00f6ver f\u00f6r att visa bilden.<\/p>\n
Observera att bildstorlekarna i exemplet nedan har f\u00f6rkortats, annars p\u00e5g\u00e5r det en hel del.<\/p>\n
id: 101\ndate: \"2020-03-21T14:02:00\"\ndate_gmt: \"2020-03-21T14:02:00\"\nguid: {\n    rendered: \"https:\/\/wholesomecode.ltd\/wp-content\/uploads\/2020\/03\/Code-Example.png\"\n    raw: \"https:\/\/wholesomecode.ltd\/wp-content\/uploads\/2020\/03\/Code-Example.png\"\n}\nmodified: \"2020-03-21T14:02:00\"\nmodified_gmt: \"2020-03-21T14:02:00\"\nslug: \"code-example\"\nstatus: \"inherit\"\ntype: \"attachment\"\nlink: \"https:\/\/wholesomecode.ltd\/code-example\/\"\ntitle: {\n    raw: \"Code Example\"\n    rendered: \"Code Example\"\n}\nauthor: 1\ncomment_status: \"closed\"\nping_status: \"closed\"\ntemplate: \"\"\nmeta: {\n    _wcltd_meta_example_1: \"1\"         \n    _wcltd_meta_example_2: \"Hello\"\n}\npermalink_template: \"https:\/\/wholesomecode.ltd\/wp-content\/uploads\/2020\/03\/Code-Example.png\/?attachment_id=101\"\ngenerated_slug: \"code-example\"\ndescription: {\n    raw: \"Code Example\"\n    rendered: \"...\"\n}\ncaption: {\n    raw: \"Code Example\"\n    rendered: \"<p>Code Example<\/p>\u21b5\"\n}\nalt_text: \"Code Example\"\nmedia_type: \"image\"\nmime_type: \"image\/png\"\nmedia_details: {\n    width: 2310\n    height: 1400\n    file: \"2020\/03\/Code-Example.png\"\n    sizes: {\n        ...\n        large: {\n            file: \"Code-Example-1024x621.png\"\n            width: 1024\n            height: 621\n            mime_type: \"image\/png\"\n            source_url: \"https:\/\/wholesomecode.ltd\/wp-content\/uploads\/2020\/03\/Code-Example-1024x621.png\"\n        }\n    }\n    image_meta: {\n        aperture: \"0\"\n        credit: \"\"\n        camera: \"\"\n        caption: \"\"\n        created_timestamp: \"0\"\n        copyright: \"\"\n        focal_length: \"0\"\n        iso: \"0\"\n        shutter_speed: \"0\"\n        title: \"\"\n        orientation: \"0\"\n    }\n}\npost: null\nsource_url: \"https:\/\/wholesomecode.ltdwp-content\/uploads\/2020\/03\/Code-Example.png\"\n<\/code><\/pre>\n
Se detta i aktion i WordPress Gutenberg post loop exemplet<\/a>.<\/p>\n
Inspelningsk\u00e4lla:  wholesomecode.ltd<\/a><\/div><\/p>\n","protected":false},"excerpt":{"rendered":"
Letar du efter hur du f\u00e5r inl\u00e4ggsminiatyren, eller en bifogad webbadress med dess Id i WordPress gutenberg? Du kan ha ett returnerat inl\u00e4ggsobjekt genom att anv\u00e4nda WordPress Gutenbergs motsvarighet till…<\/p>\n","protected":false},"author":1,"featured_media":223619,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":"","_wp_rev_ctl_limit":""},"categories":[942,901,724,868],"tags":[1173],"class_list":["post-228195","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-gutenberg-9","category-koda","category-utvecklaren","category-wordpress-9","tag-affiai-sv"],"_links":{"self":[{"href":"https:\/\/wordpress.mediadoma.com\/sv\/wp-json\/wp\/v2\/posts\/228195","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/wordpress.mediadoma.com\/sv\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/wordpress.mediadoma.com\/sv\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/sv\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/sv\/wp-json\/wp\/v2\/comments?post=228195"}],"version-history":[{"count":0,"href":"https:\/\/wordpress.mediadoma.com\/sv\/wp-json\/wp\/v2\/posts\/228195\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/sv\/wp-json\/wp\/v2\/media\/223619"}],"wp:attachment":[{"href":"https:\/\/wordpress.mediadoma.com\/sv\/wp-json\/wp\/v2\/media?parent=228195"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/sv\/wp-json\/wp\/v2\/categories?post=228195"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/sv\/wp-json\/wp\/v2\/tags?post=228195"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}