Zufälliges Hintergrundbild CSS | RAILS

Question

html{ 
    background: url(/assets/flower.jpg) no-repeat center center fixed; 
    -webkit-background-size: cover;   
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
}

Wie kann ich diesen Code dazu bringen, eine zufällige Auswahl aus einer bestimmten Anzahl von Bildern als Hintergrund zu treffen? Ich bin mit Rails 3, so haben, dass im Auge, wenn das den Prozess der Herstellung dieser Arbeit vereinfachen wird. DANKE! :D

Answer 1

Am einfachsten ist es, eine Aktion zu erstellen, die auf ein zufälliges Bild umleitet, dem der Browser dann folgt.

app/controller/background_controller.rb

class BackgroundController < ApplicationController
  def image
    redirect_to "/assets/images/background_#{rand(10)}.jpg"
  end
end

Dies führt zu einer zufälligen Umleitung zu einem Hintergrundbild zwischen background_0.jpg y background_9.jpg

config/routes.rb

Something::Application.routes.draw do
  …
  get '/random_background.jpg', to: 'background#image'
  …
end

css

html{ 
  background: url(/random_background.jpg) no-repeat center center fixed;
}

---

Etwas fortschrittlicher wäre es, so etwas in einer Middleware zu machen, so dass eine solche Anfrage nicht so einen ganzen Rails-Stack benötigt.

app/middleware/random_background_middleware.rb

class RandomBackgroundMiddleware
  def initialize(app, count = 10)
    @app = app
    @count = count
  end

  def call(env)
    if env["PATH_INFO"] == "/random_background.jpg"
      [302, {"Location" => "/assets/images/background_#{rand(@count)}.jpg")}, '']
    else
      @app.call(env)
    end
  end
end

config/application.rb

config.middleware.insert_before 0, "RandomBackgroundMiddlware"

insert_before 0 wird verwendet, um sie an die Spitze der Middleware-Kette zu setzen

---

Oder noch besser wäre so etwas in der Webserver-Konfiguration. Aber ich weiß nicht, wie oder ob dies getan werden kann.

Answer 2

Fügen Sie in Ihrer Ansichtsdatei, in der Sie das Hintergrundbild anzeigen möchten, folgende Zeile ein

<style type="text/css">
  html {
    background: url(<%= randomized_background_image %>) no-repeat center center fixed; 
  }
</style>

Jetzt in Ihrem application_helper

def randomized_background_image
  images = ["assets/foo.jpg", "assets/random.jpg", "assets/super_random"]
  images[rand(images.size)]
end

Answer 3

Ich habe dies getan, indem ich einen zufälligen Klassennamen in der Ansicht wie folgt erstellt habe:

<div class="homepage-banner-<%= rand(1..10) %>">

Dann habe ich einfach mehrere Bilder zu meinem css wie folgt hinzugefügt:

.homepage-banner-1
  background-image: image-url('homepage/homepage-feature-1.jpg')

.homepage-banner-2
  background-image: image-url('homepage/homepage-feature-2.jpg')

.homepage-banner-3
  background-image: image-url('homepage/homepage-feature-3.jpg')

etc.

Ich weiß nicht, ob das der beste Weg ist, aber es ist sehr einfach.