How to add taxonomy images to Elementor loop grid

David Denedo

David Denedo

Updated on .

Table of Content

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.
The screenshot of the ACF Taxonomy Key
ACF Taxonomy Key
screenshot showing the acf taxonomy field name
ACF Taxonomy Meta Field Name

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:

generated html for the recipe label shortcode

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.

a sample recipe loop card showing the image of a bowl of roasted veg tacos with avocado cream and feta and the title at the bottom showing a tooltip on the recipe label showing low carb

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.

0 0 votes
Article Rating
Subscribe
Notify of
guest
1 Comment
Oldest
Newest Most Voted
Inline Feedbacks
View all comments
Creative Andrew
5 April 2024 3:31 pm

Works really well. Thanks