The Web Design Group

... Making the Web accessible to all.

Welcome Guest ( Log In | Register )

 
 Reply to this topicStart new topic
> Tumblr: photo max width
etcetera01
post Oct 26 2011, 01:48 AM
Post #1





Group: Members
Posts: 1
Joined: 26-October 11
Member No.: 15,717
Help! How do i change the max width of my photos to fit in the posts?

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>(1) Facebook</title>

<link rel="shortcut icon" href="{Favicon}">
<link rel="alternate" type="application/rss+xml" href="{RSS}">
<!-- {block:Description} -->
<meta name="description" content="{MetaDescription}" />
<!-- {/block:Description} -->

<meta name="color:Background" content="#d0ddd7" />
<meta name="color:Links" content="#666666" />

<meta name="image:Background" content="http://static.tumblr.com/jw8fmba/JrJlm0bpc/bg.jpg" />
<meta name="image:Custom logo" content="" />

<meta name="if:Repeat background" content="0" />
<meta name="if:Show description" content="0" />

<meta name="color:Links hover" content="#663333" />

<meta name="if:Infinite scrolling" content="0" />

<meta name="font:Body" content="Georgia" />

<meta name="if:Like button on posts" content="0" />

<meta name="if:Display footer" content="1" />

<meta name="text:Title font size" content="60px" />

<style type="text/css">
@import url(http://fonts.googleapis.com/css?family=Yanone+Kaffeesatz:bold);

body {
margin:0;
background:url({image:Background}) {block:IfNotRepeatBackground}no-repeat{/block:IfNotRepeatBackground} {color:Background};
}
a:link,a:visited {
text-decoration:none;
color:{color:Links};
}
a:hover,a:active {
color:{color:Links Hover};
}
a img {
border:0;
}
p,li,code,blockquote {
font-size:11px;
line-height:16px;
font-family: {font:Body};
}
blockquote {
border-left:5px #CCC solid;
margin-left:10px;
padding-left:10px;
}
h1 {
font-family: Helvetica, Arial, sans-serif;
}
div.pagination {
width: 100%;
height:100px;
position: fixed;
bottom: 25%;
}
div.pagination div#next {
float:right;
margin:0 10px;
background:url(http://static.tumblr.com/jw8fmba/S0clac1sk/next.png);
height:100px;
width:100px;
}
div.pagination div#previous {
float:left;
margin:0 10px;
background:url(http://static.tumblr.com/jw8fmba/PKFlac1sy/previous.png);
height:100px;
width:100px;
}
.wrap {
margin:106px 0 30px 240px;
width:800px;
position:relative;
}
#title_holder {
width:300px;
position:relative;
}
#title_holder img {
max-width:300px;
float:right;
}
#title {
background:#FFF;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
padding:15px 30px;
float:right;
position:relative;
-webkit-box-shadow: rgba(0, 0, 0, 0.1) 0px 0px 10px;
}
#title h1 {
font-size: {text:Title font size};
text-transform:uppercase;
text-align:right;
font-family: "Yanone Kaffeesatz", "Lucida Grande", Lucida, Verdana, sans-serif;
margin: 0;
}
#title a h1 {
text-decoration:none;
color:{color:Background};
}
#title #arrow {
position:absolute;
background:url(http://static.tumblr.com/jw8fmba/p2ilhd72v/title_arrow.png) no-repeat;
width:31px;
height:22px;
bottom:-22px;
right:60px;
}
#posts {
width:600px;
position:relative;
float: left;
z-index: 5;
}
#posts a:link {
text-decoration:underline;
}
#sidebar {
width: 160px;
float: right;
position: relative;
}
#sidebar #links {
position: absolute;
top: 0;
right: -37px;
width: 27px;
}
#sidebar #links .link {
width:27px;
height:28px;
background-repeat:no-repeat;
margin: 0 0 2px 0;
}



