Search code examples
htmlcsstumblrtumblr-themestumblr-html

Some tumblr posts not showing up properly on custom theme

I'm new to this site, so apologies for any mistakes. I make themes on Tumblr, and I'm having a problem with certain kinds of posts not showing up properly inside the theme itself. As you can see from the posts, the images aren't loading at all.

I thought it might be something wrong with photosets in my theme, but fiddling with those did nothing. I'm honestly kind of a novice at HTML and CSS so I'm not sure where to go from here. Any help would be appreciated. Here's the bits of CSS/HTML I think might be the issue.

.media{
margin:0 0 10px 0;
}

iframe, img, embed, object, video {
   max-width: 100%;
}

img {
   height: auto;
   width: auto;
}

And here is the HTML

{block:Photo}
<center><div class="media">{LinkOpenTag}<img src="{PhotoURL-400}" alt="{PhotoAlt}"/></div></center>{LinkCloseTag}
{block:Caption}<div class="caption">{Caption}</div>{/block:Caption}
{/block:Photo}

{block:Photoset}
<div class="media">{Photoset}</div>
{block:Caption}<div class="caption">{Caption}</div>{/block:Caption}
{/block:Photoset}

If it helps at all, I use the base theme by Animecharacter as the building blocks for my code.

Solution

  • It looks like css position: absolute is causing the images to be removed form the flow of the document, and not have any height or width properties set.

    At the bottom of your theme inside the style tag (usually towards the end).

    .post-content div.npf_row .npf_col figure img, 
.post div.npf_row .npf_col figure img, 
body div.npf_row .npf_col figure img {
   position: static;
}

    See screenshot attached where I disabled the position property.

    If that does not work you can override the property from the external stylesheet by doing this:

    .post-content div.npf_row .npf_col figure img, 
.post div.npf_row .npf_col figure img, 
body div.npf_row .npf_col figure img {
   position: static !important;
}

    But this is less preferential it's better to find at what stage in your template this is being applied and write your css after that block (if possible)

    enter image description here