General Question

anon30's avatar

How To Add An Image Around My Tumblr Audio Posts?

Asked by anon30 (334points) December 12th, 2009

Recently, I saw a theme, that has a image around each audio post the user post’s.

Like this one.
http://safe.tumblr.com/theme/preview/154

But this is the one i saw.

http://safe.tumblr.com/theme/preview/155

What’s the code & where do i install it at in my code.

Observing members: 0 Composing members: 0

22 Answers

eeveegurl's avatar

You’d have to use custom HTML, and then look for look for the specific part of code in their theme (both the image section near the beginning), and also HOW to place it in the second part of the code (near the end), but you should definitely credit the original user that created the code for the radio.

I’m not quite sure which image you want to use in your tumblr, so not sure how to help you out with specifics.

anon30's avatar

i want to design my own, and just use the code how to place it.

eeveegurl's avatar

Ok, so the first link uses

.post .audiobox {
background: #000;
padding: 5px;
}

and the second link uses

#radio {
margin: auto;
padding: 86px 0px 0px 87px;
width: 310px;
height: 189px;
background: transparent url(http://static.tumblr.com/dbcxhwx/HhBke90up/3173070506_79130bdc2d_o.png) no-repeat;
}

and at the bottom, where it uses {AudioPlayerGrey}, they used <div class=“audiobox”>
and <div id=“radio”> respectively.

I don’t know if this makes any actual sense to you. I’m not great at explaining this stuff :/

anon30's avatar

Alright, i been working on this.

http://smokingunalbumcase.tumblr.com/

and the code doesn’t seem to have .audio post or anything like that, just .chat . etc
how can i convert that for the 2nd code u gave me.

eeveegurl's avatar

You can actually just add your own ”.audio” near the beginning with all the other CSS stuff.

And then near the bottom, after the <body> tag, if you don’t see {block:Audio}, then add this

{block:Audio}
<div class=“audio”>
<div class=”YOURCSSSTYLEHERE”>
{AudioPlayerGrey}
</div>
{block:Caption}
<div class=“caption”> {Caption}</div>
{/block:Caption}{FormattedPlayCount} plays
</div>
{/block:Audio}

anon30's avatar

what do i add in the beginning? what would the css look like

eeveegurl's avatar

Well, that would really depend on what your image looks like – if it needs to be centered, moved to the left, to the right, up, down, etc.

See the part of the second code that used “padding”? That would change the position of your image.

anon30's avatar

so how would i do this?

#radio {
margin: auto;
padding: 86px 0px 0px 87px;
width: 310px;
height: 189px;
background: transparent url(http://static.tumblr.com/dbcxhwx/HhBke90up/3173070506_79130bdc2d_o.png) no-repeat;
}
and at the bottom, where it uses {AudioPlayerGrey}, they used <div class=“audiobox”>
and <div id=“radio”> respectively.

then on the bottem i add on the bottem

{block:Audio}
<div class=“audio”>
<div class=”YOURCSSSTYLEHERE”>
{AudioPlayerGrey}
</div>
{block:Caption}
<div class=“caption”> {Caption}</div>
{/block:Caption}{FormattedPlayCount} plays
</div>
{/block:Audio}

and it will work?

eeveegurl's avatar

change the bottom to that, and it should work, provided your image has the exact same dimensions as the image they used, etc.

{block:Audio}
<div class=“audio”>
<div id=”radio”>
{AudioPlayerGrey}
</div>
{block:Caption}
<div class=“caption”> {Caption}</div>
{/block:Caption}{FormattedPlayCount} plays
</div>
{/block:Audio}

———

but there’s still no guarantee. Every layout is different, and I’m not really a professional coder. I just guess and check and make my way around it, changing little bits at a time until I get it right (but that’s most of the fun!)

anon30's avatar

i’m just wondering, because the top part has that #radio when the bottem doesn’t even have that

eeveegurl's avatar

That’s something you have to manually add in, because it’s not in Tumblr’s default code.

Hope all this helped!

anon30's avatar

my code has this part.

{block:Audio}
<p class=“post-metadata”>
<span class=“post-type”>Audio</span>
<a href=”{Permalink}” class=“permalink-audio”><span>Permalink to this post</span></a>
</p>
</div> <!—end post-header—>

<div class=“audio”>
{AudioPlayerBlack}
{block:Caption}<div class=“caption”>{Caption}</div>{/block:Caption}
</div>
{/block:Audio}

how would i add that code and this code together?

eeveegurl's avatar

If you created the #radio part of the code (at the beginning), then you would add

<div id=“radio”> right BEFORE {AudioPlayerBlack} and then </div> right after it.

anon30's avatar

so <div class=“radio”>
{AudioPlayerBlack}
{block:Caption}<div class=“caption”>{Caption}</div>{/block:Caption}
</div>
{/block:Audio} ?

eeveegurl's avatar

<div class=“radio”>
{AudioPlayerBlack}
</div>

[the rest of the code]

anon30's avatar

So replace that &

<div class=“radio”>
{AudioPlayerBlack}
</div>
{block:Audio}
<div class=“audio”>
<div id=”radio”>
{AudioPlayerGrey}
</div>
{block:Caption}
<div class=“caption”> {Caption}</div>
{/block:Caption}{FormattedPlayCount} plays
</div>
{/block:Audio}

eeveegurl's avatar

oh no, the whole thing should look like this

{block:Audio}
<div class=“audio”>
<div id=”radio”>
{AudioPlayerGrey}
</div>
{block:Caption}
<div class=“caption”>{Caption}</div>
{/block:Caption}{FormattedPlayCount} plays
</div>
{/block:Audio}

anon30's avatar

Well, it didn’t put a image on it. but it came out into something i like.

i want to put a dashed boarder on each post to separate them, how can i do that

anon30's avatar

well…...

anon30's avatar

http://smokingun.tumblr.com/

im done but all i need is to find out how to separeted my posts with blogs

anon30's avatar

BOARDERS i mean.

eeveegurl's avatar

Eeek – that’s not something I’m really good enough to tell you how to do :/

There’d be a lot of fixing and checking I’d do myself. Just a lot of guesswork, sorry!

Answer this question

Login

or

Join

to answer.

This question is in the General Section. Responses must be helpful and on-topic.

Your answer will be saved while you login or join.

Have a question? Ask Fluther!

What do you know more about?
or
Knowledge Networking @ Fluther