#sidebar #links .page {
display: none;
}
#post {
width:600px;
position:relative;
float: left;
}
#post #content {
background:#FFF;
width:600px;
float:left;
-webkit-box-shadow: rgba(0, 0, 0, 0.15) 0px 0px 10px;
-webkit-border-bottom-right-radius: 5px;
-webkit-border-bottom-left-radius: 5px;
-moz-border-radius-bottomright: 5px;
-moz-border-radius-bottomleft: 5px;
border-bottom-right-radius: 5px;
border-bottom-left-radius: 5px;
position:relative;
margin-bottom:30px;
z-index: 5;
}
#post #content h1 {
font-size: 30px;
font-family: "Yanone Kaffeesatz", "Lucida Grande", Lucida, Verdana, sans-serif;
margin-top: 10px;
font-weight: normal;
}
#post #question {
margin: 0 10px 10px 10px;
padding: 10px;
font-size: 12px;
line-height: 16px;
background: #e7eaec;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
position: relative;}
#post #arrow {
background: url(http://static.tumblr.com/jw8fmba/HOullykum/arrow.png) no-repeat;
width: 13px;
height: 7px;
position: absolute;
left: 10px;
bottom: -7px;
}
#post #asker {
width: 100%;
font-size: 11px;}
#post #asker img { width: 16px; margin: 0 5px -4px 20px; }
#post #asker a {
text-decoration:none;}
#post #body img {
max-width: 100%;
height:auto;}
#post #content #img_holder {
width: 400px;
min-height: 35px;
background: url(http://static.tumblr.com/jw8fmba/rnTllljm5/loading.gif) center no-repeat;
}
#post #content img {
max-width: 100%;
}
#post #content #body {
padding:10px 20px;
}
#post #info a {
text-decoration: none;
color: #FFF;
}
#post #info {
width: 100px;
position: absolute;
top: 0;
left: 300px;
-webkit-transition: all .4s ease-out;
-moz-transition: all .4s ease-out;
-o-transition: all .4s ease-out;
transition: all .4s ease-out;
opacity: 0;
}
#post:hover #info {
left:600px;
-webkit-transition: all .4s ease-out;
-o-transition: all .4s ease-out;
transition: all .4s ease-out;
opacity: 1;
}
#post #info #details {
float:left;
display: block;
margin-bottom: 5px;
font-family: "Yanone Kaffeesatz", "Lucida Grande", Lucida, Verdana, sans-serif;
text-transform: uppercase;
font-weight: normal;
overflow: hidden;
}
.tags {
padding: 5px 10px 5px 15px;
font-size: 11px;
background: {color:Links Hover};
}

.notecount {
padding: 5px 10px 5px 32px;
font-size: 14px;
background: url(http://static.tumblr.com/jw8fmba/qu0lm0b3n/heart.png) no-repeat 15px 7px {color:Links Hover};
}
.playcount {
padding: 5px 10px 5px 30px;
font-size: 14px;
background: url(http://static.tumblr.com/jw8fmba/xzflm0dwb/plays.png) no-repeat 15px 7px {color:Links Hover};
}
.asklink {
padding: 5px 10px 5px 15px;
font-size: 14px;
background: {color:Links Hover};
}
.date {
font-size: 30px;
line-height: 25px;
padding: 10px 15px 5px 15px;
background: {color:Links Hover};
}
.January,.February,.October,.November,.December {
font-size: 10px;
}
.March,.August {
font-size: 12px;
}
.April {
font-size: 14px;
}
.May {
font-size: 18px;
}
.June,.July {
font-size: 17px;
}
.September {
font-size: 9px;
}
.source {
font-size: 12px;
padding: 5px 10px 5px 15px;
background: {color:Links Hover};
}
.facebooklike {
padding: 5px 10px 5px 15px;
background: #eceef5;
}
#shadow {
background:url(http://static.tumblr.com/jw8fmba/syClhd72e/shadow.png) no-repeat;
width:600px;
height:15px;
position:absolute;
bottom:-15px;
left:0px;
opacity: 0.5;
}
#credit {
text-align:center;
margin-top:600px;
}
div#note {
width:600px;
position: relative;
float: left;
}
.notes p {margin-top:0;}
ol.notes {
padding: 0px;
margin: 10px 0px;
list-style-type: none;
color:#333;
}
ol.notes li.note {
background: #FFF;
margin: 4px 0;
padding: 8px;
-moz-border-radius: 3px;
-webkit-border-radius: 3px;
}
ol.notes li.note img.avatar {
vertical-align: -4px;
margin-right: 10px;
width: 16px;
height: 16px;
}
ol.notes li.note span.action {
font-weight: normal;
}
ol.notes li.note .answer_content {
font-weight: normal;
}
ol.notes li.note blockquote {
border-color: #FFF;
padding: 4px 10px;
margin: 10px 0px 0px 15px;
}
ol.notes li.note blockquote a {
color:#333;
text-decoration: none;
}
.label {
font-weight:bold;
}

