From 56fb9be0f77147541e8f3a98026ff6a7e7951107 Mon Sep 17 00:00:00 2001 From: Hypolite Petovan Date: Sun, 24 Sep 2023 16:24:28 -0400 Subject: [PATCH] Revert "Merge pull request #13463 from MrPetovan/task/imagegrid-improvement" This reverts commit dd7bea4bd146acf52086d303fce34a83d52f2516, reversing changes made to ce16cd12ec4646413581f5ade6487387f56723e3. --- src/Model/Item.php | 81 +++-------------------- src/Model/Post/Media.php | 11 --- src/Model/Profile.php | 8 +-- src/Module/Photo.php | 2 +- view/global.css | 30 ++++----- view/templates/content/image.tpl | 19 +----- view/templates/content/image_grid.tpl | 22 +++--- view/theme/frio/scheme/black.css | 4 -- view/theme/frio/scheme/dark.css | 4 -- view/theme/frio/templates/search_item.tpl | 4 +- view/theme/frio/templates/wall_thread.tpl | 8 +-- 11 files changed, 46 insertions(+), 147 deletions(-) diff --git a/src/Model/Item.php b/src/Model/Item.php index 5d2f7ca3c..41aae0413 100644 --- a/src/Model/Item.php +++ b/src/Model/Item.php @@ -33,7 +33,6 @@ 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; @@ -3274,65 +3273,25 @@ 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 { - static $column_size = 2; + // Image for first column (fc) and second column (sc) + $images_fc = []; + $images_sc = []; - $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) - ); + for ($i = 0; $i < count($images); $i++) { + ($i % 2 == 0) ? ($images_fc[] = $images[$i]) : ($images_sc[] = $images[$i]); + } return Renderer::replaceMacros(Renderer::getMarkupTemplate('content/image_grid.tpl'), [ - '$rows' => $rows, - '$column_size' => $column_size, + 'columns' => [ + 'fc' => $images_fc, + 'sc' => $images_sc, + ], ]); } @@ -3350,20 +3309,7 @@ class Item if (empty($attachment['preview']) || ($attachment['type'] != Post\Media::IMAGE)) { continue; } - - $pattern = '#(.*?)">#'; - - $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), - '$allocated_max_width' => ($attachment['preview-width'] ?? $attachment['width']) . 'px', - ]); - }, $s); + $s = str_replace(' $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 = ''; } @@ -3525,7 +3469,6 @@ class Item if (self::containsLink($item['body'], $src_url)) { continue; } - $images[] = ['src' => $src_url, 'preview' => $preview_url, 'attachment' => $attachment, 'uri_id' => $item['uri-id']]; } } @@ -3536,8 +3479,6 @@ class Item } elseif (count($images) == 1) { $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 8a2c731a2..e0c8d3561 100644 --- a/src/Model/Post/Media.php +++ b/src/Model/Post/Media.php @@ -1169,15 +1169,4 @@ 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 - { - return (100 * $media['height'] / $media['width']) . '%'; - } } diff --git a/src/Model/Profile.php b/src/Model/Profile.php index 9c7aab54a..b80c83881 100644 --- a/src/Model/Profile.php +++ b/src/Model/Profile.php @@ -813,14 +813,12 @@ 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 $server): array + public static function addVisitorCookieForHTTPSigner(): 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 be2408edf..c8e0656d2 100644 --- a/src/Module/Photo.php +++ b/src/Module/Photo.php @@ -77,7 +77,7 @@ class Photo extends BaseApi throw new NotModifiedException(); } - Profile::addVisitorCookieForHTTPSigner($this->server); + Profile::addVisitorCookieForHTTPSigner(); $customsize = 0; $square_resize = true; diff --git a/view/global.css b/view/global.css index 25fe653b7..714bb55db 100644 --- a/view/global.css +++ b/view/global.css @@ -685,28 +685,22 @@ audio { .imagegrid-row { display: -ms-flexbox; /* IE10 */ display: flex; - /* Both the following values should be the same to ensure consistent margins between images in the grid */ + margin-top: 1em; column-gap: 5px; - margin-top: 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. - */ -figure.img-allocated-height { - position: relative; - background: center / auto rgba(0, 0, 0, 0.05) url(/images/icons/image.png) no-repeat; - margin: 0; +.imagegrid-column { + -ms-flex: 50%; /* IE10 */ + flex: 50%; + display: -ms-flexbox; /* IE10 */ + display: flex; + flex-direction: column; + row-gap: 5px; } -figure.img-allocated-height img{ - position: absolute; - top: 0; - right: 0; - bottom: 0; - left: 0; - width: 100%; + +.imagegrid-column img { + -ms-flex: 50%; /* IE10 */ + flex: 50%; } /** * Image grid settings END diff --git a/view/templates/content/image.tpl b/view/templates/content/image.tpl index f32d611ef..00b1aac10 100644 --- a/view/templates/content/image.tpl +++ b/view/templates/content/image.tpl @@ -1,20 +1,5 @@ -{{* 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}} - -
{{if $image.preview}} - - {{$image.attachment.description}} - +{{$image.attachment.description}} {{else}} - {{$image.attachment.description}} -{{/if}} -
- -{{if $allocated_max_width}} -
+{{$image.attachment.description}} {{/if}} diff --git a/view/templates/content/image_grid.tpl b/view/templates/content/image_grid.tpl index baf0dfd1d..95e49ee3e 100644 --- a/view/templates/content/image_grid.tpl +++ b/view/templates/content/image_grid.tpl @@ -1,12 +1,12 @@ -{{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 - allocated_height="calc(`$image.heightRatio * $image.widthRatio / 100`% - 5px / `$column_size`)" - allocated_width="`$image.widthRatio`%" - }} - {{/foreach}} +
+
+ {{foreach $columns.fc as $img}} + {{include file="content/image.tpl" image=$img}} + {{/foreach}}
-{{/foreach}} +
+ {{foreach $columns.sc as $img}} + {{include file="content/image.tpl" image=$img}} + {{/foreach}} +
+
\ No newline at end of file diff --git a/view/theme/frio/scheme/black.css b/view/theme/frio/scheme/black.css index 561f708a8..debf9d99b 100644 --- a/view/theme/frio/scheme/black.css +++ b/view/theme/frio/scheme/black.css @@ -394,7 +394,3 @@ 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; } - -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 434681c55..add36fff1 100644 --- a/view/theme/frio/scheme/dark.css +++ b/view/theme/frio/scheme/dark.css @@ -354,7 +354,3 @@ 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; } - -figure.img-allocated-height { - background-color: rgba(255, 255, 255, 0.05); -} diff --git a/view/theme/frio/templates/search_item.tpl b/view/theme/frio/templates/search_item.tpl index bdc2ca384..2d130cab8 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 00e738d9a..16494e1c0 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}}