Single Record, Multiple Image Uploads, Displayed on individual pages

Hi Zip222

One option is to integrate a programs like lightbox or some of it's derivatives into your page.

You can see some examples of my implementations at: http://www.elleschorrphotography.com and http://www.terrerybovich.com

Here's one of the recipes on the topic from my CMSB Cookbook http://www.thecmsbcookbook.com
that describes how to accomplish that.

INTEGRATING LIGHTBOX WITH CMSB

Here’s what 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 tableName 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['tableName'] = '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['tableName'], '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>


Hope that gives you an idea or two.

Best,

Jerry Kornbluth

Its a good suggestion, and an approach I am familiar with. I am considering its but its really kind of a last resort, as well as a jquery slideshow.

Hi zip222,

Yes, you can pull this off with a little bit of PHP.

Your thumbnail page can be a simple detail page with a small change: instead of linking directly to the big image, you'll want to link to another script (which we'll write below) with both the record number and the number of the image.

Let's assume that your section is called "myGallery" and your upload field is called "uploads".

To do this, create a new detail viewer and replace the "STEP 2a" code with this:

<?php $count = 0 ?>
<?php foreach ($myGalleryRecord['uploads'] as $upload): ?>
<?php if ($upload['hasThumbnail']): ?>
<a href="imageDetail.php?image=<?php echo $count ?>&num=<?php echo $myGalleryRecord['num'] ?>">
<img src="<?php echo $upload['thumbUrlPath'] ?>" width="<?php echo $upload['thumbWidth'] ?>" height="<?php echo $upload['thumbHeight'] ?>" alt="" />
</a><br/>
<?php endif ?>
<?php $count++ ?>
<?php endforeach ?>

The imageDetail.php page will need to load the correct record, select the requested image out of its uploads, then optionally display prev and next links:

<?php header('Content-type: text/html; charset=utf-8'); ?>
<?php

require_once "/your/path/to/cmsAdmin/lib/viewer_functions.php";

list($myGalleryRecords,) = getRecords(array(
'tableName' => 'myGallery',
'where' => whereRecordNumberInUrl(1),
'limit' => '1',
));
$myGalleryRecord = @$myGalleryRecords[0]; // get first record

// show error message if no matching record is found
if (!$myGalleryRecord) {
header("HTTP/1.0 404 Not Found");
print "Record not found!";
exit;
}

// find requested image
$images = $myGalleryRecord['uploads'];
$image_index = (int)@$_REQUEST['image'];
$image = @$images[ $image_index ];

// show error message if image is not found
if (!$image) {
header("HTTP/1.0 404 Not Found");
print "Image not found!";
exit;
}
?>

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

<?php if ($image_index > 0): ?>
<a href="?image=<?php echo $image_index - 1 ?>&num=<?php echo htmlspecialchars(@$_REQUEST['num']) ?>">&lt;&lt; prev</a><br />
<?php endif ?>

<?php if ($image_index < sizeof($images)-1): ?>
<a href="?image=<?php echo $image_index + 1 ?>&num=<?php echo htmlspecialchars(@$_REQUEST['num']) ?>">next &gt;&gt;</a><br />
<?php endif ?>

I hope this helps. Please let me know if you have any questions.

This is great, and very easy to implement. One follow up question:

How can I modify the "prev/next" part to create an endless loop through the images, meaning...

If the current image is the first image then I want the "previous" link to go to the last image.

And if the current image is the last image, then I want the "next" link to go to the first image.

I know that I need to add else statements, but I am not sure what the code inside of them should be.

thanks!

Hi zip222,

You're right about the else statements. :)

Try this:

<?php if ($image_index > 0): ?>
<a href="?image=<?php echo $image_index - 1 ?>&num=<?php echo htmlspecialchars(@$_REQUEST['num']) ?>">&lt;&lt; prev</a><br />
<?php else: ?>
<a href="?image=<?php echo sizeof($images)-1 ?>&num=<?php echo htmlspecialchars(@$_REQUEST['num']) ?>">&lt;&lt; prev</a><br />
<?php endif ?>

<?php if ($image_index < sizeof($images)-1): ?>
<a href="?image=<?php echo $image_index + 1 ?>&num=<?php echo htmlspecialchars(@$_REQUEST['num']) ?>">next &gt;&gt;</a><br />
<?php else: ?>
<a href="?image=0&num=<?php echo htmlspecialchars(@$_REQUEST['num']) ?>">next &gt;&gt;</a><br />
<?php endif ?>

I hope this helps. Please let me know if you have any questions.

Chris,

I would like to change this a little if possible. I need "Single Record on List page, links to display of Multiple Image Uploads on another List page." So I end up with code to "Show x 'uploads' per page with prev & next page links."

Can the php above be pushed this far?

Hi markr,

I'm not certain I understand completely what it is you want. Can you be more explicit?

I'm using a multi-record section for photo albums. Each photo album record has a title field, descrip field, and an uplaod field with, let's say, 100 images.

The listPage shows the album links.

The detailPage shows the individual album content including all 100 images.

Now, I am hoping to have the listPage link to a another listPage that only shows 20 images at a time with prev/next page links.

Hi,

You could try something like this:

<?php
$photosPerPage = 20;
$page = @$_REQUEST['page'] ? $_REQUEST['page'] : 1;
$firstIndex = ($page - 1) * $photosPerPage;
$lastIndex = min($firstIndex + $photosPerPage, sizeof($photo_galleryRecord['images'])) - 1;
foreach (range($firstIndex, $lastIndex) as $photoIndex):
$upload = @$photo_galleryRecord['images'][$photoIndex]
?>
<?php if ($upload['hasThumbnail']): ?>
<a href="<?php echo $upload['urlPath'] ?>" title="<?php echo $upload['info2'] ?>">
<img src="<?php echo $upload['thumbUrlPath'] ?>" width="<?php echo $upload['thumbWidth'] ?>" height="<?php echo $upload['thumbHeight'] ?>" alt="<?php echo $upload['info1'] ?>" style="float: left; padding: 5px;" border="0" />
</a>
<?php endif ?>
<?php endforeach; ?>

<p style="font-size: 14px;">
<?php if ($firstIndex > 0): ?>
<a href="?page=<?php echo $page-1; ?>">previous photos</a> &nbsp;&nbsp;&nbsp;
<?php endif ?>

<?php if ($lastIndex < sizeof($photo_galleryRecord['images']) - 1): ?>
<a href="?page=<?php echo $page+1; ?>">next photos</a><br />
<?php endif ?>
</p>

You would change the value of $photosPerPage to whatever value you want displayed at a time. You would also have to change $photo_galleryRecord['images'] to match the record name and field name that you're using.

Hope this helps