[Resolved] WYSIWYG Field – external links have website URL added.

[Author]

Posts

[Adrian Robbins]

We are trying to add an external link in a WYSIWYG field.

So we want to link to https:/www.irvingscott.com/

The HTML code our client has added in ther WYSIWYG field is:

hidden link" target="_blank" rel="noopener">www.ivingscott.com

However Toolset translates this link to hidden link and we obviuosuly get a 404 error.

There must be a simple fix, but we cannot find it!

In the content template, we bring the filed in with this code:

[wpv-autop][types field='overview-suppliers'][/types][/wpv-autop]

Which works fine for all the written narrative, but not the URL, which has HTML.

[Shane]

Hi Adrian,

I did a quick test of this on my end and it works fine. See Screenshot

As you can see the field opens correctly. Can you let me know what you're using the Display the WYSIWYG editor on the frontend.

Your URL format is correct so it should render correctly on the frontend.

Thanks,
Shane

[Adrian Robbins]

Hi Shane

Thanks for checking, however it is not working on our site, which is a bit odd.

So, if you go to this page - hidden link below the bullet point list there is a link to hidden link which should open their website

However Toolset is trying to open hidden link

It's adding the website URL to the URL we want to open.

It's a WYSIWYG field, and we can't see any settings that would cause this to happen.

[Shane]

Hi Adrian,

I see on the page that there are extra quotations being added.

Would you mind allowing me to have admin access to the site to have a more detailed look at this for you.

I've enabled the private fields for your next response.

Thanks,
Shane

[Shane]

Hi Adrian,

It appears the issue only appears when you're using the types shortcode to display the WYSIWYG field, however as mentioned i'm not able to replicate even when setting up a similar condition on my test site.

At this point I would recommend disabling all your non-toolset plugins and checking again. This is to ensure that this issue isn't being caused by a plugin conflict.

However as a workaround for this you can use the single field block to pull the field data and it will display normally as intended.

Thanks,
Shane

[Adrian Robbins]

Hi Shane

We have also found out you cannot add images to the WYSIWYG field in the content template. You just get "" and no image, so the quotation marks are being added to images and not just the links.

So, to try and track down the problem, I created a new Post Type, with WYSIWYG custom field and a content template. I added an external link to Google and an image from the media library and both displayed correcxtly. So, at least we know it's not a plugin/theme conflict, which is good news.

However we still have the problem, with the main content template, which generates this page - hidden link

There is a small Javascript code within the template, which does the tabs. Might this be the culprit? I have copied below the code, which we cut and pasted from a web page.

Kind regards
Ade

<script>
function openCity(evt, cityName) {
var i, tabcontent, tablinks;
tabcontent = document.getElementsByClassName("tabcontent");
for (i = 0; i < tabcontent.length; i++) {
tabcontent[i].style.display = "none";
}
tablinks = document.getElementsByClassName("tablinks");
for (i = 0; i < tablinks.length; i++) {
tablinks[i].className = tablinks[i].className.replace(" active", "");
}
document.getElementById(cityName).style.display = "block";
evt.currentTarget.className += " active";
}

// Get the element with id="defaultOpen" and click on it
document.getElementById("defaultOpen").click();
</script>

[Shane]

Hi Adrian,

Thank you for the update on this.

I dont suspect that this javascript code is causing the issue however we can remove it and see if the issue still remains.

If it does then it could be the template. Can you try recreating the template or assigning this content template to your test post type and see if the issue carries over there as well.

You should be able to edit the post and then set the post to use this content template.

Thanks,
Shane

[Adrian Robbins]

Hi Shane

I tried removing the JS code and made no difference.

It's bizarre, as I really cannot understand what else would be causing the double '' '' marks, especially around images, which simply don't appear, other than the quoitation marks.

I can't think what would be causing this off behavious with rhe WYSIWYG field.

Kind regards
Ade

[Shane]

Hi Adrian,

Thank you for the updates here.

Given that we are at this point where we can identify that the issue is no longer present when a different template is being used then I would recommend remaking the template.

The template will need to be remade as a 1-1 copy of the original template. Given that i'm unable to replicate this issue on a fresh site we can rule out any bugs but this is the next step that I would go to.

Please let me know the results of this as soon as you're able to perform the test.

Thanks,
Shane

[Adrian Robbins]

Hi Shane

We have been debugging the template, and narrowed it down to this block of code:

[wpv-conditional if="( $(wpcf-member) eq 'member' )"]
<div class="tab">
[wpv-conditional if="( '[types field='overview'][/types]' ne '' )"]<button class="tablinks" onclick="openCity(event, 'Overview')" id="defaultOpen">Overview</button>[/wpv-conditional]
[wpv-conditional if="( '[types field='accommodation-description'][/types]' ne '' )"]<button class="tablinks" onclick="openCity(event, 'Accommodation')">Accommodation</button>[/wpv-conditional]
[wpv-conditional if="( '[types field='other-activities'][/types]' ne '' )"]<button class="tablinks" onclick="openCity(event, 'Activities')">Activities</button>[/wpv-conditional]
[wpv-conditional if="( '[types field='current-offers'][/types]' ne '' )"]<button class="tablinks" onclick="openCity(event, 'Offers')">Offers</button>[/wpv-conditional]
[wpv-conditional if="( '[types field='member-news'][/types]' ne '' )"]<button class="tablinks" onclick="openCity(event, 'News')">News</button>[/wpv-conditional]
[wpv-conditional if="( '[types field='video'][/types]' ne '' )"]<button class="tablinks" onclick="openCity(event, 'Video')">Video</button>[/wpv-conditional]
</div>

