Help - Search - Members - Calendar
Full Version: Editing Tumblr Theme HTML
HTMLHelp Forums > Web Authoring > Web Site Functionality
MrShrimps
I have a tumblr, and love this them i currently have, but the pictures are very big. Using the HTML provided when going to customize the theme, is there anyway to make the picture size smaller. Here is the HTML and a link to the page:

http://mrshrimps.tumblr.com/

THanks


HTML::::

_____________________________


<!doctype html>
<!-- paulirish.com/2008/conditional-stylesheets-vs-css-hacks-answer-neither/ -->
<!--[if lt IE 7]> <html class="no-js ie6 oldie" lang="en"> <![endif]-->
<!--[if IE 7]> <html class="no-js ie7 oldie" lang="en"> <![endif]-->
<!--[if IE 8]> <html class="no-js ie8 oldie" lang="en"> <![endif]-->
<!-- Consider adding a manifest.appcache: h5bp.com/d/Offline -->
<!--[if gt IE 8]><!--> <html class="no-js" lang="en"> <!--<![endif]-->
<head>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width,initial-scale=1">

<title>{Title}{block:PostTitle} - {PostTitle}{/block:PostTitle}</title>
<link rel="shortcut icon" href="{Favicon}">
<link rel="alternate" type="application/rss+xml" href="{RSS}">
<!-- http://static.tumblr.com/x0ukhl9/Se8lwlis5/styles.css -->
<!--#1--><link rel="stylesheet" type="text/css" media="screen" href="http://static.tumblr.com/x0ukhl9/vyXm0lsms/styles-lite.css"/><!--!#1-->
<!-- css/jquery.fancybox.css -->
<link rel="stylesheet" type="text/css" media="screen" href="http://static.tumblr.com/x0ukhl9/u2Llwlc1j/jquery.fancybox.css"/>

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

<!--[if IE]>
<style type="text/css">
.clearfix { zoom: 1; }
</style>
<![endif]-->

<!-- js/libs/modernizr.custom.08999.js -->
<script src="http://static.tumblr.com/x0ukhl9/fOqlwlc36/modernizr.custom.08999.js"></script>

<!-- Boolean -->
<meta name="if:Show Background Texture" content="1"/>
<meta name="if:Light Colors" content="0"/>
<meta name="if:Center Posts" content="0"/>
<meta name="if:Center Small Images" content="0"/>
<meta name="if:Show Archive Button" content="1"/>
<meta name="if:Show RSS Button" content="0"/>
<meta name="if:Show Search" content="1"/>
<meta name="if:Show About Button" content="1"/>
<meta name="if:Show Social Network Icons" content="1"/>
<meta name="if:Show Reblogged From" content="0"/>
<meta name="if:Show Tags" content="1"/>
<meta name="if:Show Disqus Comment Count" content="1"/>
<meta name="if:Show Disqus Comments" content="1"/>
<meta name="if:Show Note Count" content="1"/>
<meta name="if:Show Notes" content="1"/>

<!-- Text -->
<meta name="text:Title Caption" content=""/>
<meta name="text:Search Placeholder" content="Search"/>
<meta name="text:Archive Button" content="Archive"/>
<meta name="text:RSS Button" content="RSS"/>

<!-- Profile Links -->
<meta name="text:Disqus Shortname" content=""/>
<meta name="text:Dribbble Username" content=""/>
<meta name="text:Forrst Username" content=""/>
<meta name="text:Twitter Username" content=""/>
<meta name="text:Flickr Profile URL" content=""/>
<meta name="text:Skype Username" content=""/>
<meta name="text:Facebook Profile URL" content=""/>
<meta name="text:Google Plus URL" content=""/>
<meta name="text:Vimeo Profile URL" content=""/>
<meta name="text:Delicious Username" content=""/>
<meta name="text:Last fm Username" content=""/>
<meta name="text:Youtube Username" content=""/>
<meta name="text:Google Analytics ID" content="" />
<meta name="text:Copyright Text" content="" />

<!-- Colors -->
<meta name="color:Background Color" content="#202020"/>
<meta name="color:Link Color" content="#217ed8"/>
<meta name="color:Link Visited Color" content="#BBBBBB"/>

<style type="text/css">
body {
background-color: {color:Background Color};
}

p a, .action a, .light p a, .light .action a {
color: {color:Link Color};
}

p a:hover, .action a:hover, .light p a:hover, .light .action a:hover {
color: {color:Link Color};
}

