|
HTML - Tumblr Image Scaling.
Hi,
I'm doing some tweaks to my tumblr layout, and I'm really, really bad at this. What I need help with is the image scaling. The layout has standard 550 width for images posted. However, this makes all images this width automatically. For photos that are bigger than 550 px it's fine, they can be made smaller, but I wish to remove the feature that makes smaller photos being scaled up. F.ex. if I post an image with 200 or 300 px width, I don't want it to be scaled up to 550 px, I want it to stay in it's original, smaller size. How can I do this? Here's my code for images: {blockhoto} <div id="entry"> {block:IndexPage}<a href="{Permalink}">{/block:IndexPage} {blockermalinkPage}{LinkOpenTag}{/blockermalinkPage} <img src="{block:IndexPage}{PhotoURL-HighRes}{/block:IndexPage}{blockermalinkPage}{PhotoURL-HighRes}{/blockermalinkPage}" alt="{PhotoAlt}" max-width="550"/><div style="margin-top:-4px; margin-bottom:-4px;"></div> {block:IndexPage}</a>{/block:IndexPage} {blockermalinkPage}{LinkCloseTag} {/blockermalinkPage} {block:Ifshowcaptions}{Caption}{/block:Ifshowcaptions}</div> Thanks in advance. /V Similar TutorialsOkay. So I need some serious help! I just got a Tumblr and I'm trying to figure out how to replace the little avatar default, in the left sidebar, with an actual picture of me. I was just going to paste the whole HTML code in here but it says it's too big. So here's the link to the code: http://www.cherrybam.com/layouts/pla....php?layout=61 And here's the picture of me I'd like to use: http://static.tumblr.com/xs03htv/5D1logaoa/photo_49.jpg I would certainly appreciate the help! Please and Thank You! hey all, sorry if you get alot of annoying questions on myspace so ill try to make this easy I have created an image with the scale of 1024x768 to put on my page. however, i have a monitor that runs on a 1440x900 resolution. of course i can change the image to fit my screen but then, it wouldnt fit the average users screen very well. Currently i have the image pushed to the left, but i can get it centered horizontally with the code Code: background-position: 200px 0px; but vertically im having a bit of trouble. heres an image of what im seeing. http://img409.imageshack.us/img409/1851/img1wz6.jpg the words on the right are suppose to read "Echoes From Malta" however the "ta" in "malta" is cut off the bottom of the page. thats what the problem is from my end of the picture. from my friends view, who is on a smaller screen (i dont know the size) sees the image as being to big for the screen compared to me seeing it so small. so in short, how can i get the image to fit the screen correctly for me, and get it to scale appropriately for viewers varying resolutions. thx for your help Hi all Im having this weird issue.. On my site, under pics http://www.2muchspiff.com/weedimg/ some of the image are large, and when you zoom in on them, and zoom out, it makes the image all weird. How can i fix this? thanks i followed this help post http://www.htmlforums.com/html-xhtml...ie-108215.html, and i got to a certain point but now im stuck. I wanted to remove the big space that you see under the header. the link to my blog is http://kumarradio.tumblr.com. and the coding of the blog is posted as an attachment. heres the new line i added for a faster reference. <body> <h1 align=center><img src="http://img69.imageshack.us/img69/6729/newn.gif" id="" alt=""/></a> </h1> what should i change so that the space is removed ? I've searched around quite a bit, read various articles and so-on and only really come to the conclusion that this is a lot harder than it should be! What I have is a simple page for a PHP script, it has a little form for entering keywords, and displays an image above this form. Now, what I want to do is place these in a table, and have that table resize to fit the viewable area of the user's browser-window. So, what I have is a table with three-rows: The title of the image The image itself The form for entering image keywords Now, what I would like to do is have the image scale to fill the middle cell, which by default eats up all available space leftover by the form and title cells. However, this isn't happening, I enter a height of 100% for the image but it seems to be using some other container to get its height. I'm generally well-versed in HTML, but this one has me stumped! Any help is appreciated, here is the basic HTML I'm using for what I had thought would be a simple page Code: <?xml version="1.0"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<meta http-equiv="content-type" content="text/html;charset=ISO-8859-1" />
<meta name="author" content="Haravikk.com" />
<title>Add keywords</title>
<style type="text/css">
body, html {
height: 100%;
margin: 0;
text-align: center;
}
tr, td, textarea { width: 100%; }
table {
width: 99%;
height: 100%;
margin: 0 auto 0 auto;
}
table, td {
border-width: 0;
border-spacing: 0;
padding: 0;
}
#image { height: 100%; }
#tdTitle { height: 5%; }
#tdImg { height: 75%; }
#tdForm { height: 20%; }
#formText { width: 100%; height: 75%; }
</style>
</head>
<body>
<table>
<tr>
<td id="tdTitle"><b>placeholder.png</b></td>
</tr>
<tr>
<td id="tdImg">
<img id="image" src="http://haravikk.com/placeholder.png" alt="" />
</td>
</tr>
<tr>
<td id="tdForm">
<form action="keywords.php" method="post">
<textarea name="keywords" id="fmrText"></textarea><br />
<input type="submit" />
</form>
</td>
</tr>
</table>
</body>
</html>
Now, I don't know if I could eliminate the table in favour of divs and do this, any suggestions to make the above html work, or to re-write it are welcome! The image provided is just to illustrate the problem hey im using tumblr to design my website here is the link to my site http://sheridanvegas.tumblr.com/ ive been trying to teach myself html in order to change the theme what i want to do is centre the image at the top of the page and remove the dotted line where my menu bar is. I attached the html. thankyou! Hey there. I'm new at doing this tumblr theme thing. Take a look at it: http://Ihaznoidea.tumblr.com So the thing is that, i would like to get that line which says who you follow. If you have checked the link, i'd like it to be at the top from the middle and to the right side. (if that is possible) Or else if it is possible i would like to get a sidebar, i've tried to get it to work, but simply can't make it stay in one position, nor get it to be at the right side. and is it possible to make the description to be under the headline. thanks thank thanks Hi there, I have a tumblr theme that doesn't allow for permalinks for video entries. I really want to add a small link for the permalink page underneath each post, maybe have it fade in whenever you hover over the post. My tumblr page is blackmilklove.tumblr.com and this is the html. Really hoping someone here can help me! Ok so, I am using the theme he http://www.tumblr.com/theme/10375 Basically, I was trying to change the width of the entire theme to my liking. So in the coding I changed every "900px" to "600px" The code: http://www.heypasteit.com/clip/08PT However in doing that, the "sidebar" of the theme moved down to the footer and I've been looking through the code, trying to change some different things and I just can't figure out what to do to bring it back to the right side. Please help? Thank you kindly I have a header on top of my profile http://stevespeeps.tumblr.com/ However is there any way I can have it on top like that with like a facebook twitter & myspace icon with a navigation bar like message pics etc The way I have it set up is just an image as a header & it seems thats the only way I can figure out how to put it up there. I tried a div code & did the slice tool thing but nothing was aligned & did not work Any help will be greatly appreciated =) Hey I am creating my own website using tumblr I have been editing a theme and want to remove the text and the aqua block of colour around my logo. I also want to centre the image. I am trying to learn html and have been trying to figure this out for myself. It would be good if you could help and explain this to me! http://sheridanvegas.tumblr.com/ My question is regarding this gallery that I put together: http://moparch.com/moparch/architecture/ds.html My goal is to make it so the image scales with the size of the browser window. Right now the image only scales as the page shrinks horizontally. When the page shrinks vertically the image does not change size. The page is made up of two flash movies, one for the images and one for the text and arrows. In dreamweaver I have set the image flash movie (the one on the left) to scale to 100% width and 100% height. I have set the text movie to be a fixed size. If anyone could explain how to get my image movie to scale as the browser window shrinks both horizontally and vertically I would greatly appreciate it. thanks I have a question about this web page: http://moparch.com/_moparch/architec...piastudio.html Right now, when you make the browser window smaller in the horizontal direction the image scales to fit the window. However, when you make the browser smaller in the vertical direction the image does not scale. How do I get the image to scale when I make the browser smaller in the vertical direction? Thanks in advance. Looks fine. Does not look fine. The first picture was fine because it was viewed with a 1024x768 resolution(which is the resolution that I'm working on my website with). However, any higher resolutions, and you'll see that the video goes out of place and moves too much to the right(second pic). I need to make it so that the video scales with all resolutions so it stays in place like in the first picture, no matter what the resolution is. Can anyone tell me how to fix this? Please be specific, i.e. what code? Thank you. hi i am building my site in flash cs3 , and when i test it in the browser,it is scaling depending how big is the browser,and I would like that the size of my web is fixed-not scaling .( because when someone resize the browser some images are getting really big and bad quality. So how can i make that my website is not scaling please? when i exported it from flash from the export options i choose NO scale,but its not working. so please help me what can i do? thanks Hiya. I have been searching for a long time now and haven't come up with an answer. I am looking for a way to improve the look of youtube/vimeo etc. videos on my tumblr site. I was hoping for something similar to the way it is presented he http://www.itsnicethat.com/articles/judex Is this possible? Thanks. Basically, I have created this theme http://rmlewisuk.tumblr.com which works fine on a blog with many posts, but when I install the theme on a blog with no posts, only the header shows. The sidebar and footer do not. Here is the code: HTML Code: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<link rel="stylesheet" href="http://manordesign.co.uk/therobb/resources/blog/style.css" type="text/css" media="screen">
<link href='http://fonts.googleapis.com/css?family=Droid+Sans' rel='stylesheet' type='text/css'>
<link rel="shortcut icon" href="{Favicon}">
<link rel="alternate" type="application/rss+xml" href="{RSS}">
{block:Description}
<meta name="description" content="{MetaDescription}" />
{/block:Description}
<meta name="text:TwitterUsername" content=""/>
<meta name="text:Tagline" content="Put your own tagline here"/>
<meta name="color:Background" content="#ffffff"/>
<meta name="color:Font" content="#555555"/>
<meta name="color:Link" content="#ff0000"/>
<meta name="color:Link Hover" content="#a8a8a8"/>
<meta name="color:Title" content="#000000">
<meta name="color:Post Title" content="#000000">
<title>{block:PostTitle}{PostTitle}{/block:PostTitle} | {Title}</title>
<style type="text/css">
body {
background: {color:Background};
color: {color:Font};
}
a:link {
color: {color:Link};
}
a:hover {
color: {color:Link Hover};
}
h1 {
color: {color:Title};
}
h2 {
color: {color:Post Title};
}
{CustomCSS}
</style>
</head>
<body>
<div id="wrapper">
<div id="header">
<a href="/"><h1>{Title}</h1></a>
<p>{text:Tagline}</p>
</div>
<div id="content">
{block:Posts}
{block:Text}
<h2>{DayOfMonth}{DayOfMonthSuffix} {Month} {Year}</h2>
<div>
{block:Title}
<h2><a href="{Permalink}">{Title}</a></h2>
{/block:Title}
<div>
{Body}
</div>
</div>
<p><a href="{ShortURL}">Permalink</a> {block:RebloggedFrom}<em>via <a href="{ReblogParentURL}">{ReblogParentName}</a>{/block:RebloggedFrom}</em></p>
<hr/>
{/block:Text}
{block:Photo}
<h2>{DayOfMonth}{DayOfMonthSuffix} {Month} {Year}</h2>
<li class="post">
<img src="{PhotoURL-400}" alt="{PhotoAlt}"/>
{block:Caption}
<div class="caption">{Caption}</div>
{/block:Caption}
</li>
<p><a href="{ShortURL}">Permalink</a> {block:RebloggedFrom}<em>via <a href="{ReblogParentURL}">{ReblogParentName}</a>{/block:RebloggedFrom}</em></p>
<hr/>
{/block:Photo}
{block:Photoset}
<h2>{DayOfMonth}{DayOfMonthSuffix} {Month} {Year}</h2>
<li class="post">
{Photoset-400}
{block:Caption}
<div class="caption">{Caption}</div>
{/block:Caption}
</li>
<p><a href="{ShortURL}">Permalink</a> {block:RebloggedFrom}<em>via <a href="{ReblogParentURL}">{ReblogParentName}</a>{/block:RebloggedFrom}</em></p>
<hr/>
{/block:Photoset}
{block:Quote}
<h2>{DayOfMonth}{DayOfMonthSuffix} {Month} {Year}</h2>
<li class="post">
"{Quote}"
{block:Source}
<div class="source">{Source}</div>
{/block:Source}
</li>
<p><a href="{ShortURL}">Permalink</a> {block:RebloggedFrom}<em>via <a href="{ReblogParentURL}">{ReblogParentName}</a>{/block:RebloggedFrom}</em></p>
<hr/>
{/block:Quote}
{block:Link}
<h2>{DayOfMonth}{DayOfMonthSuffix} {Month} {Year}</h2>
<li class="post">
<h2><a href="{URL}" class="link" {Target}>{Name} →</a></h2>
{block:Description}
<div class="description">{Description}</div>
{/block:Description}
</li>
<p><a href="{ShortURL}">Permalink</a> {block:RebloggedFrom}<em>via <a href="{ReblogParentURL}">{ReblogParentName}</a>{/block:RebloggedFrom}</em></p>
<hr/>
{/block:Link}
{block:Chat}
<h2>{DayOfMonth}{DayOfMonthSuffix} {Month} {Year}</h2>
<li class="post chat">
{block:Title}
<h3><a href="{Permalink}">{Title}</a></h3>
{/block:Title}
<ul class="chat">
{block:Lines}
<li class="{Alt} user_{UserNumber}">
{block:Label}
<strong><span class="label">{Label}</span></strong>
{/block:Label}
{Line}
</li>
{/block:Lines}
</ul>
</li>
<p><a href="{ShortURL}">Permalink</a> {block:RebloggedFrom}<em>via <a href="{ReblogParentURL}">{ReblogParentName}</a>{/block:RebloggedFrom}</em></p>
<hr/>
{/block:Chat}
{block:Audio}
<h2>{DayOfMonth}{DayOfMonthSuffix} {Month} {Year}</h2>
<li class="post audio">
{AudioPlayerGrey}
{block:Caption}
<div class="caption">{Caption}</div>
{/block:Caption}
</li>
<p><a href="{ShortURL}">Permalink</a> {block:RebloggedFrom}<em>via <a href="{ReblogParentURL}">{ReblogParentName}</a>{/block:RebloggedFrom}</em></p>
<hr/>
{/block:Audio}
{block:Video}
<h2>{DayOfMonth}{DayOfMonthSuffix} {Month} {Year}</h2>
<li class="post">
{Video-400}
{block:Caption}
<div class="caption">{Caption}</div>
{/block:Caption}
</li>
<p><a href="{ShortURL}">Permalink</a> {block:RebloggedFrom}<em>via <a href="{ReblogParentURL}">{ReblogParentName}</a>{/block:RebloggedFrom}</em></p>
<hr/>
{/block:Video}
{Block:Answer}
<h2>{DayOfMonth}{DayOfMonthSuffix} {Month} {Year}</h2>
<li class="post">
<a href="{Permalink}">{Question}</a>
<p>{Answer}</p>
</li>
<p><a href="{ShortURL}">Permalink</a></p>
<hr/>
{/Block:Answer}
{/block:Posts}
{block:Pagination}
{block:PreviousPage}<a href="{PreviousPage}">Newer Posts </a>{/block:PreviousPage}
{block:NextPage}<a href="{NextPage}">Older Posts</a>{/block:PreviousPage}
{/block:Pagination}
</div>
<div id="sidebar">
<p class="image"><img src="{PortraitURL-128}"></p>
<h3>About</h3>
{Block:Description}
<p>{Description}</p>
{/Block:Description}
{Block:HasPages}
<hr/>
<h3>Links</h3>
{block:Pages}<a href="{URL}">{Label}</a><br/>{/block:Pages}
-<br/>
{/Block:HasPages}
{Block:AskEnabled}<a href="/ask">{AskLabel}</a><br/>{/Block:AskEnabled}
<br/>
<hr>
{Block:IfTwitterUsername}
<h3>Twitter</h3>
<ul id="twitter_update_list"></ul>
<p><a href="http://twitter.com/{text:TwitterUsername}">Follow me</a> on Twitter</p>
<hr>
{/Block:IfTwitterUsername}
<p class="image"><a href="http://panic.com/coda/"><img src="http://manordesign.co.uk/therobb/resources/blog/coda.png"></a></p>
<hr>
<p class="image"><a href="http://manordesign.co.uk"><img width="70%"src="http://manordesign.co.uk/therobb/resources/blog/logo.png"></a></p>
</div>
<div id="footer">
Manor Sans Theme by <a href="http://manordesign.co.uk">Manor Design</a> | <a href="/archive">Archive</a> |
<a href="{RSS}">RSS</a> </div>
</div>
<script type="text/javascript" src="http://twitter.com/javascripts/blogger.js"></script>
<script type="text/javascript" src="http://twitter.com/statuses/user_timeline/{text:TwitterUsername}.json?callback=twitterCallback2&count=5"></script>
<script type="text/javascript">
var _gaq = _gaq || [];
_gaq.push(['_setAccount', 'UA-13281881-1']);
_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>
</body>
</html>
Does anyone know the reason for this and how I might go about fixing it? Thanks in advance. I edited the HTML code for my theme to allow me to have a link to my ask box but the box has gone weird. Here's a link: http://wir3donacid.tumblr.com/ask Basically, it won't let you see what you're typing in the box, you can still ask something but you can't see what you've typed. Is there a way I can edit this, or fix it? Here's a link to my Tumblr, the HTML code should be available from the http://wir3donacid.tumblr.com/ If you can edit the code yourself that would help, or just advice on how to fix this, cheers ): Plus, aspects of my theme aren't working; I think the endless scrolling is mucked up. I'm not great with HTML codes so, if anyone wants to try and fix any problems with it and send me the HTML code or something, I think it just needs tweaking. THANK YOU Hello, this is my first post in this forum. Nice place you got here =P I may stay around to learn something about html for once XD Anyway, I just need a quick solution. My tumblr (nocleansocks.tubmlr.com) has a slightly edited html in it. I know the bare basics, and I was able to edit an existing theme to fit in some minor altercations, and I got it to where i wanted it except for ONE little detail. On the left sidebar, the two "lines" that are on the top and bottom of the text have a border. The theme's layout's preview shows no border (they blend flawlessly into the background) but when I installed the theme WITHOUT my changes, they were like that. How might I go about removing those borders? As far as I can tell, the HTML says border: none; where it is supposed to. Hello! I've recently been setting up a tumblr for my online portfolio, and have encountered an issue that I haven't managed to resolve. I have two categories - design and photography. To add pieces of work to my portfolio, I upload an image to sum up that project. If it's just a photograph, it's fine that when it is clicked it just goes to that post through {Permalink}. But if someone clicks an image for design work, I want it to take them to a separate page with a bit more information. I've managed to get this to work with {LinkURL}. My problem is that I can only get them to work one at a time. I can either have the images redirecting to a specified page, or going to the actual post - not both, depending on the content type. Here's some code that will hopefully help you see my problem: Code: {block:Photo}
<div class="post photo">
{block:IndexPage}<div class="box">
<img src="{PhotoURL-400}" alt="{PhotoAlt}"/>
<a href="{Permalink}" class="box-caption">
<p>{PhotoAlt} </p></a>
</div>
{/block:IndexPage}
{block:PermalinkPage}
<div class="middle">
<div class="middle-content">
<a href="{PhotoURL-HighRes}">
<img src="{PhotoURL-500}" alt="{PhotoAlt}" border="0"/>
</a>
</div>
</div>
<div class="caption">
{block:Caption}
{Caption}
{/block:Caption}
{block:HasTags}
<div class="tags">Tags:
{block:Tags}<a href="{TagURL}">{Tag}</a>
{/block:Tags}
</div>
{/block:HasTags}
{block:PermalinkPagination}
<div class="permpaginate">
{block:NextPost}
<a href="{NextPost}">Previous Project</a>
{/block:NextPost}
{block:PreviousPost}
<a href="{PreviousPost}">Next Project</a>
{/block:PreviousPost}
</div>
{/block:PermalinkPagination}
</div>
{/block:PermalinkPage}
</div>
{/block:Photo}
I have enabled "click-through" on my design posts but this doesn't work with the above code. I have to change <a href="{Permalink}" class="box-caption"> to <a href="{LinkURL}" class="box-caption"> which obviously means that now the Permalink doesn't work. Hopefully that's a clear enough explanation! I'd be very grateful if anyone can help me resolve this Thanks! |
|||||||