#bottom_menu {
width: 100%;
padding: 30px 0 20px 0;
text-align: center;
position: absolute;
position: fixed;
bottom: 0;
left: 0;
z-index: 6;
background: url(http://static.tumblr.com/jw8fmba/MMMlmnvfu/bottom_menu.png) repeat-x;
text-shadow: 0px 1px 0px #000000;
filter: dropshadow(color=#000000, offx=0, offy=1);
font-family: Helvetica, Arial, sans-serif;
font-size: 12px;
opacity: 0;
-webkit-transition: all .4s ease-out;
-moz-transition: all .4s ease-out;
-o-transition: all .4s ease-out;
transition: all .4s ease-out;
}
#bottom_menu:hover {
opacity: 1;
-webkit-transition: all .4s ease-out;
-moz-transition: all .4s ease-out;
-o-transition: all .4s ease-out;
transition: all .4s ease-out;
}
#bottom_menu a:link,#bottom_menu a:hover,#bottom_menu a:active,#bottom_menu a:visited {
color: #FFF;
}
#bottom_menu span {
margin: 0 3px;
color: #FFF;
}

{CustomCSS}
</style>

<script type='text/javascript' src='http://ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.min.js?ver=3.1.1'></script>

<script>$(document).ready(function(){
$(".scroll").click(function(event){
event.preventDefault();
var full_url = this.href;
var parts = full_url.split("#");
var trgt = parts[1];
var target_offset = $("#"+trgt).offset();
var target_top = target_offset.top;
$('html, body').animate({scrollTop:target_top}, 500);
});
});</script>

<!-- {block:IfInfiniteScrolling} -->
<script type="text/javascript" src="http://static.tumblr.com/q0etgkr/J5bl3lkz1/tumblrautopagernopage.js"></script>
<!-- {/block:IfInfiniteScrolling} -->
<script type="text/javascript" src="http://o.aolcdn.com/os_merge/?file=/streampad/sp-player.js&file=/streampad/sp-player-tumblr.js&expsec=86400&ver=11&bgcolor=#ffffff&trackcolor=#474747&clicktext=dumdumdumm..dont%20click%20this...&drawersize=200"></script>

</head>

<body>

<!-- {block:IfNotInfiniteScrolling} -->
<!--{block:Pagination}-->
<div class="pagination">

<!--{block:PreviousPage}-->
<a href="{PreviousPage}"><div id="previous"></div></a>
<!--{/block:PreviousPage}-->

<!--{block:NextPage}-->
<a href="{NextPage}"><div id="next"></div></a>
<!--{/block:NextPage}-->

</div>
<!--{/block:Pagination}-->
<!-- {/block:IfNotInfiniteScrolling} -->

<!-- {block:IfDisplayFooter} -->
<div id="bottom_menu">

<a href="#tumblr_controls" class="scroll">Top ?</a> <span>|</span> <a href="/archive">Archive</a><!-- {block:AskEnabled} --> <span>|</span> <a href="/ask">{AskLabel}</a><!-- {/block:AskEnabled} --><!-- {block:SubmitEnabled} --> <span>|</span> <a href="/submit">{SubmitLabel}</a><!-- {/block:SubmitEnabled} --><!-- {block:HasPages} --><!-- {block:Pages} --> <span>|</span> <a href="{URL}">{Label}</a><!-- {/block:Pages} --><!-- {/block:HasPages} -->

</div>
<!-- {/block:IfDisplayFooter} -->

<div class="wrap">

<div id="posts">

<!-- {block:IfInfiniteScrolling} --><div class="autopagerize_page_element"><!-- {/block:IfInfiniteScrolling} -->

<!-- {block:Posts} -->

<!-- {block:Photo} -->
<div id="post">

<div id="content">
<div id="img_holder">
{LinkOpenTag}
<img src="{PhotoURL-500}" alt="{PhotoAlt}" />
{LinkCloseTag}
</div>

<!-- {block:Caption} -->
<div id="body">{Caption}</div>
<!-- {/block:Caption} -->



<div id="shadow"></div>

</div>


<!-- {block:Date} -->
<div id="info">

<a href="{Permalink}" title="This post was published on {DayOfWeek}, {DayOfMonth} of {Month} at {12Hour}:{Minutes}{AmPm}"><div id="details" class="date">{DayOfMonthWithZero}<br /><span class="{Month}">{Month}</span></div></a>

<!-- {block:NoteCount} -->
<a href="{Permalink}#notes" title="Reblog or like this post"><div id="details" class="notecount">{NoteCount}</div></a>
<!-- {/block:NoteCount} -->

<!-- {block:HasTags} -->
<!-- {block:Tags} -->
<a href="{TagURL}" title="View more posts tagged with {Tag}"><div id="details" class="tags">{Tag}</div></a>
<!-- {/block:Tags} -->
<!-- {/block:HasTags} -->

