0

I have created a custom image taxonomy field in WordPress using CMB2. I cannot get the images to display for website visitors even though my code uses get_term_meta. (The taxonomy images are amenity icons such as WiFi, shower head, electricity etc).

What am I doing wrong?

Relevant (not working) code in single-accommodation.php:

<?php
$term_id = get_queried_object()->term_id;
$tax_image = get_term_meta( $term_id, 'custom_taxonomy_image', true );

if ( $tax_image ) {
    printf( '<div class="icon"><img src=$s /></div>', $tax_image );
}
?>

I'm sure i'd need a foreach somewhere, like this:

<ul class="amenity-icons">
<?php
foreach( $terms as $term => $icon ) {
   if( isset( $term ) ) {
      echo '<li>' . $icon . '</li>';
   }
}
?>
</ul>

I can successfully retrieve the term list as words using:

<?php the_terms( get_the_ID(), 'amenity' ); ?>
  • i hope this works for you. use like this. printf( "<div class=icon ><img src=%s /></div>", $tax_image ); – user147874 Dec 20 '18 at 4:31
  • you are using " $ " in printf you should use % instead of $. " src=%s " instead of " src=$s ". – user147874 Dec 20 '18 at 4:35
1

Use printf with an img tag and wp_get_attachment_image_src

<?php
$term_id = get_queried_object()->term_id;
$tax_image = get_term_meta( $term_id, 'custom_taxonomy_image', true );
$image_id = wp_get_attachment_image_src( $tax_image, 'full' );

if ( $image_id ) {
printf( '<div class="icon"><img src=$s /></div>', $image_id );
}
?>
  • Thanks for the edit, Shawn. Nothing at all is showing, though... do I need to combine this with my working line of code somehow? It doesn't mention my custom taxonomy 'amenity' currently. – the-first-man Dec 19 '18 at 2:18
  • Answer updated. – Shawn W Dec 19 '18 at 2:33
  • Thanks again, Shawn. Still nothing. Should I be adjusting the $term_id variable to mention my custom taxonomy? – the-first-man Dec 19 '18 at 2:37
  • Hmm, try it and see if that works. – Shawn W Dec 19 '18 at 2:43
  • Sadly it still doesn't. Can you see how I might need to include a reference to my custom taxonomy? (Like the working line of code) – the-first-man Dec 19 '18 at 2:47
1

If you're using the code on a single post page, then these are both empty:

$term_id = get_queried_object()->term_id; // ''
$tax_image = get_term_meta( $term_id, 'custom_taxonomy_image', true ); // false

because on single post pages, get_queried_object() is a post object and not a term object.

And if this works well on that page:

<?php the_terms( get_the_ID(), 'amenity' ); ?>

Then you can loop through get_the_terms() like so, to display the custom term icon:

$terms = get_the_terms( get_the_ID(), 'amenity' );
if ( $terms && ! is_wp_error( $terms ) ) {
    echo '<ul>';
    foreach ( $terms as $term ) {
        $icon = get_term_meta( $term->term_id, 'custom_taxonomy_image', true );
        echo '<li>' . $icon . '</li>';
    }
    echo '</ul>';
}

If the value of the custom_taxonomy_image field is not an <img> tag, then you can manually generate the <img> tag, or use wp_get_attachment_image() if the value is an attachment ID.

  • If $icon is an image URL:

    echo '<li><img src="' . esc_url( $icon ) . '" /></li>';
    
  • If $icon is an attachment ID:

    echo '<li>' . wp_get_attachment_image( $icon ) . '</li>';
    

UPDATE

Removed, but you can always check the answer's revisions.

UPDATE #2

The original answer was meant to show how can you loop through the post terms (which retrieved via get_the_terms()) to retrieve the meta value via get_term_meta(). Now via this update, I hope you can properly display the custom term icon(s).

  • If the field value is an array of attachment ID => image URL, where the value looks like: (this is specific to the file_list field in CMB2)

    array(
        123 => 'Original image URL',
        456 => 'Original image URL',
        ...
    )
    

    then:

    // Here the field name is assumed custom_taxonomy_images
    $terms = get_the_terms( get_the_ID(), 'amenity' );
    if ( $terms && ! is_wp_error( $terms ) ) {
        foreach ( $terms as $term ) {
            $icons = get_term_meta( $term->term_id, 'custom_taxonomy_images', true );
    
            $list = array();
            foreach ( (array) $icons as $id => $url ) {
                if ( ! $image = wp_get_attachment_image( $id, array( 24, 24 ) ) ) {
                    $image = 'Default icon here';
                }
                $list[] = $image;
            }
    
            echo '<li>' . implode( ' ', $list ) . '</li>';
        }
    }
    
  • If the field value is an image URL:

    // Here the field name is assumed custom_taxonomy_image_url
    $terms = get_the_terms( get_the_ID(), 'amenity' );
    if ( $terms && ! is_wp_error( $terms ) ) {
        foreach ( $terms as $term ) {
            $url = get_term_meta( $term->term_id, 'custom_taxonomy_image_url', true );
            $url = $url ? $url : 'http://example.com/default-image-url.jpg';
            echo '<li><img src="' . esc_url( $url ) . '" width="24"></li>';
        }
    }
    
  • If the field value is an attachment ID:

    // Here the field name is assumed custom_taxonomy_image_id
    $terms = get_the_terms( get_the_ID(), 'amenity' );
    if ( $terms && ! is_wp_error( $terms ) ) {
        foreach ( $terms as $term ) {
            $id = get_term_meta( $term->term_id, 'custom_taxonomy_image_id', true );
            if ( ! $image = wp_get_attachment_image( $id, array( 24, 24 ) ) ) {
                $image = 'Default icon here';
            }
            echo '<li>' . $image . '</li>';
        }
    }
    

Note: The value 24 (pixels) is just an example width/height.

  • I really appreciate the comprehensive reply, Sally! Unfortunately, your main loop above returns an Array to string conversion notice on line 22 (with the $icon). – the-first-man Dec 19 '18 at 3:35
  • Replacing that line with image URL displays Warning: stripos() expects parameter 1 to be string, array given in ../wp-includes/formatting.php error. Replacing with attachment ID displays no errors but crucially no icons. – the-first-man Dec 19 '18 at 3:37
  • 1
    What is var_dump( $icon )? You basically just need to identify the proper array key and do something like $icon['THE KEY']. – Sally CJ Dec 19 '18 at 3:39
  • var_dump ($icon) gives: array(1) { [572]=> string(89) "http://path/to/image.jpg" } – the-first-man Dec 19 '18 at 3:45
  • Check updated answer. But why not use the file (i.e. single image) type for the term icon? Check this. – Sally CJ Dec 19 '18 at 4:06

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.