danbarber/my-images
1
0
Fork 0
mirror of https://github.com/danbee/my-images synced 2025-03-04 08:49:05 +00:00
Code Issues Releases Wiki Activity

Responsive images

Browse Source
This commit is contained in:
Daniel Barber 2018-08-26 20:18:16 -04:00
parent 1fe4675758
commit 9139df42c8
Signed by: danbarber
GPG Key ID: 931D8112E0103DD8
3 changed files with 23 additions and 1 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
app/helpers/image_helper.rb Normal file
View File

@ -0,0 +1,5 @@
module ImageHelper
def image_thumb(image, size)
image.thumb(size).encode("jpg", "-quality 90")
end
end

17
app/views/images/_image.html.erb Normal file
View File

@ -0,0 +1,17 @@
<picture>
<source srcset="<%= image_thumb(@image.image, "2000x2000").url %>"
media="(min-width: 960px) and (-webkit-min-device-pixel-ratio: 2),
(min-width: 960px) and (min-resolution: 192dpi)">
<source srcset="<%= image_thumb(@image.image, "1000x1000").url %>"
media="(min-width: 960px)">
<source srcset="<%= image_thumb(@image.image, "1400x1400").url %>"
media="(min-width: 640px) and (-webkit-min-device-pixel-ratio: 2),
(min-width: 640px) and (min-resolution: 192dpi)">
<source srcset="<%= image_thumb(@image.image, "700x700").url %>"
media="(min-width: 640px)">
<source srcset="<%= image_thumb(@image.image, "960x960").url %>"
media="(-webkit-min-device-pixel-ratio: 2),
(min-resolution: 192dpi)">
<source srcset="<%= image_thumb(@image.image, "480x480").url %>">
<img src="<%= image_thumb(@image.image, "480x480").url %>" itemprop="image">
</picture>

2
app/views/images/show.html.erb
View File

@ -6,7 +6,7 @@
<div class="show-image">
<div class="image-container">
<%= image_tag(@image.image.url) %>
<%= render "image", image: @image %>
</div>
<div class="image-info">