Image uploads - displaying large galleries, with click-through details

8 posts by 2 authors in: Forums > CMS Builder
Last Post: June 19, 2012   (RSS)

By HDLLC - June 14, 2012

Not sure I'm wording my search for a solution right - but we'll try this. If it's a duplicate - my apologies in advance!

What I'm trying to do is this:

Using a multiple record photo gallery section in CMSB - allow, for instance, a user to upload 100 photos in one swipe, name, notes, etc. Call that one gallery (with the option to add many more).

Then - show the first image as thumbnail which leads to a view showing a thumbnail of all uploaded photos for that record, in a table, something like 4 columns and as many rows as it needs.

From that thumbnail page (shows all photos they uploaded for that one particular record) - a visitor can click a thumbnail, and then go to a detail page to see the bigger image, caption, etc.

Probably clear as mud, but... Maybe someone understands what I'm trying to accomplish. lol...

I tried to illustrate it with attached pdf... Hope that helps.

Thanks in advance for any help!

--Jeff
Attachments:

photgallery_example.pdf 60K

Re: [HDLLC] Image uploads - displaying large galleries, with click-through details

By Jason - June 15, 2012

Hi Jeff,

No problem, I think I see what you're going for. This is a pretty standard implementation of a gallery system. Can you let me know what part of the process you are at? Are you having trouble with a particular part?

Let me know and we'll work out a solution.

Thanks
---------------------------------------------------
Jason Sauchuk - Project Manager
interactivetools.com

Hire me! Save time by getting our experts to help with your project.
http://www.interactivetools.com/consulting/

Re: [Jason] Image uploads - displaying large galleries, with click-through details

By HDLLC - June 15, 2012

Hi Jason-

I got the first part to work. I'd rather not throw my live site links in here until it actually works.

=^)

I have step one done. And have done this many times for items that have just one image.
It's the extra step of showing them in the table for galleries that have multiple images that is throwing the curve ball for me.

So, really - it's pulling the multiple images out and displaying in a table like the second step in my example pdf - then click through to the bigger image.

Hope that helps... Thanks for offering to help me out!

--Jeff

Re: [HDLLC] Image uploads - displaying large galleries, with click-through details

By Jason - June 18, 2012

Hi Jeff,

No problem. When you are dealing with a single record from getRecords(), you already have an array of all the uploads associated with that record. All you need to do is to loop through that array.

Here is some example code. You will need to change variable names to match what you have in your code already.

EXAMPLE:
<?php
$imagesPerRow = 4;
$imageCount = 0;
?>

<table>

<tr>
<?php foreach ($gallery['images'] as $image): ?>
<td>
<a href = "<?php echo $image['urlPath'];?>">
<img src = "<?php echo $image['thumbUrlPath'];?>" height = "<?php echo $image['thumbHeight'];?>" width = "<?php echo $image['thumbWidth'];?>" />
</a>
</td>

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

<?php endforeach ?>

</tr>

</table>

In this example, we assume you've retrieve a single record into a variable called $gallery and you have an image upload field called "images". We also assume that you have thumbnails created. Linking to a larger image is done by creating a link to the full size image from the thumb image.

Hope this helps get you started.
---------------------------------------------------
Jason Sauchuk - Project Manager
interactivetools.com

Hire me! Save time by getting our experts to help with your project.
http://www.interactivetools.com/consulting/

Re: [Jason] Image uploads - displaying large galleries, with click-through details

By HDLLC - June 18, 2012

PERFECT! Thanks!

If I want to show the resulting image (the big view - not thumb) in the site framework, how would I set that page up?
The result from clicking an image on this page (shows bigger one).

Thanks!

--Jeff

Re: [HDLLC] Image uploads - displaying large galleries, with click-through details

By Jason - June 18, 2012

Hi,

There are a couple of ways you can do that. The easiest is using javascript to do an "image swap". For some more information on this, try this [url https://www.google.ca/#hl=en&output=search&sclient=psy-ab&q=javascript+image+swap+onclick&oq=javascript+%2B+image+swap&aq=2sK&aqi=g-K2g-sK1g-K1&aql=&gs_l=hp.3.2.0i30l2j0i10i30j0i30.0.0.2.262.0.0.0.0.0.0.0.0..0.0...0.0.4cA9ysaN2bE&pbx=1&bav=on.2,or.r_gc.r_pw.r_qf.,cf.osb&fp=6c1b33bf8ec2cb87&biw=1605&bih=862] Google Search[/url]

Hope this helps
---------------------------------------------------
Jason Sauchuk - Project Manager
interactivetools.com

Hire me! Save time by getting our experts to help with your project.
http://www.interactivetools.com/consulting/

Re: [Jason] Image uploads - displaying large galleries, with click-through details

By HDLLC - June 18, 2012

Hi Jason-

Hmmm... Not sure how image swap would work doing that sort of thing (use Image swap quite a bit already).

I may not be explaining myself properly...

Looking to create a details page for the photo from what you helped me with this morning. So, click the small thumbnail from the list, and see a large image with the caption/info, and whatever else the user might enter in a WYSIWYG field or the like.

Maybe I'm not understanding quite right...?

Thanks again!

--Jeff