From: Marek Bachmann <marek.bachmann@comtec.eecs.uni-kassel.de>
Date: Mon, 5 Dec 2022 02:27:51 +0000 (+0100)
Subject: First draft for using a image grid to display attached images.
X-Git-Url: https://git.mxchange.org/?a=commitdiff_plain;h=6753eeab8b2f28c0736d0ba446e3b6f854aa1ec2;p=friendica.git

First draft for using a image grid to display attached images.
---

diff --git a/src/Model/Item.php b/src/Model/Item.php
index 8026d567cb..1fff0a5869 100644
--- a/src/Model/Item.php
+++ b/src/Model/Item.php
@@ -2991,6 +2991,7 @@ class Item
 		$a = DI::app();
 		Hook::callAll('prepare_body_init', $item);
 
+
 		// In order to provide theme developers more possibilities, event items
 		// are treated differently.
 		if ($item['object-type'] === Activity\ObjectType::EVENT && isset($item['event-id'])) {
@@ -3049,6 +3050,7 @@ class Item
 		$item['body'] = self::replaceVisualAttachments($attachments, $item['body'] ?? '');
 
 		$item['body'] = preg_replace("/\s*\[attachment .*?\].*?\[\/attachment\]\s*/ism", "\n", $item['body']);
+
 		self::putInCache($item);
 		$item['body'] = $body;
 		$s = $item["rendered-html"];
@@ -3082,7 +3084,10 @@ class Item
 			'filter_reasons' => $filter_reasons
 		];
 		Hook::callAll('prepare_body', $hook_data);
-		$s = $hook_data['html'];
+		// Remove old images
+		$hook_data['html'] = preg_replace('|(<a.*><img.*>.*</a>)|', '', $hook_data['html']);
+		$grid = self::make_image_grid($hook_data);
+		$s = $hook_data['html'] . $grid;
 		unset($hook_data);
 
 		if (!$attach) {
@@ -3126,6 +3131,36 @@ class Item
 		return $hook_data['html'];
 	}
 
+	private function make_image_grid(array &$data)
+	{
+		$item = $data['item'];
+		if ($item['has-media']) {
+			$attachments = Post\Media::splitAttachments($item['uri-id'], [], $item['has-media'] ?? false);
+			if (count($attachments['visual']) > 1) {
+				$img_tags = array();
+				foreach ($attachments['visual'] as $attachment) {
+					$src_url = Post\Media::getUrlForId($attachment['id']);
+					$preview_url = Post\Media::getPreviewUrlForId($attachment['id'], ($attachment['width'] > $attachment['height']) ? Proxy::SIZE_MEDIUM : Proxy::SIZE_LARGE);
+					$img_tag = array(
+						'$image' => [
+							'src' => $src_url,
+							'preview' => $preview_url,
+							'attachment' => $attachment,
+					]);
+					$img_tags[] = $img_tag;
+				}
+				$img_grid = Renderer::replaceMacros(Renderer::getMarkupTemplate('content/image_grid.tpl'), [
+					'columns' => [
+						'fc' => $img_tags[0],
+						'sc' => $img_tags[1],
+					],
+				]);
+				return $img_grid;
+			}
+		}
+
+	}
+
 	/**
 	 * Check if the body contains a link
 	 *
diff --git a/view/templates/content/image_grid.tpl b/view/templates/content/image_grid.tpl
new file mode 100644
index 0000000000..7a06d33726
--- /dev/null
+++ b/view/templates/content/image_grid.tpl
@@ -0,0 +1,14 @@
+<link rel="stylesheet" href="view/theme/frio/css/image_grid.css" type="text/css" media="screen"/>
+
+<div id="row" class="row">
+	<div class="column">
+        {{foreach $columns.fc as $img}}
+        	{{include file="content/image.tpl" image=$img}}
+		{{/foreach}}
+	</div>
+	<div class="column">
+        {{foreach $columns.sc as $img}}
+    	    {{include file="content/image.tpl" image=$img}}
+		{{/foreach}}
+	</div>
+</div>
\ No newline at end of file
diff --git a/view/templates/content/image_grid_column.tpl b/view/templates/content/image_grid_column.tpl
new file mode 100644
index 0000000000..6a58a4bda2
--- /dev/null
+++ b/view/templates/content/image_grid_column.tpl
@@ -0,0 +1 @@
+<div class="column">{{$images}}</div>
\ No newline at end of file
diff --git a/view/theme/frio/css/image_grid.css b/view/theme/frio/css/image_grid.css
new file mode 100644
index 0000000000..dd29dd201d
--- /dev/null
+++ b/view/theme/frio/css/image_grid.css
@@ -0,0 +1,43 @@
+* {
+	box-sizing: border-box;
+}
+
+.row {
+	display: -ms-flexbox; /* IE10 */
+	display: flex;
+	-ms-flex-wrap: wrap; /* IE10 */
+	flex-wrap: wrap;
+	padding: 0 4px;
+}
+
+/* Create four equal columns that sits next to each other */
+.column {
+	-ms-flex: 50%; /* IE10 */
+	flex: 50%;
+	max-width: 50%;
+	padding: 0 4px;
+}
+
+.column img {
+	margin-top: 8px;
+	vertical-align: middle;
+	width: 100%;
+}
+
+/*!* Responsive layout - makes a two column-layout instead of four columns *!*/
+/*@media screen and (max-width: 50px) {*/
+/*	.column {*/
+/*		-ms-flex: 50%;*/
+/*		flex: 50%;*/
+/*		max-width: 50%;*/
+/*	}*/
+/*}*/
+
+/* Responsive layout - makes the two columns stack on top of each other instead of next to each other */
+@media screen and (max-width: 150px) {
+	.column {
+		-ms-flex: 100%;
+		flex: 100%;
+		max-width: 100%;
+	}
+}
\ No newline at end of file