p a:visited, .action a:visited, .light p a:visited, .light .action a:visited {
color: {color:Link Visited Color};
}

{CustomCSS}
</style>
</head>

<body class="{block:IfShowBackgroundTexture}
bg-texture
{/block:IfShowBackgroundTexture}
{block:IfLightColors}
light
{/block:IfLightColors}
{block:IfCenterPosts}
centered
{/block:IfCenterPosts}
{block:IfCenterSmallImages}
centered-small
{/block:IfCenterSmallImages}">
<div class="wrapper">
<div id="content" class="clearfix">

<div id="expander" style="display: none;">
<div class="wrap">
<div class="content clearfix">
{block:Description}
<p class="description">{Description}</p>
{/block:Description}
</div>
</div>
</div>

<div id="header">
<div class="content">
<div id="user-info" class="{block:IfTitleCaption}caption{/block:IfTitleCaption}">
<div class="content clearfix">

<a href="/" title="{Title}" class="main">
<img src="{PortraitURL-48}" class="portrait"/>

<div class="info">
<h1 class="title">{Title}</h1>

{block:IfTitleCaption}
<p class="caption">{text:Title Caption}</p>
{/block:IfTitleCaption}
</div>
</a>

{block:IfShowSocialNetworkIcons}
<ul id="profiles" class="clearfix">
{block:IfDribbbleUsername}
<li><a target="_blank" class="dribbble" href="http://dribbble.com/{text:Dribbble Username}"></a></li>
{/block:IfDribbbleUsername}

{block:IfForrstUsername}
<li><a target="_blank" class="forrst" href="http://forrst.com/people/{text:Forrst Username}"></a></li>
{/block:IfForrstUsername}

{block:IfTwitterUsername}
<li><a target="_blank" class="twitter" href="http://twitter.com/{text:Twitter Username}"></a></li>
{/block:IfTwitterUsername}

{block:IfFlickrProfileURL}
<li><a target="_blank" class="flickr" href="{text:Flickr Profile URL}"></a></li>
{/block:IfFlickrProfileURL}

{block:IfSkypeUsername}
<script type="text/javascript" src="http://download.skype.com/share/skypebuttons/js/skypeCheck.js"></script>
<li><a class="skype" href="skype:{text:Skype Username}?call"></a></li>
{/block:IfSkypeUsername}

{block:IfFacebookProfileURL}
<li><a target="_blank" class="facebook" href="{text:Facebook Profile URL}"></a></li>
{/block:IfFacebookProfileURL}

{block:IfGooglePlusURL}
<li><a target="_blank" class="google" href="{text:Google Plus URL}"></a></li>
{/block:IfGooglePlusURL}

{block:IfVimeoProfileURL}
<li><a target="_blank" class="vimeo" href="{text:Vimeo Profile URL}"></a></li>
{/block:IfVimeoProfileURL}

{block:IfDeliciousUsername}
<li><a target="_blank" class="delicious" href="http://delicious.com/{text:Delicious Username}"></a></li>
{/block:IfDeliciousUsername}

{block:IfLastfmUsername}
<li><a target="_blank" class="lastfm" href="http://www.last.fm/user/{text:Last fm Username}"></a></li>
{/block:IfLastfmUsername}

{block:IfYoutubeUsername}
<li><a target="_blank" class="youtube" href="http://youtube.com/{text:Youtube Username}"></a></li>
{/block:IfYoutubeUsername}
</ul>
{/block:IfShowSocialNetworkIcons}

<ul id="navigation">
{block:Pages}
<li><a href="{URL}">{Label}</a></li>
{/block:Pages}

{block:IfShowRssButton}
<li><a href="{RSS}">{text:RSS Button}</a></li>
{/block:IfShowRssButton}

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

{block:IfShowArchiveButton}
<li><a href="/archive">{text:Archive Button}</a></li>
{/block:IfShowArchiveButton}

{block:SubmissionsEnabled}
<li><a href="/submit">{SubmitLabel}</a></li>
{/block:SubmissionsEnabled}

{block:Description}
{block:IfShowAboutButton}
<li><a id="expand-about" href="#">About</a></li>
{/block:IfShowAboutButton}
{/block:Description}
</ul>

{block:IfShowSearch}
<form action="/search" method="get" class="search">
<input type="text" name="q" value="{SearchQuery}" placeholder="{text:Search Placeholder}"/><span class="search" onclick="$(this).parent().submit();" autocomplete="off"></span>
</form>
{/block:IfShowSearch}
</div>
</div>
<div class="divider"></div>
</div>
</div>

