Back to contents

JetEngine: How to Add a Thumbnail to the Taxonomies

From this tutorial, you will learn how to add a thumbnail for the specific taxonomy and then display it for the term in the template using JetEngine.

JetEngine plugin has special widgets for adding dynamic content. One of them is the Dynamic Image widget which was designed for displaying dynamic images for the custom post types and taxonomies templates.

With JetEngine you can easily add a meta field for the image content and then pull it to display on a page or template built with Elementor, providing attractive images for the terms you’ve got.

How to set thumbnails for taxonomies

Step 1 — Open the WordPress Dashboard and navigate to JetEngine > Taxonomies block.

Taxonomies block

Step 2 — Click the Add New button at the top of a page.

Step 3 — Provide a new taxonomy with a title and a slug.

Step 4 — After that, apply it for the specific posts type (E.g. Posts, Pages, Products) and scroll the page down to locate the Meta Fields block.

Meta Fields block

Step 5 — Set the title, ID for your new meta field and select the Media type from the Type dropdown.

Step 6 — Click the Add Taxonomy button and go back to the Dashboard.

Step 7 — Here hover over the custom post type/ default post tab (this should be the post type to which you’ve added a taxonomy).

Editing taxonomy

Step 8 — Afterward, you will need to add the terms (either in the way you’re often adding tags in case the taxonomy is not hierarchical or the way you’re usually adding categories if there is a hierarchy). Provide each of the terms you’re creating with the title, slug, and description.

Step 9 — Then, click the Choose Media button to open the library where you can pick an image for a new term.

Step 10 — Make sure you’ve assigned at least one post to each of the terms. To do it, open the posts for quick editing.

Posts editing

Step 11 — Then just set the terms for each of them and hit Update to save the results.

Step 12 — Let’s proceed to the JetEngine > Listings tab in the Dashboard in order to make sure that the thumbnail was added. Here create a listing template with the thumbnail image we’ve got now.

Listings tab

Step 13 — Click the Add New button, select the Terms source from the Listing Source dropdown and choose the taxonomy you’ve recently created.

Terms source from the Listing Source

Step 14 — Click the Create Listing Item button and you will be redirected to Elementor editor.

Step 15 — Here you need to find the Dynamic Image widget and drop it to the page’s canvas.

Step 16 — Open the Content block in the widget settings and select the meta field from the Source dropdown.

Dynamic Image widget

Now, if you’ve done everything correctly the images will be displayed in the listing template, and you can create a listing grid with the terms showcased. And the Listing Grid widget will display the thumbnail images of the terms you’ve got.