The Web Design Group

... Making the Web accessible to all.

Welcome Guest ( Log In | Register )

 
Reply to this topicStart new topic
> Tumblr photo's wont resize
cleatedheels
post Jul 16 2012, 02:46 AM
Post #1





Group: Members
Posts: 2
Joined: 16-July 12
Member No.: 17,443



I've been trying to start a photo blog using tumbler

here http://phototopics.tumblr.com/


The issue im having is that on the main page the photos dont re size to fit down into their frames.

I'm not sure how to accomplish this short of manually re sizing them and uploading them,

but as it is a photo blog i prefer to use the Hq photos




i have looked around and found a few sites that recommend inserting CSS tags, but im either doing it wrong or they dont work.

Any help appreciated
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
cleatedheels
post Jul 22 2012, 06:46 PM
Post #2





Group: Members
Posts: 2
Joined: 16-July 12
Member No.: 17,443



*bump*
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
reef1020
post Oct 19 2012, 05:21 PM
Post #3





Group: Members
Posts: 1
Joined: 19-October 12
Member No.: 17,980



I am having the same issue. I would like to make the images smaller, or at a fixed width, but I can't seem to accomplish this. MY code looks like this:
<!DOCTYPE html>
<!--
High Res Theme 1.1.9 -- 26 September 2012
© 2011-2012 Justin Ouellette, all rights reserved
http://highrestheme.tumblr.com/
-->
<html>
<head>
<title>{Title}{block:PostSummary} - {PostSummary}{/block:PostSummary}</title>
<meta name="tumblr-theme" content="30257" />
<meta name="warning" content="HC SVNT DRACONES" />
<meta name="viewport" content="width = device-width" id="viewport" />
<meta http-equiv="imagetoolbar" content="no" />
<link rel="icon" href="{Favicon}" />
<link rel="alternate" type="application/rss+xml" title="RSS" href="{RSS}" />
<link rel="stylesheet" href="http://static.tumblr.com/lpiibdu/NEJljwkzi/reset.2.8.1.yui.css">
<meta name="color:Text" content="#333333" />
<meta name="color:Link" content="#111111" /> <!-- 1.1 -->
<meta name="color:Link Hover" content="#111111" /> <!-- 1.1 -->
<meta name="color:Tag" content="#666666" />
<meta name="color:Date" content="#999999" />
<meta name="color:Background" content="#ffffff" />
<meta name="image:Header" content="" />
<meta name="if:Fixed Position Header Image" content="0" /> <!-- 1.1 -->
<meta name="if:Infinite Scrolling" content="0" />
<meta name="if:Show Blog Title" content="1" />
<meta name="if:Show Blog Description" content="0" />
<meta name="if:Show Headers In Bold" content="0" />
<meta name="if:Show Headers In Caps" content="1" />
<meta name="if:Show Album Art" content="1" />
<meta name="if:Show Tags" content="1" />
<meta name="if:Show Dates" content="1" />
<meta name="if:Show Note Counts" content="0" />
<meta name="if:Show Notes On Permalink Pages" content="0" />
<meta name="if:Show Footer Text" content="0" />
<meta name="if:Show Followed Tumblrs" content="0" /> <!-- 1.1 -->
<meta name="if:Hide Ask Link" content="0" /> <!-- 1.1.1 -->
<meta name="if:Hide Submit Link" content="0" /> <!-- 1.1.1 -->
<meta name="if:Center Text Posts" content="0" /> <!-- 1.1 -->
<meta name="if:Center Link Captions" content="0" /> <!-- 1.1 -->
<meta name="if:Center Photo Captions" content="1" />
<meta name="if:Center Quotes" content="1" /> <!-- 1.1 -->
<meta name="if:Center Chats" content="1" /> <!-- 1.1 -->
<meta name="if:Center Audio Captions" content="1" />
<meta name="if:Center Video Captions" content="1" />
<meta name="if:Use Time Ago For Date" content="0" />
<meta name="if:Drop Shadows On Photos" content="0" />
<meta name="if:Large Title" content="0" />
<meta name="if:Helvetica" content="0" />
<meta name="if:Force Video Resize" content="1" />
<meta name="if:Scale Photos To Window Width" content="1" />
<meta name="text:Forced Video Width" content="500" />
<meta name="text:Column Width" content="500" />
<meta name="text:Vertical Spacing" content="64" />
<meta name="text:Min Image Width" content="0" />
<meta name="text:Max Image Width" content="1280" />
<meta name="text:Font Family" content="menlo,'andale mono','courier new',sans-serif" /> <!-- 1.1 -->
<meta name="text:Font Size In Pixels" content="11" /> <!-- 1.1 -->
<meta name="text:Line Height In Percent" content="155" /> <!-- 1.1 -->
<meta name="text:Footer Text" content='<a href="http://highrestheme.tumblr.com/">high res theme</a> by <a href="http://jstn.cc/">jstn</a>' />
<meta name="text:Disqus Shortname" content="" /> <!-- 1.1 -->
<meta name="text:Google Analytics Web Property ID" content="" /> <!-- 1.1 -->
{block:Description}
<meta name="description" content="{MetaDescription}" />
{/block:Description}
<style type="text/css">
html,body { background: {color:Background}; color: {color:Text}; }
{block:IfHelvetica}
html, body { font: normal 12px helvetica,sans-serif; line-height: 150%; }
{/block:IfHelvetica}
{block:IfNotHelvetica}
html, body { font: normal {text:Font Size In Pixels}px {text:Font Family}; line-height: {text:Line Height In Percent}%; }
{/block:IfNotHelvetica}

