diff --git a/README.md b/README.md index e4b4304..7fd9f9e 100644 --- a/README.md +++ b/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 diff --git a/app/assets/images/placeholder.svg b/app/assets/images/placeholder.svg new file mode 100644 index 0000000..53582f7 --- /dev/null +++ b/app/assets/images/placeholder.svg @@ -0,0 +1,4 @@ + diff --git a/config/initializers/lazy_images-rails.rb b/config/initializers/lazy_images-rails.rb new file mode 100644 index 0000000..e940d3b --- /dev/null +++ b/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) diff --git a/lib/lazy_images/rails/tag_helper.rb b/lib/lazy_images/rails/tag_helper.rb index 618f13f..ab8aff5 100644 --- a/lib/lazy_images/rails/tag_helper.rb +++ b/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 - %( - - ).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) diff --git a/test/lazy_images_test.rb b/test/lazy_images_test.rb index 1125575..77c5798 100644 --- a/test/lazy_images_test.rb +++ b/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 = %(