The Web Design Group

... Making the Web accessible to all.

Welcome Guest ( Log In | Register )

 
Reply to this topicStart new topic
> Tumblr Post Image Height, Overriding Tumblr Theme's max image height?
solid state
post Jan 23 2011, 02:01 AM
Post #1





Group: Members
Posts: 3
Joined: 23-January 11
Member No.: 13,682



Hello, I'm new here. Thought I'd give this a shot. Please forgive me if I'm posting this in the wrong forum. Could somebody tell me how to override Tumblr's maximum image height? I'm posting a bunch of images, square, rectangular (vertical), and rectangular (horizontal). ALL images are 500 pixels wide which is the width of my Tumblr display area. I would like them all to display the exact same width. The problem is, some of the taller (vertical rectangles) are shrinking, presumably to accommodate the themes max image height. I've fiddled around with the code but I don't know too much about css. Any help greatly appreciated! D

Here's my blog: http://daviddaydesign.tumblr.com/

Heres the code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">

<html>
<!--
Theme Author: Saophalkun Ponlu (phalkunz)
Contact: phalkunz@gmail.com
URL: http://phalkunz.tumblr.com/
Date: 11 July 2010
Updated: 31 July 2010
Theme ID: 11862
-->
<head>
<title>{Title}</title>
<link rel="shortcut icon" href="{Favicon}">
<link rel="alternate" type="application/rss+xml" href="{RSS}">

<!-- DEFAULTS -->
<meta name="font:Site Title" content="Arial,Helvetica,sans-serif">
<meta name="font:Overall" content="Arial,Helvetica,sans-serif">
<meta name="font:Quote" content="Hoefler Text, Baskerville, Times, serif">
<meta name="color:Link" content="#111111">
<meta name="color:Content" content="#666666">
<meta name="text:Following Label" content="Following">

<meta name="if:Allow Javascript Interactive" content="1">
<meta name="if:Allow Animation" content="1">
<meta name="if:Show People I Follow" content="0">
<meta name="if:Mobile Site" content="0">

{block:Description}
<meta name="description" content="{MetaDescription}">
{/block:Description}

<link href="http://yui.yahooapis.com/3.1.1/build/cssreset/reset-min.css" rel="stylesheet" type="text/css">
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>

<style type="text/css">

html {
background-color: #f6f6f6;
}

body {
color: {color:Content};
font-size: 12px;
font-family: {font:Overall};
}

#wrapper {
width: 500px;
padding: 4em 6em;
}

/* Typography
-------------------------------------------------------------- */
p {
line-height: 1.6em;
margin: 0.8em 0;
}

h1, h2, h3, h4, h5, h6 {
font-weight: 600;
margin: 1em 0 0.6em;
}

h1 { font-size: 1.7em; }
h2 { font-size: 1.6em; }
h3 { font-size: 1.5em; }
h4 { font-size: 1.4em; }
h5 { font-size: 1.3em; }
h6 { font-size: 1.2em; }

a {
color: {color:Link};
text-decoration: none;
font-weight: bold;
}

a:hover {
text-decoration: underline;
}

pre {
padding: 10px 10px;
background-color: #222;
color: #aaa;
line-height: 1.2em;
overflow: auto;
margin: 1.2em 0;
}

strong {
font-weight: bold;
}

em {
font-style: italic;
}

blockquote {
padding: 0 1em;
border-left: 1px dotted #ccc
}

blockquote ul, blockquote ol {
margin-left: 1.6em;
}

big {
font-size: 1.2em;
}

/* -------------------------------------------------------------- */

/* Generic classes
-------------------------------------------------------------- */
.hide {
display: none;
}

a.simpleLink {
text-decoration: none;
}

a.simpleLink:hover {
color: {color:Content};
text-decoration: none;
}

a.flipLink {
color: {color:Content};
}

a.flipLink:hover {
color: {color:Link};
}
/* -------------------------------------------------------------- */

