Welcome to SP!  -
Areas & RangesMountains & RocksRoutesImagesArticlesTrip ReportsGearOtherPeoplePlans & PartnersWhat's NewForum

Auto sizing images within tables?

Get HTML help, style input, and feedback on your pages from other SP members.
 

Auto sizing images within tables?

Postby Alpinist » Fri Feb 24, 2012 8:41 pm

I'm creating a custom photo album that consists of a table with a photo in each cell. Currently, the TN photos are set to a fixed size (height x width), which is fine for viewing with certain screen resolutions but maybe not ideal for other screen resolutions. Is there any HTML code that will allow me to auto-size the thumbnails based on the screen size of the person viewing it, such as a "best fit" command...? The table width is already set to 100%. So the table width adjusts automatically but not the TNs.

I looked around on the web for an answer but didn't find one. Appreciate any help from the HTML gurus out there. Thanks!
User Avatar
Alpinist

 
Posts: 6007
Joined: Tue Jul 29, 2003 7:21 pm
Location: Kildeer, Illinois, United States
Thanked: 668 times in 447 posts

Re: Auto sizing images within tables?

Postby Baarb » Sun Feb 26, 2012 12:58 pm

Was this for your State Highpoint album? Looks like you worked it out?
User Avatar
Baarb

 
Posts: 398
Joined: Tue Jun 06, 2006 6:42 pm
Location: The Village with Three Corners
Thanked: 42 times in 29 posts

Re: Auto sizing images within tables?

Postby Alpinist » Sun Feb 26, 2012 4:41 pm

Baarb wrote:Was this for your State Highpoint album? Looks like you worked it out?

It is for my highpoint album but the images aren't auto-sized. I don't think it's possible to do that within a table using simple HTML tags.

The table width is auto-sized to the screen resolution of the viewer but the images are currently a fixed size. It looks fine for the mid range display settings. However, you'll get a horizontal scroll bar if your screen is set to a lower resolution, and a lot of blank space at the ultra high screen resolutions. I was hoping that both the table and images would auto-size to fit the viewer's screen.
User Avatar
Alpinist

 
Posts: 6007
Joined: Tue Jul 29, 2003 7:21 pm
Location: Kildeer, Illinois, United States
Thanked: 668 times in 447 posts

Re: Auto sizing images within tables?

Postby nartreb » Mon Feb 27, 2012 7:56 pm

http://www.w3schools.com/tags/att_img_width.asp

Ye olde percent sign works. The containing element is the table cell, so use "100%" width or close to it, if the picture is wider than it is tall.

Example (simple table: one row, two columns. First column has image at 100% column width, second column has same image at 50% column width, aligned center):
Code: Select all
<table border=1 cellpadding=0 width="100%">
<tr>
<td align=center bgcolor=#d5e4de>
   <a href=http://www.summitpost.org/denali-s-summit-ridge/423788>
      <img src=http://images.summitpost.org/small/423788.jpg width="100%">
   </a>
</td>
<td align=center bgcolor=#d5e4de>
   <a href=http://www.summitpost.org/denali-s-summit-ridge/423788>
      <img src=http://images.summitpost.org/small/423788.jpg width="50%">
   </a>
</td>
</tr>
</table>

Notice that you should set width OR height, not both. Note that browsers may not know the table row height at the time they're trying to draw the image, so it's better to set the image's width (the window width is known, and that determines the column width). For each image, set a value that makes sense depending on the image's orientation (landscape vs portrait. )

Also be aware that if you expand a small image, it gets pixellated. You can see that in the left image in this example, if you're using a decent-sized monitor. Might not be a problem with more images per row, but if it is, use the "medium" images from summitpost instead of "small".

(If you want you can detect the window size in javascript and reload images with larger versions if necessary, but that's a little beyond basic html.)

My usual approach to screen size problems is to ignore them - if you're looking at images on a three-inch device, you need more help than my HTML can give you, and if you're using a four-foot-wide screen, you don't really need my help. Website developers who *have* to support multiple form factors usually serve up at least two different versions of every page (the UI has to change anyway if the site is going to do anything useful with a phone's touch screen).

