Set width and height attributes to the image tag if values exist (#…

…13)

* Set `width` and `height` attributes to the image tag if values exist

* break lines

CHANGELOG.md

@@ -0,0 +1,5 @@
+CHANGELOG
+
+== 0.4.0 (2022-07-18)
+
+- Set `width` and `height` attributes to the image tag if values exist

carrierwave-cloudflare.gemspec

@@ -33,4 +33,5 @@ Gem::Specification.new do |spec|
   spec.add_development_dependency "rack", "~> 2.0"
   spec.add_development_dependency "rake"
   spec.add_development_dependency "rspec"
+  spec.add_development_dependency "rubocop"
 end

lib/carrierwave/cloudflare/action_view/responsive_images_helper.rb

@@ -47,6 +47,8 @@ def hidpi_image_tag(url, dprs: nil, **options)
           image_tag(
             cdn_transformed(url, **transform),
             srcset: hidpi_image_srcset(url, dprs: dprs, **transform),
+            width: transform[:width],
+            height: transform[:height],
             **rest
           )
         end
@@ -73,7 +75,7 @@ def responsive_image_tag(url, width:, sizes: nil, dprs: [1, 2], **options)
           url = url.url if url.is_a?(CarrierWave::Uploader)
 
           if sizes.nil?
-            return hidpi_image_tag(url, **options)
+            return hidpi_image_tag(url, width: width, **options)
           end
 
           sizes[:default] = width
@@ -108,6 +110,8 @@ def responsive_image_tag(url, width:, sizes: nil, dprs: [1, 2], **options)
             base_version,
             srcset: srcset,
             sizes: sizes_attr,
+            width: width,
+            height: transform[:height],
             **rest
           )
         end

lib/carrierwave/cloudflare/version.rb

@@ -2,6 +2,6 @@
 
 module CarrierWave
   module Cloudflare
-    VERSION = "0.3.2"
+    VERSION = "0.4.0"
   end
 end

spec/carrierwave/cloudflare/responsive_images_helper_spec.rb

@@ -52,7 +52,21 @@ class DummyView
 
       it "generates image tag with srcset" do
         img_tag = view.hidpi_image_tag("/img.jpg", width: 400, dprs: [1, 2, 3])
-        expected_img_tag = "<img srcset=\"/cdn-cgi/image/width=400,dpr=1/img.jpg 1x, /cdn-cgi/image/width=400,dpr=2/img.jpg 2x, /cdn-cgi/image/width=400,dpr=3/img.jpg 3x\" src=\"/cdn-cgi/image/width=400/img.jpg\" />"
+        expected_img_tag = "<img srcset=\"/cdn-cgi/image/width=400,dpr=1/img.jpg 1x,\
+ /cdn-cgi/image/width=400,dpr=2/img.jpg 2x,\
+ /cdn-cgi/image/width=400,dpr=3/img.jpg 3x\"\
+ width=\"400\" src=\"/cdn-cgi/image/width=400/img.jpg\" />"
+
+        expect(img_tag).to eql(expected_img_tag)
+      end
+
+      it "generates image tag with width and height" do
+        img_tag = view.hidpi_image_tag("/img.jpg", width: 400, height: 300, dprs: [1, 2, 3])
+
+        expected_img_tag = "<img srcset=\"/cdn-cgi/image/width=400,height=300,dpr=1/img.jpg 1x,\
+ /cdn-cgi/image/width=400,height=300,dpr=2/img.jpg 2x,\
+ /cdn-cgi/image/width=400,height=300,dpr=3/img.jpg 3x\"\
+ width=\"400\" height=\"300\" src=\"/cdn-cgi/image/width=400,height=300/img.jpg\" />"
 
         expect(img_tag).to eql(expected_img_tag)
       end
@@ -67,14 +81,16 @@ class DummyView
 
       it "generates image srcset" do
         img_srcset = view.hidpi_image_srcset("/img.jpg", width: 400, dprs: [1, 2, 3])
