Hi,
I've found an issue between Kadence Row layout block and Toolset Image block. When the Row Layout background is set to dynamic source (featured image URL in my case) and at the same time a Toolset image block is also set to a dynamic source (logo image field in my case) an unexpected [/tb-dynamic-container] tag appears on the page within the row layout (see picture). This doesn't happen if the row layout background is set to a static image. Please fix the bug or at least let me have a workaround to hide that tag with CSS, I see there is no div or class to hook to, thanks
regards
Nicola
Hi Nicola,
Thank you for contacting us and I'd be happy to assist.
To troubleshoot and suggest the next steps, I'll need to see exactly how these blocks are set up in the admin area.
Can you please share temporary admin login details, along with the link to the page where these can be seen?
Note: Your next reply will be private and it is recommended to make a complete backup copy before sharing the access details.
regards,
Waqar
Hi Minesh,
unfortunately that very Content Template I was editing doesn't open anymore, I am trying to restore the site. In the meantime I created a new page and selected dynamic content for both a Row Layout and a Toolset Image block (see picture, no matter if the images exist or not) and I got the same result, please try yourself on any of your WP test sites.
thanks
Regards
Nicola
Hi Minesh,
I have restored the database and I/you can reopen the page now. But when I try to add a Conditional block to test if the Post content is empty or not and save the content template then it crashes and I get an email from WP saying that it had a critical issue in Toolset Blocks. I think that the issue arises if the conditional is set to check a WP standard field and not a Toolset custom field. I've used many conditionals in many pages so far, all to test Toolset custom fields and I never had any issue.
thanks
Regards
Nicola
PS - understand it's a different issue, if you want to open another ticket it's ok for me. And please reopen the private section, thanks
I was able to reproduce this issue of the stray [/tb-dynamic-container] tag on my test website.
It is now reported to the concerned team and I'll keep you updated through this ticket.
For now, here is a workaround that you can use, when you need to set a dynamic background image to the 'Row Layout' block.
- Instead of adding a dynamic source background image, set any static/fixed image to the 'Row Layout' block.
- In that block's 'Advanced' settings, add a particular class to it, for example: 'featured-image-row'
- Lastly, include a 'Fields and Text' block in the page/template and switch to its HTML tab.
- You'll include some custom CSS code in this, that will target this particular class to set a different background image URL, coming from the relevant shortcode.
( ref: https://toolset.com/documentation/customizing-sites-using-php/functions/ )
For example, suppose I wanted an image from the custom field 'book-image'. The complete CSS code will look like this:
<style>
.kb-row-layout-wrap.featured-image-row.wp-block-kadence-rowlayout {
background-image: url([types field='book-image' output='raw'][/types]) !important;
}
</style>
This will override the fixed/static background image with the one coming from the CSS code.
Hi Waqar,
I was implementing your solution above, but I can't figure out where to add the CSS code to the Field & Text, should I add because in it's Advanced tab one can only add classes, not code, please explain, thanks
Yes, your understanding is correct.
Through the "Row Layout" block's advanced tab, we can assign a class name.
And since our custom CSS code includes a shortcode for the custom field's value too, we'll include it through a 'Fields and Text' block.
( example screenshot attached )
Hello Waquar,
your solution seems to be working partially, the featured image is displayed, but it's displayed inside the Field&Text block together with the style text and not as a background, just as a "normal" image above other images (logo)and text, see screenshot. Please let me know, thanks
I can help you with adjusting this background image.
Can you please share the temporary admin login details along with the link to the page where this is used?
Note: Your next reply will be private and making a complete backup copy is recommended before sharing the access details.
Page: hidden link
The CSS code wasn't working correctly because it was added in the 'visual' mode and not in the 'HTML' mode of the 'Fields and Text' block. In the visual mode, extra HTML and content processing is applied which changes the code.
I've added it in the 'HTML' mode and it is now working correctly.
( screenshot: hidden link )
<style>
.kb-row-layout-wrap.featured-img-fix.wp-block-kadence-rowlayout {
background-image: url([wpv-post-featured-image size='full' output='url']) !important;
}
</style>
Notes:
1. I've used the shortcode 'wpv-post-featured-image' in a way that it brings in the URL of the featured image and not the image tag:
https://toolset.com/documentation/programmer-reference/views/views-shortcodes/#wpv-post-featured-image
2. I had to remove the row layout block and add a new one because one dynamic source setting has been enabled, the stray '[/tb-dynamic-container]' tag doesn't go away, even if the dynamic background image is disabled.
Page: hidden link
I couldn't find the row layout block or CSS code that used this approach. But you can use it the same way as on the previous page.
Hi Waqar
great support as always, thanks.
Afa point 2, I also noticed that if the dynamic source is enabled then disabled the Row Layout needs to be replaced. If this is part of the same stray tag bug please let your developers know, or let Kadence developers know. thanksKind regards
Nicola
