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

This commit is contained in:
Marek Bachmann 2022-12-05 03:27:51 +01:00
parent 7833da5196
commit 6753eeab8b
4 changed files with 94 additions and 1 deletions

View file

@ -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
*

View file

@ -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>

View file

@ -0,0 +1 @@
<div class="column">{{$images}}</div>

View file

@ -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%;
}
}