Take the 2-minute tour ×
Web Applications Stack Exchange is a question and answer site for power users of web applications. It's 100% free, no registration required.

I am just wondering what in the HTML is making certain pictures distorted and how/if I can change that in any way. Certain photos whose height is above a certain px get distorted and it's frustrating.

Here is my Tumblr: http://buriedlies.tumblr.com/

You can clearly see the photos that become distorted.

Here is the code: http://pastebin.com/6L8DFByX

Also, how do you do that shadow/glow effect? If it's not too much trouble to ask.

share|improve this question

1 Answer 1

[original answer completely replaced]

My fix is in three parts.

First you need to search and replace every instance of #entry with .entry.

Second you replace <div id="entry"> with <div class="entry" style="overflow:hidden;">

Finally replace your whole {block:Photos} with

{block:Photo}
{block:PermalinkPage}{LinkOpenTag}<img src="{PhotoURL-500}" alt="{PhotoAlt}" style="max-width:500px; display:block; margin:auto;"/>{/block:PermalinkPage}
{block:IndexPage}
<div class="perma">
<a href="{permalink}">{NoteCountWithLabel}</a> ∞
<a href="{ReblogURL}" target="_blank">reblog</font></a></span></div>
<a href="{permalink}">{LinkOpenTag}<img src="{PhotoURL-500}" alt="{PhotoAlt}" style="max-width:300px; display:block; margin:auto;"/></a>
{/block:IndexPage}
{LinkCloseTag}
{/block:Photo}

{block:Photoset}
{block:PermalinkPage}{LinkOpenTag}{Photoset-500}{/block:PermalinkPage}
{block:IndexPage}
<div class="perma">
<a href="{permalink}">{NoteCountWithLabel}</a> ∞
<a href="{ReblogURL}" target="_blank">reblog</font></a></span></div>
    {block:Photos}
                <a href="{permalink}"><img src="{PhotoURL-500}" style="max-width:300px; display:block; margin:auto;"/></a>
    {/block:Photos} 
{/block:IndexPage}
{LinkCloseTag}
{/block:Photoset}

My code will now also display something for photosets (which the original version couldn't handle at all). I did not try to center images whose height is more/less than the post height because that is a MESS to do in CSS. My code will also prevent images from being blown higher than their normal size. if you don't care about that, just replace all max-widths with width.

share|improve this answer
    
I see, well I am completely fine with it cutting off the image as you said. Sorry for my ignorance, but how would I change the code to make it like you've described? What should I delete and what should I add to the current HTML? –  user19038 Apr 14 '12 at 18:29
    
@user19038 see my updated answer for the final code. –  Circeus Apr 14 '12 at 21:41
    
Thank you so much, that worked perfectly. I am forever grateful. You're wonderful. –  user19038 Apr 15 '12 at 19:04

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.