Tumblr theme isn't displaying images right on front page

Discussion in 'HTML & Website Design' started by Apposl, Jun 17, 2013.

0
  1. #1
    Hey all,

    The only way the theme displays images correctly is when I do a photo post. When I do that, the photo fills up the box on the front page perfectly. I would keep with that, except when a user clicks and goes to that photo page, clicking the photo blows up the image - I want them to be referred to the location of the original photo I am posting a link to.

    If I use any other option, text post, or video post, the image appears squashed and 'smaller' than the boxes they display in on the home page.

    I need to fix this one way or another. Either the picture displaying correctly on the front page or the photos linking to the page I got it from, rather than a bigger picture on my site.

    Can anyone help? This is the Tumblr theme html:

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"><head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />
 
<meta name="text:Link 1" content="" />
<meta name="text:Link 1 url" content="" />
 
<meta name="text:Link 2" content="" />
<meta name="text:Link 2 url" content="" />
 
<meta name="text:Link 3" content="" />
<meta name="text:Link 3 url" content="" />
 
<meta name="text:Link 4" content="" />
<meta name="text:Link 4 url" content="" />
 
<meta name="text:picurl" content="" />
 
<title>{block:SearchPage}Search results for "{SearchQuery}" - {/block:SearchPage}{block:PostSummary}{PostSummary} - {/block:PostSummary}{Title}</title>
 
<link rel="alternate" type="application/rss+xml" href="{RSS}" />
<link rel="shortcut icon" href="{Favicon}" />
{block:Description}<meta name="description" content="{MetaDescription}" />{/block:Description}
<link rel="stylesheet" type="text/css" href="http://static.tumblr.com/vohahkw/Opulcrnfo/leaguegothic.css" />
 
<style type="text/css">
 
html, body {
    margin: 0;
    padding: 0;
    height: auto!important;
    height: 100%;
    min-height: 100%;
    overflow-x: hidden;
}
 
html {
    background: #FFF;
}
 
* {
    font-family: "Lucida Sans Unicode", Helvetica, sans-serif;
}
 
html {
    font-size: 8pt;
}
 
a {
    color: #666;
    text-decoration: none;
}
 
a:hover {
    color: #000;
}
 
.clear {
    float: none;
    clear: both;
}
 
.title {
    font: 25pt "league gothic", sans-serif;
    color: #CCC;
}
 
/* main thumbnails wrapper */
 
#fs_wrapper {
    padding: 0 50px 0 35px;
    margin: 70px auto 0 auto;
    position: relative;
    z-index:990;
}
 
/* pagination and main title wrapper */
 
#sec2 {
    margin: 0 auto;
    padding: 0 50px;
    position: relative;
    z-index: 990;
}
 
/* all posts */
 
.fspost {
    float: left;
    height: 140px;
    width: 230px;
    border: 1px solid #000;
    margin-left: 15px;
    margin-bottom: 15px;
    position: relative;
    opacity: .8;
    overflow: hidden;
    background: #FFF;
}
 
.fspost:hover {
    opacity: 1;
}
 
.permalink, .fullsize {
    width: 100%;
    height: 100%;
    position: absolute;
    left: 0;
    top: 0;
    z-index: 998;
}
 
/* post desc */
 
.fspost .desc {
    display: block;
    font-size: 6pt;
    letter-spacing: 1px;
    text-transform: uppercase;
    position: absolute;
    left: 0;
    bottom: 0;
    z-index: 999;
    width: 400px;
    background: rgba(0,0,0,.7);
    color: #FFF;
    visibility: hidden;
    cursor: pointer;
}
 
.fspost:hover .desc {
    visibility: visible;
}
 
.fspost .desc:hover {
    background: #000;
}
 
.fspost .desc .in {
    display: block;
    padding: 3px 5px;
    position: relative;
}
 
.fspost .desc .title {
    font-size: 1.2em;
}
 
.fspost .in {
    text-align: left;
    padding: 10px;
}
 
/* photo posts */
 
