[Resolved] Content from an external site does not display from a toolset field

[Author]

Posts

[barryG-4]

I am trying to:

Hi,

I am building an adult webcam site that needs to display content from an external source. Adding performers to the account on the external site produces button, iframe and div code to display such things as buttons to show if a performer’s webcam is online or offline, log in sections for performers and clients and divs that display images and videos of performers located at the external site. I need to copy and paste that code into my site.

For example, here is the code generated for me on the external site to display sets of pictures that clients can buy of a performer called Daisy.

<div id="WS_PIC_STORE" rel="daisy-ae1|#ff40ff-#ffffff|200|133|norm|transparent|black|48"> </div>

When I paste that into an html element on an Elementor custom post template page (to test it), it correctly shows the content inside a tab called Private Images on Daisy's post page on my site. But as the page is assigned as a single for the custom post type then this code would show daisy’s pictures on every performer’s page.

So I created a Toolset custom field called ‘private-image-code’ for this custom post type, pasted in the exact code above on Daisy’s post, saved it then went to the Elementor single post template page, selected dynamic and shortcode from a tab element in Elementor and selected the toolset field ‘private-image-code’ and saved the template but when viewing Daisy’s post after saving, the Private Images tab is blank.

If I go back to the template and choose any of the other toolset fields, such as ‘webcam-account-username’ the tab correctly shows in this case ‘daisy-ae1’, if I choose ’twitter-link’ then the tab is filled with Daisy’s twitter feed so the shortcode option correctly pulls data from from the girl’s post, but not with the field that this code is in (here it is again for your ref):

<div id="WS_PIC_STORE" rel="daisy-ae1|#ff40ff-#ffffff|200|133|norm|transparent|black|48"> </div>

As mentioned before when the above code is added to the same tab instead of using shortcode toolset field but in the text section of the visual editor box it displays perfectly but as mentioned before I can’t do that as it’s a custom post template page so needs to use field data specific to that post.

I had previously tried using a shortcode based around another custom field called ‘webcam-account-username’ (which produces daisy-ae1 for Daisy) and wrapping that in 'before' and 'after' entries with 'before' being (<div id="WS_PIC_STORE" rel=" ) and 'after' being (|#ff40ff-#ffffff|200|133|norm|transparent|black|48"> </div>) to make it even easier which would have avoided having to copy in the whole code each time and just use a username but that failed too.

So are you able to help please. I don't understand why all the other toolset fields show the field data but this one doesn't. I suspect something is blocking external data but my knowledge is hugely limited.

Many thanks,
Barry.

Link to a page where the issue can be seen: (select the Private images tab to view the blank space)
hidden link

I expected to see: (Screenhot attached shows the code after being pasted into the template page directly)

Instead, I got:
(select the Private images tab to view the blank space)
hidden link

[barryG-4]

I don't know if this helps but if you view the source at hidden link the code that displays the news tab and private images tab data is here.

<div>
<div>
<p>hidden link">Tweets by DollieLittle10<script async src="hidden link" charset="utf-8"></script></p>
</div>
</div>

<div>
<div>
<div id="WS_PIC_STORE"> </div>
</div>
</div>

Javascript in header.php references both twitter and the webcam external site.

The toolset field data for the twitter-link field in Daisy's case is:

hidden link

So I'm not sure how the rest of the code is completed. I guess that might be to do with javascript.

The toolset field data for the ‘private-image-code’ field in Daisy's case is:

<div id="WS_PIC_STORE" rel="daisy-ae1|#ff40ff-#ffffff|200|133|norm|transparent|black|48"> </div>

So where as the twitter source code has got filled in and works, the webcam picture source code has been cut.

Does that help find out what the problem is?

Many thanks,
Barry.

[Shane]

Hi Barry,

Thank you for getting in touch.

The problem here is that the elementor dynamic element could be stripping out some of the special formatting because it is retrieving the data from the database itself.

Could you try retrieve your information using our Types shortcode directly?

Example
[types field='my-field'][/types]

Where my-field is the slug of your custom field.

Please try adding this to an editor in elementor and let me know.

If that doesn't work try using the raw attribute.

Example
[types field='my-field' output='raw'][/types]

Thanks,
Shane

[barryG-4]

Hi Shane,

