diff --git a/README.md b/README.md index 22bd90e..e257de1 100644 --- a/README.md +++ b/README.md @@ -78,6 +78,10 @@ Lazyload::Rails.configure do |config| # This can be easily customized: config.placeholder = "/public/img/grey.gif" + # By default lazy_css_class is nil. + # If configured a css class will be added to all image_tag's with lazy: true for easy styling + config.lazy_css_class = "lazy_images" + # image_tag can return lazyload-friendly images by default, # no need to pass the { lazy: true } option config.lazy_by_default = true diff --git a/lib/lazyload-rails.rb b/lib/lazyload-rails.rb index f0a9894..78be49c 100644 --- a/lib/lazyload-rails.rb +++ b/lib/lazyload-rails.rb @@ -49,11 +49,16 @@ def image_tag(*attrs) private def to_lazy(image_html) + img = Nokogiri::HTML::DocumentFragment.parse(image_html).at_css("img") img["data-original"] = img["src"] img["src"] = Lazyload::Rails.configuration.placeholder + if Lazyload::Rails.configuration.lazy_css_class + img["class"] = img["class"].present? ? img["class"].to_s + " " + Lazyload::Rails.configuration.lazy_css_class : Lazyload::Rails.configuration.lazy_css_class + end + img.to_s.html_safe end diff --git a/lib/lazyload-rails/config.rb b/lib/lazyload-rails/config.rb index 44b4bfb..8c356a3 100644 --- a/lib/lazyload-rails/config.rb +++ b/lib/lazyload-rails/config.rb @@ -28,10 +28,19 @@ def lazy_by_default @lazy_by_default end + # When { lazy: true } image_tag will include the lazy_css_class + def lazy_css_class + @lazy_css_class + end + def lazy_css_class=(lazy_css_class) + @lazy_css_class = lazy_css_class + end + # Set default settings def initialize @placeholder = "data:image/gif;base64,R0lGODdhAQABAPAAAMPDwwAAACwAAAAAAQABAAACAkQBADs=" @lazy_by_default = false + @lazy_css_class = nil end end end diff --git a/test/test_image_tag.rb b/test/test_image_tag.rb index 3a7844d..42a814f 100644 --- a/test/test_image_tag.rb +++ b/test/test_image_tag.rb @@ -9,9 +9,10 @@ def setup end def test_lazy_option_sets_lazy_attributes - img = parse(image_tag("foo.png", size: "101x151", lazy: true)) + img = parse(image_tag("foo.png", size: "101x151", class: "foo",lazy: true)) assert_match %r(^.*foo.png$), img["data-original"] + assert_equal "foo", img["class"] assert_equal "151", img["height"] assert_equal "101", img["width"] end @@ -24,6 +25,7 @@ def test_lazy_by_default_config_sets_lazy_attributes img = parse(image_tag("foo.png", size: "101x151")) assert_match %r(^.*foo.png$), img["data-original"] + assert_nil img["class"] assert_equal "151", img["height"] assert_equal "101", img["width"] end @@ -36,6 +38,7 @@ def test_lazy_option_overrides_default_config img = parse(image_tag("foo.png", size: "101x151", lazy: false)) assert_nil img["data-original"] + assert_nil img["class"] assert_match %r(^.*foo.png$), img["src"] end @@ -55,6 +58,7 @@ def test_custom_placeholder_is_used_instead_of_normal_src img = parse(image_tag("baz.png", size: "100x250", lazy: true)) assert_equal "/public/img/grey.gif", img["src"] + assert_nil img["class"] assert_match %r(^.*baz.png$), img["data-original"] end @@ -64,18 +68,37 @@ def test_nonlazy_attributes_can_be_set { size: "100x150" } ].each do |opts| img = parse(image_tag("foo.png", size: "100x150", lazy: false)) + + assert_nil img["class"] assert_equal "150", img["height"] assert_equal "100", img["width"] end end def test_empty_options_return_nonlazy_img - img = parse(image_tag("foo.png")) + img = parse(image_tag("foo.png", class: "foo")) assert_nil img["data-original"] + assert_equal "foo", img["class"] assert_match %r(^.*foo.png$), img["src"] end + def test_lazy_css_class + Lazyload::Rails.configure do |config| + config.lazy_css_class = "lazy-img" + end + img = parse(image_tag("foo.png", lazy: true)) + assert_equal "lazy-img", img["class"] + end + + def test_lazy_css_class_with_class_already_assigned + Lazyload::Rails.configure do |config| + config.lazy_css_class = "lazy-img" + end + img = parse(image_tag("foo.png", class: "foo", lazy: true)) + assert_equal "foo lazy-img", img["class"] + end + private def parse(image_html)