.fsphoto img {
    position: absolute;
    left: 0;
    top: 0;
    width: 300px;
}
 
.photo-hires {
    display: inline-block;
    padding: 2px 5px;
    background: #DDD;
    height: 18px;
    margin-bottom: 10px;
}
 
/* text posts */
 
.fstext .title:hover {
    color: #000;
}
 
/* quote posts */
 
.fsquote .quote {
    display: block;
    font: 25pt "league gothic", sans-serif;
    color: #333;
    margin-bottom: 15px;
}
 
.fsquote .source {
    font-size: 10pt;
    color: #CCC;
    font-style: italic;
}
 
/* answer posts */
 
.ask_asker {
    background: #DDD;
    height: 25px;
    margin-bottom: 10px;
    line-height: 25px;
}
 
.ask_asker img {
    display: inline-block;
    float: left;
    line-height: 25px;
    margin: 5px;
}
 
.ask_question {
    font-weight: bold;
    margin-bottom: 15px;
}
 
/* main title */
 
#info {
    padding-top: 10px;
    border-top: 1px solid #DDD;
}
 
#info div {
    text-align: right;
}
 
.infopic {
    border: 1px solid #000;
    float: right;
    height: 73px;
    margin-top: 4px;
    margin-left: 10px;
}
 
#blogmaintitle, #blogmaintitle a {
    color: #000;
    font-family: "League Gothic";
    text-transform: uppercase;
    font-size: 50pt;
    line-height: 60px;
}
 
#blogsubtitle {
    font-family: "League Gothic";
    text-transform: uppercase;
    color: #666;
    font-size: 16pt;
}
 
#blogdesc a { text-transform: lowercase; }
 
 
/* pagination */
 
#pgntn {
    height: 75px;
}
 
#next, #prev {
    font: 20pt "league gothic";
}
 
#next {
    float: right;
}
 
#prev {
    text-align: left;
}
 
#pagenumber {
    line-height: 30px;
    text-align: center;
    color: #DDD;
}
 
 
/* credit */
 
#credit {
    position: fixed;
    top: 15px;
    left: 15px;
    color: #DDD;
    background: #FFF;
    padding: 5px;
    z-index: 999;
}
 
#credit a {
    color: #AAA;
}
 
#credit a:hover {
    color: #000;
}
 
/* begin permalink page specific css */
 
#pl_wrapper {
    margin-left: 50px;
    width: 500px;
}
 
.infopic_pl {
    float: left;
    margin-right: 10px;
    margin-left: 0;
}
 
.pl_info {
    padding-top: 0;
    border-top: none !important;
    margin: 45px 0;
}
 
.pl_info div {
    text-align: left !important;
}
 
#notez {
    margin-top: 45px;
    padding-top: 10px;
    border-top: 1px solid #DDD;
}
 
.more_notes_link {
    text-align: left;
}
 
.faq { margin: 0; padding: 0; margin-left: 10px; }
 
.faq_q { display: block; margin-bottom: 10px; }
 
.faq p { margin-bottom: 20px; }
 
 
 
 
/* CUSTOM COLORS */
 
body, html {
    background: #000;
color: #FFF;
}
 
a {
    color: #666;
}
 
a:hover {
    color: #FFF;
}
 
.title {
    color: #FFF;
}
 
.fspost {
    border: 1px solid #999;
    background: #000;
}
 
.fspost .desc {
    background: rgba(255,255,255,.7);
    color: #000;
}
 
.fspost .desc:hover {
    background: #FFF;
}
 
.photo-hires {
    background: #333;
}
 
.fstext .title:hover {
    color: #FFF;
}
 
.ask_asker {
    background: #222;
}
 
#info {
    border-top: 1px solid #333;
}
 
.infopic {
    border: 1px solid #666;
}
 
#blogmaintitle, #blogmaintitle a {
    color: #FFF;
}
 
#pagenumber {
    color: #333;
}
 
#credit {
    color: #333;
    background: #000;
}
 
#credit a {
    color: #555;
}
 
#credit a:hover {
    color: #FFF;
}
 
