Single Record, Multiple Image Uploads, Displayed on individual pages

10 posts by 5 authors in: Forums > CMS Builder
Last Post: November 24, 2010   (RSS)

By zip222 - March 22, 2010

I have a single record editor that has a multiple image upload field. I would like to display thumbnails of the images on one page, and then each full size image on its own page. I will also need to include previous and next links of the full size image pages that cycle through the images.

Is this feasible?

Re: [gkornbluth] Single Record, Multiple Image Uploads, Displayed on individual pages

By zip222 - March 23, 2010

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.

Re: [zip222] Single Record, Multiple Image Uploads, Displayed on individual pages

By Chris - March 23, 2010

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.
All the best,
Chris

Re: [chris] Single Record, Multiple Image Uploads, Displayed on individual pages

By zip222 - March 27, 2010

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!

Re: [zip222] Single Record, Multiple Image Uploads, Displayed on individual pages

By Chris - March 29, 2010 - edited: November 22, 2010

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.
All the best,
Chris

Re: [zip222] Single Record, Multiple Image Uploads, Displayed on individual pages

By markr - November 22, 2010

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?

Re: [markr] Single Record, Multiple Image Uploads, Displayed on individual pages

By Chris - November 22, 2010

Hi markr,

I'm not certain I understand completely what it is you want. Can you be more explicit?
All the best,
Chris

Re: [chris] Single Record, Multiple Image Uploads, Displayed on individual pages

By markr - November 23, 2010

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.

Re: [markr] Single Record, Multiple Image Uploads, Displayed on individual pages

By Jason - November 24, 2010 - edited: November 24, 2010

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
---------------------------------------------------
Jason Sauchuk - Project Manager
interactivetools.com

Hire me! Save time by getting our experts to help with your project.
http://www.interactivetools.com/consulting/