How to output ACF meta fields attached to categories in WordPress and Timber

Question

I have assigned an image field to the core post categories and set its output to Image ID. I have uploaded images to each category and have setup the following PHP and Timber/Twig code in my templates to output the category content. The core WordPress category fields like name, slug, and description all work correctly, but the ACF fields do not output. I have tried a variety of ways to output the fields, but nothing seems to work.

The Timber docs cover images and other fields for posts (<img src="{{ Image(post.meta('hero_image')).src }}" />), but little to nothing for categories and terms ({{ category.meta('category_image') }}). The latter example did not work.

I have tried dumping {{ dump(category) }}, but nothing related to the ACF fields is outputted.

Any suggestions on what I am missing.

Any help is greatly appreciated.

Cheers

PHP

$context = Timber::context();

$terms = get_terms([
  'taxonomy' => 'category',
  'parent' => '7',
  'orderby' => 'name',
  'order' => 'ASC',
]);

$category = new \Timber\Term(get_queried_object());

// Get category_image field from category
// Only works on single category pages
$category_image = get_field( 'category_image', $category );

// Tried this, but still nothing
// Would I need to loop through $terms first?
$category_image = get_field( 'category_image', $terms );

if( $category->parent == 0 ) {
  $templates = array( 'category.twig' );
  $context['categories'] = $terms;
}

Timber::render( $templates, $context );

Timber/Twig

{% for category in categories %}
  <div class="category">
    <a href="{{ site.link }}/category/stories/{{ category.slug }}">
      <figure>
        <figcaption>
          {{ category.name }}
        </figcaption>
        <!-- Does not work -->
        {{ category.meta('category_image') }}
      </figure>
    </a>
  </div>
{% endfor %}

Answer 1

If you want your terms to work similar to how you’re used to work with Timber posts, you need to make sure that you the functions provided by Timber to get all the Timber functionality and not the Core WordPress functions.

Also, if you try to get the image for multiple categories, your code snippet won’t work, because ACF’s get_field() function doesn’t accept an array of IDs/objects. This is not directly related to Timber but is about how ACF works.

(This doesn’t work)

// Tried this, but still nothing
// Would I need to loop through $terms first?
$category_image = get_field( 'category_image', $terms );

So instead of

$terms = get_terms( [
  'taxonomy' => 'category',
  'parent'   => '7',
  'orderby'  => 'name',
  'order'    => 'ASC',
] );

you should use

$terms = Timber::get_terms( [
  'taxonomy' => 'category',
  'parent'   => '7',
  'orderby'  => 'name',
  'order'    => 'ASC',
] );

This way, you’ll get Timber\Term objects instead of WP_Term objects in the same way as when you do $category = new \Timber\Term( get_queried_object() );. Only then can you use category.meta().

Your Twig file should work as soon as you update your PHP code. You don’t have to loop over the categories in your PHP to get all the images. You can update your code for the category image in your Twig from

<!-- Does not work -->
{{ category.meta('category_image') }}

to

<img src="{{ Image(category.meta('category_image')).src }}" />

Small advice – Make sure you return only the image id in your category_image field group configuration in ACF. This way, ACF doesn’t have to have to fetch the image information first and you can save some performance.

Maybe you could even replace

<a href="{{ site.link }}/category/stories/{{ category.slug }}">

with

<a href="{{ category.link }}">