Merge pull request #12400 from MrPetovan/task/image-grid

Normalize padding in image grid

src/Model/Item.php

@@ -3146,18 +3146,18 @@ class Item
 	 */
 	public static function makeImageGrid(array $images): string
 	{
-		$landscapeimages = array();
+		$landscapeimages = [];
-		$portraitimages = array();
+		$portraitimages  = [];
 
 		foreach ($images as $image) {
 			($image['attachment']['width'] > $image['attachment']['height']) ? ($landscapeimages[] = $image) : ($portraitimages[] = $image);
 		}
 
 		// Image for first column (fc) and second column (sc)
-		$images_fc = array();
+		$images_fc = [];
-		$images_sc = array();
+		$images_sc = [];
-		$lcount = count($landscapeimages);
+		$lcount    = count($landscapeimages);
-		$pcount = count($portraitimages);
+		$pcount    = count($portraitimages);
 		if ($lcount == 0 || $pcount == 0) {
 			if ($lcount == 0) {
 				// only portrait
@@ -3424,9 +3424,8 @@ class Item
 		$media = '';
 		if (count($images) > 1) {
 			$media = self::makeImageGrid($images);
-		}
+		} elseif (count($images) == 1) {
-		elseif (count($images) == 1) {
+			$media = Renderer::replaceMacros(Renderer::getMarkupTemplate('content/image.tpl'), [
-			$media = $media = Renderer::replaceMacros(Renderer::getMarkupTemplate('content/image.tpl'), [
 				'$image' => $images[0],
 			]);
 		}

view/global.css

@@ -687,25 +687,22 @@ audio {
 .imagegrid-row {
 	display: -ms-flexbox; /* IE10 */
 	display: flex;
-	-ms-flex-wrap: wrap; /* IE10 */
+	margin-top: 1em;
-	flex-wrap: wrap;
+	column-gap: 5px;
-	padding: 0 4px;
-	box-sizing: border-box;
 }
 
-/* Create four equal columns that sits next to each other */
 .imagegrid-column {
 	-ms-flex: 50%; /* IE10 */
 	flex: 50%;
-	max-width: 50%;
+	display: -ms-flexbox; /* IE10 */
-	padding: 0 4px;
+	display: flex;
-	box-sizing: border-box;
+	flex-direction: column;
+	row-gap: 5px;
 }
 
 .imagegrid-column img {
-	margin-top: 8px;
+	-ms-flex: 50%; /* IE10 */
-	vertical-align: middle;
+	flex: 50%;
-	width: 100%;
 }
 /**
  * Image grid settings END

view/templates/content/image.tpl

@@ -3,4 +3,3 @@
 {{else}}
 <img src="{{$image.src}}" alt="{{$image.attachment.description}}" title="{{$image.attachment.description}}">
 {{/if}}
-<br>