Search code examples
wordpresstwigwordpress-themingtimber

Linking to images in Timber / Twig using WordPress

I am new to the world of Twig and Timber, I have just started a new job and I am having difficulty getting to grips with using it. I have been supplied a completed design in Twig which I have converted to a wordpress site and I am now trying to make it editable via ACF. In my front-page.php I have set the following:

$context['data'] = get_fields();

Then within the home page (twig file) of the supplied designs I was given, here is a section of code:

{% include [
    'override/pullquote.twig', 
    'components/pullquote.twig'
    ] with {
    'title': data.my_story_title,
    'section_class': 'light pullquote-standalone text-center',
    'image': data.my_story_image, 
    'blockquote': data.my_story_quote,
    'cite': '',
    'link_footer': "Read Ramon's story",
    'link_path': '#',
} %}

So I have created ACF options for title and blockquote, and using data.my_story_title and data.my_story_quote these work fine. However, the data.my_story_image does not, it does nothing. Where am I going wrong with this? Presumably I have to expand on it with it being and image but I'm not sure how. It is probably a simple thing - any help would be greatly appreciated.

Thank you :)

Solution

  • ACF normally returns an image ID therefore you likely need to convert the field value into an TimberImage before passing it to the template. Try :

    'image': Image( data.my_story_image )

    Also heres some useful documentation on using ACF with Timber/twig: https://timber.github.io/docs/guides/acf-cookbook/