gallery

8 posts by 2 authors in: Forums > CMS Builder
Last Post: September 13, 2010   (RSS)

By 5fish - September 9, 2010

Q1/ Trying to create a gallery which when clicking on a List Page Viewer page thumbnail image will give me a page with the original image on the Detail Page Viewer. I am new to this ... I have the List Page Viewer page created but the thumbnails seem permanent!

http://www.petersmithconstruction.ca/gallerylist.php

Q2/ Would like to have thumbnails in a table format and be able to link from one List Page Viewer page to a 2nd and so on.

Re: [5fish] gallery

By Chris - September 9, 2010

Hi 5fish,

So you'd like to have your list viewer show a 5x5 table of thumbnails, one from each record, and next/prev buttons to get to the next 25 records? Also, you want the full-sized images to show on the detail pages? Do I have this right?

Please post the complete PHP source code of both your list and detail pages and I'll show you what to change to get this happening. :)
All the best,
Chris

Re: [chris] gallery

By 5fish - September 13, 2010

Thank you Chris
Both docs pasted below
======================

<title></title>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />
<style type="text/css">
body { font-family: arial; }
.instructions { border: 3px solid #000; background-color: #EEE; padding: 10px; text-align: left; margin: 25px}
</style>
</head>
<body>

<!-- INSTRUCTIONS -->
<div class="instructions">
<b>Sample List Viewer - Instructions:</b>
<ol>
<?php ?>
<li><b>Remove any fields you don't want displayed.</b> (Most list pages only have title and link fields.)</li>
<li>Rearrange remaining fields to suit your needs.</li>
<li>Copy and paste code into previously designed page (or add design to this page).</li>
</ol>
</div>
<!-- /INSTRUCTIONS -->

<!-- STEP2: Display Records (Paste this where you want your records to be listed) -->
<h1>Gallery - List Page Viewer</h1>
<?php foreach ($galleryRecords as $record): ?>
Record Number: <?php echo $record['num'] ?><br/>
Title: <?php echo $record['title'] ?><br/>
Content: <?php echo $record['content'] ?><br/>
Photo Description: <?php echo $record['photo_description'] ?><br/>
_link : <a href="<?php echo $record['_link'] ?>"><?php echo $record['_link'] ?></a><br/>


<!-- STEP 2a: Display Uploads for field 'photo_image' (Paste this anywhere inside STEP2 to display uploads) -->
<!-- Upload Fields: num, createdTime, tableName, fieldName, recordNum, preSaveTempId, filePath, filename, extension, thumbFilePath, isImage, hasThumbnail, urlPath, width, height, thumbUrlPath, thumbWidth, thumbHeight, info1, info2, info3, info4, info5 -->
<?php foreach ($record['photo_image'] as $upload): ?>
<?php if ($upload['hasThumbnail']): ?>
<img src="<?php echo $upload['thumbUrlPath'] ?>" width="<?php echo $upload['thumbWidth'] ?>" height="<?php echo $upload['thumbHeight'] ?>" alt="" /><br/>

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

<?php else: ?>
<a href="<?php echo $upload['urlPath'] ?>">Download <?php echo $upload['filename'] ?></a><br/>

<?php endif ?>
<?php endforeach ?>
<!-- STEP2a: /Display Uploads -->



<!-- STEP 2a: Display Uploads for field 'photos' (Paste this anywhere inside STEP2 to display uploads) -->
<!-- Upload Fields: num, createdTime, tableName, fieldName, recordNum, preSaveTempId, filePath, filename, extension, thumbFilePath, isImage, hasThumbnail, urlPath, width, height, thumbUrlPath, thumbWidth, thumbHeight, info1, info2, info3, info4, info5 -->
<?php foreach ($record['photos'] as $upload): ?>
<?php if ($upload['hasThumbnail']): ?>
<img src="<?php echo $upload['thumbUrlPath'] ?>" width="<?php echo $upload['thumbWidth'] ?>" height="<?php echo $upload['thumbHeight'] ?>" alt="" /><br/>

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

<?php else: ?>
<a href="<?php echo $upload['urlPath'] ?>">Download <?php echo $upload['filename'] ?></a><br/>

<?php endif ?>
<?php endforeach ?>
<!-- STEP2a: /Display Uploads -->


<hr/>
<?php endforeach ?>

<?php if (!$galleryRecords): ?>
No records were found!<br/><br/>
<?php endif ?>
<!-- /STEP2: Display Records -->

</body>
</html>

==================================

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


// load viewer library
$libraryPath = 'cmsAdmin/lib/viewer_functions.php';
$dirsToCheck = array('/home/.sites/145/site102/web/','','../','../../','../../../');
foreach ($dirsToCheck as $dir) { if (@include_once("$dir$libraryPath")) { break; }}
if (!function_exists('getRecords')) { die("Couldn't load viewer library, check filepath in sourcecode."); }

// load records
list($galleryRecords, $galleryMetaData) = getRecords(array(
'tableName' => 'gallery',
'where' => whereRecordNumberInUrl(1),
'limit' => '1',
));
$galleryRecord = @$galleryRecords[0]; // get first record

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

?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />
<style type="text/css">
body { font-family: arial; }
.instructions { border: 3px solid #000; background-color: #EEE; padding: 10px; text-align: left; margin: 25px}
</style>
</head>
<body>

<!-- INSTRUCTIONS -->
<div class="instructions">
<b>Sample Detail Page Viewer - Instructions:</b>
<ol>
<?php ?>
<li><b>Remove any fields you don't want displayed.</b></li>
<li>Rearrange remaining fields to suit your needs.</li>
<li>Copy and paste code into previously designed page (or add design to this page).</li>
</ol>
</div>
<!-- /INSTRUCTIONS -->

<!-- STEP2: Display Records (Paste this where you want your records to be listed) -->
<h1>Gallery - Detail Page Viewer</h1>
Record Number: <?php echo $galleryRecord['num'] ?><br/>
Title: <?php echo $galleryRecord['title'] ?><br/>
Content: <?php echo $galleryRecord['content'] ?><br/>
Photo Description: <?php echo $galleryRecord['photo_description'] ?><br/>
_link : <a href="<?php echo $galleryRecord['_link'] ?>"><?php echo $galleryRecord['_link'] ?></a><br/>


<!-- STEP 2a: Display Uploads for field 'photo_image' (Paste this anywhere inside STEP2 to display uploads) -->
<!-- Upload Fields: num, createdTime, tableName, fieldName, recordNum, preSaveTempId, filePath, filename, extension, thumbFilePath, isImage, hasThumbnail, urlPath, width, height, thumbUrlPath, thumbWidth, thumbHeight, info1, info2, info3, info4, info5 -->
<?php foreach ($galleryRecord['photo_image'] as $upload): ?>
<?php if ($upload['hasThumbnail']): ?>
<img src="<?php echo $upload['thumbUrlPath'] ?>" width="<?php echo $upload['thumbWidth'] ?>" height="<?php echo $upload['thumbHeight'] ?>" alt="" /><br/>

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

<?php else: ?>
<a href="<?php echo $upload['urlPath'] ?>">Download <?php echo $upload['filename'] ?></a><br/>

<?php endif ?>
<?php endforeach ?>
<!-- STEP2a: /Display Uploads -->



<!-- STEP 2a: Display Uploads for field 'photos' (Paste this anywhere inside STEP2 to display uploads) -->
<!-- Upload Fields: num, createdTime, tableName, fieldName, recordNum, preSaveTempId, filePath, filename, extension, thumbFilePath, isImage, hasThumbnail, urlPath, width, height, thumbUrlPath, thumbWidth, thumbHeight, info1, info2, info3, info4, info5 -->
<?php foreach ($galleryRecord['photos'] as $upload): ?>
<?php if ($upload['hasThumbnail']): ?>
<img src="<?php echo $upload['thumbUrlPath'] ?>" width="<?php echo $upload['thumbWidth'] ?>" height="<?php echo $upload['thumbHeight'] ?>" alt="" /><br/>

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

<?php else: ?>
<a href="<?php echo $upload['urlPath'] ?>">Download <?php echo $upload['filename'] ?></a><br/>

<?php endif ?>
<?php endforeach ?>
<!-- STEP2a: /Display Uploads -->


<hr/>
<?php if (!$galleryRecord): ?>
No record found!<br/><br/>
<?php endif ?>
<!-- /STEP2: Display Records -->

<a href="<?php echo $galleryMetaData['_listPage']; ?>">&lt;&lt; Back to list page</a> -
<a href="mailto:?subject=<?php echo thisPageUrl() ?>">Email this Page</a>
</body>
</html>

Re: [chris] gallery

By 5fish - September 13, 2010

Exactly! Thank you!

Re: [5fish] gallery

By Chris - September 13, 2010

Hi 5fish,

At the top of your List viewer, in STEP 1, you'll want to add the line in red below:

// load records
list($galleryRecords, $galleryMetaData) = getRecords(array(
'tableName' => 'gallery',
'perPage' => 25,
));


Next, you can use this code in place of your STEP 2:

<!-- STEP2: Display Records (Paste this where you want your records to be listed) -->
<h1>Gallery - List Page Viewer</h1>
<table>
<tr>
<?php $count = 0 ?>
<?php foreach ($galleryRecords as $record): ?>

<?php if ($count++ % 5 == 0): ?></tr><tr><?php endif ?>

<!-- STEP 2a: Display Uploads for field 'photo_image' (Paste this anywhere inside STEP2 to display uploads) -->
<!-- Upload Fields: num, createdTime, tableName, fieldName, recordNum, preSaveTempId, filePath, filename, extension, thumbFilePath, isImage, hasThumbnail, urlPath, width, height, thumbUrlPath, thumbWidth, thumbHeight, info1, info2, info3, info4, info5 -->
<?php foreach ($record['photo_image'] as $upload): ?>
<td>
<a href="<?php echo $record['_link'] ?>">
<img src="<?php echo $upload['thumbUrlPath'] ?>" width="<?php echo $upload['thumbWidth'] ?>" height="<?php echo $upload['thumbHeight'] ?>" alt="" />
</a>
</td>
<?php break ?>
<?php endforeach ?>
<!-- STEP2a: /Display Uploads -->

<?php endforeach ?>
</tr>
</table>
<!-- /STEP2: Display Records -->

<!-- STEP3: Display Page Links (Paste anywhere below "Load Record List") -->
<?php if ($galleryMetaData['prevPage']): ?>
<a href="<?php echo $galleryMetaData['prevPageLink'] ?>">&lt;&lt; prev</a>
<?php else: ?>
&lt;&lt; prev
<?php endif ?>

- page <?php echo $galleryMetaData['page'] ?> of <?php echo $galleryMetaData['totalPages'] ?> -

<?php if ($galleryMetaData['nextPage']): ?>
<a href="<?php echo $galleryMetaData['nextPageLink'] ?>">next &gt;&gt;</a>
<?php else: ?>
next &gt;&gt;
<?php endif ?>
<!-- /STEP3: Display Page Links -->


Finally, on your detail page, replace STEP 2a with:

<!-- STEP 2a: Display Uploads for field 'photo_image' (Paste this anywhere inside STEP2 to display uploads) -->
<!-- Upload Fields: num, createdTime, tableName, fieldName, recordNum, preSaveTempId, filePath, filename, extension, thumbFilePath, isImage, hasThumbnail, urlPath, width, height, thumbUrlPath, thumbWidth, thumbHeight, info1, info2, info3, info4, info5 -->
<?php foreach ($record['photo_image'] as $upload): ?>
<a href="<?php echo $upload['urlPath'] ?>">
<img src="<?php echo $upload['thumbUrlPath'] ?>" width="<?php echo $upload['thumbWidth'] ?>" height="<?php echo $upload['thumbHeight'] ?>" alt="" />
</a>
<?php endforeach ?>
<!-- STEP2a: /Display Uploads -->


I hope this helps! Please let me know if you have any questions.
All the best,
Chris

Re: [5fish] gallery

By Chris - September 13, 2010 - edited: September 13, 2010

Hi 5fish,

The error was my fault. I forgot to change the record variable from $record to $galleryRecord. The code I gave you was meant to show thumbnails again on the detail page, but have them link to full-size images. If you want to have the images display full-size on your detail page, replace STEP 2a on your detail page with this:

<!-- STEP 2a: Display Uploads for field 'photo_image' (Paste this anywhere inside STEP2 to display uploads) -->
<!-- Upload Fields: num, createdTime, tableName, fieldName, recordNum, preSaveTempId, filePath, filename, extension, thumbFilePath, isImage, hasThumbnail, urlPath, width, height, thumbUrlPath, thumbWidth, thumbHeight, info1, info2, info3, info4, info5 -->
<?php foreach ($galleryRecord['photo_image'] as $upload): ?>
<img src="<?php echo $upload['urlPath'] ?>" width="<?php echo $upload['width'] ?>" height="<?php echo $upload['height'] ?>" alt="" /> <br />
<?php endforeach ?>
<!-- STEP2a: /Display Uploads -->


Does that help? Please let me know if you have any questions.
All the best,
Chris

Re: [chris] gallery

By 5fish - September 13, 2010

Awesome! Much appreciated.
Ted