具有动态图像路径的背景图像的 Rails 媒体查询（回形针）答案

【问题标题】：Rails Media Queries for Background Images with Dynamic Image Paths (Paperclip)具有动态图像路径的背景图像的 Rails 媒体查询（回形针）
【发布时间】：2014-08-19 13:08:49
【问题描述】：

我正在制作一个横幅滑块，其中填充了来自网站博客部分的最新四个博客条目。每个博客条目都有一个关联图像，并且该关联图像充当横幅的背景图像。例如，background-image: url('<%= blog_entry.blog_entry_image.attachment.url(:banner_full) %>');（这必须保留为背景图像，因为我需要使用 background-position: center 对其进行样式设置以在调整大小时获得所需的位置。）这一切都很可爱。

然后我尝试让这些背景图像自适应/响应。 问题在于，无论最后出现的哪一张图片都会为横幅滑块中的所有以下博客条目提供。

横幅如下所示：

<div class="index_banner">
            <div class="bx-wrapper" style="max-width: 100%;"><div class="bx-viewport" style="width: 100%; overflow: hidden; position: relative; height: 340px;"><ul id="blog_entry_entries" class="bxslider" style="width: 415%; position: relative; -webkit-transition: 0s; transition: 0s; -webkit-transform: translate3d(-2086px, 0, 0);"><li style="float: left; list-style: none; position: relative; width: 1043px;" class="bx-clone">
                  <div class="banner_image">
  <style type="text/css">
    .banner_image {
      height: 300px;
      width: 100%;
      background-position: center;
      background-repeat: no-repeat;
      background-image: url('/assets/blog_entry_images/1/banner_full/2638414-e2e60f86b94891c2b3276f8181dc714f877149b9.jpg?1408455094');
      background-size: 1400px 300px;
    }
    @media only screen and (max-width: 1024px) {
      .banner_image {
        background-image: url('/assets/blog_entry_images/1/banner_large/2638414-e2e60f86b94891c2b3276f8181dc714f877149b9.jpg?1408455094');
        background-size: 1024px 300px;
      }
    }
    @media only screen and (max-width: 768px) {
      .banner_image {
        background-image: url('/assets/blog_entry_images/1/banner_medium/2638414-e2e60f86b94891c2b3276f8181dc714f877149b9.jpg?1408455094');
        background-size: 768px 300px;
      }
    }
    @media only screen and (max-width: 568px) {
      .banner_image {
        height: 240px;
        background-image: url('/assets/blog_entry_images/1/banner_small/2638414-e2e60f86b94891c2b3276f8181dc714f877149b9.jpg?1408455094');
        background-size: 568px 240px;
      }
    }
    @media only screen and (max-width: 480px) {
      .banner_image {
        height: 240px;
        background-image: url('/assets/blog_entry_images/1/banner_mini/2638414-e2e60f86b94891c2b3276f8181dc714f877149b9.jpg?1408455094');
        background-size: 480px 240px;
      }
    }
  </style>

  <div class="container">
    <div class="columns sixteen blog_content">
      <h2 class="banner_title"><a href="/blog/2014/08/17/asdf">Test Post #1</a></h2>

      <div class="blog_entry_summary">
        This is the first test post.
        <span class="blog_read_more"><a href="/blog/2014/08/17/asdf">Read more</a></span>
      </div>
    </div>
  </div>
