Can a Select region options be used in other instances?

dosa · Jan 28th 2020

Hi! Is there a way to use BOTH options in a select menu, where in the example below I can use the "Apple" option for one piece of content, but the "apple" content for another. I know the first variable is for the CMS editors, but can that data also be used?

Code

<perch:content id="fruits" type="select" label="Fruits" options="Big Apple|apple,Round Orange|orange,Green Pear|pear" >

For context, I want to use the capitalized version of the word to display the title for the HTML for the end user. But I also want to use the lowercase version to add a class to the DIV the option is in. This way, the CMS editor doesn't have to choose 2 different select boxes for something very similar.

hus_hmd · Jan 28th 2020

If you use Apple and Round Orange as the value, you can use the urlify attribute to output URL friendly versions apple and round-orange. Alternatively, you can use the format attribute to convert the text to all lowercase or all uppercase.

And there's also the CSS route:

CSS

.capitalized {
text-transform: capitalize;
}
.lowercase {
text-transform: lowercase;
}
.uppercase {
text-transform: uppercase;
}

Display More

dosa · Jan 28th 2020

Interesting, haven't used urlify yet.

Yes, the CSS was a thought, but some of the variances are very different words, versus the CSS class I'm trying to use. I'll give the urlify a try! Thanks as usual Hussein!

hus_hmd · Jan 29th 2020

If you are only dealing with a small number of values, the replace attribute is also an option. You can flip the order of the values in the options attribute:

HTML

<perch:content id="fruits" type="select" options="Big Apple|apple,Round Orange|orange,Green Pear|pear" replace="apple|Big Apple,orange|Round Orange,pear|Green Pear" >

dosa · Jan 29th 2020

Thanks hus_hmd - the urlify worked great actually!