From fc5e60e97b506f1f241eea50edc7bbc828c43b83 Mon Sep 17 00:00:00 2001 From: Hypolite Petovan Date: Sat, 23 Sep 2023 15:31:47 -0400 Subject: [PATCH 1/7] [frio] Change "Ignore thread" icon to slashed bell - The slashed eye is better used for ignoring content, not notifications --- view/theme/frio/templates/search_item.tpl | 4 ++-- view/theme/frio/templates/wall_thread.tpl | 8 ++++---- 2 files changed, 6 insertions(+), 6 deletions(-) diff --git a/view/theme/frio/templates/search_item.tpl b/view/theme/frio/templates/search_item.tpl index 2d130cab8..bdc2ca384 100644 --- a/view/theme/frio/templates/search_item.tpl +++ b/view/theme/frio/templates/search_item.tpl @@ -240,10 +240,10 @@ {{if $item.ignore}}
  • - {{$item.ignore.do}} + {{$item.ignore.do}}
  • - {{$item.ignore.undo}} + {{$item.ignore.undo}}
    • {{/if}} diff --git a/view/theme/frio/templates/wall_thread.tpl b/view/theme/frio/templates/wall_thread.tpl index 16494e1c0..00e738d9a 100644 --- a/view/theme/frio/templates/wall_thread.tpl +++ b/view/theme/frio/templates/wall_thread.tpl @@ -381,10 +381,10 @@ as the value of $top_child_total (this is done at the end of this file) {{if $item.ignore}}
  • - {{$item.ignore.do}} + {{$item.ignore.do}}
  • - {{$item.ignore.undo}} + {{$item.ignore.undo}}
    • {{/if}} @@ -560,10 +560,10 @@ as the value of $top_child_total (this is done at the end of this file) {{if $item.ignore}}
  • - {{$item.ignore.do}} + {{$item.ignore.do}}
  • - {{$item.ignore.undo}} + {{$item.ignore.undo}}
    • {{/if}} From 3cc469c0b76114821836474e89ab06e8c1891404 Mon Sep 17 00:00:00 2001 From: Hypolite Petovan Date: Sat, 23 Sep 2023 15:56:49 -0400 Subject: [PATCH 2/7] Rework image grid into a horizontal masonry - The new server-based horizontal masonry enables tightly packed image grids even with images of varying aspect ratios - Additionally, the space an image takes is now allocated before it's loaded, reducing content shifting --- src/Model/Item.php | 60 ++++++++++++++++++++++----- view/global.css | 27 ++++++------ view/templates/content/image.tpl | 4 +- view/templates/content/image_grid.tpl | 20 ++++----- 4 files changed, 77 insertions(+), 34 deletions(-) diff --git a/src/Model/Item.php b/src/Model/Item.php index de8c2e6da..8b0fa29a2 100644 --- a/src/Model/Item.php +++ b/src/Model/Item.php @@ -3268,25 +3268,64 @@ class Item } /** + * Creates a horizontally masoned gallery with a fixed maximum number of pictures per row. + * + * For each row, we calculate how much of the total width each picture will take depending on their aspect ratio + * and how much relative height it needs to accomodate all pictures next to each other with their height normalized. + * * @param array $images * @return string * @throws \Friendica\Network\HTTPException\ServiceUnavailableException */ private static function makeImageGrid(array $images): string { - // Image for first column (fc) and second column (sc) - $images_fc = []; - $images_sc = []; + static $column_size = 2; - for ($i = 0; $i < count($images); $i++) { - ($i % 2 == 0) ? ($images_fc[] = $images[$i]) : ($images_sc[] = $images[$i]); - } + $rows = array_map( + function (array $row_images) { + if ($singleImageInRow = count($row_images) == 1) { + $row_images[] = $row_images[0]; + } + + $widths = []; + $heights = []; + foreach ($row_images as $image) { + $widths[] = $image['attachment']['width']; + $heights[] = $image['attachment']['height']; + } + + $maxHeight = max($heights); + + // Corrected height preserving aspect ratio when all images on a row are + $correctedWidths = []; + foreach ($widths as $i => $width) { + $correctedWidths[] = $width * $maxHeight / $heights[$i]; + } + + $totalWidth = array_sum($correctedWidths); + + foreach ($row_images as $i => $image) { + $row_images[$i]['gridWidth'] = $correctedWidths[$i]; + $row_images[$i]['gridHeight'] = $maxHeight; + $row_images[$i]['heightRatio'] = 100 * $maxHeight / $correctedWidths[$i]; + // Ratio of the width of the image relative to the total width of the images on the row + $row_images[$i]['widthRatio'] = 100 * $correctedWidths[$i] / $totalWidth; + // This magic value will stay constant for each image of any given row and + // is ultimately used to determine the height of the row container + $row_images[$i]['commonHeightRatio'] = 100 * $correctedWidths[$i] / $totalWidth / ($widths[$i] / $heights[$i]); + } + + if ($singleImageInRow) { + unset($row_images[1]); + } + + return $row_images; + }, + array_chunk($images, $column_size) + ); return Renderer::replaceMacros(Renderer::getMarkupTemplate('content/image_grid.tpl'), [ - 'columns' => [ - 'fc' => $images_fc, - 'sc' => $images_sc, - ], + 'rows' => $rows, ]); } @@ -3464,6 +3503,7 @@ class Item if (self::containsLink($item['body'], $src_url)) { continue; } + $images[] = ['src' => $src_url, 'preview' => $preview_url, 'attachment' => $attachment, 'uri_id' => $item['uri-id']]; } } diff --git a/view/global.css b/view/global.css index 714bb55db..054ac0515 100644 --- a/view/global.css +++ b/view/global.css @@ -685,22 +685,25 @@ audio { .imagegrid-row { display: -ms-flexbox; /* IE10 */ display: flex; - margin-top: 1em; + /* Both the following values should be the same to ensure consistent margins between images in the grid */ column-gap: 5px; + margin-top: 5px; } -.imagegrid-column { - -ms-flex: 50%; /* IE10 */ - flex: 50%; - display: -ms-flexbox; /* IE10 */ - display: flex; - flex-direction: column; - row-gap: 5px; +/* This helps allocating space for image before they loaded, preventing content shifting once they are + * Inspired by https://www.smashingmagazine.com/2016/08/ways-to-reduce-content-shifting-on-page-load/ + * Please note: The space is effectively allocated using padding-bottom using the image ratio as a value. + * In the image grid, this ratio isn't known in advance so no value is set in the stylesheet. + */ +.imagegrid-row figure { + position: relative; } - -.imagegrid-column img { - -ms-flex: 50%; /* IE10 */ - flex: 50%; +.imagegrid-row figure img{ + position: absolute; + top: 0; + right: 0; + bottom: 0; + left: 0; } /** * Image grid settings END diff --git a/view/templates/content/image.tpl b/view/templates/content/image.tpl index 00b1aac10..16610722c 100644 --- a/view/templates/content/image.tpl +++ b/view/templates/content/image.tpl @@ -1,5 +1,7 @@ {{if $image.preview}} -{{$image.attachment.description}} + + {{$image.attachment.description}} + {{else}} {{$image.attachment.description}} {{/if}} diff --git a/view/templates/content/image_grid.tpl b/view/templates/content/image_grid.tpl index 95e49ee3e..35e9324ae 100644 --- a/view/templates/content/image_grid.tpl +++ b/view/templates/content/image_grid.tpl @@ -1,12 +1,10 @@ -
    -
    - {{foreach $columns.fc as $img}} - {{include file="content/image.tpl" image=$img}} - {{/foreach}} +{{foreach $rows as $images}} +
    + {{foreach $images as $image}} + {{* The absolute pixel value in the calc() should be mirrored from the .imagegrid-row column-gap value *}} +
    + {{include file="content/image.tpl" image=$image}} +
    + {{/foreach}}
    -
    - {{foreach $columns.sc as $img}} - {{include file="content/image.tpl" image=$img}} - {{/foreach}} -
    -
    \ No newline at end of file +{{/foreach}} From fad760f46abb43d17271506f484dc8ccebfa05b4 Mon Sep 17 00:00:00 2001 From: Hypolite Petovan Date: Sat, 23 Sep 2023 17:03:59 -0400 Subject: [PATCH 3/7] Add icon placeholder for images in image grid --- src/Model/Profile.php | 8 +++++--- src/Module/Photo.php | 2 +- view/global.css | 1 + view/theme/frio/scheme/black.css | 4 ++++ view/theme/frio/scheme/dark.css | 4 ++++ 5 files changed, 15 insertions(+), 4 deletions(-) diff --git a/src/Model/Profile.php b/src/Model/Profile.php index b80c83881..9c7aab54a 100644 --- a/src/Model/Profile.php +++ b/src/Model/Profile.php @@ -813,12 +813,14 @@ class Profile /** * Set the visitor cookies (see remote_user()) for signed HTTP requests - ( + * + * @param array $server The content of the $_SERVER superglobal * @return array Visitor contact array + * @throws InternalServerErrorException */ - public static function addVisitorCookieForHTTPSigner(): array + public static function addVisitorCookieForHTTPSigner(array $server): array { - $requester = HTTPSignature::getSigner('', $_SERVER); + $requester = HTTPSignature::getSigner('', $server); if (empty($requester)) { return []; } diff --git a/src/Module/Photo.php b/src/Module/Photo.php index c8e0656d2..be2408edf 100644 --- a/src/Module/Photo.php +++ b/src/Module/Photo.php @@ -77,7 +77,7 @@ class Photo extends BaseApi throw new NotModifiedException(); } - Profile::addVisitorCookieForHTTPSigner(); + Profile::addVisitorCookieForHTTPSigner($this->server); $customsize = 0; $square_resize = true; diff --git a/view/global.css b/view/global.css index 054ac0515..6bee34b8b 100644 --- a/view/global.css +++ b/view/global.css @@ -697,6 +697,7 @@ audio { */ .imagegrid-row figure { position: relative; + background: center / auto rgba(0, 0, 0, 0.05) url(/images/icons/image.png) no-repeat; } .imagegrid-row figure img{ position: absolute; diff --git a/view/theme/frio/scheme/black.css b/view/theme/frio/scheme/black.css index debf9d99b..21a40f1c7 100644 --- a/view/theme/frio/scheme/black.css +++ b/view/theme/frio/scheme/black.css @@ -394,3 +394,7 @@ input[type="text"].tt-input { textarea#profile-jot-text:focus + #preview_profile-jot-text, textarea.comment-edit-text:focus + .comment-edit-form .preview { border-color: $link_color; } + +.imagegrid-row figure { + background-color: rgba(255, 255, 255, 0.15); +} diff --git a/view/theme/frio/scheme/dark.css b/view/theme/frio/scheme/dark.css index add36fff1..29b2782da 100644 --- a/view/theme/frio/scheme/dark.css +++ b/view/theme/frio/scheme/dark.css @@ -354,3 +354,7 @@ input[type="text"].tt-input { textarea#profile-jot-text:focus + #preview_profile-jot-text, textarea.comment-edit-text:focus + .comment-edit-form .preview { border-color: $link_color; } + +.imagegrid-row figure { + background-color: rgba(255, 255, 255, 0.05); +} From 86141eb363ff7f82fefab94a4ba671013534ef35 Mon Sep 17 00:00:00 2001 From: Hypolite Petovan Date: Sat, 23 Sep 2023 22:20:00 -0400 Subject: [PATCH 4/7] Add height allocation to single post attached images - Force single images to expand to the total width of the post --- src/Model/Item.php | 10 +++++++++- view/global.css | 5 +++-- view/templates/content/image.tpl | 11 +++++++---- view/templates/content/image_grid.tpl | 4 +--- view/theme/frio/scheme/black.css | 2 +- view/theme/frio/scheme/dark.css | 2 +- 6 files changed, 22 insertions(+), 12 deletions(-) diff --git a/src/Model/Item.php b/src/Model/Item.php index 8b0fa29a2..31cc0ac87 100644 --- a/src/Model/Item.php +++ b/src/Model/Item.php @@ -3325,7 +3325,8 @@ class Item ); return Renderer::replaceMacros(Renderer::getMarkupTemplate('content/image_grid.tpl'), [ - 'rows' => $rows, + '$rows' => $rows, + '$column_size' => $column_size, ]); } @@ -3512,8 +3513,15 @@ class Item if (count($images) > 1) { $media = self::makeImageGrid($images); } elseif (count($images) == 1) { + if (!empty($images[0]['attachment']['preview-height'])) { + $allocated_height = (100 * $images[0]['attachment']['preview-height'] / $images[0]['attachment']['preview-width']) . '%'; + } else { + $allocated_height = (100 * $images[0]['attachment']['height'] / $images[0]['attachment']['width']) . '%'; + } + $media = Renderer::replaceMacros(Renderer::getMarkupTemplate('content/image.tpl'), [ '$image' => $images[0], + '$allocated_height' => $allocated_height, ]); } diff --git a/view/global.css b/view/global.css index 6bee34b8b..247a9694f 100644 --- a/view/global.css +++ b/view/global.css @@ -695,16 +695,17 @@ audio { * Please note: The space is effectively allocated using padding-bottom using the image ratio as a value. * In the image grid, this ratio isn't known in advance so no value is set in the stylesheet. */ -.imagegrid-row figure { +figure.img-allocated-height { position: relative; background: center / auto rgba(0, 0, 0, 0.05) url(/images/icons/image.png) no-repeat; } -.imagegrid-row figure img{ +figure.img-allocated-height img{ position: absolute; top: 0; right: 0; bottom: 0; left: 0; + width: 100%; } /** * Image grid settings END diff --git a/view/templates/content/image.tpl b/view/templates/content/image.tpl index 16610722c..9cff3614a 100644 --- a/view/templates/content/image.tpl +++ b/view/templates/content/image.tpl @@ -1,7 +1,10 @@ +{{* $image.widthRatio is only set in the context of Model\Item->makeImageGrid *}} +
    {{if $image.preview}} - - {{$image.attachment.description}} - + + {{$image.attachment.description}} + {{else}} -{{$image.attachment.description}} + {{$image.attachment.description}} {{/if}} +
    diff --git a/view/templates/content/image_grid.tpl b/view/templates/content/image_grid.tpl index 35e9324ae..b0d32d8e1 100644 --- a/view/templates/content/image_grid.tpl +++ b/view/templates/content/image_grid.tpl @@ -2,9 +2,7 @@
    {{foreach $images as $image}} {{* The absolute pixel value in the calc() should be mirrored from the .imagegrid-row column-gap value *}} -
    - {{include file="content/image.tpl" image=$image}} -
    + {{include file="content/image.tpl" image=$image allocated_height="calc(`$image.heightRatio * $image.widthRatio / 100`% - 5px / `$column_size`)"}} {{/foreach}}
    {{/foreach}} diff --git a/view/theme/frio/scheme/black.css b/view/theme/frio/scheme/black.css index 21a40f1c7..561f708a8 100644 --- a/view/theme/frio/scheme/black.css +++ b/view/theme/frio/scheme/black.css @@ -395,6 +395,6 @@ textarea#profile-jot-text:focus + #preview_profile-jot-text, textarea.comment-ed border-color: $link_color; } -.imagegrid-row figure { +figure.img-allocated-height { background-color: rgba(255, 255, 255, 0.15); } diff --git a/view/theme/frio/scheme/dark.css b/view/theme/frio/scheme/dark.css index 29b2782da..434681c55 100644 --- a/view/theme/frio/scheme/dark.css +++ b/view/theme/frio/scheme/dark.css @@ -355,6 +355,6 @@ textarea#profile-jot-text:focus + #preview_profile-jot-text, textarea.comment-ed border-color: $link_color; } -.imagegrid-row figure { +figure.img-allocated-height { background-color: rgba(255, 255, 255, 0.05); } From c4657c46619471cb667731a47fd0985e27d1d800 Mon Sep 17 00:00:00 2001 From: Hypolite Petovan Date: Sat, 23 Sep 2023 22:43:31 -0400 Subject: [PATCH 5/7] Add support for allocated height for inline images --- src/Model/Item.php | 23 +++++++++++++++-------- src/Model/Post/Media.php | 17 +++++++++++++++++ 2 files changed, 32 insertions(+), 8 deletions(-) diff --git a/src/Model/Item.php b/src/Model/Item.php index 31cc0ac87..6eba41392 100644 --- a/src/Model/Item.php +++ b/src/Model/Item.php @@ -33,6 +33,7 @@ use Friendica\Core\Worker; use Friendica\Database\DBA; use Friendica\DI; use Friendica\Model\Post\Category; +use Friendica\Model\Post\Media; use Friendica\Network\HTTPException\InternalServerErrorException; use Friendica\Protocol\Activity; use Friendica\Protocol\ActivityPub; @@ -3344,7 +3345,19 @@ class Item if (empty($attachment['preview']) || ($attachment['type'] != Post\Media::IMAGE)) { continue; } - $s = str_replace('(.*?)">#'; + + $s = preg_replace_callback($pattern, function () use ($attachment, $uri_id) { + return Renderer::replaceMacros(Renderer::getMarkupTemplate('content/image.tpl'), [ + '$image' => [ + 'src' => $attachment['url'], + 'uri_id' => $uri_id, + 'attachment' => $attachment, + ], + '$allocated_height' => Media::getAllocatedHeightByMedia($attachment), + ]); + }, $s); } return $s; } @@ -3513,15 +3526,9 @@ class Item if (count($images) > 1) { $media = self::makeImageGrid($images); } elseif (count($images) == 1) { - if (!empty($images[0]['attachment']['preview-height'])) { - $allocated_height = (100 * $images[0]['attachment']['preview-height'] / $images[0]['attachment']['preview-width']) . '%'; - } else { - $allocated_height = (100 * $images[0]['attachment']['height'] / $images[0]['attachment']['width']) . '%'; - } - $media = Renderer::replaceMacros(Renderer::getMarkupTemplate('content/image.tpl'), [ '$image' => $images[0], - '$allocated_height' => $allocated_height, + '$allocated_height' => Media::getAllocatedHeightByMedia($images[0]['attachment']), ]); } diff --git a/src/Model/Post/Media.php b/src/Model/Post/Media.php index a0d55b6e0..23370de3f 100644 --- a/src/Model/Post/Media.php +++ b/src/Model/Post/Media.php @@ -1164,4 +1164,21 @@ class Media } return $url . $id; } + + /** + * Computes the allocated height value used in the content/image.tpl template based on a post-media record + * + * @param array $media A post-media record array + * @return string + */ + public static function getAllocatedHeightByMedia(array $media): string + { + if (!empty($media['preview-height'])) { + $allocated_height = (100 * $media['preview-height'] / $media['preview-width']) . '%'; + } else { + $allocated_height = (100 * $media['height'] / $media['width']) . '%'; + } + + return $allocated_height; + } } From 06818a96c30b2000bc4896b65d8fb87284260ae5 Mon Sep 17 00:00:00 2001 From: Hypolite Petovan Date: Sun, 24 Sep 2023 06:47:18 -0400 Subject: [PATCH 6/7] Add height allocation support for single images smaller than the available width --- src/Model/Item.php | 4 ++++ src/Model/Post/Media.php | 8 +------- view/templates/content/image.tpl | 14 ++++++++++++-- view/templates/content/image_grid.tpl | 6 +++++- 4 files changed, 22 insertions(+), 10 deletions(-) diff --git a/src/Model/Item.php b/src/Model/Item.php index 6eba41392..cd6b8a96f 100644 --- a/src/Model/Item.php +++ b/src/Model/Item.php @@ -3356,6 +3356,7 @@ class Item 'attachment' => $attachment, ], '$allocated_height' => Media::getAllocatedHeightByMedia($attachment), + '$allocated_max_width' => ($attachment['preview-width'] ?? $attachment['width']) . 'px', ]); }, $s); } @@ -3472,8 +3473,10 @@ class Item if ($attachment['filetype'] == 'image') { $preview_url = Post\Media::getPreviewUrlForId($attachment['id'], ($attachment['width'] > $attachment['height']) ? Proxy::SIZE_MEDIUM : Proxy::SIZE_LARGE); + $attachment['preview-width'] = ($attachment['width'] > $attachment['height']) ? Proxy::PIXEL_MEDIUM : Proxy::PIXEL_LARGE; } elseif (!empty($attachment['preview'])) { $preview_url = Post\Media::getPreviewUrlForId($attachment['id'], Proxy::SIZE_LARGE); + $attachment['preview-width'] = Proxy::PIXEL_LARGE; } else { $preview_url = ''; } @@ -3529,6 +3532,7 @@ class Item $media = Renderer::replaceMacros(Renderer::getMarkupTemplate('content/image.tpl'), [ '$image' => $images[0], '$allocated_height' => Media::getAllocatedHeightByMedia($images[0]['attachment']), + '$allocated_max_width' => ($images[0]['attachment']['preview-width'] ?? $images[0]['attachment']['width']) . 'px', ]); } diff --git a/src/Model/Post/Media.php b/src/Model/Post/Media.php index 23370de3f..6987472fd 100644 --- a/src/Model/Post/Media.php +++ b/src/Model/Post/Media.php @@ -1173,12 +1173,6 @@ class Media */ public static function getAllocatedHeightByMedia(array $media): string { - if (!empty($media['preview-height'])) { - $allocated_height = (100 * $media['preview-height'] / $media['preview-width']) . '%'; - } else { - $allocated_height = (100 * $media['height'] / $media['width']) . '%'; - } - - return $allocated_height; + return (100 * $media['height'] / $media['width']) . '%'; } } diff --git a/view/templates/content/image.tpl b/view/templates/content/image.tpl index 9cff3614a..f32d611ef 100644 --- a/view/templates/content/image.tpl +++ b/view/templates/content/image.tpl @@ -1,5 +1,11 @@ -{{* $image.widthRatio is only set in the context of Model\Item->makeImageGrid *}} -
    +{{* The padding-top height allocation trick only works if the
    fills its parent's width completely or with flex. 🤷‍♂️ + As a result, we need to add a wrapping element for non-flex (non-image grid) environments, mostly single-image cases. + *}} +{{if $allocated_max_width}} + +{{/if}} diff --git a/view/templates/content/image_grid.tpl b/view/templates/content/image_grid.tpl index b0d32d8e1..baf0dfd1d 100644 --- a/view/templates/content/image_grid.tpl +++ b/view/templates/content/image_grid.tpl @@ -2,7 +2,11 @@
    {{foreach $images as $image}} {{* The absolute pixel value in the calc() should be mirrored from the .imagegrid-row column-gap value *}} - {{include file="content/image.tpl" image=$image allocated_height="calc(`$image.heightRatio * $image.widthRatio / 100`% - 5px / `$column_size`)"}} + {{include file="content/image.tpl" + image=$image + allocated_height="calc(`$image.heightRatio * $image.widthRatio / 100`% - 5px / `$column_size`)" + allocated_width="`$image.widthRatio`%" + }} {{/foreach}}
    {{/foreach}} From d081f8e80c1cbf83d29ab8db074ed56b82a34d3e Mon Sep 17 00:00:00 2001 From: Hypolite Petovan Date: Sun, 24 Sep 2023 06:47:30 -0400 Subject: [PATCH 7/7] Add height allocation support for vier --- view/global.css | 1 + 1 file changed, 1 insertion(+) diff --git a/view/global.css b/view/global.css index 247a9694f..25fe653b7 100644 --- a/view/global.css +++ b/view/global.css @@ -698,6 +698,7 @@ audio { figure.img-allocated-height { position: relative; background: center / auto rgba(0, 0, 0, 0.05) url(/images/icons/image.png) no-repeat; + margin: 0; } figure.img-allocated-height img{ position: absolute;