From 150ae5fc5dc2275ea54d6490fcc41a4a847c6d64 Mon Sep 17 00:00:00 2001
From: Lester Caine <lester@lsces.co.uk>
Date: Thu, 18 Jun 2026 09:42:03 +0100
Subject: Replace float+clear grid with flexbox in auto_flow gallery
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Float+clear can't produce equal-height rows — variable-height thumbnails
caused items to misalign regardless of where clears fired. Switch the
container to .fisheye-flow (flex, flex-wrap:wrap): Bootstrap col-* widths
still control breakpoints, flex rows are automatically equal-height.
Removed counter, clear divs, and redundant col-xs-12 from inner elements.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
---
 gallery_views/auto_flow/fisheye_auto_flow_inc.tpl | 17 +++++------------
 1 file changed, 5 insertions(+), 12 deletions(-)

diff --git a/gallery_views/auto_flow/fisheye_auto_flow_inc.tpl b/gallery_views/auto_flow/fisheye_auto_flow_inc.tpl
index 6a57b6b..e1a1f4f 100755
--- a/gallery_views/auto_flow/fisheye_auto_flow_inc.tpl
+++ b/gallery_views/auto_flow/fisheye_auto_flow_inc.tpl
@@ -17,32 +17,25 @@
 
 		{include file="bitpackage:liberty/services_inc.tpl" serviceLocation='body' serviceHash=$gContent->mInfo}
 
-		<div class="col-xs-12">
-		{counter assign="imageCount" start="0" print=false}
-		{assign var="max" value=100}
+		<div class="fisheye-flow">
 		{foreach from=$gContent->mItems item=galItem key=itemContentId}
 			<div class="col-lg-3 col-md-4 col-sm-6 col-xs-12"> <!-- Begin Image Cell -->
-				<div class="col-xs-12 gallery-box">
+				<div class="gallery-box">
 					<a href="{if empty($galItem->mInfo.display_url)}/fisheye/gallery/{$galItem->mInfo.gallery_id}
 							{else}{$galItem->mInfo.display_url}{/if}">
-						<div class="col-xs-12 gallery-img table-cell">
-							<img class="col-xs-12 thumb" src="{$galItem->getThumbnailUri($gContent->getField('thumbnail_size'))}" alt="{$galItem->mInfo.title|escape|default:'image'}" />
+						<div class="gallery-img">
+							<img class="thumb img-responsive" src="{$galItem->getThumbnailUri($gContent->getField('thumbnail_size'))}" alt="{$galItem->mInfo.title|escape|default:'image'}" />
 						</div>
-						<div class="col-xs-12 gallery-img-title table-cell center">
+						<div class="gallery-img-title center">
 							<h3>{$galItem->mInfo.title|escape}</h3>
 						</div>
 					</a>
 				</div>
 			</div> <!-- End Image Cell -->
-			{counter assign="imageCount"}
-			{if $imageCount % 2 == 0}<div class="visible-sm-block clear"></div>{/if}
-			{if $imageCount % 3 == 0}<div class="visible-md-block clear"></div>{/if}
-			{if $imageCount % 4 == 0}<div class="visible-lg-block clear"></div>{/if}
 		{foreachelse}
 			<div class="norecords">{tr}This gallery is empty{/tr}. <a href="{$smarty.const.FISHEYE_PKG_URL}upload.php?gallery_id={$galleryId}">Upload pictures!</a></div>
 		{/foreach}
 		</div>
-		<div class="clear"></div>
 
 	</div>	<!-- end .body -->
 
-- 
cgit v1.3