Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Would appreciate rewording on toggle.md #465

Open
Lapin opened this issue Feb 25, 2020 · 3 comments
Open

Would appreciate rewording on toggle.md #465

Lapin opened this issue Feb 25, 2020 · 3 comments

Comments

@Lapin
Copy link

Lapin commented Feb 25, 2020

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
Copy link
Member

jasonvarga commented Feb 25, 2020

{{ 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
Copy link
Author

Lapin commented Feb 25, 2020

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
Copy link
Member

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

@jackmcdade jackmcdade changed the title Would appreciate rewording on toogle.md Would appreciate rewording on toggle.md Feb 26, 2020
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

3 participants