Question

我希望用户能够上传图像以用作其个人资料中的背景（用户#show）。查看具有该功能的某些网站（例如Twitter）的来源，似乎为用户分配了一个html正文标记，并且该正文标记的相应CSS背景图像链接到他们上传的图像。

关于我如何做到这一点的任何想法？（注意：我目前正在使用paperclip进行图片上传，但会将其与Amazon S3 /类似服务集成）

我考虑过从我的用户控制器向一个CSS文件/脚本注入一个ruby实例变量，以便它是动态的，但我不知道这是否可能。可能有更好的方法。

Answer 1

我在项目中实现了类似的东西。我将放下这个概念并给你一个代码示例。我将让您了解逻辑或采用代码示例，以适应您的系统实现。

我会使用帮助器。

在 app / views / layouts / application.html.erb

中

<head>
  ...
</head>
<body style="<%= show_user_bg %>">
  ...
</body>

在 app / helpers / application_helper.rb

中

module ApplicationHelper
  def show_user_bg
    "background:transparent url(#{@user.background_image}) no-repeat fixed left top;"
  end
end

只需确保您的用户模型具有background_image列并已设置。

使用帮助程序可使其更具动态性和清洁性。例如，你可以抛出条件：

module ApplicationHelper
  def show_user_bg
    # Show user background
    if user_signed_in?
      "background:transparent url(#{@user.background_image}) no-repeat fixed left top;"
    # Otherwise, show a default background image
    else
      "background:transparent url('/images/default_bg.png') no-repeat fixed left top;"
    end
  end
end

希望有所帮助！

Answer 2

由于它依赖于数据，我只想在视图中使用内嵌样式。

假设控制器已将模型实例加载到具有名为@profile的Paperclip附件属性的background_image，...

<body style="background-image:url(<%= @profile.background_image.url %>)">
  ...
</body>

Answer 3

有各种方法可以做到这一点。我见过谷歌搜索页面。它在html体底部添加了一个图像标签，绝对位置为0,0，并将index设置为-2。

另一种方法是设置body或你的主div的背景图片，你可以使用内联css属性来做这个，比如

<body style="background-image: 'url(<%= user_image -%>)'">

其中user_image是一个辅助方法，它为当前用户计算背景图像网址，这也应该处理默认图像，即如果用户没有选择任何图像，那么它应该返回一个默认图像，可能是透明图像。

用户上传的背景？

3 个答案: