[Resolved] Unexpected output when using HTML Conditionals

[Author]

Posts

[shawnW-3]

If Shane is available, I would like to be assigned to him.

Tell us what you are trying to do?
See Full Story Below...

Is there any documentation that you are following?
Not specifically.

Is there a similar example that we can see?
I can show you the site and the screenshots, but there's not a specific example of this.

What is the link to your site?
I'd like to send that privately

Things I've Tried...
See Full Story Below...

Full Story...

I built an asset portal. The styling framework is UIKit.

The content template showed the asset by type determined by a dropdown field:
Field Name: Type of Asset | Field Slug: dealer-asset-dl-type

OPTIONS:

Image | dealer-asset-image-type
File | dealer-asset-file-type
URL | dealer-asset-url-type
Embedded Media | dealer-asset-mediaembed-type

and displayed using Conditional Groups, ie, choose the type of asset, show only those fields.

I had no problem with Image, File, Url, or Embedded Media. I built and tested those and they all worked flawlessly.

See Images 01 thru 03

A day or two later I added a new type of asset (option) called
Product Image Group | dealer-asset-prodimggrp-type

I did this because we had groups of images that would be too tedious to upload separately, and they needed to be grouped so a user could download quickly. I gave this the same type of set up as the others...Conditional Group Based on Type, Post Title at top, Asset Block in the Middle, Categories Below That, etc.

Unfortunately it resulted in some strange and very inconsistent behavior.

See Images 04 thru 07

Image 07 shows that the "VO-B1a 2019 PNGs" custom post's wpv-post-title is somehow being filled in with the Title of the Page where the View is Located... The categories aren't showing up... AND YET, to the right of post, the "VO-B2a 2019 PNGs" custom post's wpv-post-title is correct and it's categories are showing up.

They both use the same template, and they are both set to "Product Image Group" as the type.

I thought the problem might be how the conditional groups were being used... so instead of using for example:

[wpv-conditional if="( $(wpcf-dealer-asset-dl-type) eq 'dealer-asset-prodimggrp-type' )"]
PRODUCT IMAGE GROUP ASSET TYPE
[/wpv-conditional]

for all Asset Types, I switched it to this...

[wpv-conditional if="( $(wpcf-dealer-asset-dl-type) ne 'dealer-asset-prodimggrp-type' )"]
<div style="display:none">
[/wpv-conditional]
PRODUCT IMAGE GROUP ASSET TYPE
[wpv-conditional if="( $(wpcf-dealer-asset-dl-type) ne 'dealer-asset-prodimggrp-type' )"]
</div>
[/wpv-conditional]

And it got even weirder.

See Image 08

After trying this and having it turn out even worse, I decided to make a new template for just the Product Image Group Asset, and I would then remove that conent block from the other Content Template. I really didn't want to do this, because it over-complicates things, and I don't believe a front end form will allow a user to change templates.

But I tried it, and it resulted in the same sort of errors.

See Image 09

And that's where I'm at right now. I've reverted back to the the one template style using the...
[wpv-conditional if="( $(wpcf-dealer-asset-dl-type) eq 'dealer-asset-prodimggrp-type' )"]
PRODUCT IMAGE GROUP ASSET TYPE
[/wpv-conditional]
...style of conditional groups.

[Beda]

I see the Shortcodes are not executed at all ([wpv-post-title] shows as is)
Usually, that's due to the Theme or other plugins disabling ShortCodes or another kind of conflicts.

Do the issues persist with Theme Twenty Twenty and Toolset Plugins only?
You could try this on a staging site.

Another possible test to do is to either remove the conditions you suspect to be the cause (however I believe things will not change).
Or, you can keep those conditions and just test them by outputting simple strings "hello there", if that works, then try with ShortCodes.

Ultimately, if nothing of this works I will need to see this live in the backend.
Best would be a testing site, where you can link to one post/template that has (what precise) issue, so I can analyse it and find a solution
For this, I enabled the private reply, in case you will need to provide access details if any of the above steps do not already solve it.

[Beda]

I can find VO-B2a 2019 PNGs on the hidden link but not VO-B1a 2019 PNGs
But I could find them as posts hidden link and hidden link

On the first the ShortCode is not executed on the second all is fine.
Is this the issue we refer to?

If that's the issue it is because you assigned two different Content Templates to each of those posts.
hidden link uses this template hidden link
hidden link uses this template hidden link

In the first template hidden link, you have Markup errors, see the screenshot.
What's "red" in the code is wrong, as a rule of thumb, and needs amendments.

I suggest to (I am not sure if this is a mistake or intended) use only one Content Template for each post Type to avoid confusions, but there are cases where one needs content displayed differently depending on conditions, so then it can make sense assigning other templates to different posts in the same type.

But the markup errors will break following ShortCodes, so I suggest changing

<div class="uk-text-center uk-width-1-3@m  uk-flex uk-flex-center uk-flex-middle" data-slug="[wpv-post-slug] [wpv-post-taxonomy type="asset-category" format="name" separator=" "]">

to

<div class="uk-text-center uk-width-1-3@m  uk-flex uk-flex-center uk-flex-middle" data-slug="[wpv-post-slug] [wpv-post-taxonomy type='asset-category' format='name' separator=' ']">

Notice the Apostrophes, I use alternating "" and '', otherwise WordPress will break nested ShortCodes and specially, it does not like ShortCodes in HTML attributes at all, so this is a workaround that helps using ShortCodes inside those attributes, but it is not suggested.

Note that there are several of these errors in that template, and after all those are correct, the issues should be resolved.