#menu {
position: fixed;
top: 11em;
left: 630px;
margin-bottom: 5em;
}

#menu ul {
padding: 0;
margin: 0;
}

#menu ul li {
list-style: none;
margin-bottom: 0.6em;
}

#menu ul li#search {
margin-top: 10px;
}

#menu ul li#search input {
color: {color:Content};
width: 140px;
}

#menu #following {
margin-top: 2em;
}

#menu #following ul {
width: 300px;
margin-top: 0.5em;
}

#menu #following ul li {
float: left;
margin-right: 0.5em;
margin-bottom: 0.5em;
}

#menu #following ul li a {
display: block;
padding-bottom: 1px;
}


#menu #following ul li a:hover {
opacity: 0.6;
}

#header {
margin-bottom: 4em;
}

#header h1 {
font-size: 2.5em;
margin: 0;
letter-spacing: -2px;
text-shadow: #fff 0px 1px 1px;
font-family: {font:Site Title};
}

/* Posts & post
-------------------------------------------------------------- */
#searchQuery {
margin-bottom: 5em;
}

ul#posts {
margin: 0;
padding: 0;
}

ul#posts li.post {
list-style: none;
margin-bottom: 5em;
}

li.post .postTitle {
font-size: 1.3em;
margin-top: 0;
}

p.postMeta {
font-size: 0.9em;
color: #aaa;
}

p.postMeta span {
margin-right: 1.5em;
}

p.postMeta a {
font-weight: normal;
}

li.post li {
margin: 0.5em 0;
}

li.post ul li {
list-style: disc;
}

li.post ol li {
list-style: decimal;
}

li.post ul ul, li.post ul ol {
margin-left: 1.5em;
}

li.post ol ol, li.post ol ul {
margin-left: 1.5em;
}

/* Text post */
li.text h2 a:hover {
color: #888;
text-decoration: none;
}

/* Quote post */
blockquote.quoteText {
font-size: 1.3em;
font-family: {font:Quote};
font-weight: normal;
padding: 0;
border: none;
line-height: 1.6em
}

p.quoteSource {
margin-top: 0.8em;
}

/* Link post */
p.linkLink a:hover {
color: #888;
text-decoration: none;
}

/* Chat post */
li.post ul.chatDialogue li {
list-style: none;
padding-left: 2em;
margin-left: -2em;
background: url(http://static.tumblr.com/uiadret/39Vl5c8se/chat_icon_one.png) no-repeat 0 50%;
}

li.post ul.chatDialogue li.even {
background-image: url(http://static.tumblr.com/uiadret/LLAl5c8tq/chat_icon_two.png);
}

/* Post notes */
ol.notes {
margin-top: 3em;
}

ol.notes li {
margin-bottom: 1.2em;
}

ol.notes li a {
vertical-align: top;
}

ol.notes li blockquote {
padding: 0.6em 11px;
margin: 0.5em 8px;
}

ol.notes li.more_notes_link_container {
padding-top: 3em;
list-style: none;
text-align: left !important;
}

ol.notes li.more_notes_link_container:before {
content: '\2193';
}
/* -------------------------------------------------------------- */

#pageNav {
overflow: hidden;
}
#pageNav a {
font-weight: normal;
}

#pageNav a {
float: left;
}

#pageNav a.next {
float: right;
}

#footer {
margin-top: 5em;
font-size: 0.9em;
}

#footer a {
font-weight: normal;
}


{CustomCSS}

</style>

