Tumblr's new "select" option, seen in Optica
Tumblr’s latest theme release, Optica, along with a beautiful new design also shows off a new undocumented feature that lets users select theme options.
Here’s a screenshot of Optica’s customize panel:
Notice the ability to select theme options. When you select an option Tumblr generates the correct code like so:
Very, very powerful and much easier than using a number of checkboxes like in the old customize panel.
Using “select" in your themes
As “select" doesn’t have any documentation yet, I’ve dug a bit into Optica’s code. For this example, I’ll concentrate on the avatar style, since it’s the simplest to understand.
In Optica, the developers let users select between avatar styles (square, circle, or hidden) and layouts (regular, narrow, grid). In the META elements (placed with the HTML head tag, like usual) here’s what they’ve done:
<meta name="select:Avatar style" content="square" title="Square"> <meta name="select:Avatar style" content="circle" title="Circle"> <meta name="select:Avatar style" content="hidden" title="Hidden"> <meta name="select:Layout" content="regular" title="Regular"> <meta name="select:Layout" content="narrow" title="Narrow"> <meta name="select:Layout" content="grid" title="Grid">
Very simply, the name attribute is similar to what we’ve seen elsewhere in Tumblr. Just specify the theme option (in this case “select"), and then attach it to the name of the option. The content attribute is what value will be outputted (more on this later), whilst the title is what is shown in the drop down box.
In the HTML you can then call the value in the form of {select:x}, where x refers to the META name. So, to get the value the user selected for the avatar, just code in:
<header class="masthead {select:Avatar style}"> <img src="{PortraitURL-128}"/> </header>
In the CSS, just target the class we’ve added like so:
.square img { border-radius: 0; } .circle img { border-radius: 50%; } .hidden img { display: none; }
