Search code examples
twigadvanced-custom-fieldstimber

Using an ACF gallery with Timber/Twig

I'm using Timber (the WordPress plugin implementation of Twig) and the Advanced Custom Fields plugin gallery field. I have a working gallery under a custom post type, so ACF and Timber are working elswhere in the site, but not for a standard page. When I try to add a gallery to a page, all I end up with is empty markup for the img src tag.

I have this in page.php in the template folder:

$context = Timber::get_context();
$page = new TimberPost();

$context['page'] = $page;

if ($photos = $page->get_field('photos')) {
    $context['photos'] = $photos;
}

I have this in default.twig in the templates/page/ folder in the theme (html removed for simplicity):

{% if page.photos %}

{% for p in page.photos %}

<img src="{{ p.sizes.gallery|relative }}" alt="{{ p.alt }}" /> 

{{ p.caption }}

{% endfor %} 

{% endif %}

This results in the page source <img src="" alt="">.

If I use {{ dump(photos) }} inside the for p in page.photos statement, it dumps the array of images I have entered in the Gallery field on the backend. So the image array exists and it being output. The relative extension runs for all post types; removing it makes no difference here.

So why is the p.sizes.gallery|relative function not outputting each image's url and caption?

Solution

  • You append the data to the $context['photos'] so I believe you should change your code to check for if photos and iterate as for p in photos