#notez {
    border-top: 1px solid #333;
}
 
{CustomCSS}
 
</style>
 
<!-- <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js">
</script> -->
 
<script type="text/javascript">
 
function resizedivs() {
 
$ = function(id) { return document.getElementById(id); }
 
fschildren = $("fs_wrapper").childNodes;
postc = 0;
thedivs = new Array();
 
for(i = 0; i < fschildren.length; i++) {
    if(fschildren[i].tagName == "DIV") {
        thedivs[postc] = fschildren[i];
        postc++;
    }
}
 
newwidth = 0;
for(i = 0; i < thedivs.length; i++) {
    if(newwidth <= document.body.clientWidth) {
        newwidth = newwidth + (thedivs[i].clientWidth)+15;
    }
 
    if(newwidth >= document.body.clientWidth-90) { // 100 for padding minus 15 extra
        newwidth = newwidth - (thedivs[i].clientWidth)+15;
        break;
    }
}
 
$("fs_wrapper").style.width = newwidth+"px";
$("fs_wrapper").style.position = "relative";
$("fs_wrapper").style.left = "7px";
 
$("sec2").style.width = newwidth-35+"px";
$("sec2").style.position = "relative";
$("sec2").style.left = "-5px";
 
}
 
window.onresize = function() {
    resizedivs();
 
}
 
window.onload = function() {
    resizedivs();
}
 
</script>
 
<script type="text/javascript">/*
$(document).ready(function() {
 
    var startPage = $("#hidden_navinfo .startpage").text();
    for ( var i = 1, len = 2; i < len; i++) {
        var count = parseInt(startPage) + 1;
        var new_posts = "";
        $.get("/page/" + count, function(data) {
            $("#posts").append($('.page', $(data)));
        });
    }
 
    $("#next").attr("href", function() { return "/page/" + (parseInt(startPage)+2); } );
    $("#prev").attr("href", function() { return "/page/" + (parseInt(startPage)-2); } );
 
});
    */</script>
 
</head><body>
 
{block:IndexPage}
<div id="fs_wrapper">
 
<!--<div id="posts">
            <div class="page">-->
 
