Hi,
I’ve added an Image field to my custom Taxonomy Brands and I want to list the terms attached to a post along with the image associated with that term.
My code below lists the terms but is showing an array of data about the attached image but not the image itself:
<?php
$terms = get_the_terms( get_the_ID(), 'brands' );
if( ! empty( $terms ) ) : ?>
<ul>
<?php foreach( $terms as $term ) : ?>
<li class="<?php echo $term->slug; ?>">
<?php the_field('brand_logo', $term); ?>
</li>
<?php endforeach; ?>
</ul>
<?php
endif;
?>
Any help much appreciated.
When setting up the image field there is a setting for return value, you can set this to url, id or object/array. Information on how to work with each of these is in the image field documentation https://www.advancedcustomfields.com/resources/image/.
I’ve tried all 3 return value settings. Each time, on the front-end it just displays either an array of all the image data, image id or URL.
I’ve now got it working with the following code:
<?php
$terms = get_the_terms( get_the_ID(), 'product_brands' );
if( ! empty( $terms ) ) : ?>
<ul>
<?php foreach( $terms as $term ) : ?>
<li class="<?php echo $term->slug; ?>">
<img src="<?php the_field('brand_logo', $term); ?>" />
</li>
<?php endforeach; ?>
</ul>
<?php
endif;
?>
I had to change the taxonomy name from brands to product_brands because I was already using a brands taxonomy for another CPT. However, this wasn’t the cause of the images not displaying, the only thing that was missing before was wrapping the <?php the_field(‘brand_logo’, $term); ?> in an image tag, seems obvious now.
Are there any issues doing it this way?.
Would you mind showing me how this last code would look like if the output of that image field HAD to be the image ID?
I´m trying to get it to work on a CPT’s single.php and show the custom taxonomy term’s image this post is associated with.
Any hint would be appreciated!
instead of using <img src="<?php the_field('brand_logo', $term); ?>" /> you would need to do something like
$image_id = get_field('brand_logo', $term, false); // 3rd arg set to false to ensure we get unformatted value (ID)
// $size is a defined image size
// see https://developer.wordpress.org/reference/functions/wp_get_attachment_image_src/
$image = wp_get_attachment_image_src($image_id, $size);
?>
<img src="<?php echo $image[0]; ?>" />
<?php
Hej John,
thanks!
For some reason, the code I “merged” displays the image two times. My code looks like this (yes, I´m not php savy at all ):
<?php
$terms = get_the_terms( get_the_ID(), ‘brand’ );
if( ! empty( $terms ) ) : ?>
<?php foreach( $terms as $term ) : ?>
<?php
$image_id = get_field(‘brand_logo’, $term, false);
$image = wp_get_attachment_image_src($image_id, $size);
?>
![]()
” />
<?php endforeach; ?>
<?php endif;
?>
any idea?
thanks!
Argh… figured it out. My bad.
Huge, huge thanks, John!
