Какие есть варианты для адаптивных образов Active Storage - PullRequest
Новая
       11

Какие есть варианты для адаптивных образов Active Storage

0 голосов
/ 16 февраля 2019

Я использую Active Storage для приложений блога.Многие из зрителей используют свои мобильные телефоны, поэтому мне нужны варианты изображений 2 и 3.

Насколько я знаю, опция srcset для image_tag не работает с Active Storage, поэтомуМне было интересно создать помощник по изображениям 

def image_helper(scale)
  if scale == 1
    return self.file.variant(resize: "400x400")
  elsif scale == 2
    return self.file.variant(resize: "800x800")
  end
end

и определить область просмотра @ scale , которую можно передать в представлениях 

<%= image_tag product.image_helper(@scale) %>

Можно ли это сделать с помощью Javascript или есть другие варианты?

/// Мое решение для адаптивных изображений с нестандартным размером:

Согласно @ bo-oz я использовал JavaScript CookieAPI https://github.com/js-cookie/js-cookie

Предупреждение : Статус сборки: JS Cookie не работает с Edge 16 - может кто-нибудь проверить это?Я работаю на Windows 7

  1. Отправка devicePixelRatio на файлы cookie: 
var scale = window.devicePixelRatio;
Cookies.set('scale', scale);
Создать image helper функция (только для изображений @ 1 и @ 2, но ее легко расширить) 
def image_helper(file, scale, size)
  @file = file
  if scale = 1
    return @file.variant(resize: "#{size}x#{size}")
  else
    return @file.variant(resize: "#{2*size}x#{2*size}")
  end
end
Используйте его в представлениях, например, 
<% @scale = cookies[:scale] %>
<%= image_tag(@product.image_helper(@product.file, @scale.to_i, 352)) %>

Если у вас есть предложения, обращайтесь к этому:)

...