Merge pull request 'Use Bootstrap for album/photo grid' (#31) from bootstrap-tiles into master

Reviewed-on: #31

models/PhotoMosaic.php

@@ -165,7 +165,10 @@ class PhotoMosaic
 				return [$photos, 'single'];
 		}
 
-		// A boring set it is, then.
+		// Last resort: majority vote
-		return [$photos, 'row'];
+		if ($num_portrait > $num_landscape)
+			return [$photos, 'portraits'];
+		else
+			return [$photos, 'landscapes'];
 	}
 }

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

@@ -177,46 +177,39 @@ i.space-invader.alt-7::before {
 }
 
 
-/* Tiled grid
+/* Album and photo index pages
----------------*/
+--------------------------------*/
-.tiled_header {
+.album-index, .photo-index {
+	clear: both;
+}
+
+.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 {
+div.polaroid {
-	margin: 0;
-	padding: 0;
-	list-style: none;
-}
-.tiled_grid div.landscape, .tiled_grid div.portrait, .tiled_grid div.panorama,
-.tiled_grid div.duo, .tiled_grid div.single {
 	background: #fff;
 	box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3);
-	float: left;
 	line-height: 0;
-	margin: 0 3.5% 3.5% 0;
-	overflow: hidden;
 	position: relative;
-	width: 31%;
 }
-.tiled_grid div img {
+div.polaroid img {
 	background: url('../images/nothumb.svg') center no-repeat;
 	border: none;
 	object-fit: cover;
 	width: 100%;
 }
-.tiled_grid div h4 {
+div.polaroid h4 {
 	color: #000;
 	margin: 0;
 	font: 400 18px 'Coda', sans-serif;
@@ -226,101 +219,19 @@ i.space-invader.alt-7::before {
 	white-space: nowrap;
 	overflow: hidden;
 }
-.tiled_grid div a {
+div.polaroid a {
+	display: block;
 	text-decoration: none;
 }
-.tiled_grid div.landscape:hover, .tiled_grid div.portrait:hover, .tiled_grid div.panorama:hover,
+div.polaroid:hover {
-.tiled_grid div.duo:hover, .tiled_grid div.single:hover {
 	box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
 }
 
-/* Panoramas */
-.tiled_grid div.panorama, .tiled_grid .tiled_row {
-	clear: both;
-	float: left;
-	width: 100%;
-	margin-right: 0;
-}
-
-/* Tiling: one landscape, two tiles */
-.tiled_row .column_landscape {
-	float: left;
-	width: 65.5%;
-	margin: 0 3.5% 3.5% 0;
-}
-.tiled_row .column_landscape div {
-	width: auto;
-	margin: 0;
-}
-
-.tiled_row .column_tiles_two {
-	float: left;
-	width: 31%;
-}
-.tiled_row .column_tiles_two div {
-	float: left;
-	width: 100%;
-	margin: 0 0 10% 0;
-}
-
-/* Tiling: big portrait, four tiles */
-.tiled_row .column_portrait {
-	float: left;
-	width: 31%;
-	margin: 0 3.5% 3.5% 0;
-}
-.tiled_row .column_portrait div {
-	width: auto;
-	margin: 0;
-}
-
-.tiled_row .column_tiles_four {
-	float: left;
-	width: 65.5%;
-}
-.tiled_row .column_tiles_four div {
-	float: left;
-	width: 47.45%;
-	margin: 0 5% 5% 0;
-}
-
-/* Tiling: two tiles */
-.tiled_row .duo {
-	width: 48.25% !important;
-}
-
-/* Tiling: one tile */
-.tiled_row .single {
-	width: 48.25% !important;
-}
-
-/* Tiling: remove horizontal margin at end of row. */
-.tiled_row > div:nth-child(3n),
-.tiled_row > .duo:nth-child(2) {
-	margin-right: 0 !important;
-}
-.tiled_row .column_tiles_four > div:nth-child(2n) {
-	margin-right: 0;
-}
-
-/* Tiling: switch places for odd rows */
-.tiled_row:nth-child(odd) .column_landscape,
-.tiled_row:nth-child(odd) .column_portrait {
-	float: right;
-	margin: 0 0 3.5% 3.5%;
-}
-.tiled_row:nth-child(odd) .column_tiles_four {
-	float: right;
-}
-.tiled_row:nth-child(odd) .column_tiles_two {
-	float: right;
-}
-
 
 /* Album title boxes
 ----------------------*/
 .album_title_box {
-	margin-left: -46px;
+	margin-left: -2.85rem;
 	width: 100%;
 }
 .album_title_box > a {
@@ -330,7 +241,7 @@ i.space-invader.alt-7::before {
 	border-bottom-left-radius: 0.5rem;
 	display: inline-block;
 	float: left;
-	font-size: 2em;
+	font-size: 2rem;
 	line-height: 1;
 	padding: 8px 10px;
 }
@@ -341,7 +252,7 @@ i.space-invader.alt-7::before {
 	border-bottom-right-radius: 0.5rem;
 	float: left;
 	font: inherit;
-	padding: 6px 22px;
+	padding: 0.4rem 1.3rem;
 	max-width: 90%;
 	margin: 0 0 1.5% 0;
 }
@@ -550,27 +461,15 @@ a#previous_photo:hover, a#next_photo:hover {
 		margin-left: 0;
 	}
 
-	.tiled_header {
+	.tiled-header {
 		font-size: 14px;
 		margin: 0 0 3.5% 0;
 	}
-	.tiled_grid div h4 {
+	.panorama h4 {
 		font-size: 14px;
 		padding: 15px 5px;
 	}
 
-	.tiled_row > div, .tiled_row .single, .tiled_row .duo {
-		float: none !important;
-		width: 100% !important;
-		margin: 0 0 5% !important;
-	}
-
-	.tiled_row > div > div {
-		float: none !important;
-		width: 100% !important;
-		margin: 0 0 5% !important;
-	}
-
 	#previous_photo, #next_photo {
 		display: none;
 	}

templates/AlbumIndex.php

@@ -15,6 +15,7 @@ class AlbumIndex extends Template
 
 	const TILE_WIDTH = 400;
 	const TILE_HEIGHT = 300;
+	const TILE_RATIO = self::TILE_WIDTH / self::TILE_HEIGHT;
 
 	public function __construct(array $albums, $show_edit_buttons = false, $show_labels = true)
 	{
@@ -26,57 +27,56 @@ class AlbumIndex extends Template
 	public function html_main()
 	{
 		echo '
-			<div class="tiled_grid clearfix">';
+			<div class="container album-index">
+				<div class="row g-5">';
 
-		foreach (array_chunk($this->albums, 3) as $photos)
+		foreach ($this->albums as $album)
-		{
+			$this->renderAlbum($album);
-			echo '
-					<div class="tiled_row">';
-
-			foreach ($photos as $album)
-			{
-				echo '
-						<div class="landscape">';
-
-				if ($this->show_edit_buttons)
-					echo '
-							<a class="edit" href="#">Edit</a>';
-
-				echo '
-							<a href="', $album['link'], '">';
-
-				if (isset($album['thumbnail']))
-				{
-					$thumbs = [];
-					foreach ([1, 2] as $factor)
-						$thumbs[$factor] = $album['thumbnail']->getThumbnailUrl(
-							static::TILE_WIDTH * $factor, static::TILE_HEIGHT * $factor, true, true);
-
-					echo '
-								<img src="', $thumbs[1], '"' . (isset($thumbs[2]) ?
-									' srcset="' . $thumbs[2] . ' 2x"' : '') .
-									' alt="" style="width: ', static::TILE_WIDTH,
-										'px; height: ', static::TILE_HEIGHT, 'px">';
-				}
-				else
-					echo '
-								<img src="', BASEURL, '/images/nothumb.svg" alt="" style="width: ',
-									static::TILE_WIDTH, 'px; height: ', static::TILE_HEIGHT, 'px; object-fit: unset">';
-
-				if ($this->show_labels)
-					echo '
-								<h4>', $album['caption'], '</h4>';
-
-				echo '
-							</a>
-						</div>';
-			}
-
-			echo '
-					</div>';
-		}
 
 		echo '
+				</div>
 			</div>';
 	}
+
+	private function renderAlbum(array $album)
+	{
+		echo '
+					<div class="col-md-6 col-xl-4">
+						<div class="polaroid landscape">';
+
+		if ($this->show_edit_buttons)
+			echo '
+							<a class="edit" href="#">Edit</a>';
+
+		echo '
+							<a href="', $album['link'], '">';
+
+		if (isset($album['thumbnail']))
+		{
+			$thumbs = [];
+			foreach ([1, 2] as $factor)
+				$thumbs[$factor] = $album['thumbnail']->getThumbnailUrl(
+					static::TILE_WIDTH * $factor, static::TILE_HEIGHT * $factor, true, true);
+
+			echo '
+								<img alt="" src="', $thumbs[1], '"' . (isset($thumbs[2]) ?
+									' srcset="' . $thumbs[2] . ' 2x"' : '') .
+									' alt="" style="aspect-ratio: ', self::TILE_RATIO, '">';
+		}
+		else
+		{
+			echo '
+								<img alt="" src="', BASEURL, '/images/nothumb.svg"',
+									' style="aspect-ratio: ', self::TILE_RATIO, '; object-fit: unset">';
+		}
+
+		if ($this->show_labels)
+			echo '
+								<h4>', $album['caption'], '</h4>';
+
+		echo '
+							</a>
+						</div>
+					</div>';
+	}
 }

templates/PhotosIndex.php

@@ -45,13 +45,13 @@ 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--)
 		{
 			list($photos, $what) = $row;
 			$this->header($photos);
-			$this->$what($photos);
+			$this->$what($photos, $i % 2);
 		}
 
 		echo '
@@ -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 '
@@ -112,100 +115,158 @@ class PhotosIndex extends Template
 				</div>';
 	}
 
-	protected function panorama(array $photos)
+	protected function panorama(array $photos, $altLayout)
 	{
 		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)
+	protected function portrait(array $photos, $altLayout)
 	{
 		$image = array_shift($photos);
 
 		echo '
-				<div class="tiled_row">
+				<div class="row g-5 mb-5 tile-feat-portrait',
-					<div class="column_portrait">';
+					$altLayout ? ' flex-row-reverse' : '', '">
+					<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>';
 	}
 
-	protected function landscape(array $photos)
+	protected function landscape(array $photos, $altLayout)
 	{
 		$image = array_shift($photos);
 
 		echo '
-				<div class="tiled_row">
+				<div class="row g-5 mb-5 tile-feat-landscape',
-					<div class="column_landscape">';
+					$altLayout ? ' flex-row-reverse' : '', '">
+					<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>';
+	}
+
+	protected function duo(array $photos, $altLayout)
+	{
+		echo '
+				<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>';
+	}
+
+	protected function single(array $photos, $altLayout)
+	{
+		echo '
+				<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 duo(array $photos)
+	protected function landscapes(array $photos, $altLayout)
 	{
 		echo '
-				<div class="tiled_row">';
+				<div class="row g-5 mb-5 tile-row-landscapes">';
 
 		foreach ($photos as $image)
-			$this->photo($image, 'duo', static::DUO_WIDTH, static::DUO_HEIGHT, true);
+		{
+			echo '
+					<div class="col-md-4">';
 
-		echo '
-				</div>';
-	}
-
-	protected function single(array $photos)
-	{
-		echo '
-				<div class="tiled_row">';
-
-		$image = array_shift($photos);
-		$this->photo($image, 'single', static::SINGLE_WIDTH, static::SINGLE_HEIGHT, 'top');
-
-		echo '
-				</div>';
-	}
-
-	protected function row(array $photos)
-	{
-		echo '
-				<div class="tiled_row">';
-
-		foreach ($photos as $image)
 			$this->photo($image, 'landscape', static::TILE_WIDTH, static::TILE_HEIGHT, true);
 
+			echo '
+					</div>';
+		}
+
 		echo '
 				</div>';
 	}
 
-	protected function portraits(array $photos)
+	protected function portraits(array $photos, $altLayout)
 	{
 		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>';
 	}