9cb70fa632
This is used to provide higher resolution thumbnails for high pixel density displays, such as phones or laptops. If your screen has a 2x pixel density ratio, then 360x360 thumbnails will be rendered at 720x720 resolution. We use WebP here because it's about 15% smaller than the equivalent JPEG, and because if a device has a high enough pixel density to use this, then it probably supports WebP. 720x720 thumbnails average about 36kb in size, compared to 20.35kb for 360x360 thumbnails and 7.55kb for 180x180 thumbnails.
70 lines
2.6 KiB
Plaintext
70 lines
2.6 KiB
Plaintext
<%= tag.article id: "post_#{post.id}", **article_attrs do -%>
|
|
<%= link_to polymorphic_path(link_target, q: tags), class: "post-preview-link" do -%>
|
|
<% if is_animated? || has_sound? %>
|
|
<div class="post-animation-icon absolute top-0.5 left-0.5 p-0.5 m-0.5 leading-none rounded text-xs font-arial font-bold">
|
|
<% if is_animated? %>
|
|
<span class="post-duration align-middle">
|
|
<%= duration_to_hhmmss(duration) %>
|
|
</span>
|
|
<% end %>
|
|
<% if has_sound? %>
|
|
<%= sound_icon(class: "h-3 mx-0.5") -%>
|
|
<% end %>
|
|
</div>
|
|
<% end %>
|
|
|
|
<picture>
|
|
<% case size %>
|
|
<% when "150" %>
|
|
<%# no-op %>
|
|
<% when "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 %>
|
|
<%= tag.source type: "image/webp", srcset: "#{media_asset.variant("360x360").file_url} 1x, #{media_asset.variant("720x720").file_url} 2x" %>
|
|
<% end %>
|
|
|
|
<%= tag.img src: variant.file_url, width: variant.width, height: variant.height, class: "post-preview-image", title: tooltip, alt: "post ##{post.id}", crossorigin: "anonymous" -%>
|
|
</picture>
|
|
<% end -%>
|
|
<% if pool -%>
|
|
<p class="desc">
|
|
<%= link_to pool.pretty_name.truncate(80), pool %>
|
|
</p>
|
|
<% elsif similarity -%>
|
|
<p class="desc">
|
|
<% if post.source =~ %r!\Ahttps?://!i %>
|
|
<%= external_link_to post.normalized_source, post.source_domain %>
|
|
(<%= time_ago_in_words_tagged(post.created_at, compact: true) %>)
|
|
<% else %>
|
|
<%= time_ago_in_words_tagged(post.created_at, compact: true) %>
|
|
<% end %>
|
|
</p>
|
|
<p class="desc">
|
|
<%= link_to number_to_human_size(size), post.file_url %>
|
|
(<%= post.image_width %>x<%= post.image_height %>)
|
|
</p>
|
|
<p class="desc">
|
|
<%= link_to "#{similarity}%", iqdb_queries_path(post_id: post.id) %> similarity
|
|
</p>
|
|
<% elsif show_size -%>
|
|
<p class="desc">
|
|
<%= link_to number_to_human_size(file_size), post.file_url %>
|
|
(<%= post.image_width %>x<%= post.image_height %>)
|
|
</p>
|
|
<% elsif recommended -%>
|
|
<p class="desc recommended">
|
|
<%= link_to recommended_posts_path(search: { post_id: post.id }), class: "more-recommended-posts", "data-post-id": post.id do %>
|
|
<%= post.fav_count %>
|
|
|
|
<%= empty_heart_icon(class: "fa-xs") %>
|
|
|
|
<br>more »
|
|
<% end %>
|
|
</p>
|
|
<% elsif show_votes -%>
|
|
<div class="post-preview-score text-sm text-center mt-1">
|
|
<%= render_post_votes post, current_user: current_user %>
|
|
</div>
|
|
<% end -%>
|
|
<% end -%>
|