<script type="text/javascript">
$(document).ready(function() {
searchInput = $($('input[name=q]')[0]);

/**
* Initial search text used as an input label
*/
{block:IfAllowJavascriptInteractive}
shouldInitSearch = true;
initSearch = 'Search...';

if(searchInput.val() == '') {
searchInput.val(initSearch);
}

searchInput.focus(function() {
if(shouldInitSearch) $(this).val('');
});

searchInput.blur(function() {
$('#menu').mouseleave();

if($(this).val() == '') {
shouldInitSearch = true;
$(this).val(initSearch);
}
else {
shouldInitSearch = false;
}
});
{/block:IfAllowJavascriptInteractive}

/**
* Menu fade in and fade out animations
*/
{block:IfAllowAnimation}
fadeOutOpacity = 0.3;
fadeInOpacity = 1;
speed = 300;

menu = $('#menu');
menu.css('opacity', fadeOutOpacity);

menu.mouseenter(function() {
menu.animate({
opacity: fadeInOpacity
}, speed);
});

menu.mouseleave(function() {
if($('#menu input:focus').length == 0) {
menu.animate({
opacity: fadeOutOpacity
}, speed);
}
});
{/block:IfAllowAnimation}
});
</script>
</head>

<body>
<div id="wrapper">
<div id="header">
<h1><a class="simpleLink" href="/">{Title}</a></h1>
</div>

<div id="menu">
<ul>
{block:HasPages}
{block:Pages}<li><a class="simpleLink" href="{URL}" title="Go to {Label}">{Label}</a></li>{/block:Pages}
{/block:HasPages}

<li><a class="simpleLink" href="{RSS}" title="RSS">RSS feed</a></li>

<li><a class="simpleLink" href="/archive" title="Go to Archive">Archive</a></li>

{block:IfMobileSite}
<li><a class="simpleLink" href="/mobile" title="View mobile site">Mobile</a></li>
{/block:IfMobileSite}

{block:AskEnabled}
<li><a class="simpleLink" href="/ask" title="{AskLabel}">{AskLabel}</a></li>
{/block:AskEnabled}

<li id="search">
<form action="/search" method="get">
<input type="text" name="q" value="{SearchQuery}"/>
</form>
</li>
</ul>

{block:IfShowPeopleIFollow}
{block:Following}
<div id="following">
<h3>{text:Following Label}</h3>
<ul>
{block:Followed}
<li>
<a href="{FollowedURL}" title="Go to to {FollowedTitle}">
<img src="{FollowedPortraitURL-24}" alt="{FollowedTitle}" />
</a>
</li>
{/block:Followed}
</ul>
</div>
{/block:Following}
{/block:IfShowPeopleIFollow}
</div>

<div id="content">
{block:SearchPage}
<p id="searchQuery">Your searched for <strong>{SearchQuery}</strong> {SearchResultCount} found</p>

{/block:SearchPage}
<ul id="posts">
{block:Posts}
<li class="post {block:Text}text{/block:Text} {block:Photo}photo{/block:Photo} {block:Photoset}photoset{/block:Photoset} {block:Quote}quote{/block:Quote} {block:Link}link{/block:Link} {block:Chat}chat{/block:Chat} {block:Audio}audio{/block:Audio} {block:Video}video{/block:Video}">
{block:Text}
{block:Title}
<h2 class="postTitle"><a href="{Permalink}" title="Go to this post">{Title}</a></h2>
{/block:Title}

<div class="postContent">
{Body}
</div>
{/block:Text}

{block:Photo}
<div class="postContent">
{LinkOpenTag}<img src="{PhotoURL-500}" alt="{PhotoAlt}" />{LinkCloseTag}

{block:Caption}
<div class="postDescription photoCaption">{Caption}</div>
{/block:Caption}

</div>
{/block:Photo}

{block:Photoset}
<div class="postContent">
{Photoset-500}

{block:Caption}
<div class="postDescription photoCaption">{Caption}</div>
{/block:Caption}
</div>
{/block:Photoset}

{block:Quote}
<div class="postContent">
<blockquote class="quoteText">{Quote}</blockquote>

<p class="postDescription quoteSource"> {Source}</p>
</div>
{/block:Quote}

{block:Link}
<div class="postContent">
<h2 class="postTitle">
<a class="simpleLink" href="{URL}" {Target}>{Name} →</a>
</h2>

