Taxonomy Term Background Images for Posts in Oxygen using ACF

This members-only tutorial provides the steps to set URL of the first term of a post/CPT item as the post's/item's background image in the posts list output by a Repeater when using Oxygen.

Let's take a sample scenario.

Custom Post Type: faq
Custom taxonomy for the faq CPT: faq_category
ACF image field for faq_category: term_image (Return format: image array)

Requirement: Display faq CPT items in a grid with each item's background image set to the URL of term_image custom field of the first faq_category that's assigned to each item.

This is similar to our previous Taxonomy Term-specific color coding in Oxygen tutorial.

Step 1

Let's define a custom function named say, wpdd_get_tax_term_image_url_for_post() that takes three optional arguments when called:

1. taxonomy name (default: category)
2. image field name (default: term_image)
3. image size (default: full)

and returns a string that can be used with Oxygen's Custom Attributes and Dynamic Data feature for the Repeater's Div.

Add the following PHP code snippet in your favorite code manager plugin like WPCodeBox and set it to load on front end:

Title: [Function] Get Post's Taxonomy Term Image as Background

Code: