PREVIOUS/NEXT PAGE LINKS ONLY IF DESIRED IMAGES PER PAGE COUNT IS EXCEEDED - Feb 19th, 2013


IF UPLOAD FIELDS ARE IN SEPARATE RECORDS

I wanted to display previous and next links on a page but only if there were more than a user specified number of image
records available.

First I created a text field called thumbnails_per_page in the single record editor that I call common_information,
where the client could enter the maximum amount of images to allow per page.

Then, at the top of the viewer page I defined a variable called $maximages, and added a ‘perPage’ to the “list
records” call using that variable, like this:



$maximages = ($common_informationRecord['thumbnails_per_page']);
list($portfolio_imagesRecords, $portfolio_imagesMetaData) = getRecords(array(
'Table name' => 'portfolio_images',
'perPage' => $maximages,

));



NOTE: the variable definition has to be outside the list records call and there are no single or double quotes around
$maximages in 'perPage' => $maximages, or the variable won’t work.

I also found it necessary to remove the:



'where' => whereRecordNumberInUrl(1),



from the “list records” call that listed the common_information records.

To generate the Prevous/Next links I used this code in the body of the page:



<?php if ($portfolio_imagesMetaData['totalPages'] > 1): ?>

This is Page <?php echo $portfolio_imagesMetaData['page'] ?> of <?php echo $portfolio_imagesMetaData['totalPages'] ?>

<?php if ($portfolio_imagesMetaData['nextPage']): ?>
<br /><a href="<?php echo $portfolio_imagesMetaData['nextPageLink'] ?>">Click Here to See More of My Work.

</a>

<?php endif ?>
<?php if ($portfolio_imagesMetaData['prevPage']): ?>
<br /><a href="<?php echo $portfolio_imagesMetaData['prevPageLink'] ?>">Click Here to See My Previous Portfolio
Page.</a>

<?php endif ?>
<?php endif ?>



IF ALL UPLOADS ARE IN A SINGLE UPLOAD FIELD IN THE SAME RECORD
If you want to use the same previous/next concept in a detail page where all of your uploads are in a single upload
field, the concept changes a bit since the perPage feature only works with records, not uploads within a record.
(Pointed out by Chris Waddell from Interactive Tools)

Here’s my implementation of his recommendation from http://www.interactivetools.com/forum/gforum.cgi?post=75239 on
paginating the display of uploaded images:

The plain vanilla implementation described in the post, for 6 images per page from a table called your_table is:



<table>
<tr>
<?php
$photosPerPage = 6;
$photoPage = @$_REQUEST['photoPage'] ? $_REQUEST['photoPage'] - 1 : 0;
$firstIndex = $photoPage * $photosPerPage;
if ($firstIndex > sizeof($your_tableRecord['images'])-1 || $firstIndex < 0) { $firstIndex = 0; $photoPage = 0; }
$lastIndex = min($firstIndex + $photosPerPage, sizeof($your_tableRecord['images'])) - 1;
foreach (range($firstIndex, $lastIndex) as $photoIndex):
$upload = $your_tableRecord['images'][$photoIndex]
?>
<td align="center"><div class="pic"><a href="<?php echo $upload['urlPath'] ?>" rel="enlargeimage::click"
rev="photoload"><img src="<?php echo $upload['thumbUrlPath'] ?>" alt='' width="<?php echo $upload['thumbWidth'] ?>"
height="<?php echo $upload['thumbHeight'] ?>" align="middle" class="displayed" /></a></div></td>
<?php $maxCols=3; if (@++$count % $maxCols == 0): ?>
</tr><tr>
<?php endif ?>
<?php endforeach; ?>
</tr></table>
<p><br />
<form action="?num=<?php echo $your_tableRecord['num'] ?>" method="post">
<?php if ($firstIndex > 0): ?>
<a href="?photoPage=<?php echo $photoPage; ?>&=<?php echo $your_tableRecord['num'] ?>">&lt;&lt; Click/Tap for previous
page</a>
<?php endif ?>
Page <input type="text" name="photoPage" value="<?php echo($photoPage + 1); ?>" style="width: 25px;" /><input
type="submit" value="Go" /> of <?php echo(ceil(sizeof($your_tableRecord['images']) / $photosPerPage)); ?>
<?php if ($lastIndex < sizeof($your_tableRecord['images']) - 1): ?>
<a href="?photoPage=<?php echo $photoPage+2; ?>&=<?php echo $your_tableRecord['num'] ?>">Click/Tap for next page
&gt;&gt;</a><br />
<?php endif ?>
</form>


I was implementing this on a detail page that also uses Dynamic Drive’s Thumbnail Viewer II (described in another
recipe) to display a grid of thumbnail images and an enlarged image on thumbnail rollover, so it may look a bit
different then the code you’ll end up with.

