Add client_hints, width and quality

* Fix width test
* Fix expected result typo
* Add tests
* Fix width conditions
* Add `cl_client_hints_meta_tag`. Add `:client_hints` configuration parameter.

lib/cloudinary/helper.rb

@@ -46,9 +46,11 @@ def cloudinary_tag(source, options = {})
     source = cloudinary_url_internal(source, tag_options)
 
     responsive_placeholder = Cloudinary::Utils.config_option_consume(tag_options, :responsive_placeholder)
+    client_hints = Cloudinary::Utils.config_option_consume(tag_options, :client_hints)
+
     hidpi = tag_options.delete(:hidpi)
     responsive = tag_options.delete(:responsive)
-    if hidpi || responsive
+    if !client_hints && (hidpi || responsive)
       tag_options["data-src"] = source
       source = nil
       extra_class = responsive ? "cld-responsive" : "cld-hidpi"
@@ -184,6 +186,9 @@ def cloudinary_js_config
     content_tag("script", "$.cloudinary.config(#{params.to_json});".html_safe, :type=>"text/javascript")
   end
 
+  def cl_client_hints_meta_tag
+    tag "meta", "http-equiv" => "Accept-CH", :content => "DPR, Viewport-Width, Width"
+  end
   def cloudinary_url(source, options = {})
     cloudinary_url_internal(source, options.clone)
   end

lib/cloudinary/utils.rb