</div>

                </li>
                <li style="float: left; list-style: none; position: relative; width: 1043px;">
                  <div class="banner_image">
  <style type="text/css">
    .banner_image {
      height: 300px;
      width: 100%;
      background-position: center;
      background-repeat: no-repeat;
      background-image: url('/assets/blog_entry_images/2/banner_full/messiaen.jpg?1408455033');
      background-size: 1400px 300px;
    }
    @media only screen and (max-width: 1024px) {
      .banner_image {
        background-image: url('/assets/blog_entry_images/2/banner_large/messiaen.jpg?1408455033');
        background-size: 1024px 300px;
      }
    }
    @media only screen and (max-width: 768px) {
      .banner_image {
        background-image: url('/assets/blog_entry_images/2/banner_medium/messiaen.jpg?1408455033');
        background-size: 768px 300px;
      }
    }
    @media only screen and (max-width: 568px) {
      .banner_image {
        height: 240px;
        background-image: url('/assets/blog_entry_images/2/banner_small/messiaen.jpg?1408455033');
        background-size: 568px 240px;
      }
    }
    @media only screen and (max-width: 480px) {
      .banner_image {
        height: 240px;
        background-image: url('/assets/blog_entry_images/2/banner_mini/messiaen.jpg?1408455033');
        background-size: 480px 240px;
      }
    }
  </style>

  <div class="container">
    <div class="columns sixteen blog_content">
      <h2 class="banner_title"><a href="/blog/2014/08/18/123">Test Post #2</a></h2>

      <div class="blog_entry_summary">
        This is the second post.
        <span class="blog_read_more"><a href="/blog/2014/08/18/123">Read more</a></span>
      </div>
    </div>
  </div>
</div>

                </li>
                <li style="float: left; list-style: none; position: relative; width: 1043px;">
                  <div class="banner_image">
  <style type="text/css">
    .banner_image {
      height: 300px;
      width: 100%;
      background-position: center;
      background-repeat: no-repeat;
      background-image: url('/assets/blog_entry_images/1/banner_full/2638414-e2e60f86b94891c2b3276f8181dc714f877149b9.jpg?1408455094');
      background-size: 1400px 300px;
    }
    @media only screen and (max-width: 1024px) {
      .banner_image {
        background-image: url('/assets/blog_entry_images/1/banner_large/2638414-e2e60f86b94891c2b3276f8181dc714f877149b9.jpg?1408455094');
        background-size: 1024px 300px;
      }
    }
    @media only screen and (max-width: 768px) {
      .banner_image {
        background-image: url('/assets/blog_entry_images/1/banner_medium/2638414-e2e60f86b94891c2b3276f8181dc714f877149b9.jpg?1408455094');
        background-size: 768px 300px;
      }
    }
    @media only screen and (max-width: 568px) {
      .banner_image {
        height: 240px;
        background-image: url('/assets/blog_entry_images/1/banner_small/2638414-e2e60f86b94891c2b3276f8181dc714f877149b9.jpg?1408455094');
        background-size: 568px 240px;
      }
    }
    @media only screen and (max-width: 480px) {
      .banner_image {
        height: 240px;
        background-image: url('/assets/blog_entry_images/1/banner_mini/2638414-e2e60f86b94891c2b3276f8181dc714f877149b9.jpg?1408455094');
        background-size: 480px 240px;
      }
    }
  </style>

  <div class="container">
    <div class="columns sixteen blog_content">
      <h2 class="banner_title"><a href="/blog/2014/08/17/asdf">Test Post #1</a></h2>

      <div class="blog_entry_summary">
        This is the first test post.
        <span class="blog_read_more"><a href="/blog/2014/08/17/asdf">Read more</a></span>
      </div>
    </div>
  </div>
</div>

                </li>
            <li style="float: left; list-style: none; position: relative; width: 1043px;" class="bx-clone">
                  <div class="banner_image">
  <style type="text/css">
    .banner_image {
      height: 300px;
      width: 100%;
      background-position: center;
      background-repeat: no-repeat;
      background-image: url('/assets/blog_entry_images/2/banner_full/messiaen.jpg?1408455033');
      background-size: 1400px 300px;
    }
    @media only screen and (max-width: 1024px) {
      .banner_image {
        background-image: url('/assets/blog_entry_images/2/banner_large/messiaen.jpg?1408455033');
        background-size: 1024px 300px;
      }
    }
    @media only screen and (max-width: 768px) {
      .banner_image {
        background-image: url('/assets/blog_entry_images/2/banner_medium/messiaen.jpg?1408455033');
        background-size: 768px 300px;
      }
    }
    @media only screen and (max-width: 568px) {
      .banner_image {
        height: 240px;
        background-image: url('/assets/blog_entry_images/2/banner_small/messiaen.jpg?1408455033');
        background-size: 568px 240px;
      }
    }
    @media only screen and (max-width: 480px) {
      .banner_image {
        height: 240px;
        background-image: url('/assets/blog_entry_images/2/banner_mini/messiaen.jpg?1408455033');
        background-size: 480px 240px;
      }
    }
  </style>

  <div class="container">
    <div class="columns sixteen blog_content">
      <h2 class="banner_title"><a href="/blog/2014/08/18/123">Test Post #2</a></h2>

      <div class="blog_entry_summary">
        This is the second post.
        <span class="blog_read_more"><a href="/blog/2014/08/18/123">Read more</a></span>
      </div>
    </div>
  </div>