a { color: {color:Link}; }
a:hover { text-decoration: none; color: {color:Link Hover}; }
strong, b { font-weight: bold; }
em, i { font-style: italic; }
q:before { content: ''; }
q:after { content: ''; }

div.regular_body, div.quote_body, div.caption, div.conversation_line, ul#following, #disqus, .tumblr_video_container, #post_notes { width: {text:Column Width}px; margin: 0 auto; }
div.regular_body, div.quote_body, div.caption, div.conversation_line { text-align: left; }
h1, h2, ul#posts, ul#pages, div#pagers, #header_image_div, div#footer, div#post_notes, ul#following, div.quote div.caption { text-align: center; }
{block:IfCenterTextPosts}
div.regular_body { text-align: center; }
{/block:IfCenterTextPosts}
{block:IfCenterPhotoCaptions}
div.photo div.caption { text-align: center; }
div.photoset div.caption { text-align: center; }
{/block:IfCenterPhotoCaptions}
{block:IfCenterQuotes}
div.quote_body { text-align: center; }
{/block:IfCenterQuotes}
{block:IfCenterLinkCaptions}
div.link div.caption { text-align: center; }
{/block:IfCenterLinkCaptions}
{block:IfCenterChats}
div.conversation_line { text-align: center; }
{/block:IfCenterChats}
{block:IfCenterVideoCaptions}
div.video div.caption { text-align: center; }
{/block:IfCenterVideoCaptions}
{block:IfCenterAudioCaptions}
div.audio div.caption { text-align: center; }
{/block:IfCenterAudioCaptions}

h1, h2, div.content, ul#pages, ul#following, #header_image_div, li.post, div#pagers, div#footer, #disqus { margin-top: {text:Vertical Spacing}px; }
div#container { margin-bottom: {text:Vertical Spacing}px; }
h1 a { text-decoration: none; }
div.date, div#post_notes, div.caption, ul.tags { margin-top: 1.5em; }
h3, div.content p { margin-bottom: 1.5em; }
div.photo_div, div.photoset_div, div.html_photoset, #header_image_div, div.album_art_div { line-height: 0; }

