Merge pull request #12334 from MarekBenjamin/new_image_presentation
Show Images in posts in an image grid
This commit is contained in:
Hypolite Petovan
GitHub
commit
c38dcc2f41
|
|
@ -28,7 +28,6 @@ use Friendica\Core\Logger;
|
|||
use Friendica\Core\Protocol;
|
||||
use Friendica\Core\Renderer;
|
||||
use Friendica\Core\System;
|
||||
use Friendica\Model\Tag;
|
||||
use Friendica\Core\Worker;
|
||||
use Friendica\Database\DBA;
|
||||
use Friendica\DI;
|
||||
|
|
@ -3003,6 +3002,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'])) {
|
||||
|
|
@ -3061,6 +3061,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"];
|
||||
|
|
@ -3095,6 +3096,7 @@ class Item
|
|||
];
|
||||
Hook::callAll('prepare_body', $hook_data);
|
||||
$s = $hook_data['html'];
|
||||
|
||||
unset($hook_data);
|
||||
|
||||
if (!$attach) {
|
||||
|
|
@ -3134,10 +3136,131 @@ class Item
|
|||
|
||||
$hook_data = ['item' => $item, 'html' => $s];
|
||||
Hook::callAll('prepare_body_final', $hook_data);
|
||||
|
||||
return $hook_data['html'];
|
||||
}
|
||||
|
||||
/**
|
||||
* @param array $images
|
||||
* @return string
|
||||
* @throws \Friendica\Network\HTTPException\ServiceUnavailableException
|
||||
*/
|
||||
public static function makeImageGrid(array $images): string
|
||||
{
|
||||
$landscapeimages = array();
|
||||
$portraitimages = array();
|
||||
|
||||
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_sc = array();
|
||||
$lcount = count($landscapeimages);
|
||||
$pcount = count($portraitimages);
|
||||
if ($lcount == 0 || $pcount == 0) {
|
||||
if ($lcount == 0) {
|
||||
// only portrait
|
||||
for ($i = 0; $i < $pcount; $i++) {
|
||||
($i % 2 == 0) ? ($images_fc[] = $portraitimages[$i]) : ($images_sc[] = $portraitimages[$i]);
|
||||
}
|
||||
}
|
||||
if ($pcount == 0) {
|
||||
// ony landscapes
|
||||
for ($i = 0; $i < $lcount; $i++) {
|
||||
($i % 2 == 0) ? ($images_fc[] = $landscapeimages[$i]) : ($images_sc[] = $landscapeimages[$i]);
|
||||
}
|
||||
}
|
||||
} else {
|
||||
// Mix of landscape and portrait images.
|
||||
if ($lcount == $pcount) {
|
||||
// equal amount of landscapes and portraits
|
||||
for ($l = 0; $l < $lcount; $l++) {
|
||||
if ($l % 2 == 0) {
|
||||
$images_fc[] = $landscapeimages[$l];
|
||||
$images_fc[] = $portraitimages[$l];
|
||||
} else {
|
||||
$images_sc[] = $portraitimages[$l];
|
||||
$images_sc[] = $landscapeimages[$l];
|
||||
}
|
||||
}
|
||||
}
|
||||
if ($lcount > $pcount) {
|
||||
// More landscapes than portraits
|
||||
$p = 0;
|
||||
$l = 0;
|
||||
while ($l < $lcount) {
|
||||
if (($lcount > $l + 1) && ($pcount > $l)) {
|
||||
// we have one more landscape that can be used for the l-th portrait
|
||||
$images_fc[] = $landscapeimages[$l++];
|
||||
}
|
||||
$images_fc[] = $landscapeimages[$l++];
|
||||
if ($pcount > $p) {
|
||||
$images_sc[] = $portraitimages[$p++];
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
if ($lcount < $pcount) {
|
||||
// More portraits than landscapes
|
||||
if ($lcount % 2 == 0 && $pcount % 2 == 0) {
|
||||
/*
|
||||
* even number of landscapes and portraits, but fewer landscapes than portraits. Iterate to the end
|
||||
* of landscapes array
|
||||
*/
|
||||
$i = 0;
|
||||
while ($i < $lcount) {
|
||||
if ($i % 2 == 0) {
|
||||
$images_fc[] = $landscapeimages[$i];
|
||||
$images_fc[] = $portraitimages[$i];
|
||||
} else {
|
||||
$images_sc[] = $portraitimages[$i];
|
||||
$images_sc[] = $landscapeimages[$i];
|
||||
}
|
||||
$i++;
|
||||
}
|
||||
// Rest portraits
|
||||
while ($i < $pcount) {
|
||||
if ($i % 2 == 0) {
|
||||
$images_fc[] = $portraitimages[$i];
|
||||
} else {
|
||||
$images_sc[] = $portraitimages[$i];
|
||||
}
|
||||
$i++;
|
||||
}
|
||||
|
||||
}
|
||||
if ($lcount % 2 != 0 && $pcount % 2 == 0) {
|
||||
// uneven landscapes count even portraits count.
|
||||
for ($p = 0; $p < $pcount; $p++) {
|
||||
// --> First all portraits until
|
||||
if ($p % 2 == 0) {
|
||||
$images_fc[] = $portraitimages[$p];
|
||||
} else {
|
||||
$images_sc[] = $portraitimages[$p];
|
||||
}
|
||||
}
|
||||
// and now the (uneven) landscapes
|
||||
for ($l = 0; $l < $lcount; $l++) {
|
||||
// --> First all portraits until
|
||||
if ($l % 2 == 0) {
|
||||
$images_fc[] = $landscapeimages[$l];
|
||||
} else {
|
||||
$images_sc[] = $landscapeimages[$l];
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
return Renderer::replaceMacros(Renderer::getMarkupTemplate('content/image_grid.tpl'), [
|
||||
'columns' => [
|
||||
'fc' => $images_fc,
|
||||
'sc' => $images_sc,
|
||||
],
|
||||
]);
|
||||
}
|
||||
|
||||
/**
|
||||
* Check if the body contains a link
|
||||
*
|
||||
|
|
@ -3289,16 +3412,21 @@ class Item
|
|||
}
|
||||
}
|
||||
|
||||
foreach ($images as $image) {
|
||||
$media = Renderer::replaceMacros(Renderer::getMarkupTemplate('content/image.tpl'), [
|
||||
'$image' => $image,
|
||||
$media = '';
|
||||
if (count($images) > 1) {
|
||||
$media = self::makeImageGrid($images);
|
||||
}
|
||||
elseif (count($images) == 1) {
|
||||
$media = $media = Renderer::replaceMacros(Renderer::getMarkupTemplate('content/image.tpl'), [
|
||||
'$image' => $images[0],
|
||||
]);
|
||||
// On Diaspora posts the attached pictures are leading
|
||||
if ($item['network'] == Protocol::DIASPORA) {
|
||||
$leading .= $media;
|
||||
} else {
|
||||
$trailing .= $media;
|
||||
}
|
||||
}
|
||||
|
||||
// On Diaspora posts the attached pictures are leading
|
||||
if ($item['network'] == Protocol::DIASPORA) {
|
||||
$leading .= $media;
|
||||
} else {
|
||||
$trailing .= $media;
|
||||
}
|
||||
|
||||
if ($shared) {
|
||||
|
|
|
|||
|
|
@ -680,3 +680,33 @@ span.required {
|
|||
audio {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
/**
|
||||
* Image grid settings START
|
||||
**/
|
||||
.imagegrid-row {
|
||||
display: -ms-flexbox; /* IE10 */
|
||||
display: flex;
|
||||
-ms-flex-wrap: wrap; /* IE10 */
|
||||
flex-wrap: wrap;
|
||||
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%;
|
||||
padding: 0 4px;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.imagegrid-column img {
|
||||
margin-top: 8px;
|
||||
vertical-align: middle;
|
||||
width: 100%;
|
||||
}
|
||||
/**
|
||||
* Image grid settings END
|
||||
**/
|
||||
|
|
@ -0,0 +1,12 @@
|
|||
<div class="imagegrid-row">
|
||||
<div class="imagegrid-column">
|
||||
{{foreach $columns.fc as $img}}
|
||||
{{include file="content/image.tpl" image=$img}}
|
||||
{{/foreach}}
|
||||
</div>
|
||||
<div class="imagegrid-column">
|
||||
{{foreach $columns.sc as $img}}
|
||||
{{include file="content/image.tpl" image=$img}}
|
||||
{{/foreach}}
|
||||
</div>
|
||||
</div>
|
||||
Loading…
Reference in New Issue