You can on the test site confirm that the markup is the issue, by removing it all and replace with simple shortcodes like [wpv-post-title] which will work
As soon that markup is corrected, the issue should be gone.

[shawnW-3]

As I said in the first post, I resorted to trying different templates after I experienced the issue. I have now switched them back to use the same template (as I thought I had already done), and as you can see, the error remains.

As far as the markup, most of what's in red on that screenshot is simply my class names from UIKit. I can't do much about that.

But I did make the change to the shortcodes that were nested inside attributes. I had not considered that something like this="[""]"
would be an issue, but that makes sense and I appreciate you pointing that out. Unfortunately, after changing all attribute-shortcode "" to '', as in your example, the problem persists (please refer back to the original links to see all these updates).

I don't doubt that the problem is somewhere in the template and it likely is a markup error, but in its updated state, I still don't see what could be causing this issue.

[shawnW-3]

I found the problem...

This line was left over from an earlier build and I don't need it...
style="width: 100%; max-width: 100px;"

BUT I don't understand (and would like to understand) how it could have been causing that particular problem with shortcode's not rendering. It seems perfectly innocuous to me. Certainly easy to overlook.

I left it in there and you can personally remove it to see the difference for yourself if you're interested.

It must be conflicting with the [wpv-for-each], because style="width: 100%; max-width: 200px;" doesn't conflict with solo images using the same structure.

Let me know if you think I'm missing something, but I'd say this fixes it.

[wpv-conditional if="( $(wpcf-dealer-asset-dl-type) eq 'dealer-asset-prodimggrp-type' )"]
<!-- Product Image Group -->

<div class="uk-text-center uk-width-1-3@m uk-flex uk-flex-center uk-flex-middle" data-slug="[wpv-post-slug] [wpv-post-taxonomy type='asset-category' format='name' separator=' ']">

	<div class="uk-display-block uk-card uk-card-body uk-card-default uk-card-hover">
    	<h4 class="">[wpv-post-title]</h4>
		<div class="" uk-grid>
			[wpv-for-each field="wpcf-dealer-asset-dl-prod-img-grp"]
				<div class="uk-width-1-2@m">
					<a href="[types field='dealer-asset-dl-prod-img-grp' size='full' separator='' url='true'][/types]" download>
						<img data-src="[types field='dealer-asset-dl-prod-img-grp' size='full' separator='' url='true'][/types]" 

style="width: 100%; max-width: 100px;"

 alt="" uk-img>
                  	</a>
				</div>
			[/wpv-for-each]
      	</div>		
	
  		<div>
			[wpv-conditional if="( $(wpcf-dealer-asset-dl-prod-imggrp-info) ne '' )"]
        		<p>[types field='dealer-asset-dl-prod-imggrp-info'][/types]</p>
	        [/wpv-conditional]
    	    
			<p class="uk-text-small uk-text-bold">[wpv-post-taxonomy type="asset-category" format="name" separator=" | "]</p>
    		<p class="ddload-text">Click Images to Download as PNG</p>
		</div>
      
 	</div>
   
</div>
[/wpv-conditional]

[shawnW-3]

UPDATE: It's not the attribute's existence, but an issue of size with the tile. At this point, I must conclude there is a limitation with the UIKit Grid - hidden link - that I used in the view. Perhaps objects can be differently sized, but not after a certain percentage. In any case, since the repeating view is working, so I'm ready to rule out any Toolset issues. Thank you for looking at it.

[Beda]

This is an astonishing issue, but I think I have found the cause.
You are reaching parse limit of PHP 🙂
https://toolset.com/errata/shortcodes-in-conditionally-displayed-content-may-not-be-executed-on-the-front-end/

I adjusted your template and it works now.
BTW this is the reason why even after amending the ShortCode syntax you could remove ANY part of the code and it worked suddenly, leading to totally confusing debug result.
Or, why the other template works (it has fewer characters to render each condition)

I spent my last t2 hours on this, blame me, I wrote that erratum, and believe me I spent hours on that too, back then.

It is an astonishing nemesis of mine and Toolset.
But clearly your template suffers from that issue, and it should be solved now, even passing style.

[shawnW-3]

"I adjusted your template and it works now."

Thank you for all the work. This is of course a clone site of the live site, so any changes you made, I'll need to make on the live site. Can you offer me some directions on that? If it's file swapping, I'll need to know what files, but I'm really interested in the specifics...

and on that note, I would be happy to relay any template changes to the team at Yootheme. I know I'm not the only Yootheme user that is also using Toolset.

[shawnW-3]

Also, obvious concern, is the fix you made in this template something that will get overwritten in an update?

[Beda]

As I mentioned, you are reaching the limit of the language in which the plugin is written in
Please consult https://toolset.com/errata/shortcodes-in-conditionally-displayed-content-may-not-be-executed-on-the-front-end/

The workaround to this is to split ONE HTML Condition into MANY (same) conditions that output smaller chunks of data.
I did that on your site, you will see in the CT the condition now encloses smaller chunks instead of "all at once".

No files or other things where edited, only what the erratum states was done.
This is unrelated to any Theme or plugin, it is due to the number of characters inside each condition, as the erratum states.

Toolset also does not overwrite Content Templates on updates, so any edit you make in it as this one will of course not be changed on any Toolset update.

I hope this helps to clarify things.

[shawnW-3]

Ah! I misunderstood. I've looked over the differences and, yes, this is very easy to reproduce and I will keep this solution in mind should I run into the issue again. Thank you for digging into this. My issue is resolved now. Thank you!