The Web Design Group

... Making the Web accessible to all.

Welcome Guest ( Log In | Register )

 
 Reply to this topicStart new topic
> Tumblr -- Photos Cropped on Permalink Pages
ellzee
post Jun 2 2012, 01:01 PM
Post #1





Group: Members
Posts: 1
Joined: 2-June 12
Member No.: 17,211
Hello!

Firstly, thank you to any and all for taking the time to read this and help me out.

I've been editing a theme for my Tumblr that uses a grid layout on the blog page, fitting each image to a specified size and hiding any overflow. On the permalink pages for each individual post, however, the images remain confined to this box and cropped, whereas I would like them to show in their full, regular size. I can't for the life of me (being uneducated in HTML) figure out how to keep this cropping/resizing on the main page but eliminate it on the individual permalink/post pages!

This is my Tumblr: http://blodeuwedd-in-love.tumblr.com/

The first two images in the second row, for example, are longer than where they are cropped but remain cropped even after you click on them.

Here is the code:

<!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" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>{block:SearchPage}Search results for "{SearchQuery}" - {/block:SearchPage}{block:PostSummary}{PostSummary} - {/block:PostSummary}{Title}</title>
{block:Description}<meta name="description" content="{MetaDescription}" />{/block:Description}
<link rel="alternate" type="application/rss+xml" title="RSS" href="{RSS}"/>
<link rel="icon" href="{Favicon}"/>

<!-- iPhone -->
<meta name="viewport" content="width=860"/>
<link rel="apple-touch-icon" href="{PortraitURL-128}"/>

<!-- DEFAULT COLORS -->
<meta name="color:Alternate Text" content="#bfad8a"/>
<meta name="color:BackgroundColor" content="#000">
<!-- END DEFAULT COLORS -->

<meta name="font:Title" content="Georgia">
<meta name="font:Body" content="Arial">

<meta name="image:Background" content="http://static.tumblr.com/thpaaos/8kMkqr3cz/bg.jpg">

<style type="text/css">
* {
margin: 0;
padding: 0;
list-style-type: none;
}

body {
background: {color:BackgroundColor}{block:IfBackgroundImage} url('{BackgroundImage}') {/block:IfBackgroundImage};
font-family: {font:Body};
font-size: 12px;
color: #ffffff;
text-align: center;
}

#container {
width: 840px;
margin: 0 auto;
text-align: left;
}

.regular, .photo, .quote, .link, .conversation, .video, .audio, .metabox {
padding: 10px;
}

.post {
width: 270px;
height: 350px;
float: left;
background: url('http://static.tumblr.com/thpaaos/ujIkqr3k1/shade.png');
margin-right: 10px;
margin-bottom: 10px;
position: relative;
overflow: hidden;
}

.post:hover {
background: #000;
}

.post span.text img {
max-width: 100%;
}

.permalink {
border-width: 0px;
width: 100px;
height: 11px;
line-height: 11px;
position: absolute;
bottom: 10px;
right: 10px;
color: #fff;
text-align: right;
}

.permalink a {
color: {color:Alternate Text};
font-size: 11px;
}

.permalink a:hover {
color: #CAC9C8;
}

.permalink2 {
border-width: 0px;
width: 250px;
height: 11px;
line-height: 11px;
position: absolute;
bottom: 10px;
right: 10px;
color: #333;
text-align: left;
}

.permalink2 a {
color: {color:Alternate Text};
font-size: 11px;
}

.permalink2 a:hover {
color: #CAC9C8;
}

.photobox {
width: 250px;
height: 150px;
overflow: hidden;
margin-bottom: 10px;
}

.photobox2 {
width: 100%;
height: 100%;
overflow: visible;
margin-bottom: 10px;
}

.audio .photobox {
background: #111;
}

.player {
padding: 60px 20px;
border: 1px solid #222;
}

.video .caption {
padding-top: 10px;
}

.quotetext {
font-size: 22px;
font-family: {font:Title};
line-height: 22px;
padding-bottom: 11px;
color: {color:Alternate Text};
}

.source {
font-family: {font:Body};
font-size: 11px;
text-align: right;
color: #666;
}

.caption {
line-height: 18px;
}

