Set the thumbnail height to auto instead of 154px so that there's not a big empty gap beneath thumbnails that aren't 150px high. This requires setting dimensions on the <img> tag itself so that the image height is known before loading, otherwise the tooltip will be mispositioned after the image loads in. We set the min-width and min-height instead of the <img> width and height properties because our calculated dimensions are sometimes off-by-one compared to the actual dimensions. I'm not sure how libvips calculates the thumbnail dimensions, but this avoids forcing a slightly wrong aspect ratio, which produces ugly resizing artifacts.
25 lines
865 B
Plaintext
25 lines
865 B
Plaintext
<%= content_tag(:article, article_attrs) do -%>
|
|
<%= link_to polymorphic_path(link_target, link_params) do -%>
|
|
<%= content_tag(:picture) do -%>
|
|
<%= tag.source media: "(max-width: 660px)", srcset: cropped_url -%>
|
|
<%= tag.source media: "(min-width: 660px)", srcset: preview_url -%>
|
|
<%= tag.img class: "has-cropped-#{has_cropped}", src: preview_url, style: "min-width: #{preview_width}px; min-height: #{preview_height}px;", title: tooltip, alt: alt_text -%>
|
|
<% end -%>
|
|
<% end -%>
|
|
<% if pool -%>
|
|
<p class="desc">
|
|
<%= link_to pool.pretty_name.truncate(80), pool %>
|
|
</p>
|
|
<% end -%>
|
|
<% if similarity -%>
|
|
<p class="desc">
|
|
Similarity: <%= similarity %>
|
|
</p>
|
|
<% end -%>
|
|
<% if size -%>
|
|
<p class="desc">
|
|
<%= number_to_human_size(size) %> (<%= width %>x<%= height %>)
|
|
</p>
|
|
<% end -%>
|
|
<% end -%>
|