Stumped again...

7 posts by 3 authors in: Forums > CMS Builder
Last Post: April 15, 2009   (RSS)

By gkornbluth - April 15, 2009

Hi All,

I’m stuck on a project (again) and hope someone can help to point me in the right direction.

I’m working on a site for a photo exhibition which can be seen at www.jkwebdesigns.com/jack.php

I’m using a simple multi record editor called "jack". Each photographer has a separate user account which is created with "author" rights to "jack". Photographers can create one record each, and can upload up to 25 of their images to that record.

On the list page, the images are displayed in a table with a limited number of columns. The photographers names and image titles are superimposed on each image with divs to position the text, using this 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>

I’m using 'orderBy' => 'RAND()', to randomize the images that appear in the various cells. (See code below.)

Where I’m stuck is:

1) I can’t seem to make the images into live links.

2) I’d like to be able to limit the number of images that are displayed in the table for each photographer (author) to a single random image pulled from their record.

Hope someone has some ideas.

Thanks,

Jerry Kornbluth

Here’s the code I’m using so far:

In the require once area:

list($jackRecords, $jackMetaData) = getRecords(array(
'tableName' => 'jack',
'orderBy' => 'RAND()',


And in the body:

<table width="80%" border="0" cellpadding="5">
<tr>
<?php foreach ($jackRecords as $record): ?><?php foreach ($record['images'] as $upload): ?>

<td align="center">

<div 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>

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

Re: [gkornbluth] Stumped again...

By Dave - April 15, 2009

Hi Jerry,

The link problem is a HTML/CSS one, I'm not sure the exact solution but some ideas that come to mind are:

- Having an <img src ... > tag inside the div instead of displaying it as a background image. Then you could put a <a href> tag around the image.

- If there is a reason why the image needs to be a background one then using a transparent spacer.gif of the same size and linking that (that's what google and flickr and some other sites have done).

- try adding a onclick='window.location="http://google.com"' to the div.

And for showing each photographer only once, if you're not going to have too many records you could just load them all and only show one by each author. Some code to do that would keep track of which author's we've already 'seen'. Something like this:

<?php foreach ($jackRecords as $record): ?><?php foreach ($record['images'] as $upload): ?>
<?php if (@$alreadySeen[ $record['title'] ]++) { continue; } ?>


Let me know if that works for you.
Dave Edis - Senior Developer
interactivetools.com

Re: [Dave] Stumped again...

By Perchpole - April 15, 2009

Gerry -

Your div code should start with this...

<div style="cursor: pointer;" onmouseover="this.style.backgroundColor='red';" onmouseout="this.style.backgroundColor='blue';" onmouseup="location.href='#'">content</div>




You'll need to dress it up to suit your needs.

:0)

Perchpole

Re: [Perchpole] Stumped again...

By gkornbluth - April 15, 2009

Thanks to you both.

You guys are great!!!

I'll look at this shortly and post back.

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

Re: [gkornbluth] Stumped again...

By Dave - April 15, 2009

Ahh, ok. Try this:

<?php foreach ($jackRecords as $record): ?>
<?php shuffle($record['images']) ?>
<?php foreach ($record['images'] as $upload): ?>
<?php if (@$alreadySeen[ $record['title'] ]++) { continue; } ?>


That will put the images in a random order each time.

Hope that helps!
Dave Edis - Senior Developer
interactivetools.com

Re: [Dave] Stumped again...

By gkornbluth - April 15, 2009

Yet another perfect solution.

Many thanks,

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