From 9e77ff4948f09f993ae88e4cb883a069522945ce Mon Sep 17 00:00:00 2001 From: evazion Date: Thu, 2 Dec 2021 21:49:14 -0600 Subject: [PATCH] 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. --- .../post_gallery_component.html.erb | 2 +- app/components/post_preview_component.rb | 13 ++----------- .../post_preview_component.html.erb | 4 +--- app/views/users/edit.html.erb | 1 - 4 files changed, 4 insertions(+), 16 deletions(-) diff --git a/app/components/post_gallery_component/post_gallery_component.html.erb b/app/components/post_gallery_component/post_gallery_component.html.erb index bf746ef2a..66b195ca1 100644 --- a/app/components/post_gallery_component/post_gallery_component.html.erb +++ b/app/components/post_gallery_component/post_gallery_component.html.erb @@ -2,7 +2,7 @@ <% if empty? %>

No posts found.

<% else %> -
+
<% posts.each do |post| -%> <% %><%= post_preview(post, **options) -%> <% end -%> diff --git a/app/components/post_preview_component.rb b/app/components/post_preview_component.rb index 3b9ca1784..4b2528c4d 100644 --- a/app/components/post_preview_component.rb +++ b/app/components/post_preview_component.rb @@ -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 diff --git a/app/components/post_preview_component/post_preview_component.html.erb b/app/components/post_preview_component/post_preview_component.html.erb index 8a82b801e..20e54cc54 100644 --- a/app/components/post_preview_component/post_preview_component.html.erb +++ b/app/components/post_preview_component/post_preview_component.html.erb @@ -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 -%> diff --git a/app/views/users/edit.html.erb b/app/views/users/edit.html.erb index 0d7487658..bddd2b007 100644 --- a/app/views/users/edit.html.erb +++ b/app/views/users/edit.html.erb @@ -73,7 +73,6 @@ <%= f.input :disable_tagged_filenames, :as => :select, :hint => "Don't include tags in image filenames", :collection => [["No", "false"], ["Yes", "true"]], :include_blank => false %> <%= f.input :disable_mobile_gestures, :as => :select, :hint => "Disable swipe left / swipe right gestures on mobile", :collection => [["No", "false"], ["Yes", "true"]], :include_blank => false %> <%= f.input :disable_post_tooltips, :as => :select, :hint => "Disable advanced tooltips when hovering over thumbnails", :collection => [["No", "false"], ["Yes", "true"]], :include_blank => false %> - <%= f.input :disable_cropped_thumbnails, :as => :select, :hint => "Disable cropped (square) thumbnails on mobile", :collection => [["No", "false"], ["Yes", "true"]], :include_blank => false %> <%= f.input :enable_desktop_mode, :as => :select, :collection => [["No", "false"], ["Yes", "true"]], :include_blank => false, :hint => "Use the desktop layout on mobile" %> <%= f.input :favorite_tags, :label => "Frequent tags", :hint => "A list of tags that you use often. They will appear when using the list of Related Tags.", :input_html => { :data => { :autocomplete => "tag-query" } } %>