adding images to your metadata: milou_en

robot_sky in milou_en_avril

adding images to your metadata

Jun 02, 2009 12:45

A quick tutorial for adding images to your metadata: flexible squares, smooth sailing, mixit, and mimimlalism
1. Code for Flexible squares

First let me say the reason we're only looking at these four styles is because they're the only ones I'm familiar with. The same basic principles will apply to other styles; just check out their metadata codes and edit to fit. Also these codes are directed only at adding the little images, and not doing any other kind of metadata formatting, which you will probably also want to do.

Essentially there are two things you're doing: the first is adding a background to the element. You don't actually 'insert a picture' or anything, the icon image is the background. The second is to add some padding. This will allow the background image to be fully visible by widening the element appropriately and preventing the image from being obscured by the text.

I'm assuming in this code that the icons are about 10px by 10px; if your using larger/smaller ones, increase the padding. This code is also assuming a left alignment; the right will look more like {padding: 2px 14px 2px 0; background: transparent none no-repeat scroll 100% 50%}. Again, simply add your image urls between the brackets.
.currentlocation, .ljtags, .currentmood, .currentgroups, .currentmusic {padding: 2px 0 2px 14px; background: transparent none no-repeat scroll 0 50%}
.ljtags {background-image: url()}
.currentlocation {background-image: url()}
.currentmood{background-image: url()}
.currentgroups {background-image: url()}
.currentmusic {background-image: url()}

If you have a paid account and you've used your theme layers to fix your metadata to include your tags (see tutorial for that here) then a new class will be created, .currenttags. You'll need to edit your code to reflect this.

.currenttags, .currentmood, .currentgroups, .currentmusic {padding: 2px 0 2px 14px; background: transparent none no-repeat scroll 0 50%}
.currenttags {background-image: url()}
.currentlocation {background-image: url()}
.currentmood{background-image: url()}
.currentgroups {background-image: url()}
.currentmusic {background-image: url()}

Now that you've got your images, do you really need the text saying what it is? Probably not. Disable it like so:
.currents strong, .currentlocation strong, .currentmood strong, .currentgroups strong, .currentmusic strong {display:none}

2. Code for Smooth Sailing and Mixit

The unfortunate thing about layouts like smooth sailing and mixit is that the metadata code isn't split between the mood/location/music/groups, so you can't do specialised images like you can in Flexi Squares. You can, however, put a little button next to it if you like. Or you know, whatever

smooth sailing (music +mood +location +groups +tags)
.entryMetadata li {padding: 2px 0 2px 18px; background: transparent url() no-repeat scroll 0 50%}

mixit (music +mood +location +groups; tags are separate)
div.lj-currents li { padding: 2px 0 2px 14px;background: transparent url() no-repeat scroll 0 50%}
.asset-tags-header {padding: 2px 0 2px 14px;background: transparent url() no-repeat scroll 0 50%}

4. Code for Mimimalism

The metadata is split up in a similar way.

.metadata dl, .ljtags {padding:2px 0 2px 18px;background: transparent none no-repeat scroll 0 50%}
dl.meta-location {background-image: url()}
dl.meta-mood {background-image: url()}
dl.meta-groups {background-image: url()}
dl.meta-music {background-image: url()}
.ljtags {background-image: url()}

disable bold text:
.content .entry .entry-text .metadata dt {display:none}

4. Recommended Icon Sets

I have links here at the resources post, but here are some quick and easy links and previews for you. (this is also a kind of repost of the mini icon tutorial, but with relevant icons chosen)

FamFamFam