Hello,
I recently started up a tumblr and have been having some trouble tweaking one little thing. When I post a photo it doesn't post to the size of the column, it posts quite smaller.
I'm afraid its going to be something really easy when someone points it out, and ill be foolish. The code is below, id appreciate any suggestions. :-D
kaymark1.tumblr.com
thanks!
Please link to the page with the photo in question.
What did you do to make it the size of the column?
FYI, Smashingmagazine posted "A Complete Guide to TUMBLR" a few days ago at http://www.smashingmagazine.com/2010/07/22/a-complete-guide-to-tumblr/ .
#content {
width: 720px;
margin: auto;
padding: 35px;
background-color: {color:Content Background};
And here is the site: kaymark1.tumblr.com
AFAICS, the div#content element is 720px wide. And the div#post elements are 720px wide. And the div#photo elements are 700px wide plus 20px of padding (10px on each side).
The images are all 400px wide, because that's the size of the image files, and you haven't done anything to change that. (BTW, don't resize the photos with HTML or CSS. Instead, resize them on the server, and have the HTML and CSS display them in their actual size.)
I get a blank page.
No, they aren't (yes, thank you, I can see the page now). They are linked to larger versions.
http://28.media.tumblr.com/tumblr_l61fgcoSb11qzrd9eo1_400.png
Don't know. Maybe tumblr has a FAQ or something?
you have nothing to tell tumblr to display the photos. You need the {PhotoURL-400} (or what ever value) block elements in the code else the site wont know you want to display it.
So i need to have both {PhotoURL-400} and {PhotoURL-Highres}?
I got the same problem, some of my pictures dont fill out the bar if you understand?
look: http://throughmyheartbeat.tumblr.com/
how do i change that? please help me.
hmtl:
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<!-- ----------------------------------
Theme Oswald by Max Davis, 2011.
http://themes.themaxdavis.com
---------------------------------- -->
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta name="color:Background" content="#ffffff"/>
<meta name="color:Center" content="#ffffff"/>
<meta name="color:Borders and header title" content="#000000"/>
<meta name="color:text" content="#B3B3B3"/>
<meta name="color:title" content="#000000"/>
<meta name="color:link" content="#000000"/>
<meta name="color:hover" content="#B3B3B3"/>
<meta name="if:infinite scrolling" content="0"/>
<meta name="if:Sidebar image round borders" content="0"/>
<meta name="if:Sidebar fade on scroll down" content="0"/>
<meta name="if:show caption" content="0"/>
<meta name="image:Background" content="" />
<meta name="image:Sidebar" content="" />
<meta name="text:Header title" content="" />
<meta name="text:Ask Title" content="" />
<meta name="text:Next Page" content="Next Page" />
<meta name="text:Previous Page" content="Previous Page" />
<meta name="text:Link One" content="" />
<meta name="text:Link One Title" content="" />
<meta name="text:Link Two" content="" />
<meta name="text:Link Two Title" content="" />
<meta name="text:Link Three" content="" />
<meta name="text:Link Three Title" content="" />
<meta name="text:Link Four" content="" />
<meta name="text:Link Four Title" content="" />
{block:Description}
<meta name="description" content="{MetaDescription}" />{/block:Description}
<title>{block:SearchPage}Search results for "{SearchQuery}" - {/block:SearchPage}
{block:PostSummary} {PostSummary} - {/block:PostSummary}{Title}</title>
<script src="http://static.tumblr.com/3ikgvxs/K16l80ow6/cufon-yui.js" type="text/javascript"></script> <script src="
http://static.tumblr.com/8jq17g7/JkClli8ma/diavlo_black_900.font.js" type="text/javascript"></script> <script type="text/javascript">Cufon.replace('#navi, .nav_head, .sidelinks, #pagenav_left, #pagenav_right');</script>
<script type="text/javascript" src="http://static.tumblr.com/3ikgvxs/0TGl4zgpu/jquery.min.js"></script>
{block:Ifinfinitescrolling}
<script type="text/javascript" src="http://codysherman.com/tools/infinite-scrolling/code"></script>
{/block:Ifinfinitescrolling}
<link href="http://static.tumblr.com/8jq17g7/liCln580a/style_link.css" rel="stylesheet" type="text/css" />
<link href="http://fonts.googleapis.com/css?family=Oswald:regular&v1" rel="stylesheet" type="text/css" >
<meta name="viewport" content="width=820" />
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("#sidebar").hover(function(){
if($(window).scrollTop()>="150"){$("#sidebar").stop().fadeTo("fast", 1.0);}
},function(){
if($(window).scrollTop()>="150"){$("#sidebar").stop().fadeTo("medium", 1.0);}
});
});
</script>
<style type="text/css">
* { margin: 0;
padding: 0;}
iframe#tumblr_controls {
top: 1px !important;
margin: 0 0 0 0; opacity:1;
right: 4px !important;
position: fixed !important;}
body{
line-height: 15px;
overflow-x:hidden; color:{color:text};
margin:0px; font-size:12px;
text-align: left; font-family:Arial;
background-color:{color:background};
background-image:url({image:Background});
background-attachment: fixed;
background-position:top center;
background-repeat: repeat;}
a{color:{color:link}; text-decoration:none;
-webkit-transition: all 0.4s ease-out;
-moz-transition: all 0.4s ease-out;
-o-transition: all 0.4s ease-out;}
a:hover{color: {color:hover};
-webkit-transition: all 0.2s ease-out;
-moz-transition: all 0.2s ease-out;
-o-transition: all 0.2s ease-out;}
a:active{outline: none;}
a:focus{-moz-outline-style: none;}
:-moz-any-link:focus{outline: none;}
strong{color:#000;}
img{border:none;}
div#content{
margin: auto;
width:520px;
margin-top: 10px;
margin-bottom: 20px;
text-align: left;}
div#center{
background-color:{color:Center};
margin-left: 0px;
padding: 10px;
width:500px; overflow:hidden;
text-align: left;}
div#header{
background-color:{color:Center};
padding: 10px;
width:500px;}
div#header h1 {font-size: 70px; line-height:90px; font-family: 'Oswald', arial, serif; font-weight:normal; color:{color:Borders and header title}; letter-spacing:-2px; display:inline;}
div#header hr{
width:270px;
margin-top:15px;
margin-bottom:30px;
border: 0;
height:3px;
background-color:{color:Borders and header title};}
div#header a{color:#ccc; letter-spacing:1px;}
div#header a:hover{color:#444;}
#entry{
margin-left:0px;
width:500px;
margin-bottom: 20px;}
div#sidebar{
padding: 10px;
font-size: 12px;
width:260px; height:auto;
margin-top:-20px;
position: fixed;
margin-left: 470px;
{block:IfSidebarfadeonscrolldown}
opacity:0.0;
{block:IfSidebarfadeonscrolldown}}
div#sidebar .image {
{block:IfSidebarimageroundborders}
{block:IfNotSidebarImage}
-moz-border-radius: 100px;
border-radius: 100px;
{/block:IfNotSidebarImage}
{block:IfSidebarImage}
-moz-border-radius: 110px;
border-radius: 120px;
{/block:IfSidebarImage}
{/block:IfSidebarimageroundborders}}
blockquote{
margin: 10px;
color: {color:text};
padding: 10px;}
div.post div.conversation ul {list-style-type:none;}
ol.notes {
padding: 0px;
font-weight:normal;
margin: 0px 0px;
list-style-type: none !important;
border-bottom: 0px; line-height: 17px;
margin-left: 50px; letter-spacing:0.5px;
text-align: left;}
.notes img{display:none;}
ul {list-style-type:bullet;}
ul:hover {color: #999;}
ol {list-style-type: upper-roman;}
ul:hover {color: #999;}
blockquote{padding:0px 0px 2px 5px; margin:0px 0px 2px 1px;}
blockquote p, ul{margin:0px; padding:0px; }
ul, ol, li{list-style:none; margin:5px; padding:0px;}
.user_1 .label, .user_2 .label, .user_3 .label, .user_4 .label, .user_5 .label,
.user_6 .label, .user_7 .label, .user_8 .label, .user_9 .label {font-weight: bold;}
#answer{
margin-top: 8px;
margin-left: -34px;}
.title{
font-family: {font:Body};
font-weight:bold;
font-size: 20px;
line-height: 23px;
letter-spacing: -1px;
color: {color:title};
padding:1px 1px 0px 1px;
text-transform:uppercase;}
.title2{
font-family: {font:Body};
font-weight:bold;
font-size: 15px;
line-height: 23px;
letter-spacing: -1px;
color: {color:title};
padding:1px 1px 0px 1px;}
.quotesymbols{
font-size: 30px;
filter:alpha(opacity=50);
-moz-opacity:0.5;
-khtml-opacity: 0.5;
opacity: 0.5;
line-height: -10px;}
.permalink_photo_notes{
font-family: 'Oswald', arial, serif;
font-size:200px;
letter-spacing: -15px;
display:block;
position:absolute;
color:#fff;
width:500px;
opacity:0;
margin-top: 150px;
text-align: center;
z-index:1000 !important;
-webkit-transition: all 0.5s linear;
-moz-transition: all 0.5s linear;
-o-transition: all 0.5s linear;}
#entry:hover .permalink_photo_notes {
opacity:1;
display: block;
-webkit-transition: all 0.3s linear;
-moz-transition: all 0.3s linear;
-o-transition: all 0.3s linear;}
.permalink_photo_notes a {color:#fff;}
#entry:hover .permalink_photo_notes:hover{
opacity:1;
-webkit-transition: all 0.15s linear;
-moz-transition: all 0.15s linear;
-o-transition: all 0.15s linear;}
#photo {width:1000px;}
#photo div#picture {position:relative; overflow:hidden;}
#photo img {max-width:1000px; display;}
div#photo div#picture div#info {
position:absolute;
opacity: 0;
top:0px;
left:0;
width:1000px;
height:100%;
font-size:5px;
visibility:hidden;
z-index:998;
text-align:center;
background-color:#000;
opacity 0.7s linear;
-webkit-transition: all 0.6s ease-out;
-moz-transition: all 0.6s ease-out;
-o-transition: all 0.6s ease-out;}
#entry div#photo div#picture:hover div#info{
opacity 0.7s linear;
opacity: 0.9;
-webkit-transition: all 0.2s ease-out;
-moz-transition: all 0.2s ease-out;
-o-transition: all 0.2s ease-out;}
div#photo div#picture div#info div#holder {
position:absolute;
z-index:999;
color:#000;}
div#photo div#picture div#info div#holder a,div#photo div#picture div#info div#holder a:hover {
text-decoration:none;
color:{color:Notes photo post hover};
-webkit-transition: all 0.2s ease-out;
-moz-transition: all 0.2s ease-out;
-o-transition: all 0.2s ease-out;
transition: all 0.2s ease-out;}
div#photo div#picture:hover div#info {visibility:visible;}
.permalink{
display: block;
font-size: 9px;
text-align: right;
float:left;
position: absolute;
margin-bottom: -40px;
margin-top: 15px;
height: 25px;
width:100px;
width: auto;
margin-left: -150px;}
div#entry .permalink1 a{color:#aaa;}
div#entry .permalink1 a:hover{
color:#333;
-webkit-transition: all .3s linear;
-moz-transition: all .3s linear;
transition: all 0.3s linear;}
div#entry .permalink1{
width:auto;
{block:IfBackgroundImage}
background-color:{color:center};
{/block:IfBackgroundImage}
height: 40px;
position:absolute;
width:100px;
margin-top: -15px;
text-align: left;
padding-top:5px;
padding-right:10px;
padding-bottom:10px;
font-style:italic;
border-right: 4px solid {color:Borders and header title};
text-align: right;
color:{color:permalink}; overflow:hidden;
line-height:12px;
font-size:10px; letter-spacing:0px;
white-space:nowrap;
-webkit-transition: opacity 0.7s linear;
opacity: 0.0;
-webkit-transition: all .5s linear;
-moz-transition: all .5s linear;
transition: all 0.5s linear;}
div#entry:hover .permalink1{
letter-spacing: 0px;
overflow:visible;
-webkit-transition: opacity 0.7s linear;
opacity: 1;
-webkit-transition: all .2s linear;
-moz-transition: all .2s linear;
transition: all 0.2s linear;}
div.padd {
width: 100%;
line-height: 11px;
padding-top: 0px;
padding-left: 5px;
margin: 0px;}
#answer{
margin-top: 10px;
margin-left: -34px;}
#sidebar_info {
margin-left: 55px;
height: auto;
padding: 10px;
color: #aaa;
padding-top:20px;
padding-bottom:15px;}
#sidebar_info_inside {
{block:IfBackgroundImage}
background-color: {color:center};
{/block:IfBackgroundImage}
border-left: 4px solid {color:Borders and header title};
height: auto;
padding: 10px;
color: #aaa;
padding-top:10px;
padding-bottom:15px;}
#sidebar_info h1 {
font-size: 19px; line-height: 50px;
font-family: 'Oswald', arial, serif;
font-weight:normal; color:{color:title};
letter-spacing:0px;
display:inline;}
#permalink_post_info {
width: 200px;
position:fixed;
height: auto;
{block:IfBackgroundImage}
background-color: {color:center};
{/block:IfBackgroundImage}
border-left: 5px solid {color:Borders and header title};
text-align:left;
margin-left: 530px;
padding-top:50px;
padding-bottom:50px;
padding:10px;}
</style>
<script type="text/javascript" src="http://static.tumblr.com/8jq17g7/Qrjln0pkr/jquery-1.2.6.min.js"></script>
<link rel="shortcut icon" href="{Favicon}">
<link rel="alternate" type="application/rss+xml" title="RSS" href="{RSS}" />
<meta name="viewport" content="width=820" />
<meta name="robots" content="noindex"/>
</head>
<body>
<div id="content">
<div id="header">
<center><a href="/"><h1>{block:ifNotHeadertitle}{title}{/block:ifNotHeadertitle}
{block:ifHeadertitle}{text:Header title}{/block:ifHeadertitle}</h1></a></center>
<center>
{block:AskEnabled}<a href="/ask">
{block:ifAskTitle}{text:Ask Title}{/block:ifAskTitle}
{block:ifnotAskTitle}{AskLabel}{/block:ifnotAskTitle}</a>
{/block:AskEnabled}
{block:HasPages}{block:Pages}
<a href="{URL}">{Label}</a>
{/block:Pages}{/block:HasPages}
{block:ifLinkOneTitle}
<a href="{text:Link One}">{text:Link One Title}</a>
{/block:ifLinkOneTitle}
{block:ifLinkTwoTitle}
<a href="{text:Link Two}">{text:Link Two Title}</a>
{/block:ifLinkTwoTitle}
{block:ifLinkThreeTitle}
<a href="{text:Link Three}">{text:Link Three Title}</a>
{/block:ifLinkThreeTitle}
{block:ifLinkFourTitle}
<a href="{text:Link Four}">{text:Link Four Title}</a>
{/block:ifLinkFourTitle}
<hr>
</center>
</div>
<div id="sidebar">
{block:IndexPage}
<div id="sidebar_info">
<div id="sidebar_info_inside">
<div style="opacity:1;">
{block:IfSidebarImage}
<img src="{image:Sidebar}" class="image" width=150px/>
{/block:IfSidebarImage}
{block:IfNotSidebarImage}
<img src="{PortraitURL-128}" class="image">
{/block:IfNotSidebarImage}</div>
<div id="sidebar_info_fade">
<h1>{title}</h1><br>
{Description}
{block:IfNotinfinitescrolling}
<center>
{block:Pagination}
{block:PreviousPage}
<a href="{PreviousPage}" class="navi">{text:Previous Page} </a>
{/block:PreviousPage}
{block:JumpPagination length="4"}
{block:CurrentPage}
<span class="current_page" class="navi"><strong><font color="{color:link}">{PageNumber}</font></strong></span>
{/block:CurrentPage}
{block:JumpPage}
<a class="jump_page" href="{URL}" class="navi">{PageNumber}</a>
{/block:JumpPage}
{/block:JumpPagination}
{block:NextPage}
<a href="{NextPage}" class="navi"> {text:Next Page}</a>
{/block:NextPage}
{/block:Pagination}
</center>
{block:IfNotinfinitescrolling}
</div>
</div></div>
{/block:IndexPage}
{block:IfSidebarfadeonscrolldown}
<script>
var visible = 0;
$(window).scroll(function() {
if($(window).scrollTop()>="150") {
if(visible == 0){
$("#sidebar").stop().fadeTo("medium", 1);
visible = 1;
}
}
else {
if(visible == 1){
$("#sidebar").stop().fadeTo("medium", 0.0);
visible = 0;
}
}
});
</script>
{/block:IfSidebarfadeonscrolldown}
</div><!-- End Sidebar -->
<div id="center">
<a href="http://maxdavis-themes.tumblr.com/"><div id="link"></div></a>
<div class = "autopagerize_page_element" >
{block:Posts}
<div id="entry">
{block:PermalinkPage}
{block:Date}
<div id="permalink_post_info">
Posted: <font color="{color:link}">{TimeAgo}</font><br>
Date: <font color="{color:link}">{DayOfMonth} {Month} {Year}</font><br>
{block:NoteCount}Notes: <font color="{color:link}">{NoteCountWithLabel}</font><br>{/block:NoteCount}
{block:HasTags}
Tagged as: {block:Tags}<a href="{TagURL}">{Tag}. </a>{/block:Tags}<br>
{/block:HasTags}
{block:RebloggedFrom}
Reblogged from: <a href="{ReblogParentURL}">{ReblogParentName}</a><br>
Posted: <a href="{ReblogRootURL}">{ReblogRootName}</a> <br>
{/block:RebloggedFrom}
{block:Source}
Source: {Source}<br>
{/block:Source}
</div>
{/block:Date}
{/block:PermalinkPage}
{block:Quote}
{block:IndexPage}
<div class="permalink"><span class="permalink1">
{block:Date}
<a href="{permalink}" target="_blank">
{block:NoteCount}{NoteCountWithLabel}{/block:NoteCount}
</a><br>
<a href="{permalink}">{TimeAgo} on</a><br>
<a href="{permalink}">{DayOfMonth} {Month} {Year}</a><br>
{/block:Date}</span></div>
{/block:IndexPage}
<center>
<span class="quotesymbols">❝</span>
<span class="title">{Quote}</span>
<span class="quotesymbols">❞</span><br>
{block:Source}{Source}{/block:Source}</center>
{/block:Quote}
{block:Text}
{block:IndexPage}
<div class="permalink"><span class="permalink1">
{block:Date}
<a href="{permalink}">
{block:NoteCount}{NoteCountWithLabel}{/block:NoteCount}
</a><br>
<a href="{permalink}">{TimeAgo} on</a><br>
<a href="{permalink}">{DayOfMonth} {Month} {Year}</a><br>
{/block:Date}</span></div>
{/block:IndexPage}
{block:Title}<span class="title">{Title}</span>{/block:Title}
{Body}
{/block:Text}
{block:Link}
{block:IndexPage}
<div class="permalink"><span class="permalink1">
{block:Date}
<a href="{permalink}">
{block:NoteCount}{NoteCountWithLabel}{/block:NoteCount}
</a><br>
<a href="{permalink}">{TimeAgo} on</a><br>
<a href="{permalink}">{DayOfMonth} {Month} {Year}</a><br>
{/block:Date}</span></div>
{/block:IndexPage}
<a href="{URL}" class="title">{Name}</a>
{block:Description}{Description}{/block:Description}
{block:Link}
{block:Answer}
{block:IndexPage}
<div class="permalink"><span class="permalink1">
{block:Date}
<a href="{permalink}">
{block:NoteCount}{NoteCountWithLabel}{/block:NoteCount}
</a><br>
<a href="{permalink}">{TimeAgo} on</a><br>
<a href="{permalink}">{DayOfMonth} {Month} {Year}</a><br>
{/block:Date}</span></div>
{/block:IndexPage}
<table width="100%" border="0px" cellpadding="0" cellspacing="0">
<tbody style="border-spacing: 0px;">
<td width="30px" style="vertical-align: top; width: 30px; padding: 0px;">
<img height="30px" width="30px" style="padding: 0px; margin: 0px;" src="{AskerPortraitURL-30}"/></td><td>
<div class="padd" width="100%" style="margin-left:;">
{Asker} asked:<br>
{Question}<br><div id="answer"><em>{Answer}</em></div><br>
</div></td></tr></tbody></table>
{/block:Answer}
{block:Photo}
{block:IndexPage}
<div class="permalink"><span class="permalink1">
{block:Date}
<a href="{permalink}">{TimeAgo}</a><br>
<a href="{permalink}">{DayOfMonth} {Month} {Year}</a><br>
<a href="{ReblogURL}">Reblog</a>
{/block:Date}</span></div>
{/block:IndexPage}
<div class="post">
<div id="extraonephoto">
<div id="photo">
{block:IndexPage}
<div id="picture">
{block:Date}
<a href="{permalink}"><div class="permalink_photo">
</div></a>
<div class="permalink_photo_notes">
<a href="{permalink}">{block:NoteCount} {NoteCount}{/block:NoteCount}</a>
</div>
<div id="info">
<div id="holder">
</div></div>
{/block:Date}
<img src="{PhotoURL-500}" alt="{PhotoAlt}"></div>
{block:ifshowphotoCaption}
{block:Caption}{Caption}{/block:Caption}{/block:ifshowphotoCaption}
{/block:IndexPage}
{block:PermalinkPage}
{LinkOpenTag}
<img src="{PhotoURL-500}" alt="{PhotoAlt}" width=500px/><br><br>
{LinkCloseTag}
{block:Caption}{Caption}{/block:Caption}
{/block:PermalinkPage}
</div></div></div>
{/block:Photo}
{block:Chat}
{block:IndexPage}
<div class="permalink"><span class="permalink1">
{block:Date}
<a href="{permalink}">
{block:NoteCount}{NoteCountWithLabel}{/block:NoteCount}
</a><br>
<a href="{permalink}">{TimeAgo} on</a><br>
<a href="{permalink}">{DayOfMonth} {Month} {Year}</a><br>
{/block:Date}</span></div>
{/block:IndexPage}
{block:Title}<span class="title">{Title}</span>{/block:Title}
<ul class="chat">
{block:Lines}
<li class="user_{UserNumber}">
{block:Label}
<span class="label">{Label}</span>
{/block:Label}
{Line}
</li>
{/block:Lines}
</ul>
{/block:Chat}
{block:Audio}
{block:IndexPage}
<div class="permalink"><span class="permalink1">
{block:Date}
<a href="{permalink}">
{block:NoteCount}{NoteCountWithLabel}{/block:NoteCount}
</a><br>
<a href="{permalink}">{TimeAgo} on</a><br>
<a href="{permalink}">{DayOfMonth} {Month} {Year}</a><br>
{/block:Date}</span></div>
{/block:IndexPage}
<center><div style="width:400px; height:20px;">
<div style="float:left">{AudioPlayerWhite}</div>
<div style="margin-top:8px; float:right;"><small>
{FormattedPlayCount} plays {block:ExternalAudio} //
<a href="{ExternalAudioURL}">Download?</a>
{/block:ExternalAudio}</small>
</div></div></center><br>
{block:Caption}{Caption}{/block:Caption}
{/block:Audio}
{block:Video}
{block:IndexPage}
<div class="permalink"><span class="permalink1">
{block:Date}
<a href="{permalink}">
{block:NoteCount}{NoteCountWithLabel}{/block:NoteCount}
</a><br>
<a href="{permalink}">{TimeAgo} on</a><br>
<a href="{permalink}">{DayOfMonth} {Month} {Year}</a><br>
{/block:Date}</span></div>
{/block:IndexPage}
<center>
{Video-500}<br>
{block:Caption}{Caption}{/block:Caption}
</center>
{/block:Video}
</div><!-- End entry -->
{block:PostNotes}
<br>{PostNotes}<br>
{/block:PostNotes}
{/block:Posts}
</div>
</div><!-- End Center --></div><!-- End Content -->
<script src="http://themes.themaxdavis.com/scripts/jquery-1.3.2.min.js" type="text/javascript"></script>
</body></html>
I see that for instance for a picture called "tumblr_lsv1vnikmR1qe9jd7o1_500.jpg" (what a name!) and that's becase the image is not 500 px wide as others but 475 px. There might be others like that too, I didn't check.
same problem here.
changing the PhotoURL_500 to 400 did not do anything to my post size. is there something from the codes that can be preventing that from triggering the result
Powered by Invision Power Board (http://www.invisionboard.com)
© Invision Power Services (http://www.invisionpower.com)