Articles Anywhere

Issues with outputting the value of a Custom Field inside a classname

6 months 3 weeks ago #77574

Andy Badwool's Avatar Andy Badwool Moderator

Hello Peter,
Quoting this from the tutorial to understand the context...

You might want to output the value as instead, for instance to use in a classname.

To do this, you can use the output="value" attribute. This will make it output the option values instead of the names.

[habitat_area] => Asia
[habitat_area output="value"] => as

Here is an example of how you could use both the text and value of the custom field.
<div class="my-habitat-class-[habitat_area output="value"]">[habitat_area]</div>

Whith in this case would result in:
<div class="my-habitat-class-as">Asia</div>

The problem is that this:
<div class="my-habitat-class-[habitat_area output="value"]">[habitat_area]</div>

is not valid HTML in the editor because it contains quotes inside quotes ("value" is contained inside the class="..."), so the editor strips the code away, rendering impossible to use this in a classname like intended. At least this happens with JCE Editor.

Maybe you could add support for single quotes ('value') so you can do ="my-habitat-class-[habitat_area output='value']"?
This would work and would not get stripped by the editor.

6 months 3 weeks ago #77598

Peter van Westen's Avatar Peter van Westen Admin

Try escaping the quotes:

<div class="my-habitat-class-[habitat_area output=&quot;value&quot;]">

6 months 3 weeks ago #77605

Andy Badwool's Avatar Andy Badwool Moderator

Worked! :)

6 months 3 weeks ago #77606

Peter van Westen's Avatar Peter van Westen Admin

I have changed this in the documentation too.