[Closed] Use Taxonomy Term Image Field as background image On Archive Pages

[Author]

Posts

[carlosA-12]

Tell us what you are trying to do?
I want to upload a featured image for every archive/category page
I created a custom field / terms field and put an image in there and applied that to my archives.
The image upload showed up and I added images to it.

in toolset WordPress archives - I created a template to display all my archive pages. In my row field - build with kadence - it does not find the new image field so I cant apply that as a background image to my hero section. Not sure why it does not show up.

[carlosA-12]

This is the interface.

[carlosA-12]

Seems like people have been waiting on this for years.

https://toolset.com/forums/topic/creating-an-archive-that-use-custom-archive-fields/

What is the point of allowing custom fields for archive pages if you cannot easily display them on archive pages? Please give me a solution.

[Nigel]

Hi there

Can you please clarify where you are adding custom fields to an archive?

Toolset custom fields can be added to posts, to users, or to taxonomy terms.

Am I to understand that you are creating field a field group assigned to a taxonomy which includes an image custom field, so you add an image to each term of the taxonomy?

And then when you create a custom taxonomy archive you want to output the image corresponding to the particular term being displayed by the archive?

If that is what you are aiming to do, you will see that dynamic sources doesn't support this option.

It is possible to output such an image, but it will take a little extra work, in particular you'll have to add the markup for the image yourself in a block such as a Custom HTML block, and then use a shortcode to provide the value for the src attribute. (The shortcode will output the URL of the image from the custom field added to the term.)

At a basic level that means doing something like this (inside a Custom HTML block):

<img src="[wpv-taxonomy-field name='wpcf-image-field-slug']" width="800" height="400">

You'll need to replace "image-field-slug" with the slug of your custom image field.

Reference: https://toolset.com/documentation/programmer-reference/views/views-shortcodes/#wpv-taxonomy-field

[carlosA-12]

Nnigel, so you are saying its not possible to dynamically feed this image into kadence so it can be used as a background on a row? How else would I go about getting a featured hero image on archive pages? Only option is to embed an image in HTML?

[carlosA-12]

I really need the ability to assign an image to display on each taxonomy page. Kadence would dynamically grab the image from toolset somehow. That is the hope.

[carlosA-12]

hidden link
Just an overview of what Im trying to do

[Nigel]

>so you are saying its not possible to dynamically feed this image into kadence so it can be used as a background on a row? How else would I go about getting a featured hero image on archive pages? Only option is to embed an image in HTML?

That's right, I'm afraid. Dynamic sources doesn't make term meta available in that context, and you will need a solution that uses shortcodes, as described above.

For this particular scenario rather than using the UI tools it will be necessary to recreate the corresponding markup and styles for the desired effect, or their equivalent.

You may want to place a static image in the block editor so that you can visit it on the front end and copy the resulting markup to use in your Custom HTML block.

A background image likely adds the image URL via CSS. To do the same where the URL is dynamically generated by a shortcode, you can use style tags in your Custom HTML block to add CSS that includes the shortcode, e.g.

<style>
.image-container {
  background-image: url("[wpv-taxonomy-field name='wpcf-image-field-slug']");
}
</style>