Page 1 of 1

HTML Help - Sizing Vertical Pictures

PostPosted: Fri Aug 21, 2009 8:30 pm
by MarkDidier
Looking for HTML code to reduce/adjust the size of vertical pictures - primarily for TR purposes.

I have always used - aligncenter:medium. I like the center formatting which works great for horizontal pictures but the vertical pictures end up being too large for the screen and I'd like to shrink them down a bit.

Sorry if this is a repeat. I looked thru a bunch of the old HTML help threads and couldn't find the answer.

Thanks,
Mark (IT challenged)

PostPosted: Sat Aug 22, 2009 8:32 am
by nattfodd
There is not really HTML code for automatically reducing image sizes (you can kind of do it in CSS, but the result is often very ugly, and it won't work in here anyway). When you upload an image to the site, it generates a few different sizes for you to use, just add e.g. :small: at the end of your image insertion code (before the ending "]" ). If that doesn't work for you and you want different sizes, then you'll have to resize yourself, with programs like photoshop or the gimp (this one is free) and then upload the new image.

I hope that makes sense.

PostPosted: Sat Aug 22, 2009 9:08 am
by Gabriele Roth
an example ...
Code: Select all
<a href="http://www.summitpost.org/view_object.php?object_id=330277"><img src=http://www.summitpost.org/images/original/330277.jpg height=250>

PostPosted: Sat Aug 22, 2009 9:46 am
by nattfodd
My bad, you can indeed do it by adding the style information to your HTML code. But I would advise you to avoid it if you care at all how good the images will look. Web browsers have a tendency to oversharpen and use crappy algorithms for downsizing.

PostPosted: Sat Aug 22, 2009 12:55 pm
by MarkDidier
Thanks for the help - much appreciated. I'll give it a whirl and see how it works out.

PostPosted: Sat Aug 22, 2009 4:00 pm
by nartreb
Aside from the fact that browsers tend to make the images look bad (jagged), are you aware that SP produces several sizes for you? Display the version closest to the size you want, NOT, as in Gabriele's example, the original-size version, which tends to be way bigger than you want. Starting with the original and shrinking it in the browser is a waste of bandwidth and will make your TR display slowly.
So start by trying the medium size; if that's too big, try the small size. If what you want is in between, use the medium size and shrink it with the HEIGHT attribute in HTML. (Browsers are better at shrinking than expanding - it's easier to interpolate than to extrapolate.)
In other words:
Code: Select all
<a href="http://www.summitpost.org/view_object.php?object_id=330277">
   <img src=http://www.summitpost.org/images/medium/330277.jpg height=250px>
</a>

(Gabriele also forgot to close his A tag...)

PostPosted: Wed Dec 16, 2009 12:03 am
by MarkDidier
nartreb wrote:
Code: Select all
<a href="http://www.summitpost.org/view_object.php?object_id=330277">
   <img src=http://www.summitpost.org/images/medium/330277.jpg height=250px>
</a>



Thanks a bunch. I finally got around to getting this to work and am able to resize.

This code appears to left justify the picture - how would I center it?

Thanks,
Mark