Tumblr Photo Size, check it... |
Tumblr Photo Size, check it... |
waymon |
Jul 23 2010, 08:15 PM
Post
#1
|
Group: Members Posts: 4 Joined: 23-July 10 Member No.: 12,360 |
Hello,
I recently started up a tumblr and have been having some trouble tweaking one little thing. When I post a photo it doesn't post to the size of the column, it posts quite smaller. I'm afraid its going to be something really easy when someone points it out, and ill be foolish. The code is below, id appreciate any suggestions. :-D kaymark1.tumblr.com thanks! 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> <!-- DEFAULT COLORS --> <meta name="color:Background" content="#344353"/> <meta name="color:Content Background" content="#344353"/> <meta name="color:Header Background" content="#344353"/> <meta name="color:Title" content="#DEE8F3"/> <meta name="color:Description" content="#6F869E"/> <meta name="color:Date" content="#4B5C6D"/> <meta name="color:Post Title" content="#DEE8F3"/> <meta name="color:Text" content="#6F869E"/> <meta name="color:Inline Link" content="#6F869E"/> <meta name="color:Quote" content="#B8C8DA"/> <meta name="color:Quote Source" content="#DEE8F3"/> <meta name="color:Link Post" content="#B8C8DA"/> <meta name="color:Media Background" content="#4B5C6D"/> <!-- END DEFAULT COLORS --> <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="icon" href="{Favicon}"/> <link rel="alternate" type="application/rss+xml" title="RSS" href="{RSS}"/> <meta name="viewport" content="width=675"/> <!-- iPhone --> <style type="text/css"> body { color: {color:Text}; margin: 30px; background-color: {color:Background}; font-family: Helvetica, sans-serif; } #content { width: 720px; margin: auto; padding: 35px; background-color: {color:Content Background}; } a { color: {color:Inline Link}; } h1 { padding: 0px; margin: 0px; font: Bold 4.5em Helvetica, sans-serif; line-height: .9em; letter-spacing: -1px; text-transform: uppercase; } h1 a { color: {color:Title}; text-decoration: none; } div#header { background-color: {color:Header Background}; margin: 0; width: 100%; /* padding: 20px 30px 10px 30px; */ } div#description { font-size: 12px; font-weight: bold; font-style: italic; text-transform: lowercase; margin-top: 10px; color: {color:Description}; } div#description a { color: {color:Description}; } div#search { text-align: right; float: right; margin: 10px 0 0; } .date { font: Italic 11px Georgia, Helvetica, sans-serif; color: {color:Date}; line-height: 38px; height: 28px; padding-top: 7px; padding-bottom: 0px; border-bottom: dotted 1px {color:Date}; margin-bottom: 10px; text-transform: lowercase; } .date a { text-decoration: none; color: {color:Date}; } .post { margin-bottom: 40px; position: relative; } .post h2 { font-weight: Normal; font-style: italic; font-size: 30px; font-family: Georgia, times, serif; letter-spacing: -.67px; color: {color:Post Title}; margin: 0px 0px 10px 0px; } .post h2 a { color: {color:Post Title}; text-decoration: none; } /* Regular Post */ .post .regular { font-size: 24px; line-height: 23px; } .post .regular img { max-width: 100%; } .post .regular blockquote { font-style: italic; } /* Photo Post */ .post .photo { background-color: {color:Media Background}; padding: 10px; } .post .photo img { max-width: 100%; border: none; } .post .photo .caption { color: {color:Title}; font-size: 24px; margin-top: 17px; } .post .photo .caption a { color: {color:Title}; } /* Quote Post */ .post div.quote { padding: 0; } .post div.quote span.quote { font-size: 28px; letter-spacing: -1px; color: {color:Quote}; } .post div.quote span.quote a { color: {color:Quote}; } .post div.quote span.quote big.quote { font-weight: bold; font-size: 60px; line-height: 0px; vertical-align: -28px; opacity: 0.5; -moz-opacity: 0.5; filter: alpha(opacity=50); display: none; } .post div.quote .source { font-size: 16px; color: {color:Quote Source}; } .post div.quote .source a { color: {color:Quote Source}; } /* Link Post */ .post .link a.link { font: Italic 30px Georgia, Helvetica, sans-serif; letter-spacing: -.67px; color: #B6C6D8; text-decoration: none; line-height: 1.1em; } .post .link a.link:hover { color: {color:Title}; } .post .link .description { font-weight: normal; font-size: 13px; margin-top: 5px; } /* Conversation Post */ .post .conversation ul { list-style-type: none; margin: 0px 0px 5px 0px; padding: 1px; } .post .conversation ul li { font-size: 13px; color: {color:Text}; line-height: 17px; } .post .conversation ul li span.label { font-weight: bold; } /* Audio Post */ .post .audio .caption { margin-top: 5px; font-size: 11px; color: {color:Text}; } .post .audio .caption a { color: {color:Text}; } /* Video Post */ .post .video { width: 400px; margin: auto; padding: 10px; background-color: {color:Media Background}; } .post .video .caption { margin-top: 15px; font-size: 13px; line-height: 17px; color: {color:Title}; } .post .video .caption a { color: {color:Title}; } /* Footer */ #footer { margin: 20px 0px 0px 0px; font-size: 18px; } #footer a { text-decoration: none; color: {color:Text}; } #footer a:hover { text-decoration: underline; } #footer p.tiny { font-size: 11px; float: left; } #footer p.tiny a { text-decoration: none; color: {color:Text}; font-weight: bold; } #footer p.tiny .dim { filter: alpha(opacity=50); -moz-opacity: 0.5; opacity: 0.5; } ol.notes { padding: 0px; margin: 25px 0px; list-style-type: none; font-size: .75em; background-color:{color:Photo Background}; color: {color:Text}; } ol.notes li.note { padding: 3px 7px 3px 7px; } ol.notes li.note a { color: {color:Title}; text-decoration: none; } ol.notes li.note img.avatar { vertical-align: -4px; margin-right: 10px; width: 16px; height: 16px; } ol.notes li.note a img.avatar { border: none; } ol.notes li.note span.action { font-weight: normal; } ol.notes li.note .answer_content { font-weight: normal; } ol.notes li.note blockquote { padding: 4px 10px; margin: 10px 0px 0px 25px; } ol.notes li.note blockquote a { text-decoration: none; } .searchresultcount { text-align: center; |
Darin McGrew |
Jul 24 2010, 12:52 PM
Post
#2
|
WDG Member Group: Root Admin Posts: 8,365 Joined: 4-August 06 From: Mountain View, CA Member No.: 3 |
AFAICS, the div#content element is 720px wide. And the div#post elements are 720px wide. And the div#photo elements are 700px wide plus 20px of padding (10px on each side).
The images are all 400px wide, because that's the size of the image files, and you haven't done anything to change that. (BTW, don't resize the photos with HTML or CSS. Instead, resize them on the server, and have the HTML and CSS display them in their actual size.) |
waymon |
Jul 24 2010, 03:06 PM
Post
#3
|
Group: Members Posts: 4 Joined: 23-July 10 Member No.: 12,360 |
AFAICS, the div#content element is 720px wide. And the div#post elements are 720px wide. And the div#photo elements are 700px wide plus 20px of padding (10px on each side). The images are all 400px wide, because that's the size of the image files, and you haven't done anything to change that. (BTW, don't resize the photos with HTML or CSS. Instead, resize them on the server, and have the HTML and CSS display them in their actual size.) The images are much much larger, that one with the dog is 1920x1080. I just want the images to be centered and much larger in the column. The size that the text reaches to on the right of the column. |
pandy |
Jul 24 2010, 04:01 PM
Post
#4
|
🌟Computer says no🌟 Group: WDG Moderators Posts: 20,730 Joined: 9-August 06 Member No.: 6 |
No, they aren't (yes, thank you, I can see the page now). They are linked to larger versions.
http://28.media.tumblr.com/tumblr_l61fgcoS...zrd9eo1_400.png |
waymon |
Jul 24 2010, 05:13 PM
Post
#5
|
Group: Members Posts: 4 Joined: 23-July 10 Member No.: 12,360 |
No, they aren't (yes, thank you, I can see the page now). They are linked to larger versions. http://28.media.tumblr.com/tumblr_l61fgcoS...zrd9eo1_400.png Alright, then when I upload them, tumblr is converting them to 400px wide. How do I fix this? Id like them to be at least 720 wide, as well as my videos. |
pandy |
Jul 24 2010, 05:16 PM
Post
#6
|
🌟Computer says no🌟 Group: WDG Moderators Posts: 20,730 Joined: 9-August 06 Member No.: 6 |
Don't know. Maybe tumblr has a FAQ or something?
|
dollbones |
Sep 1 2010, 12:45 PM
Post
#7
|
Group: Members Posts: 1 Joined: 1-September 10 Member No.: 12,639 |
Don't know. Maybe tumblr has a FAQ or something? I know this is a couple months old, but if I was searching around and totally confused I'd want an answer...you know, for the next person. Check out Tumblr's "Creating a custom HTML theme" on their website. http://www.tumblr.com/docs/en/custom_themes#photo-posts If you click on Photos you'll notice there are only a few ways that pictures can be displayed in Tumblr posts. If you want them to display bigger than 400 pixels wide, find the "PhotoURL-400" code in your HTML and replace it with the appropriate size. It might be listed more than once, depending on who wrote the theme. It will be in the BODY section, not the CSS. For displaying larger than 500 pixels wide you will have to use the "PhotoURL-HighRes" option and apply a "max-width: 700px; height: auto;" to images in photo posts. I hope this helped. |
Lo-Fi Version | Time is now: 24th April 2024 - 04:30 AM |