Placing varied height thumbnails in a straight row

joepinelli

My thumbnails are a constant width, but vary in height. When a shorter image appears on a row, on the row that proceeds it the image below that short image will push up and fill the void that is created. (I'm hoping that makes sense).

So to get around this I used the following code:

`
<?php while (next_album()): ?>

(Code to call thumb)

<?php next_album ?> (Code to call thumb)

<?php next_album ?> (Code to call thumb)

<?php endwhile; ?>

`
The above code works in calling the images in a straight row, but I'm afraid it might be causing another problem on my page. My question is should I be using if/else statements every subsequent time I call the thumbnail? Is there a problem with calling `next_album` if I've run out of albums to call? I'm thinking something like `if (next_album()) {Code to call thumb;} else {endwhile;}` Or am I over complicating this and Zenphoto has a built in option for this kind of thing?

Thanks

sbillard

Well there is a function for creating a thumb within a specific container. See `printCustomAlbumThumbMaxSpace()`

joepinelli

I tried working with `printCustomAlbumThumbMaxSpace()' and it doesn't seem to be quite what I'm looking for.

`
<?php while (next_album()): ?>

<?php set_context(ZP_IMAGE); $_zp_current_image = $_zp_current_album->getImage(0); if (!$_zp_current_image) continue; ?> getImageLink(); ?>"onclick="return GB_showCenter('', '<?php echo htmlspecialchars(getImageLinkURL());?>', 650, 685)"><?php printCustomAlbumThumbImage(null,null,185); ?> <?php printAlbumTitle(); ?> <?php set_context(ZP_ALBUM); ?>

<?php if (next_album(false)) {echo"";} else { ?> <?php next_album(); set_context(ZP_IMAGE); $_zp_current_image = $_zp_current_album->getImage(0); if (!$_zp_current_image) continue; ?> getImageLink(); ?>"onclick="return GB_showCenter('', '<?php echo htmlspecialchars(getImageLinkURL());?>', 650, 685)"><?php printCustomAlbumThumbImage(null,null,185); ?> <?php printAlbumTitle(); ?> <?php set_context(ZP_ALBUM); ?> <?php } ?>

<?php if (next_album(false)) {echo"";} else { ?> <?php next_album(); set_context(ZP_IMAGE); $_zp_current_image = $_zp_current_album->getImage(0); if (!$_zp_current_image) continue; ?> getImageLink(); ?>"onclick="return GB_showCenter('', '<?php echo htmlspecialchars(getImageLinkURL());?>', 650, 685)"><?php printCustomAlbumThumbImage(null,null,185); ?> <?php printAlbumTitle(); ?> <?php set_context(ZP_ALBUM); ?> <?php } ?>

<?php endwhile; ?>
`
I'm finding that if either of the last 2 statements where I call `next_album` aren't satisfied it creates errors in the way the footer of my page renders. This is why I've used ifelse statements. Except the code above will skip albums and create duplicate thumbs. Since I'm posting my code I should mention that my thumbnails are linking to the first image of a sub-album. And I do use a javascript, but that was and still is functioning as expected.

Thanks

acrylian

I admit I probably do not completly understand what you are actually trying to do and what the issue is.... Maybe a link would help with that.

joepinelli

sure, here is an example: http://www.peridotsavannah.com/products/index.php?album=seating. There should be 7 thumbnails in this album, but because of my funky ifelse coding it's messed up.

Basically, I'm trying to get each row in it's own table or div so that the rows sit flush on one another. Previously, I had rows that looked like steps due to the inconsistent height of my thumbnails. I was able to get around this by setting my thumbnails div class to have a large, all-encompassing height. But by assigning such a large height, to compensate for all possible thumbnail heights, I would get huge spaces between my thumbnails.

acrylian

Ok. Sorry then, a container div like you did would be the only thing that I would have suggested. If the images are that different you might use a background color for that container div to "equalize" the space a little optically, but of course that is a design decision.

joepinelli

`
<?php while (next_album()): ?>

<?php set_context(ZP_IMAGE); $_zp_current_image = $_zp_current_album->getImage(0); if (!$_zp_current_image) continue; ?> getImageLink(); ?>"onclick="return GB_showCenter('', '<?php echo htmlspecialchars(getImageLinkURL());?>', 650, 685)"><?php printCustomAlbumThumbImage(null,null,185); ?> <?php printAlbumTitle(); ?> <?php set_context(ZP_ALBUM); ?>

<?php if (empty($_zp_albums)) {echo"";} else { ?> <?php next_album(); set_context(ZP_IMAGE); $_zp_current_image = $_zp_current_album->getImage(0); if (!$_zp_current_image) continue; ?> getImageLink(); ?>"onclick="return GB_showCenter('', '<?php echo htmlspecialchars(getImageLinkURL());?>', 650, 685)"><?php printCustomAlbumThumbImage(null,null,185); ?> <?php printAlbumTitle(); ?> <?php set_context(ZP_ALBUM); ?> <?php } ?>

<?php if (empty($_zp_albums)) {echo"";} else { ?> <?php next_album(); set_context(ZP_IMAGE); $_zp_current_image = $_zp_current_album->getImage(0); if (!$_zp_current_image) continue; ?> getImageLink(); ?>"onclick="return GB_showCenter('', '<?php echo htmlspecialchars(getImageLinkURL());?>', 650, 685)"><?php printCustomAlbumThumbImage(null,null,185); ?> <?php printAlbumTitle(); ?> <?php set_context(ZP_ALBUM); ?> <?php } ?>

`
I changed `<?php if (next_album(false)) {echo"";} else { ?>` to `<?php if (empty($_zp_albums)) {echo"";} else { ?>` and it works. Now if I could only understand why it works . The rows are now on tables. This stops the images on the next row below from being out of alignment.

Thank you both for your help.