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
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
Re: [HDLLC] Image uploads - displaying large galleries, with click-through details
By Jason - June 15, 2012
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
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
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
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
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
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
Re: [HDLLC] Image uploads - displaying large galleries, with click-through details
By Jason - June 19, 2012
Okay, I see what you're trying to do.
The tricky part you're going to run into is that actual upload records are stored in a separate uploads table, not in the same table as the rest of your gallery information.
What you could do is create a link that passes in the gallery record you're on as well as the record number of the image you're looking at. Then on the detail page, you can go through the images and only output 1.
for example:
<a href = "photoDetails.php?gallery=<?php echo $gallery['num'];?>&image=<?php echo $image['num'];?>">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/