Bildtext för utvalda bilder

En webbplats borde ange, var bilder kommer ifrån, särskilt när dessa bilder kommer från någon extern part. Det görs enklast i bildtexter (no Shit, Sherlock?) och kan enkelt göras i WordPress om du lägger in en bild för hand i en artikel eller sida. Däremot har WordPress i skrivande stund ingen funktion att automatiskt hämta och visa bildtexten för utvalda bilder. Vi löser det med några kodrader.

För att kunna visa bildtexter till utvalda bilder behöver vi göra några saker:

1. Vi behöver se till att det överhuvudtaget finns en bildtext till bilden.
2. Vi skapar en block-variation av Utvald-bild-blocket
3. Vi berätta för WordPress att vi vill använda den nya block-variationen
4. Vi fyller vår nya block-variation med innehåll.
5. Berätta för WordPress att den ska använda vår ändrade block istället för vanliga utvald-bild-blocket

Lägg till bildtexter till utvalda bilder

För att vi överhuvudtaget ska kunna visa någon bildtext så behövs det av förklarliga skäl just det: en bildtext. Den anger du i media-hanteringen i WordPress – eller direkt, när du laddar upp en bild.

Jag har som vana att direkt vid uppladdning lägga till ”Foto: Fotografens namn” för alla bilder jag använder på WordPress-sajter. Det gör att informationen följer med bilden och kan användas, där det behövs.

Skapa block-variation av Utvald-bild-blocket

I WordPress (eller snarare: Gutenberg) finns det ett färdigt block för att visa den utvalda bilden för ett inlägg. Tyvärr saknar det blocket möjligheten att också visa bildtexten och det är därför precis det blocket som vi vill ändra. Istället för att behöva kopiera och ändra all kod som tillhör ett block ger WordPress oss möjligheten att skapa en s.k. block-variation, där vi endast definierar det som ska ändras (och inte även allt annat som inte behöver ändras).

För att följa filstrukturen för blockbaserade teman gör vi det enklast i mappen temats mapp/assets/js/variations.js

Vi öppnar (eller skapar) denna fil och registrerar en ny block-variation:

wp.blocks.registerBlockVariation(
    'core/post-featured-image',
    {
        name: 'selig_post_featured_image',
        title: 'Utvald bild med bildtext',
        description: 'Visar inläggets utvalda bild, tillsammans med bildtext.',
        isActive: [ 'namespace' ],
        attributes: {
            namespace: 'selig_post_featured_image',
            className: 'selig-post-featured-image'
        },
        scope: [ 'inserter' ]
    }
);Code language: JavaScript (javascript)

Berätta för WordPress att vi vill använda block-variationen

För att WordPress ska veta om och använda block-variationen måste vi ”ställa den i kö”. Det gör vi med hjälp av följande rader i temats functions.php:

function selig_enqueue_block_variations() {
	wp_enqueue_script(
		'selig-enqueue-block-variations',
		get_stylesheet_directory_uri() . '/assets/js/variations.js',
		array( 'wp-blocks', 'wp-dom-ready' ),
		wp_get_theme()->get( 'Version' ),
		false
	);
}
add_action( 'enqueue_block_editor_assets', 'selig_enqueue_block_variations' );Code language: PHP (php)

Fyll nya block-variation med innehåll

I samma fil (alltså temats functions.php) skapar vi innehållet. Det enda vi behöver göra är att berätta för WordPress att det innan den avslutande </figure>-taggen ska läggas till en <figcaption>-tagg med bildtexten.

function include_featured_image_caption($block_content, $block){
    if ( isset($block['attrs']['className']) && $block['attrs']['className'] === 'selig-post-featured-image') {
        $caption = '<figcaption class="selig-caption">' . get_the_post_thumbnail_caption() . '</figcaption>';
        $block_content = str_replace('</figure>', $caption . '</figure>', $block_content);
    }
    return $block_content;
}Code language: PHP (php)

Berätta för WordPress att den ska använda vår ändrade block

Och till slut behöver vi berätta för WordPress att den faktiskt ska använda vårt nya block. Det görs genom funktionen add_filter, fortfarande i samma fil, dvs temats functions.php

add_filter( 'render_block_core/post-featured-image', 'include_featured_image_caption', 10, 2 );Code language: JavaScript (javascript)