I was working a site for a photo exhibition which used a simple multi record editor called "jack".
The client wanted to be able to easily add photographers as they were juried in to the exhibition.
The idea was that there would be a table of thumbnails which would display one image per photographer. They wanted each
photograph to have the photographer’s name and the name of the image automatically superimposed over the image. The
images would need to be live links to the photographers detail page. Further, they wanted each photographer’s image to
randomly rotate through their available images and also wanted the photographers cell to randomly appear in a different
place in the table each time the page was reloaded.
Here’s how I did it...
I set each artist up with a separate user account which was created with "author" rights to "jack". Artists were only
allowed create one record each, but could upload up to 25 of their images to that record.
The editor records contained an upload box for the images which used the “info1" field for the name of the image, a
text field called “title” for the photographers name and a text field called “url” to hold the link information.
On the list page, I displayed the images in a table with a limited number of columns.
I superimposed the photographers names and image titles the images with Divs to position the text, using the basic
format:
<div style="position: relative; background: url(path to image); width: (width)px; height: (height)px;">
<div style="position: absolute; bottom: 0; left: 0.5em; width: 400px; font-weight: bold; color: #fff;">(text to appear
at the bottom left of the image)</div>
<div style="position: absolute; top: 0; left: 0.5em; width: 400px; font-weight: bold; color: #fff;">(text to appear at
the top left of the image)</div>
</div>
RANDOMIZING THE IMAGES IN THE CELLS
In the viewer I used
'orderBy' => 'RAND()',
to randomize the images that appear in the various cells.
MAKING THE BACKGROUND IMAGES INTO LIVE LINKS
Dave Edis reminded that you can use the URL field and add:
onclick='window.location="<?php echo $record['url'] ?>"'
to the Div
SHOWING ONLY ONE IMAGE PER AUTHOR
The code above accomplished almost all of the criteria for this display, however, it still displayed all of the images
that were uploaded to all the records in the table and this needed to be limited to one image per author.
Dave’s solution was simple. He said, “Just add thees lines to your code”:
<?php foreach ($jackRecords as $record): ?>
<!-- Insert This Code -->
<?php shuffle($record['images']) ?>
<!-- End of Insert-->
<?php foreach ($record['images'] as $upload): ?>
<!-- Insert This Code -->
<?php if (@$alreadySeen[ $record['title'] ]++) { continue; } ?>
<!-- End of Insert-->
The finished viewer code looks like this:
In the require once area:
list($jackRecords, $jackMetaData) = getRecords(array(
'Table name' => 'jack',
'orderBy' => 'RAND()',
And in the body:
<table width="80%" border="0" cellpadding="5">
<tr><?php foreach ($jackRecords as $record): ?><?php shuffle($record['images']) ?> <?php foreach ($record['images'] as
$upload): ?><?php if (@$alreadySeen[ $record['title'] ]++) { continue; } ?>
<td align="center">
<div onclick='window.location="<?php echo $record['url'] ?>"' style="position: relative; background: url(<?php echo
$upload['thumbUrlPath2'] ?>); width: <?php echo $upload['thumbWidth2'] ?>px; height: <?php echo $upload['thumbHeight2']
?>px;">
<div style="position: absolute; top: 0; left: 0.5em; width: 200px; font-family:Verdana, Tahoma, Arial, Sans-Serif;
font-size:10pt; font-weight:bold; text-align:left; font-style: normal; color: #fff;"><?php echo $record['title']
?></div>
<div style="position: absolute; bottom: 0; left: 0.5em; width: 200px; font-family:Verdana, Tahoma, Arial, Sans-Serif;
font-size:10pt; font-weight:bold; text-align:left; font-style: normal; color: #fff;"><?php echo $upload['info1']
?></div>
</div></td><?php $maxCols=3; if (@++$count % $maxCols == 0): ?></tr><tr><?php endif; ?>
<?php endforeach ?><?php endforeach ?>
</tr>
</table>
User perchpole added that you can also add things like the following to your div code for other effects:
<div style="cursor: pointer;" onmouseover="this.style.backgroundColor='red';"
onmouseout="this.style.backgroundColor='blue';" onmouseup="location.href='<?php echo $record['url'] ?>'">your content
goes here</div>
UPDATE
In a multi record situation where there were a large number of records but only some of them had images, I didn't want
to increase the server load by loading all the records and images before I chose one, but I was having some difficulty
adding the name of the artist in the overlay.
Greg Thomas from Interactive tools reminded me that a parent record number of an upload can be found with
$upload['recordNum'].
Here's the code we ultimately came up with:
<?php $uploadRecords = mysql_select('uploads', " tableName = 'your_table' AND fieldName = 'images'"); ?>
<table align="center" width="80%" border="0" cellpadding="5">
<tr>
<?php shuffle($uploadRecords) ?>
<?php foreach ($uploadRecords as $upload): ?>
<td align="center">
<div onclick='window.location="#"' class="round-corner" style="position: relative; background:
url(http://your_site.com/cmsAdmin/uploads/<?php echo
$upload['thumbUrlPath2'] ?>); width: <?php echo $upload['thumbWidth2'] ?>px; height: <?php echo $upload['thumbHeight2']
?>px;">
<?php
$upload['urlPath'] = preg_replace('/\.\w+$/', '', $upload['urlPath']);
$upload['urlPath'] = preg_replace("/[-_]/", " ", $upload['urlPath'] );
$upload['urlPath'] = ucwords($upload['urlPath'] );
?>
<div style="position: absolute; top: .9em; left: 1.2em; width: 200px; font-family:Verdana, Tahoma, Arial,
Sans-Serif; font-size:1.2em; font-weight:bold; text-align:left; font-style: normal; color: #00F;" class="your_class">
<?php echo $upload['urlPath']; ?>
</div>
<?php
list($accountsRecords, $accountsMetaData) = getRecords(array(
'tableName' => your_table',
'where' => "`num` = '{$upload['recordNum']}'",
'loadUploads' => false,
'allowSearch' => false,
'limit' => '1',
));
?>
<?php foreach ($accountsRecords as $record2): ?>
<div style="position: absolute; bottom: 1.2em; left: 1.2em; width: 200px; font-family:Verdana, Tahoma, Arial,
Sans-Serif; font-size:1.2em; font-weight:bold; text-align:left; font-style: normal; color: #00F;" class="your_class">
<?php echo $record2['first_name']; ?> <?php echo $record2['last_name']; ?>
</div>
<?php endforeach ?>
</div>
</td>
</tr>
</table>
<?php break?>
<?php endforeach ?>
Of course you’d style the code to suit your needs.
|
