posts: add hidden 720x720 thumbnail option (#4944).

Allow 720x720 thumbnails with https://danbooru.donmai.us/posts?size=720.
This commit is contained in:
evazion
2021-12-28 11:36:14 -06:00
parent 6d7a139ef1
commit 572b1b74f7
4 changed files with 9 additions and 2 deletions

View File

@@ -28,6 +28,7 @@
&.post-gallery-225 .post-preview-container { height: 225px; }
&.post-gallery-270 .post-preview-container { height: 270px; }
&.post-gallery-360 .post-preview-container { height: 360px; }
&.post-gallery-720 .post-preview-container { height: 720px; }
}
&.post-gallery-150 .posts-container { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); }
@@ -37,6 +38,7 @@
&.post-gallery-270 .posts-container { grid-template-columns: repeat(auto-fill, minmax(270px, 1fr)); }
&.post-gallery-270w .posts-container { grid-template-columns: repeat(auto-fill, minmax(270px, 1fr)); }
&.post-gallery-360 .posts-container { grid-template-columns: repeat(auto-fill, minmax(360px, 1fr)); }
&.post-gallery-720 .posts-container { grid-template-columns: repeat(auto-fill, minmax(720px, 1fr)); }
@media screen and (max-width: 660px) {
.posts-container {
@@ -50,5 +52,6 @@
&.post-gallery-270 .posts-container { grid-template-columns: repeat(2, auto); }
&.post-gallery-270w .posts-container { grid-template-columns: repeat(2, auto); }
&.post-gallery-360 .posts-container { grid-template-columns: repeat(1, auto); }
&.post-gallery-720 .posts-container { grid-template-columns: repeat(1, auto); }
}
}

View File

@@ -5,7 +5,7 @@ class PostPreviewComponent < ApplicationComponent
# PostGalleryComponent::DEFAULT_SIZE for the default size of thumbnails in a gallery.
DEFAULT_SIZE = "180"
SIZES = %w[150 180 225 225w 270 270w 360]
SIZES = %w[150 180 225 225w 270 270w 360 720]
with_collection_parameter :post
@@ -66,6 +66,8 @@ class PostPreviewComponent < ApplicationComponent
media_asset.variant("360x360")
when "360"
media_asset.variant("360x360")
when "720"
media_asset.variant("720x720")
else
raise NotImplementedError
end

View File

@@ -19,7 +19,7 @@
<% case size %>
<% when "150", "180" %>
<%= tag.source type: "image/jpeg", srcset: "#{media_asset.variant("180x180").file_url} 1x, #{media_asset.variant("360x360").file_url} 2x" %>
<% else # 225 to 360 %>
<% when "225", "225w", "270", "270w", "360" %>
<%= tag.source type: "image/webp", srcset: "#{media_asset.variant("360x360").file_url} 1x, #{media_asset.variant("720x720").file_url} 2x" %>
<% end %>
<% end %>

View File

@@ -36,6 +36,7 @@ article.post-preview {
&.post-preview-270 { width: 270px; }
&.post-preview-270w { width: 270px; }
&.post-preview-360 { width: 360px; }
&.post-preview-720 { width: 720px; }
}
.post-preview-150 .post-preview-image { max-height: 150px; width: auto; }
@@ -45,6 +46,7 @@ article.post-preview {
.post-preview-270 .post-preview-image { max-height: 270px; width: auto; }
.post-preview-270w .post-preview-image { max-height: 360px; width: auto; }
.post-preview-360 .post-preview-image { max-height: 360px; width: auto; }
.post-preview-720 .post-preview-image { max-height: 720px; width: auto; }
.post-preview {
img {