Limit Thumbnails to a Single Record in a List Page

10 posts by 3 authors in: Forums > CMS Builder
Last Post: April 27, 2020   (RSS)

By pacolvin - April 26, 2020

I've done some searching and cold not find anything that fits my question.

I have a list page that shows all records and all uploads.  Each records can have from zero to as many uploads (which are photos) as needed.  I have a Bootstrap Lightbox that uses modals to show a larger view of the photo when the user clicks or taps on it.

The problem I am having is when I click a thumbnail to see the larger image, the user has access to all images from all records.  Would there be a way to limit the thumbnail links in each records to only allow the user to scroll through the images related to that record?  I hope that makes sense.

Here is a link to the page that I am working on. https://www.fdmj.com/web2/incidents-news-list.php

You will see if you click on the thumbnail in the first record, there are 1 to 20 images to scroll through in the lightbox.  My hope is to limit that to just the thumbnails for that record.

Thanks in advance for any help.

Phil

By gkornbluth - April 26, 2020 - edited: April 26, 2020

Hi Phil.

When I want to allow visitors to see a larger image I use something like the following in my main foreach loop:

<?php foreach ($myRecords as $record): ?>
<?php foreach ($record['image'] as $index => $upload): ?>
<a href="<?php echo htmlencode($upload['thumbUrlPath3']) ?>" > <img src="<?php echo htmlencode($upload['thumbUrlPath']) ?>" /></a>
<?php endforeach ?>
<?php endforeach ?>

Where thumb is the smaller image and thumb 3 is the enlarged image. 

I'm a bit confused as to how (and when) your visitors are allowed to see all the images (the lightbox) in the record?

Jerry Kornbluth

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

By pacolvin - April 26, 2020

So here is the code I'm using.  Because all of the records, and subsequently the uploads, are all loaded at the page load, the lightbox sees all of the images.  You will see the main foreach loop and then the foreach for the uploads. 

<?php foreach ($incidents_newsRecords as $record): ?>
            <div style="margin-top: 30px;" class="container ">
                <div class="card incident-card"> 
                    <div class="card-header font-weight-lighter h3" style="background-color: #6F1B1C; color: #fbfbfb;">
                        <?php echo htmlencode($record['nature']) ?>
                    </div>
                    <div class="card-body">
                        <div class="mb-3 row">
                            <div class="col-md-12">
                                <p><span style="font-weight: bold;">Date / Time: </span><?php echo date("D, M jS, Y g:i:s a", strtotime($record['date'])) ?></p>
                                <p><span style="font-weight: bold;">Location: </span><?php echo htmlencode($record['location']) ?></p>
                                <p><span style="font-weight: bold;">Municipality: </span><?php echo htmlencode($record['municipality']) ?></p>
                                <p><?php echo $record['content']; ?></p> 
                            </div>
                        </div>                         
                        <hr/>
                        <div class="row photos">
                            <?php foreach ($record['photos'] as $index => $upload): ?>
                                <div class="col-sm-6 col-md-4 col-lg-3 item">
                                    <a href="<?php echo htmlencode($upload['urlPath']) ?>" data-lightbox="photos"><img class="img-fluid" src="<?php echo htmlencode($upload['urlPath']) ?>"></a>
                                </div>                                
                            <?php endforeach ?>
                        </div>
                        <br>
                        <!-- <a href="<?php echo $record['_link'] ?>" class="btn btn-primary">Read More</a> -->
                    </div>                     
                </div>                 
            </div>
    </div>
    <?php endforeach ?>

By gkornbluth - April 26, 2020 - edited: April 26, 2020

What happens when you try the code I suggested? Do you have a smaller thumb and a larger thumb? evreything seems to refer to the upload url

Jerry Kornbluth

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

By pacolvin - April 26, 2020

Jerry,

I'm not sure I'm tracking with your suggestion.  The code I have works and the lightbox is working fine.  If this were a single record on the page, everything would be fine.  Since I am showing all of the records, the $upload array seems to have all of the uploads and the lightbox is seeing the upload of all records and not just the one the user clicks on.

If there is a way that each record and it's associated upload array values would be kept inside the foreach loop, it would probably work.  I'm not that level of PHP programmer to figure it out.

Phil

By gkornbluth - April 26, 2020

Oh I thought that the individual records had multiple images.

I think the problem might be in the code that originally calls the lightbox array (if there is such code) nearer the top of the page.

Just a thought. If you're only looking to have one image display per record, why are you using the lightbox (I'm sure there's a reason)

Take a look in my CMSB Cookbook and search for SHOWING ONLY THE FIRST IMAGE OR GROUP OF IMAGES ON A PAGE in the table of contents. that might give you a direction

Best, Stay Safe!

Jerry Kornbluth

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

By pacolvin - April 27, 2020

I do want to show more than one image.  I only want to show the images related to the record in which they are associated.

the lightbox on the page is working.  It just allows the user to scroll through all of the images for all records.

By Deborah - April 27, 2020

Hi, Phil.

I haven't used a lightbox script for a while and there are a few of them out there. What I remember is that when grouping images a unique data-lightbox attribute value is needed for each image group.

To assign a unique value, you could use the record number like this:
data-lightbox="photos<?php echo htmlencode($record['num']) ?>"

Then the thumbnail image should only trigger images uploaded to that record. Give it a try?

~ Deborah

By pacolvin - April 27, 2020

Works perfectly.  Thank you!

Phil