search

cloudinary / cloudinary_gem

Cloudinary GEM for Ruby on Rails integration
https://cloudinary.com
420 stars 285 forks source link

data-src #367

Open 1dolinski opened 4 years ago

1dolinski commented 4 years ago

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">
eyalktCloudinary commented 4 years ago

@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'/>