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

diff --git a/src/Model/Item.php b/src/Model/Item.php
index 8026d567cbc22c91ef0fab4c46b10a357569849a..1fff0a586981ac5fc4cb3713841c48d6c79c71eb 100644 (file)
--- 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 (file)
index 0000000..7a06d33
--- /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 (file)
index 0000000..6a58a4b
--- /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 (file)
index 0000000..dd29dd2
--- /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