I am trying to: create a container with dynamic image (post thumbnail) as background for items carousel, and I activate the container as link with dynamic link (post link)
Link to a page where the issue can be seen:
this is the link of the live site but I'm working in localhost hidden link
I expected to see: the items with their own post thumbnail image as background and their own url to open the post.
Instead, I got: the same background image for all items bet with the correct url to every single post.
Hello and thank you for contacting the Toolset support.
Can you reproduce the issue on this on one of our test sites with a minimal example(2 or 3 posts and images)? As soon as you do, I'll check it to verify if it is a bug or an exception caused by something else. If it is a bug, I'll escalate it to our developers. If it is not reproducible, we might assume that it is an exception that only happens on your setup. In that case, I'll need a Duplicator copy of your localhost site to debug it on my local setup.
To log in to our test site, use the following link hidden link
Hi,
sorry for my delay in reply and thank you for your reply.
I have reproduced the issue on your test site, now it is on its homepage hidden link
Thank you for your help!!!
Thank you for your collaboration. I reported this issue to our 2nd Tier for another analysis. I'll get back to you as soon as we have something to share with you.
Hi, this specific issue is now solved with the last View update.
But now I have another issue as the same Conteiner Block function.
Well, now, if I want to enabled the dynamic link on the container that contains all part of the single item (featured image, title, excerpt, button), the button that I have put down right, desappears...
I would say that this issue is expected because the HTML specification forbids to nest a link( <a> tag), such as the button, inside a parent link(the container div in this case). Check this thread https://stackoverflow.com/a/9883044
There are some workaround that can be implemented with HTML and CSS, such as making the parent link a form, or by using the <object> element to wrap the child link. You can read more about them here:
- hidden link
- hidden link
But these workarounds are hard to implement using Toolset Blocks, because we do not control the generated HTML at 100%. The HTML is generated by the Gutenberg editor using the blocks specifications(Native and Toolset Blocks).
What would be easy, is to implement a workaround using Javascript. How's that?
- First, you won't make the parent container as a link. But you will generate the link somehow, either using a button block or using shortcodes.
- Second, add some CSS styles around the container to make the mouse cursor appear as a hand pointer on hover. hidden link
- Third, add Javascript code, that will listen for clicks on the parent div and will redirect the user to the appropriate link, taken from the first step.
Does it make sense? Would you need help implementing it? If yes, are the container and button pointing to the same link or not?
