Отобразить правильное изображение в соответствии с размером экрана

Question

Возможно, это простой вопрос, но после некоторых исследований я не нашел правильного решения.

Я использую несущую волну для создания нескольких версий загруженного изображения. Каждое изображение имеет определенный размер для разных размеров экрана. Например (в моем пользователе) У меня есть

version :xl 

для экранов больше, чем 1200px.

Как использовать рельсы для отображения определенного изображения в соответствии с размером экрана клиента?

Я знаю, есть жемчужина отзывчивые изображения, но я не могу использовать размер.
Тема чувствительных изображений на данный момент довольно обширна, и никто, кажется, не имеет такого же ответа, особенно с javascript и html5. Как насчет рельсов (даже если это серверная сторона)?

Answer 1

Ну, я действительно хотел сделать это в более рельсов путь. Я закончил с использованием Ajax:

огня Аякса на странице загрузки:

# assets/javascript/cards/index.js 
// fire loading image 
$.ajax({ 
    url: document.URL, 
    data: { 
    w: window.innerWidth 
    } 
}); 

В контроллере реагировать на Аякса:

# controllers/cards_controller.rb 
render 'cards/images/loadimage' if request.xhr? 

Затем загрузите ваши изображения

# cards/images/loadimage.js.erb 
<% w = params[:w].to_i %> 
document.getElementById('banner-container').innerHTML = "<%= j image_tag @card.banner_type_url(w), class: 'banner' %>"; 
document.getElementById('logo-container').innerHTML = "<%= j image_tag @card.logo_type(w), class: 'logo' %>"; 

я сделал в моей модели - метод возврата правого изображения с учетом ширины экрана (и на основе версии несущей):

# models/card.rb 
# returns banner type based on width (w) 
def banner_type_url(w) 
    return self.banner.s.url || banner_default('s') if(w <= 768) 
    return self.banner.m.url || banner_default('m') if(w <= 992) 
    return self.banner.l.url || banner_default('l') if(w <= 1200) 
    return self.banner.xl.url || banner_default('xl') if(w <= 1920) 
    return self.banner.full.url || banner_default('full')  
end 
def banner_default(s) 
    "card/banner/#{s}_default-banner.jpg" 
end 

Answer 2

Вот несколько способов:

1. Загрузите страницу со всеми путями к различным размерам изображений, сохраненных в качестве атрибутов данных, возьмите ширину с JS экраном, а затем вставить тег изображения с правильным путем где вы этого хотите. Код может выглядеть следующим образом (не проверял, и я использую CoffeeScript, поэтому, вероятно, недостающие детали):

   # ruby command line 
   $ @image.mobile_asset_url 
   => "path/to/mobile/image" 
   $ @image.desktop_asset_url 
   => "path/to/desktop/image" 
   
   
   # html.erb 
   <img src="" class="placeholder" data-mobile-url=<%=@image.mobile_asset_url%> data-desktop-url=<%=@image.desktop_asset_url%>></div> 
   
   # javascript 
   el = $('.placeholder') 
   data = el.data(); 
   width = $(window).width(); 
   mobile_breakpoint = 480; 
   
   if (width <= mobile_breakpoint) { 
       url = data.mobileUrl; 
   } else { 
       url = data.desktopUrl; 
   } 
   
   el.attr('src', url) 
   

2. ли тест на стороне сервера, а не на ширину экрана, но тип браузера с драгоценным камнем, как browser и загружать меньшие изображения для мобильных конкретных браузеров, таких как iOS8. Логика, как это, может пойти лучше в декораторе. Я более свободно с Ruby, поэтому пример может выглядеть следующим образом (этот код не тестировался):

   # user_decorator.rb, from the Draper gem 
   class UserDecorator 
   
       def profile_url 
       if mobile_browser? 
        "path/to/small/image" 
       else 
        "path/to/large/image" 
       end 
       end 
   
       private 
   
       def mobile_browser? 
       browser.ios || browser.android || ... 
       end 
   
   end