</div>

                </li></ul></div><div class="bx-controls bx-has-pager bx-has-controls-direction"><div class="bx-pager bx-default-pager"><div class="bx-pager-item"><a href="" data-slide-index="0" class="bx-pager-link">1</a></div><div class="bx-pager-item"><a href="" data-slide-index="1" class="bx-pager-link active">2</a></div></div><div class="bx-controls-direction"><a class="bx-prev" href="">Prev</a><a class="bx-next" href="">Next</a></div></div></div>
          </div>

这是我的回形针：

class Spree::BlogEntryImage < Spree::Image
  has_attached_file :attachment,
     :styles => {
       :mini => '96x96#',
       :normal => '400x400#',
       :banner_mini =>     ['480x240#',       :jpg, :quality => 80],
       :banner_small =>    ['568x240#',       :jpg, :quality => 80],
       :banner_medium =>   ['768x300#',       :jpg, :quality => 80],
       :banner_large =>    ['1024x300#',      :jpg, :quality => 80],
       :banner_full =>     ['1400x300>',      :jpg, :quality => 80],
       :banner_mini2x =>   ['960x480#',       :jpg, :quality => 60],
       :banner_small2x =>  ['1536x600#',      :jpg, :quality => 60],
       :banner_medium2x => ['2048x600#',      :jpg, :quality => 60],
       :banner_large2x =>  ['2048x600#',      :jpg, :quality => 60],
       :banner_full2x =>   ['2800x600>',      :jpg, :quality => 60]
     },
     :convert_options => {
       :banner_mini2x => '-set colorspace sRGB -strip -sharpen 0x0.5',
       :banner_small2x => '-set colorspace sRGB -strip -sharpen 0x0.5',
       :banner_medium2x => '-set colorspace sRGB -strip -sharpen 0x0.5',
       :banner_large2x => '-set colorspace sRGB -strip -sharpen 0x0.5',
       :banner_full2x => '-set colorspace sRGB -strip -sharpen 0x0.5'
     },
     :default_style => :banner_large,
     :url => "/assets/blog_entry_images/:id/:style/:basename.:extension",
     :path => ":rails_root/public/assets/blog_entry_images/:id/:style/:basename.:extension"
end

对于每篇博文，它以这种方式呈现部分内容：

    <% if !@blog_entries.empty? %>
      <div class='index_banner'>
        <ul id='blog_entry_entries' class='bxslider'>
          <% @blog_entries.each do |blog_entry| %>
            <li>
              <%= render :partial => 'spree/blog_entries/index_blog_banner', :locals => {:blog_entry => blog_entry} %>
            </li>
          <% end %>
        </ul>
      </div>
    <% else %>
      <p id='no_entries'><%= Spree.t(:no_blog_entries) %></p>
    <% end %>

我的方法是在视图中的<style> 标记中设置背景图像，如下所示：

