Merge pull request #12400 from MrPetovan/task/image-grid

Normalize padding in image grid
This commit is contained in:
Michael Vogel 2022-12-13 16:21:06 +01:00 committed by GitHub
commit 846709eba8
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
3 changed files with 17 additions and 22 deletions

View file

@ -3096,7 +3096,7 @@ class Item
];
Hook::callAll('prepare_body', $hook_data);
$s = $hook_data['html'];
unset($hook_data);
if (!$attach) {
@ -3146,18 +3146,18 @@ class Item
*/
public static function makeImageGrid(array $images): string
{
$landscapeimages = array();
$portraitimages = array();
$landscapeimages = [];
$portraitimages = [];
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);
$images_fc = [];
$images_sc = [];
$lcount = count($landscapeimages);
$pcount = count($portraitimages);
if ($lcount == 0 || $pcount == 0) {
if ($lcount == 0) {
// only portrait
@ -3424,9 +3424,8 @@ class Item
$media = '';
if (count($images) > 1) {
$media = self::makeImageGrid($images);
}
elseif (count($images) == 1) {
$media = $media = Renderer::replaceMacros(Renderer::getMarkupTemplate('content/image.tpl'), [
} elseif (count($images) == 1) {
$media = Renderer::replaceMacros(Renderer::getMarkupTemplate('content/image.tpl'), [
'$image' => $images[0],
]);
}

View file

@ -687,25 +687,22 @@ audio {
.imagegrid-row {
display: -ms-flexbox; /* IE10 */
display: flex;
-ms-flex-wrap: wrap; /* IE10 */
flex-wrap: wrap;
padding: 0 4px;
box-sizing: border-box;
margin-top: 1em;
column-gap: 5px;
}
/* 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;
display: -ms-flexbox; /* IE10 */
display: flex;
flex-direction: column;
row-gap: 5px;
}
.imagegrid-column img {
margin-top: 8px;
vertical-align: middle;
width: 100%;
-ms-flex: 50%; /* IE10 */
flex: 50%;
}
/**
* Image grid settings END

View file

@ -3,4 +3,3 @@
{{else}}
<img src="{{$image.src}}" alt="{{$image.attachment.description}}" title="{{$image.attachment.description}}">
{{/if}}
<br>