Fred toggle not returning false value

[sketchi]

I’m trying to make a published/unpublished toggle for an element by wrapping it in a div with data-fred-render="{{published}}". My published option set looks like this:

{
  "name": "published",
  "label": "Publicerad",
  "type": "toggle",
  "value": true
}

When set to true it returns the value 1, but when setting the toggle to false it doesn’t return a value until I rebuild the Fred theme, so the element is still displayed when logged out of Fred.

Is this a bug or am I doing something wrong?

[sottwell]

Definitely a bug. The data-fred-render requires the text “true” or “false”. So I just use a text field, and enter what I want in the options panel when editing.

[sketchi]

That’s true, that’s an easy workaround. I made a select box instead so the site owner can just select Published or Unpublished.

{
  "name": "published",
  "label": "Published",
  "type": "select",
  "options": {
    "true": "Published",
    "false": "Unpublished"
  },
  "value": "true"
}

[sottwell]

That is really excellent!

[sketchi]

Since admins tend to forget to look at their site after logging out of the Manager/Fred I also added a class for items that are unpublished so they’re distinguished from other content. Just so you don’t think something is published when it’s not.

In the element:

{% if published == 'false' %}
<div class="unpublished">
{% endif %}

Element code here...

{% if published == 'false' %}
</div>
{% endif %}

And in the css:

.fred--active .unpublished {
	opacity: .3;
}

I’m sure there are clearer ways to show something is unpublished but that was the easiest way I could think of right now.

[sottwell]

Oops, I misunderstood your last post.

[sketchi]

Ah, no worries. I thought for a second you could call data-fred-render in the css somehow to set a specific style when it’s set to false. That would have been neat

[sottwell]

Actually you can, [data-fred-render=“false”] https://www.w3schools.com/css/css_attribute_selectors.asp

[sketchi]

Aaaaah, yes! I love css I’ve been using it for two decades but I still learn new things every day

Just realised though that it would affect other things as well, such as the instructions for the admin. This is a bit off topic I guess but do you know if there’s any way of targeting something that has [data-fred-render=“false”] AND a class? I tried all of the below without any luck.

[data-fred-render="false"].publishedState
.publishedState[data-fred-render="false"]
[class="publishedState"][data-fred-render="false"]

[sottwell]

No, but there might be something in SASS/SCSS or its friends that could do that.