<div id="Overview" class="tabcontent">

[wpv-autop][types field='overview'][/types][/wpv-autop]

</div>

<div id="Accommodation" class="tabcontent">

[wpv-autop][types field='accommodation-description'][/types][/wpv-autop]

</div>

<div id="Activities" class="tabcontent">

[wpv-autop][types field='other-activities'][/types][/wpv-autop]

</div>

<div id="Offers" class="tabcontent">

[wpv-autop][types field='current-offers'][/types][/wpv-autop]

</div>

<div id="News" class="tabcontent">
[wpv-autop][types field='member-news'][/types][/wpv-autop]

</div>

<div id="Video" class="tabcontent">
[wpv-autop]
<iframe width="560" height="315" src="[types field='video'][/types]" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen=""></iframe>
[/wpv-autop]

</div>
[/wpv-conditional]

<script>
function openCity(evt, cityName) {
var i, tabcontent, tablinks;
tabcontent = document.getElementsByClassName("tabcontent");
for (i = 0; i < tabcontent.length; i++) {
tabcontent[i].style.display = "none";
}
tablinks = document.getElementsByClassName("tablinks");
for (i = 0; i < tablinks.length; i++) {
tablinks[i].className = tablinks[i].className.replace(" active", "");
}
document.getElementById(cityName).style.display = "block";
evt.currentTarget.className += " active";
}

// Get the element with id="defaultOpen" and click on it
document.getElementById("defaultOpen").click();
</script>

If we add the dynamic field just on it's own, with just this bit of code (everything else from above removed)

[wpv-autop][types field='overview'][/types][/wpv-autop]

The links and images in the WYSIWYG field work correctly.

We tried removed the Video tab, as this was only recently added, but it made NO difference.

We are totally baffled what is going on, as the tabs work fine on there own, also all the content is displayed. However any links and image in the WYSIWYG field don't work correctly.

Any thoughts?

Kind regards
Ade

[Adrian Robbins]

Hi Shane

I think I have tracked down the problematic code, which is as follows:

[wpv-conditional if="( '[types field='overview'][/types]' ne '' )"]<button class="tablinks" onclick="openCity(event, 'Overview')" id="defaultOpen">Overview</button>[/wpv-conditional]

So, if I use this line of code (which is obviously not conditional) the WYSIWYG external links and images all work fine 🙂 :

<button class="tablinks" onclick="openCity(event, 'Overview')">Overview</button>

So there is something in the way i am writing the conditional code, which is working for normal narrative content, but breaking the links and images.

Can you spot what I have done wrong?

Cheers Ade

[Shane]

Hi Adrian,

I'm not an expert on Javascript , however it appears that your javascript is used to Toggle between the tabs.

Unfortunately the credentials don't work anymore but what you can do to see what is being displayed at each step of the process is that you can console.log the tabbed content variable.

What we would like to know is if the format got messed up before the Javascript process it or After. Either way you can remove the JS and allow the tabbed content to display without any JS involved and see if the links display correctly.

If it does then we can compare to what is being displayed in the tabcontent variable in JS so you can just add this.

tabcontent = document.getElementsByClassName("tabcontent");
console.log(tabcontent);

So what you can do is to check the HTML markup that is being display in the browser's console when you access the page. Hopefully this will give us an idea where the issue is.

Thanks,
Shane

[Adrian Robbins]

Hi Shane

It's this line of Toolset Conditional code that is causing the problems with the links and images in the WYSIWYG field:

[wpv-conditional if="( '[types field='overview'][/types]' ne '' )"]<button class="tablinks" onclick="openCity(event, 'Overview')" id="defaultOpen">Overview</button>[/wpv-conditional]

If I take out the Toolset conditional statement, and use the original HTML code for the tab, everything works fine.

So, is there a 'different' way to write the Toolset code? All I am wanting to do is display the tab if the custom post field is not null, and this functionality works fine.

What I don't understand is how this line of code, will correclty display the narrative, but then on a link add the site URL before the external link and on images just display ""

Can I write the conditional statement in a different way?

Kind regards
Ade

[Adrian Robbins]

Hi Shane

Should I be writing the conditional statement like this

[wpv-conditional if="( empty($(wpcf-overview)) )"] <button class="tablinks" onclick="openCity(event, 'Overview')" id="defaultOpen">Overview</button>[/wpv-conditional]

Kind regards
Ade

[Shane]

Hi Adrian,

Prompting your query I went ahead and made a test with the WYSIWYG field and a URL then added a conditional to display that field.

With this I was able to replicate the issue on a fresh install. It would appear as you say something in the conditional is breaking the html content inside the WYSIWYG field.

Doing another test with an alternate format that we have for the conditionals to pull the custom fields resolved the issue for me. Try this below.

[wpv-conditional if="( $(overview) ne '' )"]<button class="tablinks" onclick="openCity(event, 'Overview')" id="defaultOpen">Overview</button>[/wpv-conditional]

Notice the change in how the custom field is being called.

Thanks,
Shane