-        expected_img_srcset = "/cdn-cgi/image/width=400,dpr=1/img.jpg 1x, /cdn-cgi/image/width=400,dpr=2/img.jpg 2x, /cdn-cgi/image/width=400,dpr=3/img.jpg 3x"
+        expected_img_srcset = "/cdn-cgi/image/width=400,dpr=1/img.jpg 1x,\
+ /cdn-cgi/image/width=400,dpr=2/img.jpg 2x, /cdn-cgi/image/width=400,dpr=3/img.jpg 3x"
 
         expect(img_srcset).to eql(expected_img_srcset)
       end
 
       it "generates image srcset (uses default drps)" do
         img_srcset = view.hidpi_image_srcset("/img.jpg", width: 400)
-        expected_img_srcset = "/cdn-cgi/image/width=400,dpr=1/img.jpg 1x, /cdn-cgi/image/width=400,dpr=2/img.jpg 2x"
+        expected_img_srcset = "/cdn-cgi/image/width=400,dpr=1/img.jpg 1x,\
+ /cdn-cgi/image/width=400,dpr=2/img.jpg 2x"
 
         expect(img_srcset).to eql(expected_img_srcset)
       end
@@ -90,7 +106,29 @@ class DummyView
       it "generates image responsive image tag" do
         img_tag = view.responsive_image_tag('/bird.jpg', width: 1200, sizes: { phone: 600, tablet: 800 })
 
-        expected_img_tag = "<img srcset=\"/cdn-cgi/image/width=1200,dpr=0.5/bird.jpg 600w, /cdn-cgi/image/width=1200,dpr=1.0/bird.jpg 1200w, /cdn-cgi/image/width=1200,dpr=0.67/bird.jpg 800w, /cdn-cgi/image/width=1200,dpr=1.33/bird.jpg 1600w, /cdn-cgi/image/width=1200,dpr=2.0/bird.jpg 2400w\" sizes=\"(max-width: 767px) 600px, (max-width: 1023px) 800px, 1200px\" src=\"/cdn-cgi/image/width=1200/bird.jpg\" />"
+        expected_img_tag = "<img srcset=\"/cdn-cgi/image/width=1200,dpr=0.5/bird.jpg 600w,\
+ /cdn-cgi/image/width=1200,dpr=1.0/bird.jpg 1200w,\
+ /cdn-cgi/image/width=1200,dpr=0.67/bird.jpg 800w,\
+ /cdn-cgi/image/width=1200,dpr=1.33/bird.jpg 1600w,\
+ /cdn-cgi/image/width=1200,dpr=2.0/bird.jpg 2400w\"\
+ sizes=\"(max-width: 767px) 600px, (max-width: 1023px) 800px,\
+ 1200px\" width=\"1200\" src=\"/cdn-cgi/image/width=1200/bird.jpg\" />"
+
+
+        expect(img_tag).to eql(expected_img_tag)
+      end
+
+      it "generates image responsive image tag with height" do
+        img_tag = view.responsive_image_tag('/bird.jpg', width: 200, height: 1200, sizes: { phone: 600, tablet: 800 })
+
+        expected_img_tag = "<img srcset=\"/cdn-cgi/image/width=200,height=1200,dpr=3.0/bird.jpg 600w,\
+ /cdn-cgi/image/width=200,height=1200,dpr=6.0/bird.jpg 1200w,\
+ /cdn-cgi/image/width=200,height=1200,dpr=4.0/bird.jpg 800w,\
+ /cdn-cgi/image/width=200,height=1200,dpr=8.0/bird.jpg 1600w,\
+ /cdn-cgi/image/width=200,height=1200,dpr=1.0/bird.jpg 200w,\
+ /cdn-cgi/image/width=200,height=1200,dpr=2.0/bird.jpg 400w\"\
+ sizes=\"(max-width: 767px) 600px, (max-width: 1023px) 800px, 200px\"\
+ width=\"200\" height=\"1200\" src=\"/cdn-cgi/image/width=200,height=1200/bird.jpg\" />"
 
 
         expect(img_tag).to eql(expected_img_tag)