'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
Solution 1:[1]
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.
Sources
This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.
Source: Stack Overflow
| Solution | Source |
|---|---|
| Solution 1 | Ally |
