Limit Thumbnails to a Single Record in a List Page

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

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

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

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

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.

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

Works perfectly.  Thank you!

Phil

And I learned something too...

Thanks Deborah.

Jerry Kornbluth