[Resolved] Clarity on how to set whole div block with post link in loop editor

[Author]

Posts

[georgeF-2]

Tell us what you are trying to do?

Hi there,

We have an objective to set the whole div block section to be linked to the post URL. I think we're not understanding fully how the editor formats after the save. Do you have suggestion on how to make the whole card background link to the custom post page?

Here's the page for reference:
hidden link

Here's what our loop editor looks like:

<div class="single-event" style="background-image:url( [wpv-post-featured-image size="large" output='raw'] );">
<div class="event-deails">
<h2 class="event-date">[types field="date"][/types]</h2>
<h4>c </h4>
<p>[wpv-post-excerpt] </p>
<div class="event-page-link">

<hr>
<p class="event-date-time">[types field="date"][/types] <br/>
[types field="start-time"][/types] - [types field="end-time"][/types]</p>
</div>
</div>
</div>

[Minesh]

Hello. Thank you for contacting the Toolset support.

Well - it should be something like this:

<a href="[wpv-post-url]">
<div class="single-event" style="background-image:url( [wpv-post-featured-image size="large" output='raw'] );">
<div class="event-deails">
<h2 class="event-date">[types field="date"][/types]</h2>
<h4>c </h4>
<p>[wpv-post-excerpt] </p>
<div class="event-page-link">

<hr>
<p class="event-date-time">[types field="date"][/types] <br/>
[types field="start-time"][/types] - [types field="end-time"][/types]</p>
</div>
</div>
</div>
</a>

As you can see we have wrapped the whole html with anchor tag and anchor tag is set to redirect to post URL.

[georgeF-2]

Hi there Minesh,

We tried something similar to this before reaching out to support. It seems like the anchor tag gets closed immediately instead of wrapping the whole thing (see attached image).

We're using your code above.

hidden link

[Minesh]

That is strange.

Can you please send me problem URL and admin access details.

*** Please make a FULL BACKUP of your database and website.***
I would also eventually need to request temporary access (WP-Admin and FTP) to your site. Preferably to a test site where the problem has been replicated if possible in order to be of better help and check if some configurations might need to be changed.

I have set the next reply to private which means only you and I have access to it.

[Minesh]

Can you please check now: hidden link

The issue was you can not have another link if you wrap whole item with another tag.

I've changed the [wpv-post-link] as it will add another anchor tag that should not happen, so I've changed the [wpv-post-link] to [wpv-post-title] so the loop item content template now looks like:

<a href="[wpv-post-url]">
<div class="single-event" style="background-image:url( [wpv-post-featured-image size="large" output='raw'] );">
<div class="event-deails">
<h2 class="event-date">[types field="date"][/types]</h2>
<h4> [wpv-post-title] </h4>
<p>[wpv-post-excerpt] </p>
<div class="event-page-link">
<hr>
<p class="event-date-time">[types field="date"][/types] <br/>
[types field="start-time"][/types] - [types field="end-time"][/types]</p>
</div>
</div>
</div>
</a>

Can you please confirm it now works as expected.

[georgeF-2]

Hi Minesh,

Excellent; this is fixed.

Thanks for checking/clarifying.