Wrapping thumbnails - newbie question.
Posted: 11 March 2009 10:00 AM   [ Ignore ]
Newbie
Rank
Total Posts:  2
Joined  2009-03-11

Guys, hi ,

I’m a newcomer on this forum and in the world of css in general, so please explain to me as you would to a 4-years old.

I’m developing an application that outputs a lof of images.
I need to organize them in an attractive and easy to view way.
I thought about some kind of a gallery (a grid) of thumbnails.
The thing is that some images are vertically (height>width) and some are horizontally (width > height) oriented.
This means that my grid becomes difficult to handle.

What is the easiest way i can implement something like a square wrapper for a thumbnail so that the grid stays nicely aligned ?
I found a good example of what i want it to look like here : http://highslide.com/#examples

How do i get started from here ?
Please advise in baby steps.

Arie

Profile
 
 
Posted: 11 March 2009 01:37 PM   [ Ignore ]   [ # 1 ]
Newbie
Rank
Total Posts:  17
Joined  2009-03-09
arie - 11 March 2009 10:00 AM

Guys, hi ,
.....
I’m developing an application that outputs a lof of images.
....

OK, let’s start this way:

1. What you use to develop your site ( application ? - is not for web ) ?
2. Some tips: Take a look at a good and free php scripts that you can use for your albums: http://coppermine-gallery.net , or http://www.gallery2.org
  What you get = dynamic pages, specially if you have a lot of images.

3. You can unify your images if you make an matrix ( say 600x600 px), and simply add and save your images with matrix. ( take a look at http://www.faktor.rs - you’ll see diferent images, but they are all the same size 600 x 600 px )
4. If you use HTML than: you can make your grid with a table and CSS.
Something like this:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<
html>
<
head>
<
title>Simple table as a grid</title>
<
meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<
style>
/* this is an internal stylesheet, but you can use external one instead */
#slike {
border1px solid #cacaca;
}
.celija {
width
200px;
height:200px;
background#cacaca;
}
</style>


</
head>

<
body>
<
table  id="slike" border="0" cellspacing="5px" cellpadding="5">
  <
tr>
    <
td class="celija">&nbsp;</td> <!-- instead empty space you put your images -->
    <
td class="celija">&nbsp;</td>
    <
td class="celija">&nbsp;</td>
  </
tr>
  <
tr>
    <
td class="celija">&nbsp;</td>
    <
td class="celija">&nbsp;</td>
    <
td class="celija">&nbsp;</td>
  </
tr>
      
</
table>
</
body>
</
html

5. Or.. you can use <div> instead tables - somethnig like this:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<
html>
<
head>
<
title>Untitled Document</title>
<
meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<
style>
/* this is an internal stylesheet, but you can use external one instead */
#okvir {
background#cacaca;
border:1px solid #c9c9c9;
width250px/*should be definite */
height:250px/*should be definite as width */
margin:10px 10px;
text-align:center;
floatleft;
}
#okvir img {
margin15px 15px;
/*padding: 15px 15px;*/ 
}

</style>
</
head>

<
body>
<
div id="okvir">
<
img src="http://www.faktor.rs/images/sierra/bojanka.gif" alt="bojanka"
</
div>
<
div id ="okvir" >
<
img src="http://www.faktor.rs/images/sierra/swat_3.gif" alt="swat" >
</
div>
</
body>
</
html

Of course - this is only a fishbone of code.

Profile
 
 
Posted: 11 March 2009 01:48 PM   [ Ignore ]   [ # 2 ]
Newbie
Rank
Total Posts:  2
Joined  2009-03-11

svampola, thank you so much for a prompt reply, i appreciate the time you took to answer.
I got a lot of information, but one question remains unclear to me :

If i choose to generate HTML on my own, how do i wrap the images in a square thumbnail
so that both (height > width) images and (width > height) images are shown the same ?

Thanks again,
Arie

Profile
 
 
Posted: 11 March 2009 01:57 PM   [ Ignore ]   [ # 3 ]
Newbie
Rank
Total Posts:  17
Joined  2009-03-09
arie - 11 March 2009 01:48 PM

svampola, thank you so much for a prompt reply, i appreciate the time you took to answer.
I got a lot of information, but one question remains unclear to me :

If i choose to generate HTML on my own, how do i wrap the images in a square thumbnail
so that both (height > width) images and (width > height) images are shown the same ?

Thanks again,
Arie

1. See No.3 of my previous answer.

2. You can make image the same size forcing them with width and height: like this:

img src="path to your image" width="200" height="200" 

BUT: your images will be distorted.

Profile