controllers/ViewPhoto.php

@@ -37,10 +37,9 @@ class ViewPhoto extends HTMLController
 	{
 		$page = new PhotoPage($this->photo);
 
-		// Exif data?
+		// Any (EXIF) meta data?
-		$exif = EXIF::fromFile($this->photo->getFullPath());
+		$metaData = $this->prepareMetaData();
-		if ($exif)
+		$page->setMetaData($metaData);
-			$page->setExif($exif);
 
 		// What tag are we browsing?
 		$tag = isset($_GET['in']) ? Tag::fromId($_GET['in']) : null;
@@ -73,9 +72,43 @@ class ViewPhoto extends HTMLController
 		// ... deleting, that is.
 		else
 		{
-			$photo->unlinkTags([(int) $_POST['id_tag']]);
+			$this->photo->unlinkTags([(int) $_POST['id_tag']]);
 			echo json_encode(['success' => true]);
 			exit;
 		}
 	}
+
+	private function prepareMetaData()
+	{
+		if (!($exif = EXIF::fromFile($this->photo->getFullPath())))
+			throw new UnexpectedValueException('Photo file not found!');
+
+		$metaData = [];
+
+		if (!empty($exif->created_timestamp))
+			$metaData['Date Taken'] = date("j M Y, H:i:s", $exif->created_timestamp);
+
+		if ($author = $this->photo->getAuthor())
+			$metaData['Uploaded by'] = $author->getfullName();
+
+		if (!empty($exif->camera))
+			$metaData['Camera Model'] = $exif->camera;
+
+		if (!empty($exif->shutter_speed))
+			$metaData['Shutter Speed'] = $exif->shutterSpeedFraction();
+
+		if (!empty($exif->aperture))
+			$metaData['Aperture'] = number_format($exif->aperture, 1);
+
+		if (!empty($exif->focal_length))
+			$metaData['Focal Length'] = $exif->focal_length;
+
+		if (!empty($exif->iso))
+			$metaData['ISO Speed'] = $exif->iso;
+
+		if (!empty($exif->software))
+			$metaData['Software'] = $exif->software;
+
+		return $metaData;
+	}
 }

public/css/default.css

@@ -523,7 +523,7 @@ a#previous_photo:hover, a#next_photo:hover {
 	right: 0;
 }
 
-#sub_photo h2, #sub_photo h3, #photo_exif_box h3, #user_actions_box h3 {
+#sub_photo h2, #sub_photo h3 {
 	margin-bottom: 1rem;
 }
 #sub_photo #tag_list {
@@ -542,18 +542,17 @@ a#previous_photo:hover, a#next_photo:hover {
 	opacity: 1.0;
 }
 
-
+.photo_meta {
-#photo_exif_box dt {
+	background-color: var(--bs-body-bg);
+	box-shadow: 0 0.25rem 0.5rem rgba(0,0,0,0.1);
+}
+.photo_meta li {
+	padding: 0.6rem 1rem;
+}
+.photo_meta h4 {
+	font-family: 'Coda', sans-serif;
+	font-size: inherit;
 	font-weight: bold;
-	float: left;
-	clear: left;
-	width: 120px;
-}
-#photo_exif_box dt:after {
-	content: ':';
-}
-#photo_exif_box dd {
-	float: left;
 	margin: 0;
 }
 
@@ -583,13 +582,6 @@ a#previous_photo:hover, a#next_photo:hover {
 	#previous_photo, #next_photo {
 		display: none;
 	}
-
-	#sub_photo, #photo_exif_box {
-		float: none;
-		margin: 30px 0;
-		padding: 10px;
-		width: auto;
-	}
 }
 
 

templates/PhotoPage.php

@@ -8,8 +8,8 @@
 
 class PhotoPage extends Template
 {
-	protected $photo;
+	private $photo;
-	private $exif;
+	private $metaData;
 	private $tag;
 
 	public function __construct(Image $photo)
@@ -100,52 +100,19 @@ class PhotoPage extends Template
 	private function photoMeta()
 	{
 		echo '
-				<div id="photo_exif_box" class="content-box clearfix">
+				<ul class="list-group photo_meta">';
-					<h3>EXIF</h3>
-					<dl class="photo_meta">';
 
-		if (!empty($this->exif->created_timestamp))
+		foreach ($this->metaData as $header => $body)
+		{
 			echo '
-						<dt>Date Taken</dt>
+					<li class="list-group-item">
-						<dd>', date("j M Y, H:i:s", $this->exif->created_timestamp), '</dd>';
+						<h4>', $header, '</h4>
+						', $body, '
+					</li>';
+		}
 
 		echo '
-						<dt>Uploaded by</dt>
+				</ul>';
-						<dd>', $this->photo->getAuthor()->getfullName(), '</dd>';
-
-		if (!empty($this->exif->camera))
-			echo '
-						<dt>Camera Model</dt>
-						<dd>', $this->exif->camera, '</dd>';
-
-		if (!empty($this->exif->shutter_speed))
-			echo '
-						<dt>Shutter Speed</dt>
-						<dd>', $this->exif->shutterSpeedFraction(), '</dd>';
-
-		if (!empty($this->exif->aperture))
-			echo '
-						<dt>Aperture</dt>
-						<dd>f/', number_format($this->exif->aperture, 1), '</dd>';
-
-		if (!empty($this->exif->focal_length))
-			echo '
-						<dt>Focal Length</dt>
-						<dd>', $this->exif->focal_length, ' mm</dd>';
-
-		if (!empty($this->exif->iso))
-			echo '
-						<dt>ISO Speed</dt>
-						<dd>', $this->exif->iso, '</dd>';
-
-		if (!empty($this->exif->software))
-			echo '
-						<dt>Software</dt>
-						<dd>', $this->exif->software, '</dd>';
-
-		echo '
-					</dl>
-				</div>';
 	}
 
 	private function taggedPeople()
@@ -240,9 +207,9 @@ class PhotoPage extends Template
 				</script>';
 	}
 
-	public function setExif(EXIF $exif)
+	public function setMetaData(array $metaData)
 	{
-		$this->exif = $exif;
+		$this->metaData = $metaData;
 	}
 
 	public function userActions()