You’ve fixed it…..The first option you gave: [types field='my-field'][/types] worked perfectly but I will have to add several custom post fields for each button, iframe and div code generated for each performer by the external site. Currently, your solution (that I’m very grateful for) allows me to use a field called private-image-code which for Daisy is as follows:

<div id="WS_PIC_STORE" rel="daisy-ae1|#ff40ff-#ffffff|200|133|norm|transparent|black|48"> </div>

The icing on the cake would be for me to use a shortcode for just the performer username and wrap it in before and after code already saved in the template page. This would mean needing just the username to add to each girl’s post and nothing else.

To pull just the username (daisy-ae1) from the database as a shortcode inside the rest of the code above I did this:

<div id="WS_PIC_STORE" rel="[types field=‘webcam-account-username’][/types]|#ff40ff-#ffffff|200|133|norm|transparent|black|48"> </div>

However this results in this:

The performer "[types field=‘webcam-account-username’][/types]" does not have a gallery account

So is there a way to wrap the custom field shortcode into the before and after code so that it works?

As another workaround I created custom fields in the same custom post type for the before and after code, assigned them the correct code in the ‘default’ box and used this in the post template page and it worked:

[types field='pic-store-before'][/types][types field='private-image-code'][/types][types field='pic-store-after']

This is good but it means admins will see many fields that they don’t need to when editing posts. So is there a neater solution than this? Can I create the before and after shortcodes somewhere else outside of the custom post type and reference them so that admins won't see them? Can Views help in some way?

You’ve already fixed my problem so I hope I’m not being a nuisance but I’d like to have as little work for the admins to do when setting up performers.

Many thanks,
Barry.

[Shane]

Hi Barry,

From what I understand is that you need some conditional to check if the field is empty or not.

Take a look at the link below, this should be able to assist you
https://toolset.com/documentation/user-guides/conditional-html-output-in-views/checking-fields-and-other-elements-for-emptynon-empty-values/

So with this you can use it to run your line of code only if the user's field is not empty.

Thanks,
Shane

[barryG-4]

Hi Shane,

In this instance, the field is not empty. The data in the ‘webcam-user-account’ field on Daisy's profile is 'daisy-ae1' so I’m not sure why that result is not returned.

I am successful if I use just a single shortcode Inside the Elementor element Dynamic/Text box on the custom post template page that gets the data from another single custom post field. In this case the ‘private-image-code’ field.

So, using [types field=‘private-image-code’][/types] produces exactly what it should. The data in this field in Daisy’s post is:

<div id="WS_PIC_STORE" rel="daisy-ae1|#ff40ff-#ffffff|200|133|norm|transparent|black|48"> </div>

This successfully displays the images and text from the external site on Daisy’s post.

However, starting again by deleting the shortcode in the Dynamic/Text box and directly typing the same html code in and replacing daisy-ae1 with a shortcode shat should return the ‘webcam-account-username’ custom field data, in this case ‘daisy-ae1, fails.

This is what fails:

<div id="WS_PIC_STORE" rel="[types field=‘webcam-account-username’][/types]|#ff40ff-#ffffff|200|133|norm|transparent|black|48"> </div>

As a test, starting again in the Dynamic/Text box and just using [types field=‘webcam-account-username’][/types] does successfully display ‘daisy-ae1' on the post page so that proves the data gets pulled correctly but something about wrapping that shortcode inside the middle of html code makes it fail.

If you had a line of html code and you wanted to add a shortcode in the middle of it to return data from a custom post field, how would you do it?

Is it possible that there is some kind of shortcode wrapping thing that is needed to let the html code know that there is a shortcode within it?

Many thanks,
Barry.

[Shane]

Hi Barry,

Could you let me know the page that you are using this on ?

It could be that the changes that wordpress made to their shortcodes api is affecting this because based on this code below.

<div id="WS_PIC_STORE" rel="[types field='webcam-account-username'][/types]|#ff40ff-#ffffff|200|133|norm|transparent|black|48"> </div>

This would be a case where the shortcode doesn't work but I need to see the page where the issue is to know what to do next.

Thanks,
Shane

[barryG-4]

Hi Shane,

I am convinced I sent in a new thread to answer your last query but it’s definitely not there so I must have closed the browser before submitting it. I’m sorry to keep you waiting.

The page where this code fails is the template page assigned to the custom post type ‘Model’ accessed via admin through Elementor > Templates > Theme Builder.

You can see the exact part of the page the code should be on here by clicking on the ‘Private’ tab in the left hand main content section:

