This is a combination of css and repeating regions

Scenario: A photographer client, has a zillion photos to display for sale. I created a database to put them in different categories. So far so good. I can get a page to display all the photos in a category. So far, so good.

But her photos are all different sizes, shapes. So I added a field to the database for vertical and horizontal. Then for testing, I changed the db entry for some to a v for vertical. I stumbled about and figured out query to put a set of horizontal on the top of the page and the verticals on the bottom. Still ok.

I opened all of the photos, and ran a PS action to make max height at 600 px.

I added a minheight css to div to 600 pixels hoping that would keep the display ok. Nope, not enough.

I tried some flex display but I didn't get it done, but then I'm not there yet with flex stuff.

So using repeat region, how can I get the photo displays not have HUGE white gaps, or without the minheight, huge spaces when all images are not consistent? It is probably something simple, but after 3 days with this, I'm out of ideas. I haven't changed all the images from h to v in the database yet, but this page should show what I am trying to do (not live yet, work in progress):

https://cj-photos-tunkhannock.com/photos-animals.php

Any ideas, so much appreciated.

Flex displays are usually the best for this.

Another good option is to use webassist image resizer and crop to a certain size. It may trim off edges or top or bottom of oddly shaped images, but it is still usually good enough and makes your page very uniform and clean.

Thanks Ray. Can you expound more on what to with flex code? I have no clue what do to yet.

I don't want to manage this photographer's photos by cropping her work but I do have image resizer, and I can explore.

also, I used your file management uploader feature to the back end so when she has new photos. I'll revisit what the default sizes should be.

'UploadFolder' => "../webphotos/",
'FileName' => "[FileName]",
'DefaultFileName' => "",
'ResizeType' => "2",
'ResizeWidth' => "1000",
'ResizeHeight' => "600",
'ResizeFillColor' => "#FFFFFF" );
// WA_UploadResult1_1 End

I usually don't resize images during upload. It is more future proof to keep the full size image in the upload and use image resizer when displaying the image. That way if you ever re-do the display you can just re-do the resizing from the original image.

I don't have any tutorials on flex layouts I can provide. If you want to do an hour premier ticket we can do that and figure something out I'm sure.

Thanks for the tips. I'll keep digging...

Solution:

.masonry {
display: flex;
flex-flow: row wrap;
width: 33%;
}

.masonry-item {
overflow: hidden;
margin: 10px;
background-color: #fff;
flex: auto;
}

applied to repeat region:

<?php
$wa_startindex = 0;
while(!$photos->atEnd()) {
$wa_startindex = $photos->Index;
?>
<div class="masonry">
<div class="masonry-item ">
<img src="webphotos/<?php echo($photos->getColumnVal("photo_name")); ?>" alt=""/>

<p><?php echo($photos->getColumnVal("photo_SKU")); ?></p>
<p><?php echo($photos->getColumnVal("photo_details")); ?></p>
</div></div>
<?php
$photos->moveNext();
}
$photos->moveFirst(); //return RS to first record
unset($wa_startindex);
unset($wa_repeatcount);
?>