<div class="banner_image">
  <style type="text/css">
    .banner_image {
      height: 300px;
      width: 100%;
      background-position: center;
      background-repeat: no-repeat;
      background-image: url('<%= blog_entry.blog_entry_image.attachment.url(:banner_full) %>');
      background-size: 1400px 300px;
    }
    @media only screen and (max-width: 1024px) {
      .banner_image {
        background-image: url('<%= blog_entry.blog_entry_image.attachment.url(:banner_large) %>');
        background-size: 1024px 300px;
      }
    }
    @media only screen and (max-width: 768px) {
      .banner_image {
        background-image: url('<%= blog_entry.blog_entry_image.attachment.url(:banner_medium) %>');
        background-size: 768px 300px;
      }
    }
    @media only screen and (max-width: 568px) {
      .banner_image {
        height: 240px;
        background-image: url('<%= blog_entry.blog_entry_image.attachment.url(:banner_small) %>');
        background-size: 568px 240px;
      }
    }
    @media only screen and (max-width: 480px) {
      .banner_image {
        height: 240px;
        background-image: url('<%= blog_entry.blog_entry_image.attachment.url(:banner_mini) %>');
        background-size: 480px 240px;
      }
    }
  </style>

  <div class="container">
    <div class="columns sixteen blog_content">
      <h2 class="banner_title"><%= link_to blog_entry.title, blog_entry_permalink(blog_entry) %></h2>

      <div class="blog_entry_summary">
        <%== blog_entry.entry_summary %>
        <span class="blog_read_more"><%= link_to Spree.t(:blog_read_more), blog_entry_permalink(blog_entry) %></span>
      </div>
    </div>
  </div>
</div>

如何防止最后加载的图像被用于横幅中的所有博客帖子？

【问题讨论】：

防止发生什么？您转储了很多代码，但既没有显示预期结果，也没有显示实际结果。
@MichalSzyndel，我添加了一些图片并进行了更多解释。我希望所有博客文章都使用它们关联的图像作为背景。我不希望所有帖子都使用与上次加载的博客帖子关联的图像。
能否请您摆脱这些图像并包含一些代码？希望这两篇文章都在一个摘录中。
我想这就是你想要的？
没关系！我犯了一个愚蠢的错误——忘记让类名动态化。将作为答案发布。

标签： ruby-on-rails paperclip media-queries spree

【解决方案1】：

刚刚发现了我忽略的东西！我会把它贴在这里，以防其他人犯同样的错误。所要做的就是使类名动态化。以下方法有效，但可能有更有效的方法来做到这一点。

<div class="banner_image_<%= blog_entry.attributes['id'] %>">
  <style type="text/css">
    .banner_image_<%= blog_entry.attributes['id'] %> {
      height: 300px;
      width: 100%;
      background-position: center;
      background-repeat: no-repeat;
      background-image: url('<%= blog_entry.blog_entry_image.attachment.url(:banner_full) %>');
      background-size: 1400px 300px;
    }
    @media only screen and (max-width: 1024px) {
      .banner_image_<%= blog_entry.attributes['id'] %> {
        background-image: url('<%= blog_entry.blog_entry_image.attachment.url(:banner_large) %>');
        background-size: 1024px 300px;
      }
    }
    @media only screen and (max-width: 768px) {
      .banner_image_<%= blog_entry.attributes['id'] %> {
        background-image: url('<%= blog_entry.blog_entry_image.attachment.url(:banner_medium) %>');
        background-size: 768px 300px;
      }
    }
    @media only screen and (max-width: 568px) {
      .banner_image_<%= blog_entry.attributes['id'] %> {
        height: 240px;
        background-image: url('<%= blog_entry.blog_entry_image.attachment.url(:banner_small) %>');
        background-size: 568px 240px;
      }
    }
    @media only screen and (max-width: 480px) {
      .banner_image_<%= blog_entry.attributes['id'] %> {
        height: 240px;
        background-image: url('<%= blog_entry.blog_entry_image.attachment.url(:banner_mini) %>');
        background-size: 480px 240px;
      }
    }
  </style>

  <div class="container">
    <div class="columns sixteen blog_content">
      <h2 class="banner_title"><%= link_to blog_entry.title, blog_entry_permalink(blog_entry) %></h2>

      <div class="blog_entry_summary">
        <%== blog_entry.entry_summary %>
        <span class="blog_read_more"><%= link_to Spree.t(:blog_read_more), blog_entry_permalink(blog_entry) %></span>
      </div>
    </div>
  </div>
</div>

【讨论】：