Skip Navigation

[Resolved] Issue when I use image as container background and I activate container as link

This support ticket is created 3 years, 2 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.

Our next available supporter will start replying to tickets in about 1.84 hours from now. Thank you for your understanding.

Sun Mon Tue Wed Thu Fri Sat
9:00 – 13:00 9:00 – 13:00 9:00 – 13:00 9:00 – 13:00 - - 9:00 – 13:00
14:00 – 18:00 14:00 – 18:00 14:00 – 18:00 14:00 – 18:00 - - 14:00 – 18:00

Supporter timezone: Africa/Casablanca (GMT+00:00)

This topic contains 5 replies, has 2 voices.

Last updated by Jamal 3 years, 1 month ago.

Assisted by: Jamal.

Author
Posts
#1898831

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.

#1899537

Jamal
Supporter

Languages: English (English ) French (Français )

Timezone: Africa/Casablanca (GMT+00:00)

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

#1901831

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!!!

#1902793

Jamal
Supporter

Languages: English (English ) French (Français )

Timezone: Africa/Casablanca (GMT+00:00)

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.

#1920315

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...

#1922857

Jamal
Supporter

Languages: English (English ) French (Français )

Timezone: Africa/Casablanca (GMT+00:00)

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?

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