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: [Dave] Stumped again...

By gkornbluth - April 15, 2009

Dave The onclick worked just perfectly. Thanks...

Perch's idea was really good too, but onclick worked better than mouse position for this app.

the <?php if (@$alreadySeen[ $record['title'] ]++) { continue; } ?> idea seems to show only the first image from each author.

If I drag the order of the images in the author's recorda then a new "first" imagea are shown.

I also tried replacing"title" with "num" and got the same result

There are 3 authors and the position of their image randomly changes place in the table, so that's cool, but I had hoped to randomly cycle through the images for each author as well.

I've added the revised code to:

http://www.jkwebdesigns.com/jack.php

Best,

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