my way to preload images! haha
Update Coming Soon! Check out Skem9's future roadmap
Search for in

Tumblr .^. Website Tutorials | Submited Jul 1, 2012

Written by: Yohn

A quick guide to help layout makers understand how tumblr formats the meta tags within their layouts code. This will help you to allow your layout to be more customized without the user having to edit the layouts code.

Theres different kinds of meta tags that we can use for tumblr themes to be able to customize the theme even more. <meta> tags go within the <head> tags of the layout.
Below are a couple of the meta tags that we can use.
<meta name="image:variable" content="value" />
<meta name="color:variable" content="value" />
<meta name="font:variable" content="value" />
<meta name="text:variable" content="value" />
<meta name="if:variable" content="value" />

There is another kind of meta tag we can use, which I will talk about later.
You can see there is name="image: name="color: and name="text: these let tumblr know what we want the user to be able to customize within their "Customize" panel.


When you use the name="image meta tag, you allow the user to upload an image to swap out what you have currently set to that variable.
So if we want to allow the user to change the background image on the them, we would have a meta tag like the following
<meta name="image:Background" content="http://i.imgur.com/GxtT6.png" />
You can see I put "Background" in after the "image:" part, and then within the content quotes I put a url to an image. This url will be the default background image if the user didnt upload a new image. now to make sure that the image gets loaded within the layout, we would do the following within our Style Tags
body{url('{image:Background}')}
The {image:Background} tells tumblr to grab the meta tag starting with "image:" and the "Background" is the variable it grabs. If the user didnt upload an image, then the theme will call whats between your content"" tag.
heres another way to use the image: meta tag name.
Say you have a header image on your layout, and you want to allow the user to change that image. you could do
<meta name="image:Header" content="http://path.to.image.gif" />
See I used a different variable, "Header"? Now to call that where the header image is at
<div class="Header"><img src="{image:Header}" alt="Image" />


Using the meta tag name="color allows the user to change a color within the layout. So to change the background color on the layout, we could do the following
<meta name="color:Background" content="#000" />
So now, the color variable will be Background, the default will be #000 (black) and we can call this within our CSS like the following
body{background:{color:Background};}
We can also use combos for the variables, so if we changed the background image and background color the css would look like the following
body {background: {color:Background} url('{image:Background}') fixed;
Getting the hang of it?


This one allows the user to change the font family within the layouts, so in the meta tag, between the head tags we can have
<meta name="font:Default" content="Comic Sans" />
So our default text style will be Comic Sans, and we would call it within our CSS like the following
body, li, div, p {font-family: {font:Default};}
So if the user didnt pick a custom font style, the font family would be Comic Sans


This one will allow the user to either put custom text on the layout, or other features which I will also talk about.
Say we want to allow the user to have their Skem9 URL on the layout, we could do the following
<meta name="text:Skem9 URL" content="" />
When the user goes to the Customize page, they'll see an option to enter their Skem9 URL in. If they do, then the meta tag will hold what they put in.
I'm going to use the an "block:If" command for help here, which I will explan later, and this would go within your actual layout / theme's html coding.
{block:IfSkem9URL}
<a href="{text:Skem9 URL}">Skem9</a>
{/block:IfSkem9URL}

Since we used the {block:If command, whats between it will only show up If Skem9 URL has something in it, otherwise it will not show up


If creates a checkbox on the Customize page, that the user can checkmark if they want it or not. So if we allow the user to have or not have who they are following, we can use this meta tag
<meta name="if:Display Following" content="0" />
I put content="0" as the default, so who they are following will not show up by default. If they checkmark the box in their Customize panel, then it would ="1"
In the html of the layout, we would do the following to display who we are following
{block:IfDisplayFollowing}
{block:Following}
<div class="Sbox">
<h2>{lang:Following}</h2>
<div class="content" id="following-avatars">
{block:Followed}<a href="{FollowedURL}"><img src="{FollowedPortraitURL-40}" /></a>{/block:Followed}
</div>
</div>
{/block:Following}
{/block:IfDisplayFollowing}

You can see we used the {block: command again, and then after block: we have If this goes to check if whatever is after that has a value, and whats after that is DisplayFollowing Notice theres no space here, we cant use spaces on the block/If commands when we're outputting the data. So if the user checkmarked the box for "Display Following" then this box would appear.

I hope this helps you guys out!


No Comments Found