{block:Posts}
    {block:Text}
    <div class="fspost fstext"><a href="{Permalink}" class="permalink"></a>
        <div class="in">
            {block:Title}<div class="title">{Title}</div>{/block:Title}
            {Body}
        </div>
 
        <a href="{Permalink}" class="desc"><span class="in">
            {TimeAgo} / {NoteCount} notes
        </span></a>
    </div>
    {/block:Text}
 
    {block:Photo}
    <div class="fspost fsphoto"><a href="{Permalink}" class="permalink"></a>
        <img src="{PhotoURL-400}" alt="{PhotoAlt}" />
 
        <a href="{Permalink}" class="desc"><span class="in">
            {TimeAgo} / {NoteCount} notes
        </span></a>
    </div>
    {/block:Photo}
 
    {block:Photoset}
    <div class="fspost fstext"><a href="{Permalink}" class="permalink"></a>
        <div class="in">
            <div class="title">photo set &raquo;</div>
            {block:Caption}{Caption}{/block:Caption}
        </div>
 
        <a href="{Permalink}" class="desc"><span class="in">
            {TimeAgo} / {NoteCount} notes
        </span></a>
    </div>
    {/block:Photoset}
 
    {block:Quote}
    <div class="fspost fsquote"><a href="{Permalink}" class="permalink"></a>
        <div class="in">
            <div class="quote">&ldquo;{Quote}&rdquo;</div>
            <div class="source">{Source}</div>
        </div>
 
        <a href="{Permalink}" class="desc"><span class="in">
            {TimeAgo} / {NoteCount} notes
        </span></a>
    </div>
    {/block:Quote}
 
    {block:Link}
    <div class="fspost fstext"><a href="{Permalink}" class="permalink"></a>
        <div class="in">
            <a href="{URL}" class="title">{Name} &raquo;</a>
            {block:Description}{Description}{/block:Description}
        </div>
 
        <a href="{Permalink}" class="desc"><span class="in">
            {TimeAgo} / {NoteCount} notes
        </span></a>
    </div>
    {/block:Link}
 
    {block:Chat}
    <div class="fspost fstext"><a href="{Permalink}" class="permalink"></a>
        <div class="in">
            {block:Title}<div class="title">{Title}</div>{/block:Title}
            <div class="chat_lines">{block:Lines}<p class="chat_{Alt}"><strong>{block:Label}{Label}{/block:Label}</strong> {Line}</p>{/block:Lines}</div>
        </div>
 
        <a href="{Permalink}" class="desc"><span class="in">
            {TimeAgo} / {NoteCount} notes
        </span></a>
    </div>
    {/block:Chat}
 
    {block:Audio}
    <div class="fspost fstext"><a href="{Permalink}" class="permalink"></a>
        <div class="in">
            <div class="title">audio post &raquo;</div>
            {block:Caption}{Caption}{/block:Caption}
        </div>
 
        <a href="{Permalink}" class="desc"><span class="in">
            {TimeAgo} / {NoteCount} notes
        </span></a>
    </div>
    {/block:Audio}
 
    {block:Video}
    <div class="fspost fstext"><a href="{Permalink}" class="permalink"></a>
            {Video-400}
 
        <a href="{Permalink}" class="desc"><span class="in">
            {TimeAgo} / {NoteCount} notes
        </span></a>
    </div>
    {/block:Video}
 
    {block:Answer}
    <div class="fspost fstext"><a href="{Permalink}" class="permalink"></a>
        <div class="in">
            <div class="ask_asker">
                <img src="{AskerPortraitURL-16}" alt="" /> {Asker} asked
            </div>
            <div class="ask_question">{Question}</div>
            <div class="ask_answer">{Answer}</div>
        </div>
 
        <a href="{Permalink}" class="desc"><span class="in">
            {TimeAgo} / {NoteCount} notes
        </span></a>
    </div>
    {/block:Answer}
{/block:Posts}<!-- </div></div>-->
 
</div><!-- /#fs_wrapper -->
 
<div class="clear"></div>
 
{/block:IndexPage}
 
<div id="sec2">
 
{block:Pagination}
<div id="pgntn">
    {block:PreviousPage}<a href="{PreviousPage}" class="prev" id="prev">previous page</a>{/block:PreviousPage}
    {block:NextPage}<a href="{NextPage}" class="next" id="next">next page</a>{/block:NextPage}
<div id="pagenumber">page {CurrentPage} of {TotalPages}</div>
</div>
<div class="clear"></div>
{/block:Pagination}
 
 
<div id="info_wrap"><div id="info"{block:PermalinkPage} class="pl_info"{/block:PermalinkPage}>
    <a href="{text:picurl}"><img src="{PortraitURL-96}" class="infopic{block:PermalinkPage} infopic_pl{/block:PermalinkPage}" alt="{Name}" /></a>
    <div id="blogmaintitle">{block:PermalinkPage}<a href="http://{Name}.tumblr.com/">{/block:PermalinkPage}{Title}{block:PermalinkPage}</a>{/block:PermalinkPage}</div>
    <div id="blogsubtitle">{Description}</div>
    <div id="blogdesc"><br />
 
    {block:IfLink1url}<a href="{text:Link 1 url}">{text:Link 1}</a>{/block:IfLink1url}
    {block:IfLink2url}/ <a href="{text:Link 2 url}">{text:Link 2}</a>{/block:IfLink2url}
    {block:IfLink3url}/ <a href="{text:Link 3 url}">{text:Link 3}</a>{/block:IfLink3url}
    {block:IfLink4url}/ <a href="{text:Link 4 url}">{text:Link 4}</a>{/block:IfLink4url}
 
    {block:HasPages}/
        {block:Pages}
            <a href="{URL}">ask</a>
        {/block:Pages}
    {/block:HasPages}
 
    <!--{block:AskEnabled}/ <a href="/ask">{AskLabel}</a>{/block:AskEnabled}-->
    {block:SubmissionsEnabled}/ <a href="/submit">{SubmitLabel}</a>{/block:SubmissionsEnabled}
 
    {block:PermalinkPage}{block:PermalinkPagination}/ posts:
        {block:NextPost}<a href="{NextPost}">&laquo; newer</a> &bull; {/block:NextPost}
        {block:PreviousPost}<a href="{PreviousPost}">older &raquo;</a>{/block:PreviousPost}
    {/block:PermalinkPagination}{/block:PermalinkPage}
    <br /><br />
 
    {block:TagPage}showing only posts tagged "{Tag}"{/block:TagPage}
 
    </div>
