The Web Design Group

... Making the Web accessible to all.

Welcome Guest ( Log In | Register )

 
 Reply to this topicStart new topic
> Tumblr theme help (resizing pictures inside text posts)
unlearn
post May 3 2012, 06:46 PM
Post #1





Group: Members
Posts: 2
Joined: 3-May 12
Member No.: 17,045
So I've been messing around with this new grid theme on my tumblr..I fixed most of it to the way I want but I've notices that all the images are resized to fit in the appropriate margins except when I reblog a text post - like a post with a title and a picture in the post description. Any idea how to resize these pictures so they don't stretch out my blog?

It looks like this - http://i47.tinypic.com/3151vz4.png
as you can see the drawing of trees is a lot bigger than the rest of my image posts.

help?
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Darin McGrew
post May 3 2012, 07:18 PM
Post #2


WDG Member
********

Group: Root Admin
Posts: 8,365
Joined: 4-August 06
From: Mountain View, CA
Member No.: 3
I don't know Tumblr, but does this help?
http://features.tumblr.com/post/1153984/uploading-media
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
unlearn
post May 3 2012, 11:50 PM
Post #3





Group: Members
Posts: 2
Joined: 3-May 12
Member No.: 17,045
QUOTE(Darin McGrew @ May 3 2012, 07:18 PM) *

I don't know Tumblr, but does this help?
http://features.tumblr.com/post/1153984/uploading-media


hmm, not really. my theme code has 2 photo blocks (I think?) but neither of them specify "photo-250" or "photo-500" or anything like that.


I think I need to add something somewhere in one of these blocks but I'm not sure what or where:
QUOTE
{block:Photo}
{block:IndexPage}
<div class="permalink">
<a href="{permalink}">{notecount}</a></span></div>
<div class="permalink2">
<a href="{ReblogURL}" target="_blank"><img src="http://media.tumblr.com/tumblr_ly6zmxyqJq1qe8xyt.png" /></a></span></div>


{/block:IndexPage}{block:Photo}

{block:Text}
{block:Title}<span class="title">{Title}</span>{/block:Title}<span class="entrytext">{Body}</span>
{block:IndexPage}<div class="per"><center><br> <a href="{Permalink}">{NoteCount} notes</a> - <a href="{ReblogURL}">reblog</a></center> </div>{/block:IndexPage}
{/block:Text}



{block:Photo}
{block:IndexPage}{LinkOpenTag}<div class="photo"><a href="{permalink}"><img class="photo" src="{PhotoURL-HighRes}" alt="{PhotoAlt}" width="250"/></a></div>{LinkCloseTag}{/block:IndexPage}
{block:PermalinkPage}{LinkOpenTag}<a href="{permalink}"><img class="photo" src="{PhotoURL-HighRes}" alt="{PhotoAlt}" width="500"/></a>{LinkCloseTag}{/block:PermalinkPage}
{/block:Photo}
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
seashimmer
post Aug 29 2012, 12:12 AM
Post #4





Group: Members
Posts: 1
Joined: 29-August 12
Member No.: 17,694
QUOTE(unlearn @ May 3 2012, 11:50 PM) *

QUOTE(Darin McGrew @ May 3 2012, 07:18 PM) *

I don't know Tumblr, but does this help?
http://features.tumblr.com/post/1153984/uploading-media


hmm, not really. my theme code has 2 photo blocks (I think?) but neither of them specify "photo-250" or "photo-500" or anything like that.


I think I need to add something somewhere in one of these blocks but I'm not sure what or where:
QUOTE
{block:Photo}
{block:IndexPage}
<div class="permalink">
<a href="{permalink}">{notecount}</a></span></div>
<div class="permalink2">
<a href="{ReblogURL}" target="_blank"><img src="http://media.tumblr.com/tumblr_ly6zmxyqJq1qe8xyt.png" /></a></span></div>


{/block:IndexPage}{block:Photo}

{block:Text}
{block:Title}<span class="title">{Title}</span>{/block:Title}<span class="entrytext">{Body}</span>
{block:IndexPage}<div class="per"><center><br> <a href="{Permalink}">{NoteCount} notes</a> - <a href="{ReblogURL}">reblog</a></center> </div>{/block:IndexPage}
{/block:Text}



{block:Photo}
{block:IndexPage}{LinkOpenTag}<div class="photo"><a href="{permalink}"><img class="photo" src="{PhotoURL-HighRes}" alt="{PhotoAlt}" width="250"/></a></div>{LinkCloseTag}{/block:IndexPage}
{block:PermalinkPage}{LinkOpenTag}<a href="{permalink}"><img class="photo" src="{PhotoURL-HighRes}" alt="{PhotoAlt}" width="500"/></a>{LinkCloseTag}{/block:PermalinkPage}
{/block:Photo}



I had the same problem and i entered some code from a previous theme i used and it seems it fixed the problem.
I didn't feel like pinpointing the exact part that did the trick but it didn't change anything else so here's the chunk i used

QUOTE
}
.post img.main_photo {
width: 100%;
}
.post img {
max-width: 100%;
height: auto;
}
.post .photo img {
opacity: 1;
-webkit-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
-o-transition: all 0.5s ease;
transition: all 0.5s ease;
margin: 0;
line-height: 0;
}
.tumblr_post.photo p { display: none; }


I entered that towards the end of the style type="text/css" section

This post has been edited by seashimmer: Aug 29 2012, 12:14 AM
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
1 User(s) are reading this topic (1 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 April 2024 - 03:53 PM
Invision Power Board © 2024  IPS, Inc.
Licensed to: HTMLHelp.com, LLC