Help - Search - Members - Calendar
Full Version: Struggling with Tumblr / High Res images
HTMLHelp Forums > Web Authoring > Web Site Functionality

I'm hoping someone can help. Am doing a site for a friend at which is hosted on a custom domain but operated/edited through Tumblr.

We're having trouble with the resolution of images. I know the code I need is something along the lines of PhotoURL-HighRes but I'm not sure where to put it in or how to code it correctly?!

We would like the images to be 800 px wide. I have set the right hand container to be 900px so the images should easily fit in and we have also resized all the images correctly in Photoshop to 800px (from a larger sized image so they are not pixelated at all). Tumblr however seems to auto-resize them? and I just can't work out how to override it.

Any help would be greatly appreciated!



Here is the code so far for the main site:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"

<html lang="en">

Reboot by

Inspired by

<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
{block:Description}<meta name="description" content="{MetaDescription}" />

<!-- custom -->
<meta name="text:Disqus shortname" content="" />

<meta name="if:Show People I Follow" content="0">
<meta name="if:Show Timestamp" content="1">
<meta name="if:Show Date" content="1">
<meta name="if:Show Search" content="1">

<meta name="font:Body" content="helvetica">
<meta name="color:Background" content="#FFFFFF"/>
<meta name="color:Text" content="#111111"/>
<meta name="color:Link Text Hover" content="#FFFFFF"/>
<meta name="color:Link Background Hover" content="#111111"/>

<meta name="if:Show post notes" content="1">
<meta name="if:Endless scrolling" content="0">

