在 Timber/Twig 主题中使用 WordPress 自定义 header 图像

Question

WordPress/Timber/Twig theme newbie here. I am wanting to bring the theme custom header image into a Timber-based Twig theme. I know you need to tie into the theme customizer API and have this code {{ function('get_theme_mod', 'name') }} , but I do not know how to adapt it to work with custom header images.

Any suggestions or tips?

Answer 1

I have figured out the function code. I have accessed the image source using {{ function('get_theme_mod', 'header_image') }} , but now I am wondering how to access the alt text defined for the custom header image using Timber/Twig.

Answer 2

You can get the image from customizer using below:

{{ theme.theme_mod('header_image')

If you want to get the alt attribute then you can create a filter that can get you the the alt attribute of an image URL.

First, create a function in functions.php:

public function altText( $url ) {
    $feature1_id = attachment_url_to_postid( $url );
    $image1_alt = get_post_meta( $feature1_id, '_wp_attachment_image_alt', true );

    return $image1_alt;
}

Then add it as a filter:

$twig->addFilter( new Twig\TwigFilter( 'altText', array( $this, 'altText' ) ) );

Then use it in the template:

{{ theme.theme_mod('header_image') | altText }}