Image Display Dilemma (revised)
3 posts by 2 authors in: Forums > CMS Builder
Last Post: October 6, 2008 (RSS)
My core question is: How can I identify a single image out of a single record - multi image upload so that I can display it, and it's "info" fields alone on a page?
As background, and for those who might want to implement the Image Thumbnail Viewer that I used ...
I’ve set up a page for a client www.janstein.com/photography.php that displays the contents of a single record - multi image upload field in 3 columns. The page uses Dynamic Drive’s Image Thumbnail Viewer II to display a larger version of the thumbnails on a rollover.
My client and I both love the idea that the order of the images can be dragged in the multi upload field, that the initial upload is so easy and that the layout on the page adjusts dynamically. So that’s got to be a keeper.
I’d like to add a "more information" page for each image and for now I’ve set that up using a “learn more” link below each thumbnail. The link URL is populated with the filename entered into an info field during the initial upload.
I’m pretty sure that I’ll have to create some unique text fields for the individual image descriptions and the unique PayPal data that needs to appear on the image "more information" page.
Here’s where I’m stuck...
I can’t figure out how I would specify the single image from the multi upload field that gets displayed on the "more information" page, and how to use some of the “info” fields that relate to that specific image, without uploading the image again to an additional unique upload field.
Any ideas? (I know that I’m going to be extremely embarrassed at how simple the solution is. )
thanks,
Jerry Kornbluth
________________________________________________
Here’s the php code on the photo page:
Info I is the image title
info2 is the optional thumbnail border style
info3 is the filename of the detail page for the particular image.
<?php
require_once "/hsphere/local/home/c239112/janstein.com/cmsAdmin/lib/viewer_functions.php";
list($photographyRecords, $photographyMetaData) = getRecords(array(
'tableName' => 'photography',
'where' => whereRecordNumberInUrl(1),
'limit' => '1',
));
$photographyRecord = @$photographyRecords[0]; // get first record
?>
<!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>
_______________________________________________________
<table><tr>
<?php foreach ($photographyRecord['images'] as $upload): ?><td align="center" valign="bottom" <?php echo $upload['info2'] ?> width="25%">
<?php if ($upload['isImage']): ?>
<a href="<?php echo $upload['thumbUrlPath2'] ?>"
class="Image-Labels"
rel="enlargeimage::mouseover::<br><?php echo $upload['info1'] ?>"
rev="loadarea" >
<img src="<?php echo $upload['thumbUrlPath'] ?>" border="0" width="<?php echo $upload['thumbWidth'] ?>" height="<?php echo $upload['thumbHeight']?>" style="margin-bottom: 5px" /></a>
<?php else: ?>
<a href="<?php echo $upload['urlPath'] ?>">Download <?php echo $upload['filename'] ?></a></td>
<?php endif; ?>
<br /><div valign="bottom" align="center"><a href="<?php echo $upload['info3'] ?>">Learn More</a></div>
<?php $maxCols=3; if (@++$count % $maxCols == 0): ?></tr><tr><?php endif; ?>
<?php endforeach ?>
</table>
______________________________________________
The rollover image displays on the page where the following appears:
<div id="loadarea" class="Image-Labels" style="width: 400px; height: 500px;"> </div>
As background, and for those who might want to implement the Image Thumbnail Viewer that I used ...
I’ve set up a page for a client www.janstein.com/photography.php that displays the contents of a single record - multi image upload field in 3 columns. The page uses Dynamic Drive’s Image Thumbnail Viewer II to display a larger version of the thumbnails on a rollover.
My client and I both love the idea that the order of the images can be dragged in the multi upload field, that the initial upload is so easy and that the layout on the page adjusts dynamically. So that’s got to be a keeper.
I’d like to add a "more information" page for each image and for now I’ve set that up using a “learn more” link below each thumbnail. The link URL is populated with the filename entered into an info field during the initial upload.
I’m pretty sure that I’ll have to create some unique text fields for the individual image descriptions and the unique PayPal data that needs to appear on the image "more information" page.
Here’s where I’m stuck...
I can’t figure out how I would specify the single image from the multi upload field that gets displayed on the "more information" page, and how to use some of the “info” fields that relate to that specific image, without uploading the image again to an additional unique upload field.
Any ideas? (I know that I’m going to be extremely embarrassed at how simple the solution is. )
thanks,
Jerry Kornbluth
________________________________________________
Here’s the php code on the photo page:
Info I is the image title
info2 is the optional thumbnail border style
info3 is the filename of the detail page for the particular image.
<?php
require_once "/hsphere/local/home/c239112/janstein.com/cmsAdmin/lib/viewer_functions.php";
list($photographyRecords, $photographyMetaData) = getRecords(array(
'tableName' => 'photography',
'where' => whereRecordNumberInUrl(1),
'limit' => '1',
));
$photographyRecord = @$photographyRecords[0]; // get first record
?>
<!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>
_______________________________________________________
<table><tr>
<?php foreach ($photographyRecord['images'] as $upload): ?><td align="center" valign="bottom" <?php echo $upload['info2'] ?> width="25%">
<?php if ($upload['isImage']): ?>
<a href="<?php echo $upload['thumbUrlPath2'] ?>"
class="Image-Labels"
rel="enlargeimage::mouseover::<br><?php echo $upload['info1'] ?>"
rev="loadarea" >
<img src="<?php echo $upload['thumbUrlPath'] ?>" border="0" width="<?php echo $upload['thumbWidth'] ?>" height="<?php echo $upload['thumbHeight']?>" style="margin-bottom: 5px" /></a>
<?php else: ?>
<a href="<?php echo $upload['urlPath'] ?>">Download <?php echo $upload['filename'] ?></a></td>
<?php endif; ?>
<br /><div valign="bottom" align="center"><a href="<?php echo $upload['info3'] ?>">Learn More</a></div>
<?php $maxCols=3; if (@++$count % $maxCols == 0): ?></tr><tr><?php endif; ?>
<?php endforeach ?>
</table>
______________________________________________
The rollover image displays on the page where the following appears:
<div id="loadarea" class="Image-Labels" style="width: 400px; height: 500px;"> </div>
The first CMS Builder reference book is now available on-line!
Take advantage of a free 3 month trial subscription, only for CMSB users, at: http://www.thecmsbcookbook.com/trial.php
Take advantage of a free 3 month trial subscription, only for CMSB users, at: http://www.thecmsbcookbook.com/trial.php
Re: [gkornbluth] Image Display Dilemma (revised)
By Dave - October 6, 2008
Hi Jerry,
There's no automatic way to do that with CMS Builder, you can do it with some PHP code though.
In your example $photographyRecord['images'] is a array (or list) of images. So this code let's you loop over them and display each one:
<?php foreach ($photographyRecord['images'] as $upload): ?>
With some more advanced code, you can also refer to the images by number (starting at 0) in the array, like this:
$photographyRecord['images'][0]
So instead of <img src="<?php echo $upload['thumbUrlPath'] ?>"
You would have <img src="<?php echo $photographyRecord['images'][0]['thumbUrlPath'] ?>"
Note that you would want to test the image exists first:
<?php if ($photographyRecord['images'][0]): ?>
...
<?php endif ?>
Hope that helps!
There's no automatic way to do that with CMS Builder, you can do it with some PHP code though.
In your example $photographyRecord['images'] is a array (or list) of images. So this code let's you loop over them and display each one:
<?php foreach ($photographyRecord['images'] as $upload): ?>
With some more advanced code, you can also refer to the images by number (starting at 0) in the array, like this:
$photographyRecord['images'][0]
So instead of <img src="<?php echo $upload['thumbUrlPath'] ?>"
You would have <img src="<?php echo $photographyRecord['images'][0]['thumbUrlPath'] ?>"
Note that you would want to test the image exists first:
<?php if ($photographyRecord['images'][0]): ?>
...
<?php endif ?>
Hope that helps!
Dave Edis - Senior Developer
interactivetools.com
interactivetools.com
Re: [gkornbluth] Image Display Dilemma (revised)
You are soooo good at this!!!!!
Thanks, I'll give it a shot and see where it takes me.
Jerry
Thanks, I'll give it a shot and see where it takes me.
Jerry
The first CMS Builder reference book is now available on-line!
Take advantage of a free 3 month trial subscription, only for CMSB users, at: http://www.thecmsbcookbook.com/trial.php
Take advantage of a free 3 month trial subscription, only for CMSB users, at: http://www.thecmsbcookbook.com/trial.php