hidden link

Currently that section is blank due to the failure of the code I’ve written with the shortcode within it.

If you are able to log in to try anything out you are more than welcome to:

admin/
username: support
password: support6969

So to recap, I have html code in two parts and after the first part of it:

<div id="WS_PIC_STORE" rel="

I need to use a shortcode to pull data from the ‘webcam-account-username’ field (in Daisy’s case to result in daisy-ae-1) then after that add the final part of the html code as follows:

|#ff40ff-#ffffff|200|133|norm|transparent|black|48"> </div>

That should then result in producing the following:

<div id="WS_PIC_STORE" rel=“daisy-ae1|#ff40ff-#ffffff|200|133|norm|transparent|black|48"> </div>

Which should display text and a picture from an external site in the Private tab menu item.

Many thanks,
Barry.

[Shane]

Hi Barrym

Not sure how exactly to access this however when I added the shortcode [types field='webcam-account-username'][/types]

To the page i get the "daisy-ae1" being printed out. See Screenshot

If you go here you can see where i've added the shortcode and it works fine. However are you also making reference to this ? See screenshot

Please let me know.

Thanks,
Shane

[barryG-4]

Hi Shane,

I definitely did click reply to your last email as I can see it in my sent items but the email did not get added to this thread so I'm trying again directly in the support page.

Yes, it’s very odd. Using [types field='webcam-account-username'][/types] does produce the correct data. Only when that’s wrapped in the html does it fail. Perhaps this is because the content to be displayed is on an external site?

I’ve just logged in and replaced what you added with the full failed code so at least you know where it is if you can think of a way to make it work?

I’m very grateful for all your help and I’m sure it must be something very simple.

Incidentally after I added the code as seen in one screenshot from within the ‘text’ tab, then clicked ‘visual’ then back to ’text’, the code was shortened to what you see in the second screenshot.

So does that indicate what the problem might be?

Many thanks,
Barry.

[Shane]

Hi Barry,

"I definitely did click reply to your last email as I can see it in my sent items but the email did not get added to this thread so I'm trying again directly in the support page."

In order for me to get the replies you need to post them directly to the forum itself.

"Only when that’s wrapped in the html does it fail. Perhaps this is because the content to be displayed is on an external site?"

Now this issue is actually out of our hands unless you use a view to display this. That is because the wordpress shortcode API doesn't allow for the shortcodes to be added in the attributes.

However creating a content template and adding it tot he template then using the template to display the information works around the issue because views has special code to still allow for this to happen. See Screenshot

I've added the shortcode
[wpv-post-body view_template="models-template"]

To help display the information. Also here is the content template being used.
hidden link

Thanks,
Shane

[barryG-4]

Hi Shane,

Thank you very much for doing that. I completely understand what you say and have seen the content template and where you added the shortcode but I can't see anything on the page? Could that be my browser cache? Are you able to see the content?

I've added the same code to a non WP site just to try things out in case I can't use WP and there is no problem at all displaying it. Forget the blue colours in the screenshot attached but you can see what essentially the code should display if it works. Is this what you see on the rogr.co.uk page you edited?

Many thanks,
Barry.

[Shane]

Hi Barry,

Not sure how this code here.
<div id="WS_PIC_STORE" rel=“daisy-ae1|#ff40ff-#ffffff|200|133|norm|transparent|black|48"> </div>

Will product the div that you provided in the screenshot.

It seems there should be some additional code involved like javascript.

This code by itself doesn't do anything.

Thanks,
Shane

[barryG-4]

Hi Shane,

Yes you are correct. The javascript is in the header. It is as follows: <script src="//www.addit.ws/global" type="text/javascript"></script>. It is this that helps with all the code for buttons, picture stores and client/performer log ins. You can see it working here:

hidden link

It puts the form there which is content from the external site. It also helps to create the buttons on the gallery page here:

hidden link

So it's just on the custom post type page that things go wrong so that's what I am hoping you might be able to help with.

Many thanks,
Barry.

[Shane]

Hi Barry,

I'm trying to help with resolving this one.

However when I tried to manually add the div
<div id="WS_PIC_STORE" rel="daisy-ae1|#ff40ff-#ffffff|200|133|norm|transparent|black|48"> </div>

To the elementor template under the Private Gallery tab nothing loads.

Could you set it up manually on your end as you did mention in your initial post that this work.

Thanks,
Shane