How to add taxonomy images to Elementor loop grid

Introduction

In this tutorial, you’ll learn how to add a list of taxonomy term images to a loop grid. Whether you’re showcasing recipe labels, product categories, or any other taxonomy-related images, this guide will improve the display and information presented in your loop grids.

Steps

Summary

It is quite simple to achieve. All you have to do is:

1. Add the PHP code snippet.
2. Set up your taxonomy term meta field using ACF.
3. Create your loop grid template.
4. Add the shortcode using the shortcode widget or dynamic tag.
5. Add the required key arguments to the loop grid.
6. Style the list using Custom CSS

PHP Code Snippet

Use your preferred code snippets plugin. Alternatively, add the following code to your child theme’s functions.php file.

<?php
function term_images_shortcode($atts) {
  // Extract shortcode attributes
  $atts = shortcode_atts(
    array(
      'tax'         => '',      // Default taxonomy
      'field'       => '',      // Default field
      'block-class' => '',      // Default block class
      'link'        => false,   // Default link value
      'image-size'  => 'full'   // Default image size
    ),
    $atts,
    'dd-term-images'
  );

  global $post;

  // Extract values from attributes
  $taxonomy_slug = sanitize_text_field($atts['tax']);
  $term_meta_field = sanitize_text_field($atts['field']);
  $bem_block_class = sanitize_text_field($atts['block-class']);
  $link_terms = filter_var($atts['link'], FILTER_VALIDATE_BOOLEAN);
  $image_size = sanitize_text_field($atts['image-size']); // Retrieve image size

  // Get the post ID
  $post_id = $post->ID;

  // Get the terms associated with the specified taxonomy
  $terms = wp_get_post_terms($post_id, $taxonomy_slug);

  // Initialize output
  $output = '<ul class="' . esc_attr($bem_block_class . '-group') . '">';

  // Loop through each term and retrieve the image metafield
  foreach ($terms as $term) {
    $term_id = $term->term_id;
    $image = get_field($term_meta_field, 'term_' . $term_id);

    if ($image) {
      // Apply the image size using ACF's `wp_get_attachment_image_url`
      $image_url = wp_get_attachment_image_url($image['id'], $image_size);

      // Construct the HTML structure based on the 'link' attribute
      if ($link_terms) {
        $output .= '<li class="' . esc_attr($bem_block_class) . '"><a class="' . esc_attr($bem_block_class . '__link') . '" href="' . esc_url(get_term_link($term)) . '"><img class="' . esc_attr($bem_block_class . '__img') . '" src="' . esc_url($image_url) . '" alt="' . esc_attr($term->name) . '"></a></li>';
      } else {
        $output .= '<li class="' . esc_attr($bem_block_class) . '"><img class="' . esc_attr($bem_block_class . '__img') . '" src="' . esc_url($image_url) . '" alt="' . esc_attr($term->name) . '"></li>';
      }
    }
  }

  $output .= '</ul>';

  return $output;
}

// Register the shortcode
add_shortcode('dd-term-images', 'term_images_shortcode');

The Shortcode

The shortcode is in the format [dd-term-images tax="your-taxonomy-slug" field="your-term-meta-field" block-class="class-name-for-styling" image_size="medium" link="true/false"].

Customise the shortcode with the following arguments:

• tax: specify the ACF taxonomy slug associated with the images.
• field: indicate the ACF field name where you store the images.
• block-class: Assign a BEM Block class name for styling the image list.
• image-size: Select the desired image size (e.g., full, large, medium, thumbnail).
• link: Decide if the images should link to their taxonomy term archives.

Example shortcode usage

[dd-term-images tax="recipe-label" field="recipe_label_image" block-class="recipe-category" image-size="medium" link="true"]

It creates the following HTML structure on the frontend:

Styling

The final step is to use custom CSS to style the image list. In the example, the CSS used is:

.recipe-category-group{
    list-style: none;
    padding: 0;
    margin: 0;
    
    position: absolute;
    bottom: 0;
    
    display: flex;
    gap: 1rem;
    justify-content: center;
    align-items: center;
    width: 100%;
}

Enhancing user experience with Tooltips

Consider adding tooltips to the images to provide additional context on hover. This helps users to gain a clearer understanding of the image’s meaning. This would improve accessibility and overall usability.

Conclusion

Follow these steps and incorporate visual cues like tooltips to successfully create informative and visually appealing loop grids. This will improve user experience.

Bard AI contributed to the creation of the code in this tutorial. If you notice any issues, your feedback is greatly appreciated.