{block:Description}
<div class="postDescription linkDesc">{Description}</div>
{/block:Description}
</div>
{/block:Link}

{block:Chat}
{block:Title}
<h2 class="postTitle"><a href="{Permalink}" title="Go to this post">{Title}</a></h2>
{/block:Title}

<ul class="chatDialogue">
{block:Lines}
<li class="{Alt} chatUser_{UserNumber}">
{block:Label}
<span class="chatLabel">{Label}</span>
{/block:Label}

{Line}
</li>
{/block:Lines}
</ul>
{/block:Chat}

{block:Audio}
{AudioPlayerGrey}

{block:Caption}
<div class="postDescription audioCaption">{Caption}</div>
{/block:Caption}
{/block:Audio}

{block:Video}
{Video-500}

{block:Caption}
<div class="postDescription videoCaption">{Caption}</div>
{/block:Caption}
{/block:Video}

{block:Date}
<p class="postMeta">
<span><a class="simpleLink flipLink" href="{Permalink}" title="Go to this post">{TimeAgo}</a></span>
<span><a class="simpleLink flipLink" href="{Permalink}" title="Go to this post">{NoteCountWithLabel}</a></span>
<span><a class="simpleLink flipLink" href="{Permalink}" title="Go to this post">→</a></span>
</p>

{PostNotes}
{/block:Date}
</li>
{/block:Posts}
</ul>
</div>

<p id="pageNav">
{block:PreviousPage}
<a class="prev simpleLink flipLink" href="{PreviousPage}">← Previous Page</a>
{/block:PreviousPage}

{block:NextPage}
<a class="next simpleLink flipLink" href="{NextPage}">Next Page →</a>
{/block:NextPage}
</p>

<div id="footer">
<p><a href="http://www.tumblr.com/theme/11862" title="simpl tumblr theme">simpl</a> theme by <a href="http://phalkunz.tumblr.com/">Saophalkun Ponlu</a> 2010
Licensed under <a href="http://creativecommons.org/licenses/by-sa/3.0/nz/" rel="license">Creative Comments Attribution-Share Alike</a>.</p>
</div>
</div>

</body>
</html>

User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
pandy
post Jan 23 2011, 03:20 AM
Post #2


Don't like donuts. Don't do MySpace.
********

Group: WDG Moderators
Posts: 18,535
Joined: 9-August 06
Member No.: 6



Isn't the CSS doing it. I think the images are resized on the server. They actually have the size they display at, for instance this one, 469 x 700.
http://28.media.tumblr.com/tumblr_lfgq0nkR...gyllro1_500.png

I don't know how Tumblr works. Could it be that they have a maximal image size they allow and resize all images accordingly?
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
solid state
post Jan 23 2011, 03:17 PM
Post #3





Group: Members
Posts: 3
Joined: 23-January 11
Member No.: 13,682



I'm continuing to tweak. It may be a larger Tumblr issue than a theme specific one. If so, I'll try resizing all of the images at 400 or 450 pixels wide to try to accommodate the max width issue (which I assume is 770 pixels.) Ugh!

Thanks for your comments. D
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
solid state
post Jan 23 2011, 05:57 PM
Post #4





Group: Members
Posts: 3
Joined: 23-January 11
Member No.: 13,682



Well changing the image width doesn't work either. It seems that Tumblr insists on shrinking the width of the taller rectangular images. (Granted its not as severe when the width was 400px). In must be some sort of width to height ratio? I know there must be a way to override this. Help!
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
pandy
post Jan 23 2011, 06:08 PM
Post #5


Don't like donuts. Don't do MySpace.
********

Group: WDG Moderators
Posts: 18,535
Joined: 9-August 06
Member No.: 6



If they do it on the server it doesn't matter what you do with HTML and CSS. Don't they have a FAQ or a support forum? I don't see links to anything like that at their site, but I'm not logged in.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post

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

 



- Lo-Fi Version Time is now: 21st February 2020 - 09:23 AM