A few suggestions for the Tumblr Dev team

677 views
Skip to first unread message

Georgi Demirev

unread,
May 28, 2014, 6:57:50 PM5/28/14
to tumblr...@googlegroups.com

Original article was posted here


A few months ago I started taking Tumblr theme development a bit more seriously. That’s when I started noticing things that could improve theme development big time and therefore user experience. Anyway, here they are, in the form of suggestions.

Part 1 Theme Options:

Theme options are the essential tools with which the end users can customize the look and feel of their blog. If there are 20 or less features it’s quite easy to find the one you’re looking for, but in more complicated examples things get a bit confusing and the space provided for option information (this is the option title) is quite limited.

I suggest:

- Grouping Options

Stacking options into groups. So instead of

<meta name="if:Disable Blog Title" content="0" />

the code could be like

<meta name="if:Sidebar Options:Disable Blog Title" content="0" />

image

The first index, as it is right now, declares that we’re creating a boolean option and the second one declares that this option would be stacked under the group “Sidebar Options”. The places in which any given option is displayed within the group could be the same as it is right now (image, color, font, select, boolean, text) or for better convenience they could be displayed by their order in the code (so they can be ordered manually).

Another way of doing this could be to start ordering theme options depending on their place in the HTML code and adding separators with titles - another form of grouping.

- Option Tooltips

In most cases the user will know what the given option is by the option title or by previous experience. However that could be a bit difficult to people who are new to Tumblr or if the option is more complicated and is linked to other theme options as well. That’s why I believe that tooltips would be extremely useful to users as well as developers.

Tumblr already has such a feature inside the “Advanced Options” page, all they have to do is make it publicly available.

image

Part 2 Code Options:

I know that Tumblr was built and designed to be a platform for bloggers, but I believe that people and companies must adapt in order to stay on top. I’ve seen countless blogs and theme developers trying to use the Tumblr platform in a way that wasn’t intended, yet it works and feels great.

Look at WordPress - it started as a blogging platform, but in time it transformed. Now it still ships as a blogging system, yet more than half of the people use it as a CMS.

I know that implementing a PHP editor for example could lead to major exploits, but why not expand the use of “mustache” code? There are more complicated actions that could be done with it and replace a lot of the PHP functionality without worrying about security. Giving people the tools and letting them use their imagination and creativity is a good thing.

I suggest:

- Adding and and or to blocks

Look at this example. I was trying to add -fluid to Bootstrap’s container class depending on what theme options are enabled. This is a code that I had to ditch and find another workaround because of the extreme complexity, I still have a hard time wrapping my head around it (it does work though).

<div class="container{block:IfNotEnableFixedMenuTop}{block:IfNotEnableFixedMenuBottom}-fluid{/block:IfNotEnableFixedMenuBottom}{/block:IfNotEnableFixedMenuTop}{block:IfEnableFixedMenuTop}{block:IfEnableFullWidth}-fluid{/block:IfEnableFullWidth}{/block:IfEnableFixedMenuTop}{block:IfEnableFixedMenuBottom}{block:IfEnableFullWidth}-fluid{/block:IfEnableFullWidth}{/block:IfEnableFixedMenuBottom}{block:IfEnableFixedMenuTop}{block:IfEnableFixedMenuBottom}-fluid{/block:IfEnableFixedMenuBottom}{/block:IfEnableFixedMenuTop}">

It would have been sooo much easier if there was a feature to set multiple options in a single if statement…

So if we have booleans like these

<meta name="if:First Option" content="0" />
<meta name="if:Second Option" content="0" />

the usage could be like this

{block:IfFirstOptiondAndSecondOption}
    <!-- If "First Option" and "Second Option" are enabled - execute this code -->
{/block:IfFirstOptiondAndSecondOption}
{block:IfFirstOptionOrSecondOption}
    <!-- If "First Option" or "Second Option" are enabled - execute this code -->
{/block:IfFirstOptionOrSecondOption}