<div id="body">
<div class="content {block:Permalink}permalink{/block:Permalink}" id="posts">
{block:Posts}
<div class="post clearfix {block:IndexPage}index{/block:IndexPage} {PostType}">

<div class="content">
{block:Text}
{block:Title}
<h1>
<a href="{Permalink}">{Title}</a>
</h1>
{/block:Title}

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

{block:Photo}
<div class="photo loading shadow">
{LinkOpenTag}
<img src="{PhotoURL-HighRes}" alt="{PhotoAlt}" />
{LinkCloseTag}
</div>

{block:Caption}
<div class="body clearfix">
{Caption}
</div>
{/block:Caption}
{/block:Photo}

{block:Photoset}

{Photoset-500}

{block:Caption}
<div class="body clearfix">
{Caption}
</div>
{/block:Caption}
{/block:Photoset}

{block:Quote}
<h1 class="quote {Length}"><a href="{Permalink}">&ldquo;{Quote}&rdquo;</a></h1>

{block:Source}
<div class="body clearfix">
<p class="source">&mdash; {Source}</p>
</div>
{/block:Source}
{/block:Quote}

{block:Video}

<div class="video shadow">
{Video-500}
</div>

{block:Caption}
<div class="body clearfix">
{Caption}
</div>
{/block:Caption}
{/block:Video}

{block:Audio}
<h1>{block:Artist}{Artist}{/block:Artist}{block:TrackName}{block:Artist} - {/block:Artist}{TrackName}{/block:TrackName}</h1>
<div class="audio-player clearfix" rel="{PostID}">
<div class="album-cover">
{block:AlbumArt}
<a href="{AlbumArtURL}" class="fancybox" title="{block:Artist}{Artist}{/block:Artist}{block:TrackName}{block:Artist} - {/block:Artist}{TrackName}{/block:TrackName}"><img src="{AlbumArtURL}" class="cover"/></a>
{/block:AlbumArt}
</div>
<div class="track inset">
<div class="flash">{AudioPlayerBlack}</div>
<div class="inner">
<div class="loaded"></div>
<div class="current"></div>
</div>
</div>
</div>

{block:Caption}
<div class="body clearfix">
<p class="caption">{Caption}</p>
</div>
{/block:Caption}
{/block:Audio}

{block:Chat}
{block:Title}
<h1>
<a href="{Permalink}">{Title}</a>
</h1>
{/block:Title}

<ul class="body">
{block:Lines}
<li class="{Alt} clearfix">
{block:Label} <span class="label">{Label}</span>{/block:Label}
<p>{Line}</p>
</li>
{/block:Lines}
</ul>
{/block:Chat}

{block:Link}
<h1>
<a class="link" href="{URL}" target="{Target}"><div class="icon"></div>{Name}</a>
</h1>

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

{block:Answer}
<h1 class="quote">{Question}</h1>

<div class="body">
{Answer}
<p>&raquo; Asked by {Asker}</p>
</div>
{/block:Answer}

<div class="meta-info clearfix">
{block:Date}
<a href="{Permalink}" class="date inset">
<div class="icon"></div>
<span class="month">{ShortMonth}</span>
<span class="day">{DayOfMonth}</span>
<span class="year">{Year}</span>
</a>
{/block:Date}

{block:IfDisqusShortname}
{block:IfShowDisqusComments}
{block:IfShowDisqusCommentCount}
<a class="inset comments dsq-comment-count" href="{Permalink}#disqus_thread">Comments</a>
{/block:IfShowDisqusCommentCount}
{/block:IfShowDisqusComments}
{/block:IfDisqusShortname}

{block:IfShowNoteCount}
{block:NoteCount}
<a href="{Permalink}" class="note-indicator inset">
{NoteCountWithLabel}
</a>
{/block:NoteCount}
{/block:IfShowNoteCount}

{block:IfShowRebloggedFrom}
{block:RebloggedFrom}
<a href="{ReblogParentURL}" class="reblog inset">
<div class="icon"></div>
<span class="title">Reblogged from</span>
{ReblogParentName}
</a>
{/block:RebloggedFrom}
{/block:IfShowRebloggedFrom}

