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

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

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.

Works perfectly.  Thank you!

Phil

And I learned something too...

Thanks Deborah.

Jerry Kornbluth