However, sometimes I do have a page with lots of small photos that I want to lay out elegantly on both toy-sized laptops and industrial-size monitors. In those cases I usually forget about tables, and put each photo (of fixed size) in its own DIV. That allows browsers to lay down as many DIVs across as will fit, then start a new row of DIVs. You don't control how many rows you end up with, and you may have an unfinished row at the end, but you do fill the available screen space pretty efficiently.

Example:
http://www.davidalbeck.com/photos/2011/heart_ov_zteel/
View the source - it's simpler than tables.
User Avatar
nartreb

 
Posts: 1991
Joined: Sat Apr 03, 2004 10:45 pm
Location: online or in boston, Massachusetts, United States
Thanked: 111 times in 90 posts

The following user would like to thank nartreb for this post
Alpinist, Baarb, Diego Sahagún

Re: Auto sizing images within tables?

Postby nartreb » Mon Feb 27, 2012 11:25 pm

PS forgot to point out that in the Heart Ov Zteel example page, the key to the layout is that every div is styled with "float:left". I did that with a STYLE tag (defining a class "outer" which I apply to every DIV) in the HEAD of the page, but that won't work on SummitPost since you don't have access to the HEAD. I can probably think of a workaround (inline javascript that runs on image load and updates the DOM?) but the simpler (if very tedious) method is to put a style attribute in every DIV tag.

http://www.w3schools.com/tags/att_standard_style.asp
http://www.w3schools.com/css/css_float.asp
User Avatar
nartreb

 
Posts: 1991
Joined: Sat Apr 03, 2004 10:45 pm
Location: online or in boston, Massachusetts, United States
Thanked: 111 times in 90 posts

Re: Auto sizing images within tables?

Postby Alpinist » Thu Mar 01, 2012 4:27 am

I tried the width=100 % for an entire row of the images previously but that didn't work. Maybe the images in the other rows or columns interferred with it? When I expanded the screen resolution to 1600 x 900 I expected that each of the images in that one row would have filled their cells - and they didn't... I'll play with it some more. Thanks!
User Avatar
Alpinist

 
Posts: 6007
Joined: Tue Jul 29, 2003 7:21 pm
Location: Kildeer, Illinois, United States
Thanked: 668 times in 447 posts

Re: Auto sizing images within tables?

Postby nartreb » Sun Mar 11, 2012 11:01 pm

One wild guess: If you had a space before the percent sign, your browser would think you meant 100 pixels.

Also, I'm not sure what the standard says about the timing of the size calculation. (And some browsers are notorious for ignoring standards.) Your browser might not be recalculating the value of 100% when you resize the window. Make sure you reload the page when you test it.
User Avatar
nartreb

 
Posts: 1991
Joined: Sat Apr 03, 2004 10:45 pm
Location: online or in boston, Massachusetts, United States
Thanked: 111 times in 90 posts

The following user would like to thank nartreb for this post
lcarreau

Re: Auto sizing images within tables?

Postby Diego Sahagún » Sat Apr 21, 2012 11:48 pm

I wonder if it's posible to add CSS in a SP table, it would so interesting...
User Avatar
Diego Sahagún

 
Posts: 14508
Joined: Sun Oct 07, 2001 6:21 pm
Location: Madrid, Spain
Thanked: 563 times in 513 posts

Re: Auto sizing images within tables?

Postby lcarreau » Sun Apr 22, 2012 2:42 am

User Avatar
lcarreau

 
Posts: 4056
Joined: Thu Sep 06, 2007 10:27 pm
Location: Court of the Crimson King, Arizona, United States
Thanked: 909 times in 684 posts

Re: Auto sizing images within tables?

Postby Diego Sahagún » Mon Apr 23, 2012 10:07 am

User Avatar
Diego Sahagún

 
Posts: 14508
Joined: Sun Oct 07, 2001 6:21 pm
Location: Madrid, Spain
Thanked: 563 times in 513 posts


Return to Page Help

 


  • Related topics
    Replies
    Views
    Last post

Who is online

Users browsing this forum: No registered users and 0 guests

© 2006-2013 SummitPost.org. All Rights Reserved.