posts: disable cropped (square) thumbnails on mobile.

Disable cropped (square) thumbnails on mobile. Use regular uncropped
thumbnails instead.

This is for a few reasons:

* It made it harder to support multiple thumbnail sizes or file formats,
  since we need a cropped and uncropped version for every size and format.
* The cropping algorithm wasn't that great and sometimes cropped out
  important parts of the image.
* The thumbnail type (cropped or uncropped) was automatically chosen
  clientside based on the user's screen size, which made certain things
  like adjustable thumbnail sizes more difficult because we didn't know
  which thumbnail type the user actually had.

This may return again as an option in the future, but for now it's disabled.
This commit is contained in:
evazion
2021-12-02 21:49:14 -06:00
parent e8f9e3ab28
commit 9e77ff4948
4 changed files with 4 additions and 16 deletions

View File

@@ -2,7 +2,7 @@
<% if empty? %>
<p>No posts found.</p>
<% else %>
<div class="posts-container grid gap-1 grid-cols-2 md:block user-disable-cropped-<%= current_user.disable_cropped_thumbnails? %>">
<div class="posts-container grid gap-1 grid-cols-2 md:block">
<% posts.each do |post| -%>
<% %><%= post_preview(post, **options) -%>
<% end -%>

View File

@@ -3,18 +3,17 @@
class PostPreviewComponent < ApplicationComponent
with_collection_parameter :post
attr_reader :post, :tags, :show_deleted, :show_cropped, :link_target, :pool, :similarity, :recommended, :show_votes, :compact, :size, :current_user, :options
attr_reader :post, :tags, :show_deleted, :link_target, :pool, :similarity, :recommended, :show_votes, :compact, :size, :current_user, :options
delegate :external_link_to, :time_ago_in_words_tagged, :duration_to_hhmmss, :render_post_votes, :empty_heart_icon, :sound_icon, to: :helpers
delegate :image_width, :image_height, :file_ext, :file_size, :duration, :is_animated?, to: :media_asset
delegate :media_asset, to: :post
def initialize(post:, tags: "", show_deleted: false, show_cropped: true, show_votes: false, link_target: post, pool: nil, similarity: nil, recommended: nil, compact: nil, size: nil, current_user: CurrentUser.user, **options)
def initialize(post:, tags: "", show_deleted: false, show_votes: false, link_target: post, pool: nil, similarity: nil, recommended: nil, compact: nil, size: nil, current_user: CurrentUser.user, **options)
super
@post = post
@tags = tags.presence
@show_deleted = show_deleted
@show_cropped = show_cropped
@show_votes = show_votes
@link_target = link_target
@pool = pool
@@ -34,14 +33,6 @@ class PostPreviewComponent < ApplicationComponent
{ class: [classes, *preview_class].compact.join(" "), **data_attributes }
end
def cropped_url
if show_cropped && post.has_cropped? && !current_user.disable_cropped_thumbnails?
post.crop_file_url
else
post.preview_file_url
end
end
def preview_width
variant.width
end

View File

@@ -14,9 +14,7 @@
<% end %>
<%= tag.picture do -%>
<%= tag.source media: "(max-width: 660px)", srcset: cropped_url -%>
<%= tag.source media: "(min-width: 660px)", srcset: post.preview_file_url -%>
<%= tag.img class: "has-cropped-#{post.has_cropped?}", src: post.preview_file_url, style: "min-width: #{preview_width}px; min-height: #{preview_height}px;", title: tooltip, alt: "post ##{post.id}", crossorigin: "anonymous" -%>
<%= tag.img src: post.preview_file_url, style: "min-width: #{preview_width}px; min-height: #{preview_height}px;", title: tooltip, alt: "post ##{post.id}", crossorigin: "anonymous" -%>
<% end -%>
<% end -%>
<% if pool -%>