I also used a number of variables in a table called “common_information” to allow my client to modify the number of
images per page, the number of columns and rows displayed and some of the messages required for effective operation of
the pages.

At the top of the page:



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

require_once "/path_to_your/cmsAdmin/lib/viewer_functions.php";


list($common_informationRecords, $common_informationMetaData) = getRecords(array(
'tableName' => 'common_information',
'allowSearch'=> false,
'limit' => '1',
));
$common_informationRecord = @$common_informationRecords[0]; // get first record


// load records
list($bookRecords, $bookMetaData) = getRecords(array(
'tableName' => 'book',
'where' => whereRecordNumberInUrl(1),
'limit' => '1',

));
$bookRecord = @$bookRecords[0]; // get first record


?>



Note the 'allowSearch'=> false, which keeps the common_information getRecords call from searching on the record number
that’s appended to the URL when you go from the list page to the detail page.

And in the body:



<table width="975" border="0" align="center" cellpadding="5">

<tr>
<td width="474" valign="top"><div align="center"><br /><?php if ($bookRecord['images']): ?><span
class="body-text-bold-9">
<?php echo $common_informationRecord['book_image_thumbnails_instructions'] ?></span><?php endif ?> <br /> <br />
</div>
</td></tr></table>

<table width="950" border="0" align="center">
<tr>
<td valign="top">
<?php
$photosPerPage = $common_informationRecord['images_per_book_page'];
$photoPage = @$_REQUEST['photoPage'] ? $_REQUEST['photoPage'] - 1 : 0;
$firstIndex = $photoPage * $photosPerPage;
$lastIndex = min($firstIndex + $photosPerPage, sizeof($bookRecord['images'])) - 1;
?>

<?php if ((ceil(sizeof($bookRecord['images']) / $photosPerPage)) > 1): ?><form action="?num=<?php echo
$bookRecord['num'] ?>" method="post">
<?php if ($firstIndex > 0): ?>
<a href="?photoPage=<?php echo $photoPage; ?>&=<?php echo $bookRecord['num'] ?>"><?php echo
$common_informationRecord['previous_message'] ?></a>
<?php endif ?>

<span class="body-text-bold-9">Page <input type="text" name="photoPage" value="<?php echo($photoPage + 1); ?>"
style="width: 25px;" /> of <?php echo(ceil(sizeof($bookRecord['images']) / $photosPerPage)); ?></span>

<?php if ($lastIndex < sizeof($bookRecord['images']) - 1): ?> <input type="submit" value="Go" />
<!-- NOTE: You can use <input type="submit" value="" /> above if you want the word Go to disappear -->
<a href="?photoPage=<?php echo $photoPage+2; ?>&=<?php echo $bookRecord['num'] ?>"><?php echo
$common_informationRecord['next_message'] ?></a><br />
<?php endif ?>
</form>
<?php endif ?>

<table border="0" cellspacing="3" cellpadding="3">
<tr>


<?php

if ($firstIndex > sizeof($bookRecord['images'])-1 || $firstIndex < 0) { $firstIndex = 0; $photoPage = 0; }

foreach (range($firstIndex, $lastIndex) as $photoIndex):
@$upload = $bookRecord['images'][$photoIndex]
?>


<td align="left" valign="bottom">

<a title="<span class=&quot;body-text-9&quot;><?php echo $upload['info1'] ?></span>" href="<?php echo
$upload['thumbUrlPath2'] ?>""

rel="enlargeimage"

rev="targetdiv:loadarea" > <img src="<?php echo $upload['thumbUrlPath'] ?>" alt="" width="<?php echo
$upload['thumbWidth'] ?>" height="<?php echo $upload['thumbHeight']?>" border="0" style="margin-bottom: 5px" /> </a>

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

<p></td>
<td width="400"><table border="0" cellpadding="5" cellspacing="0" width="25%">

<tr>
<td align="left" valign="top" ><div align="left">


<div align="center" id="loadarea" style="width: 400px; height: 500px;">

<?php $upload = @$bookRecord['images'][$firstIndex] ?>

<img src="<?php echo $upload['thumbUrlPath2'] ?>" alt="" border="0" /> <br /> <br />


</div> </td>

</tr>
</table></td>
</tr>
</table>


NOTE: if you want the page number to be in a transparent box instead of the default white box, add this code to your css
style sheet.


input, select { background-color:transparent; border:none; }



The materials on this web site have been created for use with CMS Builder content management software. CMS Builder software is published and licensed for use by InteractiveTools.com. Please contact Interactive Tools for information on the downloading of the software or the purchasing of licenses.


Terms of Service