@@ -51,10 +51,10 @@ def self.generate_transformation_string(options={}, allow_implicit_crop_mode = f
     angle = build_array(options.delete(:angle)).join(".")
 
     no_html_sizes = has_layer || angle.present? || crop.to_s == "fit" || crop.to_s == "limit" || crop.to_s == "lfill"
-    options.delete(:width) if width && (width.to_f < 1 || no_html_sizes || width == "auto" || responsive_width)
+    options.delete(:width) if width && (width.to_f < 1 || no_html_sizes || width.to_s.start_with?("auto") || responsive_width)
     options.delete(:height) if height && (height.to_f < 1 || no_html_sizes || responsive_width)
 
-    width=height=nil if crop.nil? && !has_layer && width != "auto" && !allow_implicit_crop_mode
+    width=height=nil if crop.nil? && !has_layer && !width.to_s.start_with?("auto") && !allow_implicit_crop_mode
 
     background = options.delete(:background)
     background = background.sub(/^#/, 'rgb:') if background
@@ -156,7 +156,7 @@ def self.generate_transformation_string(options={}, allow_implicit_crop_mode = f
       transformations << generate_transformation_string(responsive_width_transformation.clone, allow_implicit_crop_mode)
     end
 
-    if width.to_s == "auto" || responsive_width
+    if width.to_s.start_with?( "auto") || responsive_width
       options[:responsive] = true
     end
     if dpr.to_s == "auto"

spec/cloudinary_helper_spec.rb

@@ -11,6 +11,9 @@
 RSpec.describe CloudinaryHelper do
   let(:helper) { helper_class.new }
   let(:options) { {} }
+  before :each do
+    Cloudinary.config({})
+  end
   context "#cl_image_upload_tag" do
     let(:options) {{:multiple => true}}
     before do
@@ -70,5 +73,58 @@
         expect(test_tag['data-src']).to eq( "http://res.cloudinary.com/test/image/upload/dpr_auto/sample.jpg")
       end
     end
+
+    context ":client_hints" do
+      shared_examples "client_hints" do
+        it "should not use data-src or set responsive class" do
+          expect(test_tag.name).to match( 'img')
+          expect(test_tag['class']).to be_nil
+          expect(test_tag['data-src']).to be_nil
+          expect(test_tag['src']).to eq( "http://res.cloudinary.com/test/image/upload/dpr_auto,w_auto/sample.jpg")
+        end
+        it "should override :responsive" do
+          Cloudinary.config.responsive = true
+          expect(test_tag.name).to match( 'img')
+          expect(test_tag['class']).to be_nil
+          expect(test_tag['data-src']).to be_nil
+          expect(test_tag['src']).to eq( "http://res.cloudinary.com/test/image/upload/dpr_auto,w_auto/sample.jpg")
+        end
+      end
+      context "as option" do
+        let(:options) { {:dpr => :auto, :cloud_name => "test", :width => "auto", :client_hints => true} }
+        include_examples "client_hints"
+      end
+      context "as global configuration" do
+        before do
+          Cloudinary.config.client_hints = true
+        end
+        let(:options) { {:dpr => :auto, :cloud_name => "test", :width => "auto"} }
+        include_examples "client_hints"
+      end
+
+      context "false" do
+        let(:options) { {:width => :auto, :cloud_name => "test", :client_hints => false} }
+        it "should use normal responsive behaviour" do
+          expect(test_tag.name).to match( 'img')
+          expect(test_tag['class']).to eq( 'cld-responsive')
+          expect(test_tag['data-src']).to eq( "http://res.cloudinary.com/test/image/upload/w_auto/sample.jpg")
+        end
+      end
+      context "width" do
+        let(:options) { {:dpr => :auto, :cloud_name => "test", :width => "auto:breakpoints", :client_hints => true}}
+        it "supports auto width" do
+          expect(test_tag['src']).to eq( "http://res.cloudinary.com/test/image/upload/dpr_auto,w_auto:breakpoints/sample.jpg")
+        end
+      end
+    end
+  end
+
+  context "#cl_client_hints_meta_tag" do
+    it "should create a meta tag" do
+      tag = TestTag.new( helper.cl_client_hints_meta_tag)
+      expect(tag.name).to match('meta')
+      expect(tag['content']).to eq('DPR, Viewport-Width, Width')
+      expect(tag['http-equiv']).to eq('Accept-CH')
+    end
   end
 end

spec/utils_spec.rb

@@ -207,14 +207,43 @@
         .to produce_url("#{upload_path}/c_crop,h_10,w_10/test")
               .and mutate_options_to({ :width => "10", :height => "10" })
     end
+    it "should support auto width" do
+      expect(["test", { :width => "auto:20", :crop => :fill }])
+          .to produce_url("#{upload_path}/c_fill,w_auto:20/test")
+      expect(["test", { :width => "auto:20:350", :crop => :fill }])
+          .to produce_url("#{upload_path}/c_fill,w_auto:20:350/test")
+      expect(["test", { :width => "auto:breakpoints", :crop => :fill }])
+          .to produce_url("#{upload_path}/c_fill,w_auto:breakpoints/test")
+      expect(["test", { :width => "auto:breakpoints_100_1900_20_15", :crop => :fill }])
+          .to produce_url("#{upload_path}/c_fill,w_auto:breakpoints_100_1900_20_15/test")
+      expect(["test", { :width => "auto:breakpoints:json", :crop => :fill }])
+          .to produce_url("#{upload_path}/c_fill,w_auto:breakpoints:json/test")
+    end
   end
 
   it "should use x, y, radius, prefix, gravity and quality from options" do
     expect(["test", { :x => 1, :y => 2, :radius => 3, :gravity => :center, :quality => 0.4, :prefix => "a" }])
       .to produce_url("#{upload_path}/g_center,p_a,q_0.4,r_3,x_1,y_2/test")
             .and empty_options
   end
+  context ":quality" do
+    it "support a percent value" do
+      expect(["test", { :x => 1, :y => 2, :radius => 3, :gravity => :center, :quality => 80, :prefix => "a" }])
+          .to produce_url("#{upload_path}/g_center,p_a,q_80,r_3,x_1,y_2/test")
+
+      expect(["test", { :x => 1, :y => 2, :radius => 3, :gravity => :center, :quality => "80:444", :prefix => "a" }])
+          .to produce_url("#{upload_path}/g_center,p_a,q_80:444,r_3,x_1,y_2/test")
+    end
+    it "should support auto value" do
+
+      expect(["test", { :x => 1, :y => 2, :radius => 3, :gravity => :center, :quality => "auto", :prefix => "a" }])
+          .to produce_url("#{upload_path}/g_center,p_a,q_auto,r_3,x_1,y_2/test")
 
+      expect(["test", { :x => 1, :y => 2, :radius => 3, :gravity => :center, :quality => "auto:good", :prefix => "a" }])
+          .to produce_url("#{upload_path}/g_center,p_a,q_auto:good,r_3,x_1,y_2/test")
+
+    end
+  end
   describe ":transformation" do
     it "should support named tranformation" do
       expect(["test", { :transformation => "blip" }])