From c36b9cc5a6cf3feacb925213f5530c90dd31fa7a Mon Sep 17 00:00:00 2001 From: Eugen Rochko Date: Sat, 9 Dec 2017 00:56:16 +0100 Subject: [PATCH] Ensure link thumbnails are not stretched to super low quality (#5932) --- .../mastodon/features/status/components/card.js | 10 +++++----- app/javascript/styles/mastodon/components.scss | 7 ++++++- app/models/preview_card.rb | 2 +- 3 files changed, 12 insertions(+), 7 deletions(-) diff --git a/app/javascript/mastodon/features/status/components/card.js b/app/javascript/mastodon/features/status/components/card.js index d3e322c369..f7d980066c 100644 --- a/app/javascript/mastodon/features/status/components/card.js +++ b/app/javascript/mastodon/features/status/components/card.js @@ -59,6 +59,8 @@ export default class Card extends React.PureComponent { renderLink () { const { card, maxDescription } = this.props; + const { width } = this.state; + const horizontal = card.get('width') > card.get('height') && (card.get('width') + 100 >= width); let image = ''; let provider = card.get('provider_name'); @@ -75,17 +77,15 @@ export default class Card extends React.PureComponent { provider = decodeIDNA(getHostname(card.get('url'))); } - const className = classnames('status-card', { - 'horizontal': card.get('width') > card.get('height'), - }); + const className = classnames('status-card', { horizontal }); return ( - + {image}
{card.get('title')} -

{(card.get('description') || '').substring(0, maxDescription)}

+ {!horizontal &&

{(card.get('description') || '').substring(0, maxDescription)}

} {provider}
diff --git a/app/javascript/styles/mastodon/components.scss b/app/javascript/styles/mastodon/components.scss index dd61dc519e..f76470da77 100644 --- a/app/javascript/styles/mastodon/components.scss +++ b/app/javascript/styles/mastodon/components.scss @@ -2273,14 +2273,19 @@ button.icon-button.active i.fa-retweet { .status-card__image-image { border-radius: 4px 4px 0 0; } + + .status-card__title { + white-space: inherit; + } } .status-card__image-image { border-radius: 4px 0 0 4px; display: block; - height: auto; margin: 0; width: 100%; + height: 100%; + object-fit: cover; } .load-more { diff --git a/app/models/preview_card.rb b/app/models/preview_card.rb index 5baddba8ab..716b822436 100644 --- a/app/models/preview_card.rb +++ b/app/models/preview_card.rb @@ -33,7 +33,7 @@ class PreviewCard < ApplicationRecord has_and_belongs_to_many :statuses - has_attached_file :image, styles: { original: '280x280>' }, convert_options: { all: '-quality 80 -strip' } + has_attached_file :image, styles: { original: '400x400>' }, convert_options: { all: '-quality 80 -strip' } include Attachmentable include Remotable