-
-
Save croxton/5fe5087739ea5442cbc6 to your computer and use it in GitHub Desktop.
HTML: | |
<header id="js-cover" class="cover"> | |
<!-- Optionally specify image width stoppoints to reduce the maximum possible no of transforms per image --> | |
<!-- The appropriate image resolution will automatically be loaded --> | |
<img | |
data-stoppoints="480,768,1200" | |
data-src="http://res.cloudinary.com/<your account name>/image/fetch/w_auto,dpr_auto/http://<your full img url>" | |
class="cld-responsive cover-img" id="js-cover-img"> | |
<h1>Perfectly centered!</h1> | |
</header> | |
CSS: | |
.cover { | |
min-height: 300px; | |
height: 100vh; | |
text-align: center; | |
display: flex; | |
align-items: center; | |
justify-content: center; | |
background: #FFF; | |
background-repeat: no-repeat; | |
background-size:cover; | |
background-position: center center; | |
background-attachment:scroll; | |
overflow: hidden; | |
} | |
/* you could alternatively use a loading sprite here and hide on first load */ | |
.cover-img { | |
display: none; | |
} | |
JS: | |
<!-- jQuery --> | |
<script src="//code.jquery.com/jquery-1.11.2.min.js"></script> | |
<script>window.jQuery || document.write('<script src="/_assets/js/jquery-1.11.2.min.js"><\/script>')</script> | |
<!-- Cloudinary --> | |
<script src="https://rawgit.com/cloudinary/cloudinary_js/master/js/jquery.cloudinary.js"></script> | |
<script> | |
$(function() { | |
$.cloudinary.config({ cloud_name: '<your account name>', api_key: '<your api key>'}) | |
$.cloudinary.responsive({ | |
type : 'fetch', | |
responsive_use_stoppoints : true | |
}); | |
$("#js-cover-img").load(function(){ | |
$("#js-cover").css('backgroundImage', 'url('+$("#js-cover-img").attr('src')+')'); | |
}); | |
}); | |
</script> |
Actually this is intentional. Cloudinary will upload a remote image on the fly:
data-src="http://res.cloudinary.com/<your account name>/image/fetch/w_auto,dpr_auto/http://www.your-website/your-image.jpg"
You need the account name and key for uploads :)
Thanks for the gist, though I don't believe this works well for narrow screens (e.g., mobile).
The resolution of the image is calculated with the width of the screen, making it very low res on a narrow device (where the height is much greater in proportion to the width, and the image is forced to zoom in a lot).
For an example of what I mean, you can clone this repo, open index.html, make the browser screen narrow, and refresh.
True, what I often do is set the containing div to maintain a specific aspect ratio, combined with a <picture>
element if that aspect ratio should change at different breakpoints.
I'm not exactly sure what you mean. Are you saying that a <picture>
element can be used to compensate for aspect ratios that have a greater height than width? If so, could you please elaborate (or even better, submit a pull request to my repo above?)
Thank You For Your Gist.
I recently switched to Cloudinary, which is pretty awesome, I was having difficulty with the documentation. Your code Gist has been a tremendous help.
The data-src url seems to be incorrect with two http urls and I don't think you need the cloud_name and api_key for simple image requests.
Thanks.