.conversation ul li {
line-height: 18px;
border-bottom: 1px dotted #222;
padding: 3px 0 3px 0px;
}

.conversation ul li span {
color: {color:Alternate Text};
}

.even {
border-bottom: 1px dotted #222;
}

ol li {
list-style: decimal outside;
margin: 0 0 0 20px;
padding: 0 0 5px 0
}

a {
color: {color:Alternate Text};
text-decoration: none;
}

a:hover {
color: #CAC9C8;
}

p {
line-height: 18px;
margin-bottom: 9px;
}

.photo strong, .photo b, .video strong, .video b, .audio strong, .audio b{
font-family: {font:Title};
font-weight: normal;
font-size: 17px;
line-height: 18px;
color: {color:Alternate Text};
}

h1 {
font-family: {font:Title};
font-weight: normal;
font-size: 17px;
line-height: 18px;
padding: 0 0 9px 0;
}

#header {
padding: 40px 0 60px 0;
position: relative;
}

#header h1 {
width: 250px;
}

#header h1 a {
color: #fff;
font-style: bold;
border: 0;
font-size: 18px;
line-height: 20px;
}

#header h1 a:hover {
color: #fff;
}

#header h2 {
color: {color:Alternate Text};
font: italic normal 1.2em/1.8 {font:Title};
}

#header ul {
position: absolute;
left: 550px;
top: 40px;
}

#header ul li {
display: inline;
}

#header ul li form {
display: inline;
}

#header ul li form #searchbox {
background: #000;
border: 1px solid {color:Alternate Text};
opacity: 0.7;
color: #fff;
}

#header ul li form #submitsearch {
display: none;
}

#header ul li a {
font-family: {font:Title};
color: #ddd;
font-style: italic;
border-bottom: 1px dotted #999;
margin-right: 11px;
}

#header ul li a:hover {
color: #fff;
border-bottom: 1px solid #fff;
}

#navigation, .meta {
text-align: center;
float: left;
height: 100%;
width: 270px;
background: url('http://static.tumblr.com/thpaaos/ujIkqr3k1/shade.png');
}

#navigation a {
border: 0;
padding: 3px 8px;
background: #222;
}

#navigation a:hover {
background: #333;
}

.pages {
font-family: {font:Title};
font-size: 15px;
padding-bottom: 48px;
}

.pages span {
font-size: 200px;
}

.total {
color: {color:Alternate Text};
}

#footer {
clear: both;
padding: 40px 0;
text-align: left;
}

body#perm #navigation {
display: none;
}

body#perm .post {
width: 550px;
}

body#perm .photobox2, body#perm .videobox {
margin-left: 10px;
}

.meta {
display: none;
}

body#perm .meta {
display: block;
text-align: left;
}

body#perm .permalink {
display: none;
}

.meta span, h3 {
text-transform: uppercase;
font-size: 10px;
color: {color:Alternate Text};
line-height: 18px;
}

#searchresultcount {
text-align: left;
margin-bottom: 20px;
color: {color:Alternate Text};
}

.query { font-weight: bold; }

{CustomCSS}
</style>

<!--[if IE]>
<style type="text/css">
.post, #navigation, .meta { background:#010101; }
#header ul li form #searchbox { filter: alpha(opacity=70); }
</style>
<![endif]-->
</head>
<body {block:Permalink}id="perm"{/block:Permalink}>
<div id="container">
<div id="header">
<h1><a href="/"><font size="5">{Title}</font></a></h1>
<h2>{Description}</h2>
<ul>
<li><a href="/ask">ask</a></li>
<li><a href="/archive">archive</a></li>
<li>
<form action="/search" method="get">
<input type="text" size="15" id="searchbox" name="q" value="{SearchQuery}"/>
<input type="submit" id="submitsearch" value="Search"/>
</form>
</li>
</ul>
</div>

{block:SearchPage}
<div id="searchresultcount">
<p>Your search for <span class="query">{SearchQuery}</span> returned {SearchResultCount} result(s).</p>
</div>
{/block:SearchPage}