<!-- custom -->
<style type="text/css">
body {
margin: 0;
padding: 20px;
background: #FFFFFF;
font-family: Calibri, Helvetica, sans-serif;
font-size: 15px;
color: #000000;
.navi {
color: {color:Text};
position: fixed;


a {
color: #797979;
text-decoration: none;

a:hover {
color: #000000;

a img { border-width: 0px; }

.clear {
clear: both;

#container {
width: 1150px;

#left {
float: left;
width: 200px;

#left a.h2 {
text-transform: uppercase;
font-size: 2em;
line-height: 1em;
color: {color:Text};
text-decoration: none;

#left a.h2:hover {
color: {color:Text};
background: none;
text-decoration: none;

#left .space {
width: 100%;
height: 20px;

#left .space.small {
width: 100%;
height: 10px;

#right {
width: 900px;
float: right;

#right .post {
margin: 0 0 50px 0;

#right .post img {
max-width: 900px;

#right .post h3 {
font-weight: normal;
font-size: 1.5em;
margin: 0;

#right .post a.h3 {
color: {color:Text};
text-decoration: none;
font-size: 1.5em;
margin: 0;

#right .post a.h3:hover {
background: none;

#right .post {
text-decoration: underline;

#right .post {
color: {color:Link Text Hover};
background: {color:Link Background Hover};

#right .post blockquote {
border-left: 2px solid {color:Text};
padding: 0 0 0 15px;
margin-left: 0px;

/* this is for chat */
#right .post table {
margin: 10px 0 0 0;
border-collapse: collapse;

#right .post table tr {
margin: 1px 0;

#right .post table tr td {
padding: auto;
vertical-align: top;

#right .post table tr {
text-align: right;
padding: 1px 15px;

#right .post table tr td.words {
width: 100%;
text-align: left;
padding: 1px;
/* that was for chat */

ol.notes {
margin: 0 0 50px 0;
padding: 0 0 0 0;

ol.notes img {
display: none;

#right #footer {
position: relative;
right: 0px;
text-align: right;

#right #footer .credit {
color: #797979;
margin: 50px 0 0 0;

#right #footer .credit a {color: #797979;}
#right #footer .credit a:hover {color: {color:Text};

background: none; }


<script type="text/javascript"

<script type="text/javascript"

<script type="text/javascript">
var jQis = jQuery.noConflict();
// Infinite Scroll plugin
// copyright: Paul Irish &amp; dirkhaim
// license: cc-wrapped GPL :
debug : false,
nextSelector : "",
text : "",
donetext : "{lang:No more posts}.",
navSelector : "div#footer",
contentSelector : "div#right",
itemSelector : "div#right > .post"

<link rel="shortcut icon" href="{Favicon}">
<link rel="alternate" type="application/rss+xml" title="RSS" href="{RSS}" />
<meta name="viewport" content="width=820" />
<div id="container">
<div class="navi">
<div id="left">

<a href="/" class="h2">{Title}</a>


{block:Pages}<b>→</b> <a href="{URL}">{Label}</a><br/>{/block:Pages}


{block:AskEnabled}<div class="space"></div><b>→</b> <a href="/ask">{AskLabel}</a><br/>{/block:AskEnabled}
{block:SubmissionsEnabled}→ <a href="/submit">{SubmitLabel}</a>


<p style="text-transform:uppercase;">{lang:Following}:</p>
{block:Followed}→<a href="{FollowedURL}">{FollowedTitle}</a><br />

<div class="space"></div>
<form action="/search" method="get">
<input type="text" class="search-query" name="q" value="{SearchQuery}"

/> <input type="submit" class="search-button" value="{lang:Search}"/>

<div id="right">
<div class="post">
{block:Title}<a href="{Permalink}" class="h3">{Title}</a>{/block:Title}

<a href="{URL}" class="h3 link">{Name}</a>

{LinkOpenTag}<img width="800px" img src="{PhotoURL-HighRes}" alt="{PhotoAlt}">{LinkCloseTag}

<p>{block:Source}&mdash; {Source}{/block:Source}</p>

{block:Title}<a href="#" class="h3">{Title}</a>{/block:Title}
{block:Label}<td class="name">{Label}</td>{block:Label}
<td class="words">{Line}</td>


<p>&nbsp;<a href="{Permalink}">{block:Date}{block:IfShowTimestamp}

{12Hour}:{Minutes}&nbsp;{AmPm}&nbsp;&nbsp;{/block:IfShowTimestamp}<font color="#000000"></font>{block:IfShowDate}


{block:IfShowPostNotes}{block:NoteCount}&nbsp;&nbsp;<font color="#000000"></font>&nbsp;&nbsp;{NoteCountWithLabel}


&nbsp;&nbsp;<font color="#000000"></font>&nbsp;&nbsp;<a href="{Permalink}#disqus_thread" style="text-

transform:lowercase;">{lang:View comments}</a>{/block:IfDisqusShortname}</a>


<div class="notecontainer" style="padding: 0 0 50px 0;">
<div id="disqus_thread"></div>
<script type="text/javascript" src="{text:Disqus

<noscript><a href="http://{text:Disqus Shortname}">{lang:View

the discussion thread}</a></noscript>

<div id="footer">
<a href="{PreviousPage}">{lang:Previous}</a>

{block:JumpPagination length="10"}
<span class="current_page">{PageNumber}</span>

<a class="jump_page" href="{URL}">{PageNumber}</a>

<a href="{NextPage}" class="next">{lang:Next}</a>
<a href="{NextPost}">{lang:Back}</a>
&nbsp; | &nbsp;
<a href="{PreviousPost}">{lang:Next}</a>

<div class="clear"></div>
<script type="text/javascript">
(function() {
var links = document.getElementsByTagName('a');
var query = '?';
for(var i = 0; i < links.length; i++) {
if(links[i].href.indexOf('#disqus_thread') >= 0) {
query += 'url' + i + '=' + encodeURIComponent(links[i].href) + '&';
document.write('<script charset="utf-8" type="text/javascript"

src="{text:Disqus Shortname}/get_num_replies.js' + query +

'"></' + 'script>');


And this is the code we're using within a page post:

<p><img src="" width="800px" /></p>
<p><span><span>All content&nbsp;</span></span><span>&copy; </span><span>Emma Doolin 2011</span></p>
This is all I know about Tumblr's image resizing.;#entry56133
Look here please:

Nice one! smile.gif
This is a "lo-fi" version of our main content. To view the full version with more information, formatting and images, please click here.
Invision Power Board © 2001-2014 Invision Power Services, Inc.