I can see why using “And” and “Or” might not be approprate so maybe it could be with && and ||({block:IfFirstOption&&SecondOption}{block:IfFirstOption||SecondOption})

- Adding IF statement to select options

A couple of months ago I tried contacting Tumblr support on this matter and they advised me to do a workaround when it could so much simpler.

If we have a select options like these

<meta name="select:Avatar" content="" title="None" />
<meta name="select:Avatar" content="-16" title="16px Square" />
<meta name="select:Avatar" content="-64" title="64px Square" />

the usage could be like this

{block:IfSelectAvatar16pxSquare}
    <!-- If select option "Avatar" is equal to "16px Square" - execute this code -->
{block:IfSelectAvatar16pxSquare}

- Adding selected item to select options

Currently the first item in the given select option is the one that is selected by default (and applied when the theme is first installed). However, sometimes one would want to pick another option as default.

If we have a select options like these

<meta name="select:Avatar" content="" title="None" />
<meta name="select:Avatar" content="-16" title="16px Square" />
<meta name="select:Avatar" content="-64" title="64px Square" />

A default value could be set like this

<meta name="selected:Avatar" content="-16" title="16px Square" />
or this
<meta name="select:Avatar" content="-16" title="default:16px Square" />
or this
<meta name="select:Avatar" content="-16" title="selected:16px Square" />

- Stacked variables

Even though a workaround could be done it might be a good feature to be able to insert a variable inside another one.

An example code could look like this:

<meta name="if:First Select Option" content="1" />
<meta name="if:Second Select Option" content="1" />
<meta name="select:Select" content="First Select" />
<meta name="select:Select" content="Second Select" /> {block:If{select:Select}Option

Part 3 Color & Transparency

Let’s say that we’ve added a background color to an element with the color function:

<meta name="color:Background" content="#FFFFFF" />

.sidebar { background: {color:Background}; }

Most of the time everything would be fine and dandy, however if a person wants to remove the color all together then he/she/it must edit the code directly.

I suggest:

Add an option for transparency in the color picker (instead of color, the function will returnbackground: none;). Better yet, make the color function to use the RGBA standard for even further customization (yes I know there’s a HEX to RGB transition, but that doesn’t fix the transparency issue). In other words, the developers would have the option to add a transparency index which then can be customized by the end user directly from the AJAX color picker.

image

Part 4 Theme Thumb & Name

I’m not completely sure how the current system works, but it’d be nice to be able to add name and thumb to custom themes that are not featured in the Tumblr theme pages. A simple <meta> tags holding that information would probably be enough.

I suggest:

<meta name="theme-name" content="Custom Theme Name" />
<meta name="theme-image" content="http://static.tumblr.com/image.jpg" />

So what do you think? If these features were to be implemented would have they enhanced our Tumblr experience? Be sure to like and reblog so more people can get involved.

Also if you have any cool ideas that haven’t been mentioned here, why don’t you send me message so we can talk them over :)

Anyway, thank you for taking the time to read this and let’s hope to see some of these feature online. Yes? No? Maybe? :D

soulchainer

unread,
Apr 4, 2016, 6:42:31 AM4/4/16
to Tumblr Themes
Sadly, they're pretty good in ignoring us, even when the themes are populated by us. Have developers who made themes into account? Are you crazy?
Have you ever tried to contact support for anything? I did. Their support is like this: «Sorry, we can't help you at all, because we have may clients, ergo... we don't support any of it». Yeah. Awesome logic.

That're so many good suggestions here, Georgi. I wish they hear you. Yahoo should also care about this. Things like this also affect to their image like company. And that «Tumblr acts like an independent company» isn't a valid excuse to me. It's still your property.

The editor could also be improved easily. Code folding, as examnple, would be great.  The editor is an agony.
Also, some linting would be also OK. I struggled with some problems recently, related to missclosing Tumblr special variables and not noticing at all. And when that happens, you need to reread all the code closely, line by line, because Tumblr doesn't help at all.
Reply all
Reply to author
Forward
0 new messages