img.photo_img { margin-bottom: 0.4em; min-width: {text:Min Image Width}px; }
div.photoset_div { margin-top: 1.5em; }
div.photoset { margin-top: -1.5em; }
{block:IfScalePhotosToWindowWidth}
html { padding-left: {text:Vertical Spacing}px; padding-right: {text:Vertical Spacing}px; }
img.photo_img { max-width: 100%; }
{block:IfNotFixedPositionHeaderImage}
#header_image, #header_image_div { max-width: 100%; }
{/block:IfNotFixedPositionHeaderImage}
{/block:IfScalePhotosToWindowWidth}
{block:IfNotScalePhotosToWindowWidth}
img.photo_img { max-width: {text:Max Image Width}px; }
{/block:IfNotScalePhotosToWindowWidth}

div.date a { color: {color:Date}; text-decoration: none; }
div.date a:hover { text-decoration: underline; }
img.album_art_img { width: 207px; }
blockquote { border-left: 1px solid #999; margin-left: 1em; padding-left: 1em; margin-bottom: 1em; }
li.tag { display: inline; margin: 0 1em; }
li.tag a { text-decoration: none; color: {color:Tag}; }
#post_notes ol.notes li.tag { margin: 0; }
div.no_results { font-style: italic; }
img.asker_portrait { position: relative; bottom: -6px; height: 20px; width: 20px; }
li.page { display: inline; margin: 0 2em; }
div#post_notes img.avatar { position: relative; bottom: -4px; }

li.followed { display: inline; line-height: 0; }
li.followed a { line-height: 0; }
li.followed img { width: 24px; height: 24px; margin: 2px; vertical-align: middle; }

li.post ul li { list-style-type: disc; list-style-position: outside; }
li.post ol li { list-style-type: decimal; list-style-position: outside; }

{block:IfDropShadowsOnPhotos}
img.photo_img {
-webkit-box-shadow: 0px 2px 8px rgba(0,0,0,0.33);
-moz-box-shadow: 0px 2px 8px rgba(0,0,0,0.33);
box-shadow: 0px 2px 8px rgba(0,0,0,0.33);
}
{/block:IfDropShadowsOnPhotos}

{block:IfShowHeadersInBold}
h1,h3,span.conversation_label { font-weight: bold; }
{/block:IfShowHeadersInBold}

{block:IfShowHeadersInCaps}
h1,h3,span.conversation_label { text-transform: uppercase; }
{/block:IfShowHeadersInCaps}

{block:IfLargeTitle}
h1 { font-size: 64px; line-height: 72px; }
{/block:IfLargeTitle}

{CustomCSS}
</style>
<script type="text/javascript">
var analytics_code = '{text:Google Analytics Web Property ID}'.trim();
if (analytics_code.length) {
var _gaq = _gaq || [];
_gaq.push(['_setAccount', analytics_code]);
_gaq.push(['_trackPageview']);

(function() {
var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
})();
}
</script>
</head>
<body>
<!-- Tumblr Theme #30257 -->
<div id="container">
{block:IfHeaderImage}
<div id="header_image_div">
<a href="/"><img src="{image:Header}" id="header_image" alt="{Title}" /></a>
</div>
{/block:IfHeaderImage}

{block:IfShowBlogTitle}
<h1 id="blog_title"><a href="/">{Title}</a></h1>
{/block:IfShowBlogTitle}

{block:IfShowBlogDescription}
{block:Description}
<h2 id="blog_description">{Description}</h2>
{/block:Description}
{/block:IfShowBlogDescription}

{block:HasPages}
<ul id="pages">
{block:Pages}
<li class="page"><a href="{URL}">{Label}</a></li>
{/block:Pages}
</ul>
{/block:HasPages}

{block:AskEnabled}
{block:IfNotHideAskLink}
<h2 id="ask_link"><a href="/ask">{AskLabel}</a></h2>
{/block:IfNotHideAskLink}
{/block:AskEnabled}

{block:SubmissionsEnabled}
{block:IfNotHideSubmitLink}
<h2 id="submit_link"><a href="/submit">{SubmitLabel}</a></h2>
{/block:IfNotHideSubmitLink}
{/block:SubmissionsEnabled}

<ul id="posts">
{block:NoSearchResults}
<li class="post">
<div class="no_results">{lang:No results for SearchQuery}</div>
</li>
{/block:NoSearchResults}

{block:Posts}
<li class="post" id="post_{PostID}">
{block:Text}
<div class="regular content">
{block:Title}<h3>{Title}</h3>{/block:Title}
<div class="regular_body">{Body}</div>
</div>
{/block:Text}

{block:Answer}
<div class="answer content">
<div class="regular_body">
<p><img src="{AskerPortraitURL-24}" alt="{PlaintextAsker}" class="asker_portrait" /> {lang:Asker asked}:</p>
<p><blockquote>{Question}</blockquote></p>
<p>{Answer}</p>
</div>
</div>
{/block:Answer}

{block:Link}
<div class="link content">
<h3><a href="{URL}" title="{Name}" {Target}>{Name}</a></h3>
{block:Description}<div class="caption">{Description}</div>{/block:Description}
</div>
{/block:Link}

{block:Photo}
<div class="photo content">
<div class="photo_div">
{LinkOpenTag}<img src="{PhotoURL-HighRes}" alt="{PhotoAlt}" title="{Permalink}" class="photo_img" />{LinkCloseTag}
</div>

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

<!-- 1.2 -->

{block:Photoset}
<div class="photoset content">
{block:Photos}
{block:Photo1}
<!-- firsty -->
{/block:Photo1}
<div class="photoset_div">
<img src="{PhotoURL-HighRes}" class="photo_img" />
</div>
<!--
{block:Exif}
{block:Camera}
Camera: {Camera}
{/block:Camera}

{block:Aperture}
Aperture: {Aperture}
{/block:Aperture}

{block:Exposure}
Exposure: {Exposure}
{/block:Exposure}

{block:FocalLength}
Focal Length: {FocalLength}
{/block:FocalLength}
{/block:Exif}
-->
{/block:Photos}

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

<!-- /1.2 -->

{block:Video}
<div class="video content">
{Video-500}
{block:Caption}<div class="caption">{Caption}</div>{/block:Caption}
</div>
{/block:Video}

{block:Audio}
<div class="audio content">
{block:IfShowAlbumArt}
{block:AlbumArt}
<div class="album_art_div">
<img src="{AlbumArtURL}" class="album_art_img" />
</div>
{/block:AlbumArt}
{/block:IfShowAlbumArt}
{AudioPlayerGrey}
{block:Caption}<div class="caption">{Caption}</div>{/block:Caption}
</div>
{/block:Audio}

{block:Quote}
<div class="quote content">
<div class="quote_body">
<q>{Quote}</q>
</div>
{block:Source}<div class="caption">{Source}</div>{/block:Source}
</div>
{/block:Quote}

{block:Chat}
<div class="conversation content">
{block:Title}<h3>{Title}</h3>{/block:Title}
{block:Lines}
<div class="conversation_line">{block:Label}<span class="conversation_label">{Label}</span> {/block:Label}&ldquo;{Line}&rdquo;</div>
{/block:Lines}
</div>
{/block:Chat}

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

{block:IfShowDates}
{block:Date}
<div class="date">
<a href="{Permalink}">
{block:IfUseTimeAgoForDate}
{TimeAgo}
{/block:IfUseTimeAgoForDate}
{block:IfNotUseTimeAgoForDate}
{DayOfMonth} {ShortMonth} {Year}
{/block:IfNotUseTimeAgoForDate}

{block:NoteCount}
{block:IfShowNoteCounts}
/ {NoteCountWithLabel}
{/block:IfShowNoteCounts}
{/block:NoteCount}
</a>
</div>
{/block:Date}
{/block:IfShowDates}

{block:NoteCount}
{block:IfNotShowDates}
{block:IfShowNoteCounts}
<div class="date">
<a href="{Permalink}">{NoteCountWithLabel}</a>
</div>
{/block:IfShowNoteCounts}
{/block:IfNotShowDates}
{/block:NoteCount}
</li>
{/block:Posts}
</ul>

<div id="disqus">
<script type="text/javascript">
var disqus_shortname = '{text:Disqus Shortname}'.trim();
var disqus = disqus_shortname.length ? true : false;
var disqus_url = "{Permalink}";
var disqus_title = "{block:PostTitle}{PostTitle}{/block:PostTitle}";
</script>

{block:Permalink}
<div id="disqus_thread"></div>
<script type="text/javascript">
if (disqus) {
var disqus_identifier = {JSPostID};
(function() {
var dsq = document.createElement('script');
dsq.type = 'text/javascript';
dsq.async = true;
dsq.src = 'http://' + disqus_shortname + '.disqus.com/embed.js';
(document.getElementsByTagName('head')[0] || document.getElementsByTagName('body')[0]).appendChild(dsq);
})();
}
</script>
<noscript>Please enable JavaScript to view the <a href="http://disqus.com/?ref_noscript={text:Disqus Shortname}">comments powered by Disqus.</a></noscript>
<a href="http://disqus.com" class="dsq-brlink">blog comments powered by <span class="logo-disqus">Disqus</span></a>
{/block:Permalink}

<script type="text/javascript">
if (disqus) {
(function () {
var s = document.createElement('script'); s.async = true;
s.src = 'http://' + disqus_shortname + '.disqus.com/count.js';
(document.getElementsByTagName('HEAD')[0] || document.getElementsByTagName('BODY')[0]).appendChild(s);
}());
}
</script>
</div>

{block:PostNotes}
{block:IfShowNotesOnPermalinkPages}
<div id="post_notes">{PostNotes}</div>
{/block:IfShowNotesOnPermalinkPages}
{/block:PostNotes}

{block:IfInfiniteScrolling}
<div id="pagers">
<p onclick="more()">loading&hellip;</p>
</div>
{/block:IfInfiniteScrolling}

{block:IfShowFollowedTumblrs}
{block:IndexPage}
{block:Following}
<ul id="following">
{block:Followed}<li class="followed"><a href="{FollowedURL}" title="{FollowedName} - {FollowedTitle}"><img src="{FollowedPortraitURL-24}" alt="{FollowedName} - {FollowedTitle}" /></a></li>{/block:Followed}
</ul>
{/block:Following}
{/block:IndexPage}
{/block:IfShowFollowedTumblrs}

{block:IfNotInfiniteScrolling}
{block:Pagination}
<div id="pagers">
<p>{lang:Page CurrentPage of TotalPages}</p>
{block:NextPage}
<p><a href="{NextPage}">{lang:Next}</a></p>
{/block:NextPage}
{block:PreviousPage}
<p><a href="{PreviousPage}">{lang:Previous}</a></p>
{/block:PreviousPage}
</div>
{/block:Pagination}
{/block:IfNotInfiniteScrolling}

{block:IfShowFooterText}
<div id="footer">
{text:Footer Text}
</div>
{/block:IfShowFooterText}
</div>
<script type="text/javascript" src="http://assets.tumblr.com/javascript/tumblelog.js?676"></script>
<script type="text/javascript" src="http://static.tumblr.com/lpiibdu/GgVljwkyh/mootools.1.2.3.yui.js"></script>
<script type="text/javascript">
var permalink_page = false;
{block:PermalinkPage}
permalink_page = true;
{/block:PermalinkPage}

var tag = '';
var tag_page = false;
{block:TagPage}
tag = {JSURLSafeTag};
tag_page = true;
{/block:TagPage}

function resize_video(v) {
if (!v)
return;

try {
var video_width = parseInt({text:Forced Video Width});
v.height = Math.floor( video_width / (v.width / v.height) );
v.width = video_width;
} catch(e) {
console.log(e);
}
}

function fix_highres_image(img) {
if (!img)
return;

try {
var a = img.getParent();
if (a && a.href && a.href.indexOf(document.domain + '/image/') != -1) {
a.href = img.title;
img.title = img.alt;
}
} catch(e) {
console.log(e);
}
}

function adjust_ios_viewport() {
var w1 = parseInt({text:Column Width});
var w2 = parseInt({text:Max Image Width});
var w3 = parseInt({text:Forced Video Width});

var widest = w1 > w2 ? w1 : w2;
widest = w3 > widest ? w3 : widest;

var margin = parseInt({text:Vertical Spacing});
var viewport_width = margin + widest + margin;
if (viewport_width > 768) {
try {
$('viewport').setProperty('content','width = ' + viewport_width);
} catch(e) {
console.log(e);
}
}
}

adjust_ios_viewport();

if (!disqus) {
try {
$('disqus').destroy();
} catch(e) {
console.log(e);
}
}

if (!permalink_page)
$$('img.photo_img').each(fix_highres_image);

{block:IfFixedPositionHeaderImage}
{block:IfHeaderImage}
$(window).addEvent('load', function() {
try {
var new_top_padding = $('header_image').getSize().y + parseInt({text:Vertical Spacing});
$('container').setStyle('padding-top', new_top_padding.toString() + 'px');
$('header_image_div').setStyles({
'position': 'fixed',
'top': '0px',
'left': '50%',
'margin-left': '-' + ($('header_image').getSize().x / 2).toString() + 'px'
});
} catch(e) {
console.log(e);
}
});
{/block:IfHeaderImage}
{/block:IfFixedPositionHeaderImage}

{block:IfForceVideoResize}
$$('.video object').each(resize_video);
$$('.video embed').each(resize_video);
$$('.video iframe').each(resize_video);
{/block:IfForceVideoResize}

{block:IfInfiniteScrolling}
var current_page = {CurrentPage};
var total_pages = {TotalPages};
var locked = false;

if (current_page == total_pages || total_pages == 0)
$('pagers').dispose();

var loaded_posts = [];
$$('li.post').each(function(li) {
loaded_posts.push(li.id);
});

function fix_flash_audio(js) {
if (!js)
return;

var lines = [];
try {
var newline = eval('\"\\' + 'n\"');
lines = js.split(newline);
} catch(e) {
console.log(e);
}

for (var i = 0; i < lines.length; i++) {
if (lines[i].contains('replace'+'If'+'Flash'))
eval(lines[i]);
}
}

var ajax = new Request.HTML({
evalScripts: false,
onFailure: function() {
locked = false;
},
onSuccess: function(tree,elements,html,js) {
elements.each(function(el) {
if(el.tagName == 'LI' && el.hasClass('post') && !loaded_posts.contains(el.id)) {
$('posts').adopt(el);
loaded_posts.push(el.id);

el.getElements('img.photo_img').each(fix_highres_image);

{block:IfForceVideoResize}
el.getElements('.video object').each(resize_video);
el.getElements('.video embed').each(resize_video);
el.getElements('.video iframe').each(resize_video);
{/block:IfForceVideoResize}
}

});

try {
fix_flash_audio(js);
} catch(e) {
console.log(e);
}

current_page++;
locked = false;

if (current_page == total_pages)
$('pagers').dispose();
}
});

function more() {
if (!locked && current_page != total_pages && total_pages > 0) {
locked = true;
url = (tag_page ? '/tagged/' + tag : '') + '/page/' + (current_page + 1).toString();
return ajax.get(url);
}
}

function prox() {
var window_height = $(window).getSize().y;
var document_height = $(window).getScrollSize().y;
var scroll_position = $(window).getScroll().y;

if ( document_height - (window_height + scroll_position) < 1600 ) {
more();
} else {
locked = false;
}
}

$(window).addEvent('resize',prox);
$(window).addEvent('scroll',prox);
{/block:IfInfiniteScrolling}
</script>
<!--
This Tumblr Theme and all of its CSS, Javascript,
and media assets are subject to Tumblr's Terms of Service:

http://www.tumblr.com/terms_of_service
-->
</body>
</html>

Any help would be much appreciated!

Coral
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: 20th April 2014 - 09:15 PM