{"action":"opened","issue":{"url":"https://api.github.com/repos/cloudinary/cloudinary_js/issues/60","labels_url":"https://api.github.com/repos/cloudinary/cloudinary_js/issues/60/labels{/name}","comments_url":"https://api.github.com/repos/cloudinary/cloudinary_js/issues/60/comments","events_url":"https://api.github.com/repos/cloudinary/cloudinary_js/issues/60/events","html_url":"https://github.com/cloudinary/cloudinary_js/issues/60","id":116405241,"number":60,"title":"Incorrect width used when images marked as cld-responsive are part of inactive Bootstrap TabPanes","user":{"login":"holtkamp","id":776405,"avatar_url":"https://avatars.githubusercontent.com/u/776405?v=3","gravatar_id":"","url":"https://api.github.com/users/holtkamp","html_url":"https://github.com/holtkamp","followers_url":"https://api.github.com/users/holtkamp/followers","following_url":"https://api.github.com/users/holtkamp/following{/other_user}","gists_url":"https://api.github.com/users/holtkamp/gists{/gist_id}","starred_url":"https://api.github.com/users/holtkamp/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/holtkamp/subscriptions","organizations_url":"https://api.github.com/users/holtkamp/orgs","repos_url":"https://api.github.com/users/holtkamp/repos","events_url":"https://api.github.com/users/holtkamp/events{/privacy}","received_events_url":"https://api.github.com/users/holtkamp/received_events","type":"User","site_admin":false},"labels":[],"state":"open","locked":false,"assignee":null,"milestone":null,"comments":0,"created_at":"2015-11-11T19:32:15Z","updated_at":"2015-11-11T19:32:15Z","closed_at":null,"body":"Based on [this nice article](http://cloudinary.com/blog/how_to_automatically_create_images_for_responsive_design), we tried to use the described responsive behaviour of images served by Cloudinary in a page that uses [Bootstrap TabPanels](http://getbootstrap.com/javascript/#tabs). This resulted in the following behaviour:\r\n\r\n- the generated URLs for the images that are content of the initially active TabPane have proper widths: around 150 pixels for thumbnails.\r\n- the generated URLs for the images that are part of the inactive TabPanes, the width of the TabPane (or the element containing the TabPane) is used: around 680 pixels in our design. \r\n\r\nThe resulting images are displayed properly when a TabPane is activated. However, when being loaded a image a bigger width than required is loaded. This kind of make using this feature useless, since we use TabPanels a lot.\r\n\r\nUsing the incorrect width is possibly caused by [this snippet of code](https://github.com/cloudinary/cloudinary_js/blob/f2e053c84bcb5664fec6099727df14a53fe93117/src/cloudinaryjquery.coffee#L121-L129) which traverses up to the DOM untill a proper width is found. As soon as the element is found that contains all the TabPanes, THAT width is used since that element is the first one visible... Maybe this approach is a bit 'naive'? Maybe the 'loading' process should only start when the element itself, or direct parent has a width? Not sure about this...\r\n"}}