<!-- {block:ContentSource} -->
<a href="{SourceURL}">
<div id="details" class="source">
<!-- {block:SourceLogo} -->
<img src="{WhiteLogoURL}" width="{LogoWidth}" height="{LogoHeight}" alt="{SourceTitle}" />
<!-- {/block:SourceLogo} -->
<!-- {block:NoSourceLogo} -->
Via: {SourceTitle}
<!-- {/block:NoSourceLogo} -->
</div>
</a>
<!-- {/block:ContentSource} -->

<!-- {block:IfLikeButtonOnPosts} -->
<div id="details" class="facebooklike">
<iframe src="http://www.facebook.com/plugins/like.php?app_id=222806471081411&amp;href={URLEncodedPermalink}&amp;send=false&amp;layout=button_count&amp;width=50&amp;show_faces=false&amp;action=like&amp;colorscheme=light&amp;font&amp;height=21" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:50px; height:21px;" allowTransparency="true"></iframe>
</div>
<!-- {/block:IfLikeButtonOnPosts} -->

</div>
<!-- {/block:Date} -->


</div>
<!-- {/block:Photo} -->



<!-- {block:Audio} -->
<div id="post">

<div id="content">

<!-- {block:AlbumArt} -->
<img src="{AlbumArtURL}" />
<!-- {block:AlbumArt} -->

<!-- {block:Caption} -->
<div id="body">
{AudioPlayerWhite}

{Caption}</div>
<!-- {/block:Caption} -->



<div id="shadow"></div>
</div>


<!-- {block:Date} -->
<div id="info">

<a href="{Permalink}" title="This post was published on {DayOfWeek}, {DayOfMonth} of {Month} at {12Hour}:{Minutes}{AmPm}"><div id="details" class="date">{DayOfMonthWithZero}<br /><span class="{Month}">{Month}</span></div></a>

<!-- {block:NoteCount} -->
<a href="{Permalink}#notes" title="Reblog or like this post"><div id="details" class="notecount">{NoteCount}</div></a>
<!-- {/block:NoteCount} -->

<a href="{Permalink}" title="This audio has been played {FormattedPlayCount} times"><div id="details" class="playcount">{FormattedPlayCount}</div></a>

<!-- {block:HasTags} -->
<!-- {block:Tags} -->
<a href="{TagURL}" title="View more posts tagged with {Tag}"><div id="details" class="tags">{Tag}</div></a>
<!-- {/block:Tags} -->
<!-- {/block:HasTags} -->

<!-- {block:ContentSource} -->
<a href="{SourceURL}" title="This post is from {SourceTitle}">
<div id="details" class="source">
<!-- {block:SourceLogo} -->
<img src="{WhiteLogoURL}" width="{LogoWidth}" height="{LogoHeight}" alt="{SourceTitle}" />
<!-- {/block:SourceLogo} -->
<!-- {block:NoSourceLogo} -->
Via: {SourceTitle}
<!-- {/block:NoSourceLogo} -->
</div>
</a>
<!-- {/block:ContentSource} -->

<!-- {block:IfLikeButtonOnPosts} -->
<div id="details" class="facebooklike">
<iframe src="http://www.facebook.com/plugins/like.php?app_id=222806471081411&amp;href={URLEncodedPermalink}&amp;send=false&amp;layout=button_count&amp;width=50&amp;show_faces=false&amp;action=like&amp;colorscheme=light&amp;font&amp;height=21" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:50px; height:21px;" allowTransparency="true"></iframe>
</div>
<!-- {/block:IfLikeButtonOnPosts} -->

</div>
<!-- {/block:Date} -->


</div>
<!-- {/block:Audio} -->



<!-- {block:Video} -->
<div id="post">

<div id="content">
{Video-400}

<!-- {block:Caption} -->
<div id="body">{Caption}</div>
<!-- {/block:Caption} -->

<div id="shadow"></div>
</div>

<!-- {block:Date} -->
<div id="info">

<a href="{Permalink}" title="This post was published on {DayOfWeek}, {DayOfMonth} of {Month} at {12Hour}:{Minutes}{AmPm}"><div id="details" class="date">{DayOfMonthWithZero}<br /><span class="{Month}">{Month}</span></div></a>

<!-- {block:NoteCount} -->
<a href="{Permalink}#notes" title="Reblog or like this post"><div id="details" class="notecount">{NoteCount}</div></a>
<!-- {/block:NoteCount} -->

<!-- {block:HasTags} -->
<!-- {block:Tags} -->
<a href="{TagURL}" title="View more posts tagged with {Tag}"><div id="details" class="tags">{Tag}</div></a>
<!-- {/block:Tags} -->
<!-- {/block:HasTags} -->

