From: Marek Bachmann 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('|(.*)|', '', $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 @@ + + +
+
+ {{foreach $columns.fc as $img}} + {{include file="content/image.tpl" image=$img}} + {{/foreach}} +
+
+ {{foreach $columns.sc as $img}} + {{include file="content/image.tpl" image=$img}} + {{/foreach}} +
+
\ 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 @@ +
{{$images}}
\ 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