Two column image layout

Hi Ginslinger,

What is it you would like the layout to do?

Jerry Kornbluth

Just a simple image viewer with Lightbox. I can get the two column working but not sure that is right as I get a blank space.

As shown the very top image needs to be larger (320) and then smaller images display two wide below.

could you post the actual code that you're using in the viewer including the lightbox code?

Thanks,

Jerry

Hi Ginslinger,

Hi,

Sorry I can't devote a lot of time to this right now, but without putting it up your page and actually testing it, I see a few things a few things that might be contributing to the issue.

First, you probably don’t need the:
<td> <a href="<?php echo $upload['urlPath'] ?>">Download <?php echo $upload['filename'] ?></a><br/>
and the extra if statement, since these images are all thumbnails.

Second, I think that the format of the table elements might be getting you in trouble. Where you have the foreach loops and their relationship to the table elements is extremely important, so I’d play with that. Also think about the

You might want to mock up an HTML page that works the way you want it to and then decide what PHP code you need to pull the information from your database.

Here’s are 2 recipes from my CMSB Cookbook http://www.thecmsbcookbook.com that might shed some light on the problem.

Good luck,

Jerry Kornbluth

LIMITING THE AMOUNT OF COLUMNS IN A SINGLE ROW IMAGE DISPLAY

The CSS way is to have each image in a div that has something like: style="float: left; width: 200px". This will make them flow from left to right and wrap when they run out of space (you can put them inside a bigger fixed width container).

Or with a table you can have one table cell per image and insert a closing and opening TR every X images. Here's a code snippet that does that:

<?php $maxCols=2; if (@++$count % $maxCols == 0): ?></tr><tr><?php endif; ?>

Which is just a way of saying "Every 2 images insert "</tr><tr>"".

Here’s a single row example using the thumbnail2 image as a link to a detail page, separate Title and Subtitle fields, a hidden border for IE and a fixed height for the image cell so that everything lines up nicely.

<table width="100%" border="0" cellpadding="5">
<tr>
<?php foreach ($your_sectionRecords as $record): ?><?php foreach ($record['image'] as $upload): ?>
<td align=”center” height="350" valign="bottom">
<a href="<?php echo $record['_link'] ?>"><img src="<?php echo $upload['thumbUrlPath2'] ?>" width="<?php echo $upload['thumbWidth2'] ?>" height="<?php echo $upload['thumbHeight2'] ?>" alt="" style="border:hidden" /><br /><div align="center" class="medium-title"><?php echo $record['title'] ?></div>
<div align="center" class="medium-text"><?php echo $record['sub_title'] ?></div></a>
</td>
<?php $maxCols=2; if (@++$count % $maxCols == 0): ?></tr><tr><?php endif; ?>
<?php endforeach ?><?php endforeach ?>
</tr>
</table>

And this one about lightbox implementation:

INTEGRATING LIGHTBOX WITH CMSB


Here’s the basic code that lightbox requires:
<?xml version="1.0" encoding="UTF-8" ?>
<gallery>
<album lgPath="album1/images/" tnPath="album1/thumb/" title="Album title" description="Album description" tn="album1/preview.jpg">
<img src="1.jpg" title="" caption="" link="" target="_blank" pause="" />
<img src="1.jpg" title="" caption="" link="" target="_blank" pause="" />
<img src="1.jpg" title="" caption="" link="" target="_blank" pause="" />
<img src="1.jpg" title="" caption="" link="" target="_blank" pause="" />
<img src="1.jpg" title="" caption="" link="" target="_blank" pause="" />
</album>
</gallery>
Where:
lgPath = path to the large version of the photos
tnPath = path to the thumbnails (or preview photo in case of video)
caption = this would show on mouseover of the image
link = if the image is clicked it would follow this link
__________________________________________________________

The one thing CMS Builder doesn't do is put it's thumbnails in a different directory. It puts them in the same directory and adds a _thumb extension. I've just used the main upload dir for both lgPath and tnPath.