<!-- {block:ContentSource} -->
<a href="{SourceURL}">
<div id="details" class="source">
<!-- {block:SourceLogo} -->
<img src="{WhiteLogoURL}" width="{LogoWidth}" height="{LogoHeight}" alt="{SourceTitle}" />
<!-- {/block:SourceLogo} -->
<!-- {block:NoSourceLogo} -->
Via: {SourceTitle}
<!-- {/block:NoSourceLogo} -->
</div>
</a>
<!-- {/block:ContentSource} -->

<!-- {block:IfLikeButtonOnPosts} -->
<div id="details" class="facebooklike">
<iframe src="http://www.facebook.com/plugins/like.php?app_id=222806471081411&amp;href={URLEncodedPermalink}&amp;send=false&amp;layout=button_count&amp;width=50&amp;show_faces=false&amp;action=like&amp;colorscheme=light&amp;font&amp;height=21" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:50px; height:21px;" allowTransparency="true"></iframe>
</div>
<!-- {/block:IfLikeButtonOnPosts} -->

</div>
<!-- {/block:Date} -->

</div>
<!-- {/block:Video} -->




<!-- {block:Photoset} -->
<div id="post">

<div id="content">
{Photoset-500}

<!-- {block:Caption} -->
<div id="body">{Caption}</div>
<!-- {/block:Caption} -->

<div id="shadow"></div>
</div>

<!-- {block:Date} -->
<div id="info">

<a href="{Permalink}" title="This post was published on {DayOfWeek}, {DayOfMonth} of {Month} at {12Hour}:{Minutes}{AmPm}"><div id="details" class="date">{DayOfMonthWithZero}<br /><span class="{Month}">{Month}</span></div></a>

<!-- {block:NoteCount} -->
<a href="{Permalink}#notes" title="Reblog or like this post"><div id="details" class="notecount">{NoteCount}</div></a>
<!-- {/block:NoteCount} -->

<!-- {block:HasTags} -->
<!-- {block:Tags} -->
<a href="{TagURL}" title="View more posts tagged with {Tag}"><div id="details" class="tags">{Tag}</div></a>
<!-- {/block:Tags} -->
<!-- {/block:HasTags} -->

<!-- {block:ContentSource} -->
<a href="{SourceURL}">
<div id="details" class="source">
<!-- {block:SourceLogo} -->
<img src="{WhiteLogoURL}" width="{LogoWidth}" height="{LogoHeight}" alt="{SourceTitle}" />
<!-- {/block:SourceLogo} -->
<!-- {block:NoSourceLogo} -->
Via: {SourceTitle}
<!-- {/block:NoSourceLogo} -->
</div>
</a>
<!-- {/block:ContentSource} -->

<!-- {block:IfLikeButtonOnPosts} -->
<div id="details" class="facebooklike">
<iframe src="http://www.facebook.com/plugins/like.php?app_id=222806471081411&amp;href={URLEncodedPermalink}&amp;send=false&amp;layout=button_count&amp;width=50&amp;show_faces=false&amp;action=like&amp;colorscheme=light&amp;font&amp;height=21" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:50px; height:21px;" allowTransparency="true"></iframe>
</div>
<!-- {/block:IfLikeButtonOnPosts} -->

</div>
<!-- {/block:Date} -->

</div>
<!-- {/block:Photoset} -->



<!-- {block:Text} -->
<div id="post">
<div id="content">

<div id="body">
<!-- {block:Title} -->
<h1>{Title}</h1>
<!-- {/block:Title} -->

{Body}

</div>

<div id="shadow"></div>
</div>

<!-- {block:Date} -->
<div id="info">

<a href="{Permalink}" title="This post was published on {DayOfWeek}, {DayOfMonth} of {Month} at {12Hour}:{Minutes}{AmPm}"><div id="details" class="date">{DayOfMonthWithZero}<br /><span class="{Month}">{Month}</span></div></a>

<!-- {block:NoteCount} -->
<a href="{Permalink}#notes" title="Reblog or like this post"><div id="details" class="notecount">{NoteCount}</div></a>
<!-- {/block:NoteCount} -->

<!-- {block:HasTags} -->
<!-- {block:Tags} -->
<a href="{TagURL}" title="View more posts tagged with {Tag}"><div id="details" class="tags">{Tag}</div></a>
<!-- {/block:Tags} -->
<!-- {/block:HasTags} -->

<!-- {block:ContentSource} -->
<a href="{SourceURL}">
<div id="details" class="source">
<!-- {block:SourceLogo} -->
<img src="{WhiteLogoURL}" width="{LogoWidth}" height="{LogoHeight}" alt="{SourceTitle}" />
<!-- {/block:SourceLogo} -->
<!-- {block:NoSourceLogo} -->
Via: {SourceTitle}
<!-- {/block:NoSourceLogo} -->
</div>
</a>
<!-- {/block:ContentSource} -->

