cloudinary_gem icon indicating copy to clipboard operation
cloudinary_gem copied to clipboard

data-src

Open 1dolinski opened this issue 6 years ago • 1 comments

Love the gem, thanks!

Using the helper method, my images are rendering src instead of data-src. Is there a way the src attribute be data-src?

Example returns

<%= cl_image_tag(item.photo.key, crop: "fill", flags: "lossy", fetch_format: "auto", width: 640, quality: "auto", client_hits: "true", sizes: "100vw") %>

// alt image url

<img width="640" client_hits="true" sizes="100vw" src="https://res.cloudinary.com/happen/image/upload/c_fill,f_auto,fl_lossy,q_auto,w_640/y1f2pEMCynFryYk3644tNE6z">

1dolinski avatar Nov 03 '19 02:11 1dolinski

@1dolinski Hey! Looks like you're trying to achieve responsive layout using client-hints. You should know that currently, the client-hints solution is supported only for mobile Chrome. More information can be found here and here. The recommended approach would be to use our JS responsive solution, which is easy to implement using our SDKs. This way the data-src will be set as you desire. For example, cl_image_tag("sample", :width => :auto, :crop => :scale, :responsive => :true) will create the following img tag -

<img  class='cld-responsive' 
      data-src='http://res.cloudinary.com/eyalkatzt/image/upload/c_scale,w_auto/sample'/>

eyalktCloudinary avatar Nov 03 '19 11:11 eyalktCloudinary