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)
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.
Okay thanks, please get back to me with what you find out. Would love this to work
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 ?
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