jaculabilis/danbooru
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

posts: disable cropped (square) thumbnails on mobile.

Browse Source 
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
Download Patch File Download Diff File Expand all files Collapse all files

2
app/components/post_gallery_component/post_gallery_component.html.erb
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 -%>

13
app/components/post_preview_component.rb
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

4
app/components/post_preview_component/post_preview_component.html.erb
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 -%>

1
app/views/users/edit.html.erb
View File

@@ -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" } } %>