0

I am serving cloudinary images responsively following this documentation:

http://cloudinary.com/blog/how_to_automatically_create_images_for_responsive_design#implementing_responsive_design_with_cloudinary_s_javascript_library

My index.hjs looks like this:

<!DOCTYPE html>
<html>
  <head>
    <title>{{ title }}</title>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/cloudinary-
     core/2.3.0/cloudinary-core-shrinkwrap.js" type="text/javascript">
    </script>
  </head>
  <body>
    <div id="root"></div>
    <script type="text/javascript" src="/static/bundle.js"></script>
    <script type="text/javascript">
      var cl = cloudinary.Cloudinary.new({cloud_name: "myCloudName"});
      cl.responsive();
    </script>
</body>

Component rendering images has this per the above documentation:

{this.state.images.map(function(image, i){
                return <img key={i} className="cld-responsive thumbnail"
                            data-src={image.albums.images}/>})}

the problem is on the initial render, the images render as 100% width with 0 height and don't appear at all. However, if I resize the window the responsive images are shown.

Do I need to move the 

 cl.responsive();

to somewhere else in my code? I tried moving it into the component and triggering a state refresh with componentDidMount() but the images still don't show on re-render; only if the window is resized.

Any help is appreciated.

Nolan Davis
  • 125
  • 1
  • 1
  • 7

1 Answers1

1

The SDK automatically updates images on resize when they have a responsive attribute set on them.

Sample code:

<div className="image-holder">
    <Image publicId="sample" responsive>
        <Transformation width="auto" crop="scale"/>
    </Image>
</div>

Link to full example: https://codepen.io/eitanp461/project/editor/ZoNNkP

Note that Cloudinary's React SDK depends on cloudinary-core so you don't need to load it as a separate script from your index.html.

Eitan Peer
  • 4,335
  • 27
  • 29