PhotosIndex: rewrite to use Bootstrap grid for tiles

public/css/admin.css

@@ -1,21 +1,21 @@
 /* Edit icon on tiled grids
 -----------------------------*/
-.tiled_grid div.landscape, .tiled_grid div.portrait, .tiled_grid div.panorama {
+.polaroid {
 	position: relative;
 }
-.tiled_grid div > a.edit {
+.polaroid a.edit {
 	background: #fff;
 	border-radius: 3px;
 	box-shadow: 1px 1px 2px rgba(0,0,0,0.3);
-	display: none;
+	display: none !important;
 	left: 20px;
 	line-height: 1.5;
 	padding: 5px 10px;
 	position: absolute;
 	top: 20px;
 }
-.tiled_grid div:hover > a.edit {
+.polaroid:hover > a.edit {
-	display: block;
+	display: block !important;
 }
 
 

public/css/default.css

@@ -179,26 +179,25 @@ i.space-invader.alt-7::before {
 
 /* Album index
 ----------------*/
-.album-index {
+.album-index, .photo-index {
 	clear: both;
 }
 
 
 /* Tiled grid
 ---------------*/
-.tiled_header {
+.tiled-header > a {
 	background: #fff;
 	box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3);
 	border-radius: 0.5rem;
 	color: #000;
-	clear: both;
+	display: inline-block;
-	float: left;
-	margin: 0 0 1.5% 0;
 	font: 400 18px/2.2 'Coda', sans-serif;
+	margin: 0 0 1.5% 0;
+	overflow: hidden;
 	padding: 6px 22px;
 	text-overflow: ellipsis;
 	white-space: nowrap;
-	overflow: hidden;
 }
 
 .tiled_grid {

templates/PhotosIndex.php

@@ -45,7 +45,7 @@ class PhotosIndex extends Template
 	public function html_main()
 	{
 		echo '
-			<div class="tiled_grid clearfix">';
+			<div class="container photo-index">';
 
 		for ($i = $this->row_limit; $i > 0 && $row = $this->mosaic->getRow(); $i--)
 		{
@@ -74,9 +74,9 @@ class PhotosIndex extends Template
 
 		$name = str_replace(' ', '', strtolower($header));
 		echo '
-			<h4 class="tiled_header" id="', $name, '">
+				<h4 class="tiled-header" id="', $name, '">
-				<a href="#', $name, '">', $header, '</a>
+					<a href="#', $name, '">', $header, '</a>
-			</h4>';
+				</h4>';
 
 		$this->previous_header = $header;
 	}
@@ -84,7 +84,7 @@ class PhotosIndex extends Template
 	protected function photo(Image $image, $className, $width, $height, $crop = true, $fit = true)
 	{
 		echo '
-				<div class="', $className, '">';
+				<div class="polaroid ', $className, '">';
 
 		if ($this->show_edit_buttons)
 			echo '
@@ -100,7 +100,10 @@ class PhotosIndex extends Template
 		else
 			echo ' srcset="', $image->getThumbnailUrl($image->width(), $image->height(), true), ' 2x"';
 
-		echo ' alt="" title="', $image->getTitle(), '" style="width: ', $width, 'px; height: ', $height, 'px">';
+		// Prefer thumbnail aspect ratio if available, otherwise use image aspect ratio.
+		$aspectRatio = isset($width, $height) ? $width / $height : $image->ratio();
+
+		echo ' alt="" title="', $image->getTitle(), '" style="aspect-ratio: ', $aspectRatio, '">';
 
 		if ($this->show_labels)
 			echo '
@@ -115,7 +118,17 @@ class PhotosIndex extends Template
 	protected function panorama(array $photos)
 	{
 		foreach ($photos as $image)
+		{
+			echo '
+				<div class="row mb-5 tile-panorama">
+					<div class="col">';
+
 			$this->photo($image, 'panorama', static::PANORAMA_WIDTH, static::PANORAMA_HEIGHT, false, false);
+
+			echo '
+					</div>
+				</div>';
+		}
 	}
 
 	protected function portrait(array $photos)
@@ -123,19 +136,29 @@ class PhotosIndex extends Template
 		$image = array_shift($photos);
 
 		echo '
-				<div class="tiled_row">
+				<div class="row g-5 mb-5 tile-feat-portrait">
-					<div class="column_portrait">';
+					<div class="col-md-4">';
 
 		$this->photo($image, 'portrait', static::PORTRAIT_WIDTH, static::PORTRAIT_HEIGHT, 'centre');
 
 		echo '
 					</div>
-					<div class="column_tiles_four">';
+					<div class="col-md-8">
+						<div class="row g-5">';
 
 		foreach ($photos as $image)
-			$this->photo($image, 'landscape', static::TILE_WIDTH, static::TILE_HEIGHT, 'centre');
+		{
+			echo '
+							<div class="col-md-6">';
+
+			$this->photo($image, 'landscape', static::TILE_WIDTH, static::TILE_HEIGHT, 'top');
+
+			echo '
+							</div>';
+		}
 
 		echo '
+						</div>
 					</div>
 				</div>';
 	}
@@ -145,19 +168,29 @@ class PhotosIndex extends Template
 		$image = array_shift($photos);
 
 		echo '
-				<div class="tiled_row">
+				<div class="row g-5 mb-5 tile-feat-landscape">
-					<div class="column_landscape">';
+					<div class="col-md-8">';
 
 		$this->photo($image, 'landscape', static::LANDSCAPE_WIDTH, static::LANDSCAPE_HEIGHT, 'top');
 
 		echo '
 					</div>
-					<div class="column_tiles_two">';
+					<div class="col-md-4">
+						<div class="row g-5">';
 
 		foreach ($photos as $image)
+		{
+			echo '
+							<div>';
+
 			$this->photo($image, 'landscape', static::TILE_WIDTH, static::TILE_HEIGHT, 'top');
 
+			echo '
+							</div>';
+		}
+
 		echo '
+						</div>
 					</div>
 				</div>';
 	}
@@ -165,11 +198,19 @@ class PhotosIndex extends Template
 	protected function duo(array $photos)
 	{
 		echo '
-				<div class="tiled_row">';
+				<div class="row g-5 mb-5 tile-duo">';
 
 		foreach ($photos as $image)
+		{
+			echo '
+					<div class="col-md-6">';
+
 			$this->photo($image, 'duo', static::DUO_WIDTH, static::DUO_HEIGHT, true);
 
+			echo '
+					</div>';
+		}
+
 		echo '
 				</div>';
 	}
@@ -177,23 +218,33 @@ class PhotosIndex extends Template
 	protected function single(array $photos)
 	{
 		echo '
-				<div class="tiled_row">';
+				<div class="row g-5 mb-5 tile-single">
+					<div class="col-md-6">';
 
 		$image = array_shift($photos);
 		$this->photo($image, 'single', static::SINGLE_WIDTH, static::SINGLE_HEIGHT, 'top');
 
 		echo '
+					</div>
 				</div>';
 	}
 
 	protected function row(array $photos)
 	{
 		echo '
-				<div class="tiled_row">';
+				<div class="row g-5 mb-5 tile-row-landscapes">';
 
 		foreach ($photos as $image)
+		{
+			echo '
+					<div class="col-md-4">';
+
 			$this->photo($image, 'landscape', static::TILE_WIDTH, static::TILE_HEIGHT, true);
 
+			echo '
+					</div>';
+		}
+
 		echo '
 				</div>';
 	}
@@ -201,11 +252,19 @@ class PhotosIndex extends Template
 	protected function portraits(array $photos)
 	{
 		echo '
-				<div class="tiled_row">';
+				<div class="row g-5 mb-5 tile-row-portraits">';
 
 		foreach ($photos as $image)
+		{
+			echo '
+					<div class="col-md-4">';
+
 			$this->photo($image, 'portrait', static::PORTRAIT_WIDTH, static::PORTRAIT_HEIGHT, true);
 
+			echo '
+					</div>';
+		}
+
 		echo '
 				</div>';
 	}