</div></div>
<div class="clear"></div>
 
 
</div><!-- /sec2 -->
 
 
{block:PermalinkPage}
<div id="pl_wrapper">
{block:Posts}
    {block:Text}
        {block:Title}<div class="title">{Title}</div>{/block:Title}
        {Body}
    {/block:Text}
 
    {block:Photo}
        {LinkOpenTag}
            <img src="{PhotoURL-500}" alt="{PhotoAlt}" />
        {LinkCloseTag}<br />
        <a class="photo-hires" href="{PhotoURL-HighRes}">hi-res version</a><br />
        {block:Caption}{Caption}{/block:Caption}
    {/block:Photo}
 
    {block:Photoset}
        {Photoset-500}
        {block:Caption}{Caption}{/block:Caption}
    {/block:Photoset}
 
    {block:Quote}
        <div class="quote">&ldquo;{Quote}&rdquo;</div>
        <div class="source">{Source}</div>
    {/block:Quote}
 
    {block:Link}
        <a href="{URL}" class="title">{Name} &raquo;</a><br /><br />
        {block:Description}{Description}{/block:Description}
    {/block:Link}
 
    {block:Chat}
        {block:Title}<div class="title">{Title}</div>{/block:Title}
        <div class="chat_lines">{block:Lines}<p class="chat_{Alt}"><strong>{block:Label}{Label}{/block:Label}</strong> {Line}</p>{/block:Lines}</div>
    {/block:Chat}
 
    {block:Audio}
        {AudioPlayerWhite}
        {block:Caption}{Caption}{/block:Caption}
    {/block:Audio}
 
    {block:Video}
        {Video-500}
        {block:Caption}{Caption}{/block:Caption}
    {/block:Video}
 
    {block:Answer}
        <div class="ask_asker">
            <img src="{AskerPortraitURL-16}" alt="" /> {Asker} asked
        </div>
        <div class="ask_question">{Question}</div>
        <div class="ask_answer">{Answer}</div>
    {/block:Answer}
 
    {block:HasTags}
        {block:Tags}<a href="{TagURL}">#{Tag}</a> &nbsp;{/block:Tags}<br /><br />
    {/block:HasTags}
 
    <br /><br />
    {block:Date}<i>Posted {DayOfMonth}{DayOfMonthSuffix} {Month}, {Year}</i>{/block:Date}
 
{/block:Posts}
 
{block:PostNotes}
    <div id="notez">{PostNotes}</div>
{/block:PostNotes}
</div>
 
<div class="clear"></div>
{/block:PermalinkPage}
 
<!-- <div id="hidden_navinfo"><span class="startpage">{CurrentPage}</span><span class="totalpages">{TotalPages}</span></div> -->
 
 
 
<div id="credit"><a href="http://xxxtheme.tumblr.com/">xxx theme</a> &copy; <a href="http://roboweed.tumblr.com/">roboweed</a></div>
 
</body></html>
    HTML:
     
    Apposl, Jun 17, 2013 IP
  2. Apposl

    Apposl Member

    Messages:
    131
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    48
    #2
    You can see what I am talking about at ne1up.tumblr.com - I don't want that title stuff getting in the way of just displaying the full image there, on the home page.

    And if I do a photo post, it appears just how I want it. But I want the photos to appear fully in the box when I do text or video posts... Somehow.

    Thanks for any help!
     
    Apposl, Jun 17, 2013 IP