Here's some code for a page viewer. Ideally you'd have a list viewer that would list albums and then you'd click through to this one to display an album. You could also direct link to a specific album. This one assumes you have some fields defined called: title, and description. Also you'll need to change the Table name and the require_once path to match your server.

<?PHP echo "<?xml version='1.0' encoding='UTF-8'?>\n";
require_once "../lib/viewer_functions.php";
$options = array(); $options['Table name'] = 'news';
$options['recordNum'] = '';
$options['where'] = '';
$record = getRecord($options);
?>
<gallery>
<album lgPath="<?PHP echo $SETTINGS['uploadUrl']; ?>
tnPath="<?PHP echo $SETTINGS['uploadUrl']; ?>"
title="<?PHP echo htmlspecialchars($record['title']); ?>"
description="<?PHP echo htmlspecialchars($record['description']); ?>" tn="album1/preview.jpg">

<?PHP if ($record): ?>
<?PHP foreach (getUploads($options['Table name'], 'uploads', $record['num']) as $upload): ?>
<img src="<?PHP echo htmlspecialchars($upload['filename']); ?>"
title="<?PHP echo htmlspecialchars($upload['info1']); ?>"
caption="<?PHP echo htmlspecialchars($upload['info2']); ?>"
link="<?PHP echo $upload['urlPath'] ?>"
target="_blank"
pause="" />
<?PHP endforeach ?>
<?PHP endif ?>
</album>
</gallery>

Thanks for the help on this. I have the images loading in a two wide column with light box working OK.

What I need to do is have a single image load above the columns which is 320 pixels wide. Twice as wide as the lower images in columns.

Here is a test page with two columns working http://www.diecast-pub.com/model_list/gallery_test.php

Here is a link to an example of what I am trying to do. Note the larger image on top followed by two columns of images.

http://www.schmidtautocenter.com/listing.php?Dodge-173

Below is the current code being used for the two columns.

<b>Click for a larger view!
</b>
<table border="1"><tr> <td colspan="2">Image 320 Pixel wide here</td></tr>
<tr> <?php foreach ($articlesRecord['photos'] as $upload): ?>
<?php if ($upload['hasThumbnail']): ?>


<td>
<a href="<?php echo $upload['urlPath'] ?>" rel="lightbox[roadtrip]"><img src="<?php echo $upload['thumbUrlPath'] ?>" width="<?php echo $upload['thumbWidth'] ?>" height="<?php echo $upload['thumbHeight'] ?> <img src="<?php echo $upload['thumbUrlPath'] ?>" width="<?php echo $upload['thumbWidth'] ?>"
height="<?php echo $upload['thumbHeight'] ?>" alt="<?php echo $upload[info1] ?>" title="<?php echo $upload[info2] ?>"/> </a><br/>


</td>
<?php $maxCols=2; if (@++$count % $maxCols == 0): ?></tr>
<tr><?php endif; ?>
<?php elseif ($upload['isImage']): ?>

<img src="<?php echo $upload['urlPath'] ?>" width="<?php echo $upload['width'] ?>" height="<?php echo $upload['height'] ?>" alt="" /><br/>


<?php endif ?>
<?php endforeach ?>
</tr>
</table>

Just thinking out loud...

In the Schmidt example they're using an all CSS format.

However, looking at the Schmidt source code, they're using a different (larger) thumbnail for the image in the top box.

You can set up 2 thumbnails as well. The first thumbnail as 160px wide and thumbnail2 as 320px wide.

In your viewer, you might accomplish your goal by using a <?PHP break ?> to only show the first image and then display it as thumbnail2 in the top row (span 2 columns) instead of the smaller thumbnail.

For the others, you might use an "if' statement to begin looping through all images greater than image "0" (the first image) and display those using the smaller thumbnail.

Hope that helps

Jerry Kornbluth