<!-- {block:IfLikeButtonOnPosts} -->
<div id="details" class="facebooklike">
<iframe src="http://www.facebook.com/plugins/like.php?app_id=222806471081411&amp;href={URLEncodedPermalink}&amp;send=false&amp;layout=button_count&amp;width=50&amp;show_faces=false&amp;action=like&amp;colorscheme=light&amp;font&amp;height=21" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:50px; height:21px;" allowTransparency="true"></iframe>
</div>
<!-- {/block:IfLikeButtonOnPosts} -->

</div>
<!-- {/block:Date} -->


</div>
<!-- {/block:Text} -->



<!-- {block:Quote} -->
<div id="post">
<div id="content">

<div id="body">
<h1>"{Quote}"</h1>

<!-- {block:Source} --><p>- {Source}</p>
<!-- {/block:Source} -->

</div>

<div id="shadow"></div>
</div>

<!-- {block:Date} -->
<div id="info">

<a href="{Permalink}" title="This post was published on {DayOfWeek}, {DayOfMonth} of {Month} at {12Hour}:{Minutes}{AmPm}"><div id="details" class="date">{DayOfMonthWithZero}<br /><span class="{Month}">{Month}</span></div></a>

<!-- {block:NoteCount} -->
<a href="{Permalink}#notes" title="Reblog or like this post"><div id="details" class="notecount">{NoteCount}</div></a>
<!-- {/block:NoteCount} -->

<!-- {block:HasTags} -->
<!-- {block:Tags} -->
<a href="{TagURL}" title="View more posts tagged with {Tag}"><div id="details" class="tags">{Tag}</div></a>
<!-- {/block:Tags} -->
<!-- {/block:HasTags} -->

<!-- {block:ContentSource} -->
<a href="{SourceURL}">
<div id="details" class="source">
<!-- {block:SourceLogo} -->
<img src="{WhiteLogoURL}" width="{LogoWidth}" height="{LogoHeight}" alt="{SourceTitle}" />
<!-- {/block:SourceLogo} -->
<!-- {block:NoSourceLogo} -->
Via: {SourceTitle}
<!-- {/block:NoSourceLogo} -->
</div>
</a>
<!-- {/block:ContentSource} -->

<!-- {block:IfLikeButtonOnPosts} -->
<div id="details" class="facebooklike">
<iframe src="http://www.facebook.com/plugins/like.php?app_id=222806471081411&amp;href={URLEncodedPermalink}&amp;send=false&amp;layout=button_count&amp;width=50&amp;show_faces=false&amp;action=like&amp;colorscheme=light&amp;font&amp;height=21" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:50px; height:21px;" allowTransparency="true"></iframe>
</div>
<!-- {/block:IfLikeButtonOnPosts} -->

</div>
<!-- {/block:Date} -->

</div>
<!-- {/block:Quote} -->




<!-- {block:Link} -->
<div id="post">
<div id="content">

<div id="body">
<h1><a href="{URL}" {Target}>{Name}</a></h1>

<!-- {block:Description} -->
{Description}
<!-- {/block:Description} -->

</div>

<div id="shadow"></div>
</div>


<!-- {block:Date} -->
<div id="info">

<a href="{Permalink}" title="This post was published on {DayOfWeek}, {DayOfMonth} of {Month} at {12Hour}:{Minutes}{AmPm}"><div id="details" class="date">{DayOfMonthWithZero}<br /><span class="{Month}">{Month}</span></div></a>

<!-- {block:NoteCount} -->
<a href="{Permalink}#notes" title="Reblog or like this post"><div id="details" class="notecount">{NoteCount}</div></a>
<!-- {/block:NoteCount} -->

<!-- {block:HasTags} -->
<!-- {block:Tags} -->
<a href="{TagURL}" title="View more posts tagged with {Tag}"><div id="details" class="tags">{Tag}</div></a>
<!-- {/block:Tags} -->
<!-- {/block:HasTags} -->

<!-- {block:ContentSource} -->
<a href="{SourceURL}">
<div id="details" class="source">
<!-- {block:SourceLogo} -->
<img src="{WhiteLogoURL}" width="{LogoWidth}" height="{LogoHeight}" alt="{SourceTitle}" />
<!-- {/block:SourceLogo} -->
<!-- {block:NoSourceLogo} -->
Via: {SourceTitle}
<!-- {/block:NoSourceLogo} -->
</div>
</a>
<!-- {/block:ContentSource} -->