{block:IfShowTags}
{block:HasTags}
<ul class="tags">
{block:Tags}<li class="inset"><a class="tag" href="{TagURL}">#{Tag}</a></li>{/block:Tags}
</ul>
{/block:HasTags}
{/block:IfShowTags}
</div>

{block:Permalink}
<div class="commentary clearfix">
<div class="divider"></div>

{block:IfDisqusShortname}
{block:IfShowDisqusComments}
<div class="disqus-wrap">
<div id="disqus_thread"></div>
</div>

<script>
var disqus_url = "{Permalink}";
var disqus_title ="{block:PostTitle}{PostTitle}{/block:PostTitle}";
var disqus_identifier = {PostID};
(function() {
var dsq = document.createElement('script'); dsq.type = 'text/javascript'; dsq.async = true;
dsq.src = 'http://{text:Disqus Shortname}.disqus.com/embed.js';
(document.getElementsByTagName('head')[0] || document.getElementsByTagName('body')[0]).appendChild(dsq);
})();
</script>
{/block:IfShowDisqusComments}
{/block:IfDisqusShortname}

{block:PostNotes}
{block:IfShowNotes}
<div class="notes-wrap {block:IfNotShowDisqusComments}no-pull{/block:IfNotShowDisqusComments}">
{PostNotes}
</div>
{/block:IfShowNotes}
{/block:PostNotes}
</div>
{/block:Permalink}

</div>
</div>
{/block:Posts}

{block:IfDisqusShortname}
<script>
var disqus_shortname = '{text:Disqus Shortname}';
(function () {
var s = document.createElement('script'); s.async = true;
s.src = 'http://{text:Disqus Shortname}.disqus.com/count.js';
(document.getElementsByTagName('HEAD')[0] || document.getElementsByTagName('BODY')[0]).appendChild(s); }());
</script>
{block:IfDisqusShortname}

{block:Pagination}
<div class="pagination clearfix">
{block:PreviousPage}
<a class="previous" href="{PreviousPage}">Previous</a>
{/block:PreviousPage}

<div class="jump clearfix">
{block:JumpPagination length="5"}
{block:CurrentPage}
<span class="current-page">{PageNumber}</span>
{/block:CurrentPage}

{block:JumpPage}
<a href="{URL}">{PageNumber}</a>
{/block:JumpPage}
{/block:JumpPagination}
</div>

{block:NextPage}
<a class="next" href="{NextPage}">Next</a>
{/block:NextPage}
</div>
{/block:Pagination}
</div>
</div>
</div>

<div class="push"></div>
</div>

<footer>
<div class="wrap">
<div class="content clearfix">
Copyright &copy; {CopyrightYears}
{block:IfCopyrightText}
{text:CopyrightText}
{/block:IfCopyrightText}

{block:IfNotCopyrightText}
{Title}
{/block:IfNotCopyrightText}

<a href="http://www.tumblr.com/theme/33285">HD Exhibit</a> Theme by <a href="https://twitter.com/Breefield">Dustin Hoffman</a>
</div>
</div>
</footer>

<!-- Grab Google CDN's jQuery, with a protocol relative URL; fall back to local if offline -->
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script>
<script>window.jQuery || document.write('<script src="http://static.tumblr.com/x0ukhl9/xrulwlc8b/jquery-1.6.2.min.js"><\/script>')</script>
<script src="http://static.tumblr.com/x0ukhl9/NX8lwlc8w/jquery.killphotoset.js"></script>
<script src="http://static.tumblr.com/x0ukhl9/NjTlwlcaq/jquery.fancybox.pack.js"></script>
<!--#2--><script src="http://static.tumblr.com/x0ukhl9/QnBm0lso9/script-lite.js"></script><!--!#2-->

{block:IfGoogleAnalyticsID}
<script>
window._gaq = [['_setAccount','{text:Google Analytics ID}'],['_trackPageview'],['_trackPageLoadTime']];
Modernizr.load({
load: ('https:' == location.protocol ? '//ssl' : '//www') + '.google-analytics.com/ga.js'
});
</script>
{/block:IfGoogleAnalyticsID}
</body>
</html>
Darin McGrew
I believe you can use {PhotoURL-500} instead of {PhotoURL-HighRes}.

See also:
http://www.tumblr.com/docs/en/custom_themes#photo-posts
MrShrimps
How do i change that code so that when i click a picture it will go to that one picture?
pandy
See http://htmlhelp.com/faq/html/images.html#linked-image .
MrShrimps
WHere would that code go within the text (code)
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.