[Resolved] Kadence row layout in view loop issue

[Author]

Posts

[nicolaS-3]

Hi all and Happy New Year !

My objective is to display a (dynamic) background image with a fading overlay (see picture) within a view loop. I am currently using two overlapping Toolset containers, one for the dynamic image and another one for the fading overlay. It works fine, but changing the screen size the two containers are never correctly aligned in lenght. So I tried to replace the two containers with a Kadence Row layout setting its dynamic image background content and the overlay within the view loop but it has a strange behaviour. As you can see from the attached screenshot, in the editor the dynamic image is correctly displayed, but it should change for every post while the first image it's repeated instead. Most importantly, when viewed the page is empty. It looks like a Toolset/Kadence compatibility issue.
Not being able to use the Kadence block I'd welcome any other method you could suggest to keep the two containers always resized and aligned upon resizing the screen.
Thanks
Kind regards
Nicola

[nicolaS-3]

Update - I tried to use the COVER block: the image is ok but the gradient and the dynamic post title with link are displayed in the editor but not on the page. It looks like it's a Toolset issue

[Minesh]

Hello. Thank you for contacting the Toolset support.

To display the image as backgound and display the content on the image - you can add a single containber block and set the background image for the containber block.

Please check the following Doc that may help you:
- https://toolset.com/course-lesson/creating-a-hero-section/#creating-and-styling-a-hero-section

[nicolaS-3]

Hello Minesh,
thanks. Following the above lesson I deleted the image block and set the first container background to image, this works better. However, the container allows to select an image background OR a gradient. In the first case the overlay color doesn't allow the gradient, just the color selection. So I had to maintain the second inner container to add the gradient.
In the lesson there are some images where the gradient is applied to the background image and there is no mention of a second container, am I missing anything ?

[Minesh]

I guess you are looking for the "Design 1" mentioned with the following blog post:
=> https://toolset.com/2021/09/3-dynamic-designs-using-kadence-blocks-to-inspire-your-website/

[nicolaS-3]

No, I mean the gradient over image, see picture. However, I will close this ticket because you showed me the right way: I have removed the image blocks and used the two containers background instead, now they look an resize perfectly. Theoretically the first container should have allowed the gradient over the image (like the Cover block), but two overlapping containers did the trick.
Many thanks
Kind regards
Nicola