<!-- {block:IfLikeButtonOnPosts} -->
<div id="details" class="facebooklike">
<iframe src="http://www.facebook.com/plugins/like.php?app_id=222806471081411&amp;href={URLEncodedPermalink}&amp;send=false&amp;layout=button_count&amp;width=50&amp;show_faces=false&amp;action=like&amp;colorscheme=light&amp;font&amp;height=21" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:50px; height:21px;" allowTransparency="true"></iframe>
</div>
<!-- {/block:IfLikeButtonOnPosts} -->

</div>
<!-- {/block:Date} -->

</div>
<!-- {/block:Link} -->



<!-- {block:Chat} -->
<div id="post">
<div id="content">

<div id="body">
<!-- {block:Title} -->
<h1>{Title}</h1>
<!-- {/block:Title} -->

<!-- {block:Lines} -->
<!-- {block:Label} --><p><em>{Label}</em> <!-- {/block:Label} -->{Line}</p>
<!-- {/block:Lines} -->
</div>

<div id="shadow"></div>
</div>


<!-- {block:Date} -->
<div id="info">

<a href="{Permalink}" title="This post was published on {DayOfWeek}, {DayOfMonth} of {Month} at {12Hour}:{Minutes}{AmPm}"><div id="details" class="date">{DayOfMonthWithZero}<br /><span class="{Month}">{Month}</span></div></a>

<!-- {block:NoteCount} -->
<a href="{Permalink}#notes" title="Reblog or like this post"><div id="details" class="notecount">{NoteCount}</div></a>
<!-- {/block:NoteCount} -->

<!-- {block:HasTags} -->
<!-- {block:Tags} -->
<a href="{TagURL}" title="View more posts tagged with {Tag}"><div id="details" class="tags">{Tag}</div></a>
<!-- {/block:Tags} -->
<!-- {/block:HasTags} -->

<!-- {block:ContentSource} -->
<a href="{SourceURL}">
<div id="details" class="source">
<!-- {block:SourceLogo} -->
<img src="{WhiteLogoURL}" width="{LogoWidth}" height="{LogoHeight}" alt="{SourceTitle}" />
<!-- {/block:SourceLogo} -->
<!-- {block:NoSourceLogo} -->
Via: {SourceTitle}
<!-- {/block:NoSourceLogo} -->
</div>
</a>
<!-- {/block:ContentSource} -->

<!-- {block:IfLikeButtonOnPosts} -->
<div id="details" class="facebooklike">
<iframe src="http://www.facebook.com/plugins/like.php?app_id=222806471081411&amp;href={URLEncodedPermalink}&amp;send=false&amp;layout=button_count&amp;width=50&amp;show_faces=false&amp;action=like&amp;colorscheme=light&amp;font&amp;height=21" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:50px; height:21px;" allowTransparency="true"></iframe>
</div>
<!-- {/block:IfLikeButtonOnPosts} -->

</div>
<!-- {/block:Date} -->


</div>
<!-- {/block:Chat} -->

<!--{block:Answer}-->
<div id="post">

<div id="content" style="padding-top: 10px">

<div id="question">{Question}<div id="arrow"></div></div>
<div id="asker"><img src="{AskerPortraitURL-16}" /> {Asker}</div>
<div id="body">{Answer}</div>

</div>

<!-- {block:Date} -->
<div id="info">

<a href="{Permalink}" title="This post was published on {DayOfWeek}, {DayOfMonth} of {Month} at {12Hour}:{Minutes}{AmPm}"><div id="details" class="date">{DayOfMonthWithZero}<br /><span class="{Month}">{Month}</span></div></a>

<!-- {block:NoteCount} -->
<a href="{Permalink}#notes" title="Reblog or like this post"><div id="details" class="notecount">{NoteCount}</div></a>
<!-- {/block:NoteCount} -->

<a href="/ask" title="{AskLabel}"><div id="details" class="asklink">{AskLabel}</div></a>

<!-- {block:IfLikeButtonOnPosts} -->
<div id="details" class="facebooklike">
<iframe src="http://www.facebook.com/plugins/like.php?app_id=222806471081411&amp;href={URLEncodedPermalink}&amp;send=false&amp;layout=button_count&amp;width=50&amp;show_faces=false&amp;action=like&amp;colorscheme=light&amp;font&amp;height=21" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:50px; height:21px;" allowTransparency="true"></iframe>
</div>
<!-- {/block:IfLikeButtonOnPosts} -->

</div>
<!-- {/block:Date} -->

</div>
<!--{block:Answer}-->


<!--{block:PermalinkPage}-->
<!--{block:PostNotes}-->

<div id="note">{PostNotes}</div>

<!--{/block:PostNotes}-->
<!--{/block:PermalinkPage}-->


