Make the placeholder svg configurable

The default hardcoded svg is extracted into a file that is read on boot
by an initializer. It's now possible to overwrite this default value by
adding an initializer in the consuming rails application and setting it
to a custom svg.

README.md

@@ -26,7 +26,7 @@ yourDomReadyFunction(function() {
 
 ## Styling the placeholder
 
-The placeholder image is a simple graphic of a mountain and a moon. Both have been supplied with targetable classes for individual styling. Create a custom rule with these classes, e.g.:
+The default [placeholder image](https://github.com/rhardih/lazy-images-rails/blob/master/app/assets/images/placeholder.svg) is a simple graphic of a mountain and a moon. Both have been supplied with targetable classes for individual styling. Create a custom rule with these classes, e.g.:
 
 ```css
   .rli-placeholder {
@@ -40,6 +40,18 @@ The placeholder image is a simple graphic of a mountain and a moon. Both have be
 
 And the constituent paths in the the svg image will be styled accordingly.
 
+## Using custom svg as placeholder
+
+The placeholder is stored as a string value in `LazyImages::Rails.placeholder`, so in order to overwrite the default, create an initializer and set it accordingly, e.g. `config/initializers/lazy_images-rails.rb`:
+
+```ruby
+custom_placeholder = File.read("#{Rails.root}/app/assets/images/custom.svg")
+LazyImages::Rails.placeholder = custom_placeholder
+```
+
+Here assuming you have placed your custom placeholder in `app/assets/images/custom.svg`.
+
+
 ## Testing
 
 ### Ruby tests

config/initializers/lazy_images-rails.rb

@@ -0,0 +1,3 @@
+gem_path = File.expand_path("../../..", __FILE__)
+placeholder_path = "#{gem_path}/app/assets/images/placeholder.svg"
+LazyImages::Rails.placeholder ||= File.read(placeholder_path)

lib/lazy_images/rails/tag_helper.rb

@@ -1,5 +1,7 @@
 module LazyImages
   module Rails
+    mattr_accessor :placeholder
+
     module TagHelper
       def self.included(base)
         base.alias_method_chain :image_tag, :lazy_images
@@ -10,12 +12,7 @@ def image_tag_with_lazy_images(source, options={})
         data = { rli_image_src: src, rli_placeholder: true }
 
         content_tag(:div, data: data, class: 'rli-wrapper') do
-          %(
-          <svg version="1.1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1024 1024" class="rli-placeholder">
-            <path class="moon" d="M832 288c0 53.020-42.98 96-96 96s-96-42.98-96-96 42.98-96 96-96 96 42.98 96 96z"></path>
-            <path class="mountain" d="M896 832h-768v-128l224-384 256 320h64l224-192z"></path>
-          </svg>
-          ).html_safe + content_tag(:noscript) do
+          LazyImages::Rails.placeholder.html_safe + content_tag(:noscript) do
             options[:src] = src
             options[:class] = "#{options[:class]} rli-image"
             image_tag_without_lazy_images(source, options)

test/lazy_images_test.rb

@@ -6,12 +6,11 @@ class LazyImagesTest < ActionView::TestCase
   end
 
     test "image_tag outputs wrapped image with placeholder and noscript" do
-      markup = %(<div data-rli-image-src="/images/foo.png" data-rli-placeholder="true" class="rli-wrapper">
-          <svg version="1.1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1024 1024" class="rli-placeholder">
-            <path class="moon" d="M832 288c0 53.020-42.98 96-96 96s-96-42.98-96-96 42.98-96 96-96 96 42.98 96 96z"></path>
-            <path class="mountain" d="M896 832h-768v-128l224-384 256 320h64l224-192z"></path>
-          </svg>
-          <noscript><img src="/images/foo.png" class=" rli-image" alt="Foo" /></noscript></div>)
+      markup = %(<div data-rli-image-src="/images/foo.png" data-rli-placeholder="true" class="rli-wrapper"><svg version="1.1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1024 1024" class="rli-placeholder">
+  <path class="moon" d="M832 288c0 53.020-42.98 96-96 96s-96-42.98-96-96 42.98-96 96-96 96 42.98 96 96z"></path>
+  <path class="mountain" d="M896 832h-768v-128l224-384 256 320h64l224-192z"></path>
+</svg>
+<noscript><img src="/images/foo.png" class=" rli-image" alt="Foo" /></noscript></div>)
 
     assert_dom_equal markup, image_tag('foo.png')
   end