Skip Navigation

[Resolved] Use taxonomy custom image field as background in taxonomy archive

This support ticket is created 3 years, 4 months ago. There's a good chance that you are reading advice that it now obsolete.

This is the technical support forum for Toolset - a suite of plugins for developing WordPress sites without writing PHP.

Everyone can read this forum, but only Toolset clients can post in it. Toolset support works 6 days per week, 19 hours per day.

Sun Mon Tue Wed Thu Fri Sat
8:00 – 12:00 8:00 – 12:00 8:00 – 12:00 8:00 – 12:00 8:00 – 12:00 - -
13:00 – 17:00 13:00 – 17:00 13:00 – 17:00 13:00 – 17:00 13:00 – 17:00 - -

Supporter timezone: America/New_York (GMT-04:00)

Author
Posts
#1856807
1855609-category_image.jpg
1855609-banner_image.jpg

In the categories i have added a image field (see attached banner image)

Is there a way to set that image as the background image of "Cover" section on the archive template page (see attached category image)

#1856959

Hello, there are a couple of things going on here.
1. WordPress native Cover block does not support Toolset dynamic sources. Instead, we provide native Toolset blocks that can be used to approximate this design.
2. It would be possible to approximate the Cover block design in a Toolset Container block, however, the current version of Blocks does not support Taxonomy custom fields as dynamic sources in the image background. So unfortunately this workaround doesn't help you in a taxonomy archive design. I will ask our developers if this is something we can add to the Blocks software to make the workaround possible. I'll let you know what I find out.

#1859173

Okay thanks, please get back to me with what you find out. Would love this to work

#1859181

So this shortcode shows the image -

[types termmeta='banner-image' title='%%TITLE%%' alt='%%ALT%%' size='full'][/types]

to show the image on that page, is there a way of getting the shortcode to overwrite the banner background image ?

#1860453
css-class-added.png

Hi, we have created an internal ticket to ask our developers to add Taxonomy Custom Fields into the Dynamic Sources editor for taxonomy archives. I don't have a timeline for delivery of this new feature, but in the meantime, since the Dynamic Source is unavailable, a custom CSS solution is required. You can use the Toolset Container block as I mentioned before to recreate the design of a Cover block, with a Toolset Heading block to display the text inside that Container. Select the Toolset Container block in the block editor and use the ID & Classes configurations panel to add the CSS class tssupp-term-archive-background-image to the block. You must press "Enter" or "Return" after adding the class name, and the result should look like the attached css-class-added.png, with the classname shown in a pill.

Then insert a custom HTML block somewhere in the design. Insert the following code to add the term image as a background image for the Container block:

<style type="text/css">
.tssupp-term-archive-background-image {
	background: url([types termmeta='banner-image' title='%%TITLE%%' alt='%%ALT%%' size='full' output='raw'][/types]);
}
</style>

You may need to adjust the background property to customize the display of the background image:
https://www.w3schools.com/css/css_background.asp

This ticket is now closed. If you're a WPML client and need related help, please open a new support ticket.