<!-- {/block:Posts} -->

<!-- {block:IfInfiniteScrolling} --></div><!-- {/block:IfInfiniteScrolling} -->

</div>


<div id="sidebar">

<div id="title_holder">


<!-- {block:IfNotCustomLogoImage} -->
<div id="title">

<a href="/"><h1>{Title}</h1></a>

<!-- {block:IfShowDescription} -->
<p>{Description}</p>
<!-- {/block:IfShowDescription} -->

<div id="arrow"></div>

</div>
<!-- {/block:IfNotCustomLogoImage} -->

<!-- {block:IfCustomLogoImage} -->

<a href="/"><img src="{image:Custom Logo}" /></a>

<!-- {/block:IfCustomLogoImage} -->


</div>

<div id="credit">
<li>{block:SubmissionsEnabled}<a href="/submit">Submit</a>{/block:SubmissionsEnabled}</li>
<li>{block:AskEnabled}<a href="/ask">Ask</a>{/block:AskEnabled}</li>
<li><a href="/archive">Archive</a></li>
<li><a href="{RSS}">RSS</a></li>
<li>
<form action="/search" method="get" id="search">
<input type="text" name="q" value="SEARCH" onfocus="value='{searchQuery}'" onblur="value='SEARCH'"/>

<input type="hidden" value="Search" />
</form></li>
<li><a href="https://twitter.com/yyrraa">Twitter</a></li>
<li><a href="http://www.facebook.com/johayra.fabricante">Facebook</a> </li>
<li><a href="http://letmeplaythemusic.blogspot.com/">Music blog</a></li>
<li><a href="https://plus.google.com/109539557496504899406/plusones?hl=en">Google+ </a></li>
</center><br>
<script type="text/javascript" src="http://www.usuarios-online.com/usuarios.php?v=http://theculturesnob.tumblr.com/"></script> human beings online

</div>

<div id="links">

<!-- {block:AskEnabled} -->


<!-- {/block:AskEnabled} -->

<!-- {block:SubmitEnabled} -->


<!-- {/block:SubmitEnabled} -->



<!--
<a href="/mobile" title="View Mobile Layout">
<div class="link mobile"></div>
</a>
-->

<!-- {block:Twitter} -->

</a>
<!-- {/block:Twitter} -->

<!-- {block:HasPages} -->

<!-- {block:Pages} -->
<a href="{URL}">
<div class="link {Label} page"></div>
</a>
<!-- {/block:Pages} -->

<!-- {/block:HasPages} -->

</div>


</div>

</div>

</body>
</html>

http://slobandsexy.tumblr.com/-- my site
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Darin McGrew
post Oct 26 2011, 02:25 AM
Post #2


WDG Member
********

Group: Root Admin
Posts: 8,365
Joined: 4-August 06
From: Mountain View, CA
Member No.: 3
So, what width do you think will "fit in the posts"? Your images are specified as 500px wide in the Tumblr code:
QUOTE
<img src="{PhotoURL-500}" alt="{PhotoAlt}" />
But they're specified as 400px wide in the CSS:
QUOTE
#post #content #img_holder {
width: 400px;
[...]
}
#post #content img {
max-width: 100%;
}
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
sola
post Oct 26 2011, 03:00 AM
Post #3





Group: Members
Posts: 5
Joined: 25-October 11
Member No.: 15,715
QUOTE(Darin McGrew @ Oct 26 2011, 12:25 AM) *

So, what width do you think will "fit in the posts"? Your images are specified as 500px wide in the Tumblr code:
QUOTE
<img src="{PhotoURL-500}" alt="{PhotoAlt}" />
But they're specified as 400px wide in the CSS:
QUOTE
#post #content #img_holder {
width: 400px;
[...]
}
#post #content img {
max-width: 100%;
}



regarding the css code and tumblr codes, when it comes to pictures you can use different numbers. Tumblr will downscale the image for you, but its best to use a number around the size of your images for resolution reasons, or it ends up kind of blurry on tumblr. What I would do is switch the 500 url to 400. other than that try including a height limit to your image settings too, since tumblrs default is usually "auto" (for me atleast)
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
« Next Oldest · Web Site Functionality · Next Newest »
 

Reply to this topicStart new topic
1 User(s) are reading this topic (1 Guests and 0 Anonymous Users)
0 Members:

 

Display Mode: Standard · Switch to: Linear+ · Switch to: Outline

Track this topic · Email this topic · Print this topic · Subscribe to this forum

- Lo-Fi Version Time is now: 19th April 2024 - 01:55 AM
Invision Power Board © 2024  IPS, Inc.
Licensed to: HTMLHelp.com, LLC