Пользователь загрузил фон? - PullRequest
Новая
       7

Пользователь загрузил фон?

1 голос
/ 14 апреля 2011

Я бы хотел, чтобы пользователи могли загружать изображения для использования в качестве фона в своих профилях (пользователи # показывают).При просмотре источника некоторых сайтов, которые имеют такую ​​функциональность (например, Twitter), кажется, что пользователям назначается HTML-тег body, и соответствующее CSS-фоновое изображение для этого тега body связано с загруженным ими изображением.

Есть идеи, как мне это сделать?(Примечание: в настоящее время я использую скрепку для загрузки изображений, но буду интегрировать ее с сервисом Amazon S3 или аналогичным)это было бы динамично, но я не знаю, возможно ли это вообще.Возможно, есть лучший способ.

Ответы [ 3 ]

6 голосов
/ 14 апреля 2011

Я реализовал нечто подобное в проекте.Я изложу концепцию и приведу пример кода.Я оставлю вас, чтобы понять логику или взять кусочки примера кода в соответствии с вашей реализацией системы.

Я бы использовал для этого помощника.

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

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

In 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

Надеюсь, что поможет!

1 голос
/ 14 апреля 2011

Поскольку это зависит от данных, я бы просто использовал встроенный стиль в представлении.

Предполагается, что контроллер загрузил экземпляр модели в @profile с атрибутом вложения Paperclip с именем background_image, ... 

<body style="background-image:url(<%= @profile.background_image.url %>)">
  ...
</body>
0 голосов
/ 14 апреля 2011

Есть разные способы сделать это.Я видел страницу поиска Google.Он добавил тег изображения внизу html тела с абсолютной позицией 0,0 и установил индекс как -2.

другой способ - установить фоновое изображение тела или вашего основного элемента div, вы можете сделать это с помощью встроенного атрибута css, например 

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

, где user_image - вспомогательный метод, который вычисляет URL фонового изображениядля текущего пользователя это также должно обрабатывать изображение по умолчанию, т. е. если пользователь не выбрал какое-либо изображение, оно должно вернуть изображение по умолчанию, возможно, прозрачное изображение.

...