How to show image on front end

  • Michael D

    (@michael-divine)


    4 years, 4 months ago

    After struggling with this for a long time, I really have come to a standstill. It shows up just fine on the backend. I uploaded images, etc.

    But on the front end… I have a page where I have an unordered list of tags and I’d like thumbanils with them like this:

    <div class="product-tags">
<ul>
<?php foreach ( $terms as $term ) { ?>
    <li><a href="<?php echo get_term_link( $term->term_id, 'product_tag' ); ?> " rel="tag">
	
	<img src="<?php $image_url = apply_filters( 'taxonomy-images-queried-term-image-url', '' ); ?>">
	
	<?php echo $term->name; ?></a></li>
 

<?php } ?>
 </ul>
</div>

    you can note that I tried to show the image as per the plugin author’s instructions but nothing displays.

    <img src="<?php $image_url = apply_filters( 'taxonomy-images-queried-term-image-url', '' ); ?>">

    How do I get each tag to show its accompanying image?

Viewing 11 replies - 1 through 11 (of 11 total)
  • nicole2292

    (@nicole2292)

    4 years, 3 months ago

    Hi Michael,

    Did you find a solution to this issue?

    I too am having trouble displaying the images in the front end as I am using get_terms(); to retrieve the terms for my custom taxonomy.

    When I use the recommended instructions as you did above I see the following error:
    “Notice: term_taxonomy_id is not a property of the current queried object. This usually happens when the taxonomy-images-queried-term-image-id filter is used in an unsupported template file. This filter has been designed to work in taxonomy archives which are traditionally served by one of the following template files: category.php, tag.php or taxonomy.php.”

    The error makes sense… I am trying to use this on the products archive page (custom post type archive page) using get_terms() rather than a taxonomy archive page.

    Where are the instructions for using this with get_terms(); ?

    Thanks very much,

    Nicole

    nicole2292

    (@nicole2292)

    4 years, 3 months ago

    Following on from above I have spent some more time trying to implement following the documentation under the heading “WORKING WITH ALL TERMS OF A GIVEN TAXONOMY”

    I have the following code:

    
$args = array(
   'taxonomy' => 'product_categories',
   'hide_empty' => false,
);

//$terms = get_terms( $args ); //replaced with the filter below
$terms = apply_filters( 'taxonomy-images-get-terms', $args );

    So if I use the standard get_terms line then I can retrieve all my terms from the “product_categories” taxonomy. However as soon as I replace it with the custom filter for this plugin everything breaks and I see the error: “Notice: The category taxonomy does not have image support.”

    I’m not even trying to retrieve the “category” taxonomy. I’m retrieving the “product_categories” taxonomy as is specified clearly in the $args and works with the standard get_terms();

    Is this a bug?

    nicole2292

    (@nicole2292)

    4 years, 3 months ago

    In all honesty I have resolved this by using ACF (Advanced Custom Fields) to create an image field for each taxonomy term rather than this plugin as this plugin was not working with get_terms(). Using ACF I have complete control to retrieve the image and place it anywhere it is required in the theme files.

    @michael-divine please let me know if you want some further explanation on my workaround 🙂

    Pala4833

    (@pala4833)

    4 years, 2 months ago

    Nicole, could you explain your work around a bit. I looking for info on using ACF to do just this.

    cevans247

    (@cevans247)

    4 years, 1 month ago

    Hi @nicole2292 could you explain your work around please, thank you

    Naider Araújo

    (@naitech)

    3 years, 11 months ago

    $args = array(
    'taxonomy'      => 'category',
    'term_args'    => array(
        'hide_empty'    => false,
        'parent'        => 0
    )
);
$terms = apply_filters( 'taxonomy-images-get-terms', '', $args );

foreach ($terms as $term){
   $image = wp_get_attachment_image_src($term->image_id, 'thumbnail');
   print_r($image);
}
    elijahdavidson

    (@elijahdavidson)

    3 years, 10 months ago

    @nicole2292 I am very interested in your workaround which you mention above.

    nicole2292

    (@nicole2292)

    3 years, 10 months ago

    Hi @elijahdavidson are you familiar with the Advanced Custom Fields plugin?

    Use this plugin here: https://wordpress.org/plugins/advanced-custom-fields/

    Set up an image field for the taxonomy term. Here is some documentation on that: https://www.advancedcustomfields.com/resources/adding-fields-taxonomy-term/

    Retrieve the image field in your template file. Here is the documention for setting up the image field and the code for retrieving and displaying it in your theme: https://www.advancedcustomfields.com/resources/image/

    I hope that helps 🙂

    Nicole

    elijahdavidson

    (@elijahdavidson)

    3 years, 10 months ago

    @nicole2292 Thank you so much!

    Thread Starter Michael D

    (@michael-divine)

    3 years, 10 months ago

    Thanks @nicole2292
    I meant to look at this a while back and forgot. I simply gave up and hard coded a page with a list and all the images since the tags themselves and how I’m using them doesn’t change much.

    I don’t think the custom fields tho would work in this case however.

    <div class="product-tags">
<ul>
<li><a href="URL" rel="tag"><img src="TAGTHUMB.JPG" /><h2>TAG NAME</h2></a></li>
<li>....etc....</li>
</ul>
</div

    @naitech – I’m not clear on what you posted. Is that to go in the functions.php file?

    nicole2292

    (@nicole2292)

    3 years, 10 months ago

    HI @michael-divine

    Yes ACF would work perfectly in that use case. You would just need to add an image field ‘category_image’ for taxonomy terms then assign each image to the field when editing the respective taxonomy. Put your code above in your theme file for archive-product.php but replace the hard coded image src in yoru code with the one you get from ACF.

    So I have a templale file “archive-product.php”. Here is the relevant code for this from mine:

    $args = array(
    'taxonomy' => 'product_categories',
    'hide_empty' => false,
);

$i = 0;

$terms = get_terms( $args ); 

if ( ! empty( $terms ) && ! is_wp_error( $terms ) ) {
    foreach ( $terms as $term ) {
    	$i++;
    	$image = get_field('category_image', $term);
        ?>
        <a href="<?php echo esc_url( get_term_link( $term ) ); ?>" class="box box<? echo $i; ?>" style="background-image: url('<?php echo $image; ?>')">
			<div class="bg-hover"></div>
			<p class="title"><?php echo $term->name; ?></p>
		</a>
        <?php
    }  
}
    • This reply was modified 3 years, 10 months ago by nicole2292.
    • This reply was modified 3 years, 10 months ago by nicole2292.
Viewing 11 replies - 1 through 11 (of 11 total)
  • The topic ‘How to show image on front end’ is closed to new replies.