[Resolved] Output cf image on Archive page

[Author]

Posts

[Thorworx]

Tell us what you are trying to do?
Trying to display a cf category image on the relevant archive page.

Is there any documentation that you are following?
https://toolset.com/course-lesson/creating-a-custom-archive-page/
https://toolset.com/course-lesson/styling-views-and-archives/
https://toolset.com/course-lesson/display-dynamic-sources-inside-all-text-blocks/

Is there a similar example that we can see?

What is the link to your site?
hidden link

I have added a category image using a custom field:
[types termmeta='service-area-category-image' title='%%TITLE%%' alt='%%ALT%%' size='full'][/types]

I'm using a Kadence child theme, and I need to display the category image in the Hero Header section, but I'm not sure how to output the cf image in the CSS with the proper syntax:

.projects-archive-hero-section .entry-hero-container-inner {
background-image:;
}

There is an archive-hero.php template part that I can edit if necessary.

Thanks for any help!

[Minesh]

Hello. Thank you for contacting the Toolset support.

First of all, I would like to know are you using block view mode to design your category archive or legacy view mode?

Can you please share problem URL and admin access details and tell me on what area of page you want to display the category image?

Do you want to display category image from your child theme? if yes, please check the following Doc that shows example how you can display the term custom field using Types PHP API function: types_render_termmeta()
- https://toolset.com/documentation/displaying-wordpress-term-fields/#displaying-term-fields-with-types-api

[Minesh]

I checked the problem URL you shared for your taxonomy archive and the thing is that.

Basically, when you use Views/Archives, it will have effect on the page body (page content) not the header/footer or sidebears. You can deal with Header/Footer or Sidebars if you are using Toolset integrated theme and such options are integrated. But with Kandence theme we have limited integration hense there is no option to manage the header backgroup image.

As a workaround, I've crerated the following taxonomy view in legacy/classic mode and added the taxonomy filter:

Taxonomy term filter
Taxonomy term ID is set by the shortcode attribute "terms"

=> hidden link

And within the above taxonomy view's "Loop Editor" I've added the taxonomy image to display as you can see:

[wpv-layout-start]
	[wpv-items-found]
	<!-- wpv-loop-start -->
		<wpv-loop>
          [types termmeta='service-area-category-image' size='full' url='true'][/types]
		</wpv-loop>
	<!-- wpv-loop-end -->
	[/wpv-items-found]
	[wpv-no-items-found]
		<strong>[wpml-string context="wpv-views"]No items found[/wpml-string]</strong>
	[/wpv-no-items-found]
[wpv-layout-end]

And also checkmark the checkbox "Disable the wrapping DIV around the View".

Then on your archive page:
=> hidden link
I've added "Fields and Text" block at the bottom of the page and within that I've added the following CSS code that displays the above view:

<style>
.projects-archive-hero-section .entry-hero-container-inner {
background-image: url([wpv-view name="show-service-areay-category-image-in-header" terms="[wpv-taxonomy-id]" cached="off"]);
}
</style>

Can you please check now it works as expected:
- hidden link