{block:Posts}
<div class="post">
{block:Text}
<div class="permalink">{MonthNumber}.{DayOfMonthWithZero}.{ShortYear}</div>
<div class="permalink2">{NoteCount}</div>
<div class="regular">
{block:Title}<h1><a href="{Permalink}">{Title}</a></h1>{/block:Title}
<span class="text">{Body}</span>
</div>
{/block:Text}

{block:Photo}
<div class="permalink">{MonthNumber}.{DayOfMonthWithZero}.{ShortYear}</div>
<div class="permalink2">{NoteCount}</div>
<div class="photo">
<div class="photobox">{LinkOpenTag}<a href="{Permalink}"><img src="{PhotoURL-250}" alt="{PhotoAlt}"/></a>{LinkCloseTag}</div>
{block:Caption}
<div class="caption">{Caption}</div>
{/block:Caption}
</div>
{/block:Photo}

{block:Quote}
<div class="permalink">{MonthNumber}.{DayOfMonthWithZero}.{ShortYear}</div>
<div class="permalink2"><a href="{Permalink}#notes">{NoteCount}</a></div>
<div class="quote">
<div class="quotetext">
“ {Quote}
</div>
{block:Source}<div class="source">&mdash; {Source}</div>{/block:Source}</div>
{/block:Quote}

{block:Link}
<div class="permalink">{MonthNumber}.{DayOfMonthWithZero}.{ShortYear}</div>
<div class="permalink2"><a href="{Permalink}#notes">{NoteCount}</a></div>
<div class="link">
<h1><a href="{URL}" {Target}>{Name} » </a></h1>
{block:Description}
<p class="description">{Description}</p>
{/block:Description}
</div>
{/block:Link}

{block:Conversation}
<div class="permalink">{MonthNumber}.{DayOfMonthWithZero}.{ShortYear}</div>
<div class="permalink2"><a href="{Permalink}#notes">{NoteCount}</a></div>
<div class="conversation">
{block:Title}<h1><a href="{Permalink}">{Title}</a></h1>{/block:Title}
<ul>
{block:Lines}
<li class="{Alt}">
{block:Label}<span class="label">{Label}</span>{/block:Label}
{Line}
</li>
{/block:Lines}
</ul>
</div>
{/block:Conversation}

{block:Video}
<div class="permalink">{MonthNumber}.{DayOfMonthWithZero}.{ShortYear}</div>
<div class="permalink2"><a href="{Permalink}#notes">{NoteCount}</a></div>
<div class="video">
<div class="videobox">{Video-250}</div>
{block:Caption}
<div class="caption">{Caption}</div>
{/block:Caption}
</div>
{/block:Video}

{block:Audio}
<div class="permalink">{MonthNumber}.{DayOfMonthWithZero}.{ShortYear}</div>
<div class="permalink2"><a href="{Permalink}#notes">{NoteCount}</a></div>
<div class="audio">
<div class="photobox"><div class="player">{AudioPlayerBlack}</div></div>
{block:Caption}
<div class="caption">{Caption}</div>
{/block:Caption}
</div>
{/block:Audio}
</div>

<div class="meta">
<div class="metabox">
<p><span>posted :</span> {DayOfWeek}, {Month} {DayOfMonth}{DayOfMonthSuffix}, {Year}</p>
<p><span>tags :</span> {TagsAsClasses}</p>
<p><span>notes :</span> {PostNotes}</p>
</div>
</div>


{/block:Posts}

<div id="navigation">
<div class="pages">
<em>page</em> <span>{CurrentPage}</span> of
<span class="total">{TotalPages}</span>
</div>

{block:PreviousPage}
<a href="{PreviousPage}">« Previous Page</a> &nbsp;&nbsp;
{/block:PreviousPage}

{block:NextPage}
<a href="{NextPage}">Next Page »</a>
{/block:NextPage}
</div>

<div id="footer">
powered by <a href="http://www.tumblr.com/" target="_blank">tumblr</a> /
theme by <a href="http://paulgiacherio.com" target="_blank">paulgiacherio</a>
</div>
</div>
</body>
</html>
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
2 User(s) are reading this topic (2 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: 23rd May 2013 - 01:36 AM
Invision Power Board © 2013  IPS, Inc.
Licensed to: HTMLHelp.com, LLC