67 replies to this topic

[TheOrgg]

When you make the browser 'look' at the image and resize it, it kinda defeats the point of the thumb. I'd recommend not doing that and instead have two different sizes of picture uploaded.

If you use the image itself as its own thumb, the page has to download the whole image. It's better to do a thumbnail that is a resized image, and link it directly to either the image itself (if the host allows it-- many don't anymore) or a blank page with a 'back' link that has just a page showing the one picture and nothing else (like Nate's page does).

So it'd be more like

<a href="http://uofmuscle.com...pack1.jpg"><img src="http://uofmuscle.com...10pk1-100x100"> </a>

Or possibly (if that's not allowed)

<a href="http://uofmuscle.com...pack1.htm"><img src="http://uofmuscle.com...10pk1-100x100"> </a>

Edited by theorgg, 16 June 2009 - 11:25 AM.

[Tortle]

Ok, so I tried this:

<img src="http://uofmuscle.com...es/10pack1.jpg" alt="10 Pack Picture 1" height="100" width="100" />

The thumb looks great, but how do I get to click on it to make it bigger? It didn't work.

I also tried the larger logo, that's where I ran into the problems. Maybe I'll try the very small logo? Or maybe I'll just watermark it?

You'll have to add a hyperlink reference to it, otherwise it just thinks it's displaying an image, which will look like this:

<a href="http://uofmuscle.com/images/10pack1.jpg"><img src="http://uofmuscle.com/images/10pack1.jpg" alt="10 Pack Picture 1" height="100" width="100" /></a>

(You can also use the link button in WordPress.)

[TheOrgg]

On one page you'll have the thumbnail (and probably a lot of 'em). Then you click, and it goes directly to the image .jpg file. Some servers won't allow that, so you'll have to have a page that is just the photo on it (and an optional 'back' button).

[TheOrgg]

<a href="http://uofmuscle.com...pack1.jpg"><img src="http://uofmuscle.com...10pk1-100x100"> </a>

So this is the code for the actual full-sized picture in the first part, and then displays the second saved thumbnail - right?

EDIT - This got me a little red X that linked to the full sized picture.

Did you upload "http://uofmuscle.com...1-100x100.jpg"?

That is the code for a link to the big picture that uses a small picture as the 'anchor' instead of text. Instead of This, it's just like this:

Edited by theorgg, 16 June 2009 - 11:59 AM.

[Tortle]

For me, it looks like it's working in IE, but not in Firefox or Chrome. Maybe you started using FF at work?

Anyway, it looks like there are lots of options here:
http://geekswithblog...4/19/75606.aspx

The one that looks like it will work best in your case is this one, which would go in your style sheet:

table { 
text-align: center; 
} 

td { 
vertical-align: top; 
text-align: -moz-center; 
}

This would center all the tables on your site, so it might have some funky effects depending on what formatting on your site is using tables. But it might be worth a try anyways.

[Tortle]

I've never heard of Compatibility View before, but it looks like it cleans up a page that uses antiquated HTML formatting:
http://blogs.msdn.co...ility-view.aspx

I'm using IE 7, so I don't have any Compatibility View settings. But that's probably it... you're probably using IE 8, and it has changed the way that it interprets this formatting. I'll try downloading IE 8 and give it a try.

[transformersontheshelf]

This sometimes get some off the wall comments but go buy the dummy books. I have a copy of HTML for Dummies nearby when I need to know a color code and to teach myself slowly. It's a well written and VERY easy to understand book.

If your going to have a website with a lot of reoccurring page designs, don't do what I did and make each page individually. makes updating and fixing on mass a nightmare. Don't be too eager to throw away tools your hosting site offer, makes thumbnails and whatnot much easier; though mixing into the code can sometimes leave hanging tags that don't need to be there.

[Tortle]

That is definitely weird. I haven't noticed it, and it works in IE 7, so I'm not sure what's going on. It sounds like a problem with one of the "a:hover" settings in your CSS file, but I looked at it, and I didn't see anything weird with it. Maybe try deleting that pic and inserting it again?