CODEWITHSUNDEEP
cssaudiotumblrposts
Smash Howard
Smash Howard

Reputation: 11

creating a tumblr theme - audio posts don't show on blog

I'm creating a new tumblr theme (I'm almost finished actually). The only problem I'm running into (and I ran into the same problem on the last theme I made) is that no matter how I format an audio post, it will not show up on my blog. My formatted audio posts how up both on the dashboard, and on the customize theme page.

I saw that audio/video posts sometimes have a problem with infinite scroll, so I removed all of my scripts. Audio posts still don't show up.

This is the code I have for the audio post:

{block:Audio}

<div id="post">

{block:AudioPlayer}
<div id="audioplayer">
{AudioPlayerBlack}
</div>
{/block:AudioPlayer}

<div id="albumart">
{block:AlbumArt}
<img src="{AlbumArtURL}">
{/block:AlbumArt}
</div>

</div>         
{/block:Audio}

this is the css for those divs (in case that's the problem)

#post
{
float: left;
padding: 5px;
margin: 4px;
background-color: {color:Post Background};
width: 215px;
    -moz-border-radius: 7px;
    -webkit-border-radius: 7px;
    -khtml-border-radius: 7px;
    border-radius: 7px;
box-shadow: 2px 2px 4px {color:Post Shadow};
}


#albumart
{
margin: 3px;
margin-bottom: 2px;
width:207px;
height: 207px;
border: 1px solid {color:Border Color};
overflow: hidden;
}

#audioplayer
{
width:25px;
height:25px;
overflow:hidden;
position:absolute;
margin-top:100px;
margin-left:100px;
    -moz-border-radius: 18px;
    -webkit-border-radius: 18px;
    -khtml-border-radius: 18px;
    border-radius: 18px;
opacity:0.75;
border:5px solid black;
}

You can see it here: smash-howard.tumblr.com

Upvotes: 1

Views: 7258

Answers (1)

Ally
Ally

Reputation: 1922

Since this hasn't been updated with answer and I had a similar problem, here's what needed to be done:

{block:Posts}
...

{block:Audio}
    {block:AudioEmbed}
    <div class="audio-embed">
        {AudioEmbed-400}
    </div>
    {/block:AudioEmbed}
    {block:AudioPlayer}
    <div class="audio-player">
        {AudioPlayerBlack}
    </div>
    {/block:AudioPlayer}
{/block:Audio}

...
{/block:Posts}

This way you're accounting for both possible audio post scenarios: audio embed and the audio player. Only accounting for one will cause the other to not show, which is what was happening in this case.

Upvotes: 0

Related Questions