statamic / v2-docs

Statamic v2 Documentation
https://v2.statamic.com
54 stars 133 forks source link

Would appreciate rewording on toggle.md #465

Open Lapin opened 4 years ago

Lapin commented 4 years ago

Creating the issue upon @jackmcdade's suggestion from here #464

Also, I was blindly trying just now and could able to work it with {{ unless }}.

{{ unless switchy_thing }}
 Do this
{{ else }}
Do the other thing
{{ /unless }} 

Haven't used true of false (or not sure if unless is the right one to use) but it this one worked for my case :p

jasonvarga commented 4 years ago
{{ if switchy_thing }} Do that thing {{ /if }}

should output

Do that thing

if you have switchy_thing: true in your content file.

Is that not happening? Maybe there's a bug?

Lapin commented 4 years ago

Thanks for replying back Jason! I really appreciate it!

To make things clear I'll try to describe the scenario where I've used the toggle.

I'm using the toggle for an asset field where I upload screenshots which has two variations (mobile and desktop) When I try to fit mobile thumbs within desktop thumb canvases they just look terrible :(

Basically when the switch is toggled off the thumb sizes are 300x300. The other way is 300x500.

So I've assumed that I might needed to include else in my template.

But to double check your suggestion I've just did this, (using mock <a>'s to keep it readable -but can share the actual code if you'd like to investigate further)

{{ if switchy_thing }}
<a> {{ mobile thumb value }} </a>
{{ /if }}
<a> {{ desktop thumb value }} </a>

This ended up doubling the thumbnails.

And previously I've tried these.

{{ if switchy_thing="false" }}
<a> {{ desktop thumb value }} </a>
{{ elseif }}
<a> {{ mobile thumb value }} </a>
{{ /if }} 

This just ended up breaking the whole site. Also tried the combinations with just {{ else }} and {{ endif }}

{{ if switchy_thing="false" }}
<a> {{ desktop thumb value }} </a>
{{ elseif switchy_thing="true' }}
<a> {{ mobile thumb value }} </a>
{{ /if }} 

Again, all got broke.

{{ if switchy_thing }}
<a> {{ mobile thumb value }} </a>
{{ else }}
<a> {{ desktop thumb value }} </a>
{{ /if }}

Broke again

Also I should mention I'm professional developer. So there's a huge chance that it might be just my sloppy coding at somewhere 😅 If so, I'm sorry for taking your time!

jackmcdade commented 4 years ago

When the switch is on (to the right, green) the value of your variable will be true. When it's off (to the left, greyed out) the value is false.

Assuming your switchy_thing variable is intended to be used for "off = mobile" and "on = desktop", I would write the code like this:

{{ if switchy_thing }}
    {{ desktop_thumb}}
{{ else }}
    {{ mobile_thumb }}
{{ /if }}

I think you've just had your logic backwards. Also, {{ if switchy_thing="false" }} is not a valid condition because = is an assignment operator, not a comparison. You could do == or ===.

Also, I would recommend naming the variable something that implies the "on" state. Like show_desktop_thumbnails or something.

Completely aside, when there's a responsive thing at play I would generally render both and then use a media query or other CSS method to show the appropriate one, or I would just render the big one and crop it using object-fit: contain;. More on that property here: https://developer.mozilla.org/en-US/docs/Web/CSS/object-fit