<html>
<head>
<script src="js/elixir.min.js"></script>
</head>
<body>
Elixir 3 is a pure Javascript plugin. No jQuery or Zepto needed. Just drop this script into the head here or else right before the closing body tag and you'll be golden.
+
<img class="base-resize" data-elixir="elixir.imgix.net/hero.jpg?w=800">
All Elixir needs to get running is an element identifier like a tag or class name. In this case it will be .base-resize but it could just as easily be any class, id or even the img tag itself.
You'll also notice that rather then using your standard img src we're using data-elixir. This is super standard for responsive image solutions and while it protects us from loading a double src per img tag it also blocks RSS readers like Feedly and Instapaper from picking up on these images. With that in mind you may want to sprinkle in a few light images hither and thither throughout your page. Just include them inside the img tags alongside the data-elixir tag, Elixir won't care, it actually kinda likes the company.
Finally, in the case of this image, I'm using a mix of Amazon S3 to store and imgIX to generate my images. While certainly not required, this setup should definitely be considered. It will make your storage and image management life much much easier.
+
<div class="lazy">
<img data-elixir="img/scott-w800-h400.jpg">
<img data-elixir="img/halpert-w800-h400.jpg">
<img data-elixir="img/schrute-w800-h400.jpg">
<img data-elixir="img/flenderson-w800-h400.jpg">
</div>
Aside from targeting individual images you can also just wrap a collection of them and then call their container. In this case .lazy Yay clean markup!
The images within this collection are being self hosted and just so long as you name them correctly. With the -w[digit] and -h[digit] notation you'll notice zero difference from the previous imgIX route. Just be sure these images actually exist. Later once we tell Elixir what sizes we'll be looking for it will be imperative that you've got those images in storage somewhere ready to swap around all nilly willy style.
We're also going to request later that this block be lazy loaded by an external service. (Unveil.js is my lazy loader of choice) Right now however the markup looks just the same as it would for any other block. Less markup to keep track of. #winning
+
<div class="base-resize">
<div data-elixir="background-image: url('img/knope-w800.jpg');">
<div data-elixir="background-image: url('img/wyatt-w800.jpg');">
<div data-elixir="background-image: url('img/dwyer-w800.jpg');">
<div data-elixir="background-image: url('img/swanson-w800.jpg');">
</div>
Elixir 3 exists because minimal markup matters. Markup should be readable, maintainable and scalable. Those three pillars are what hold up the modern web and current responsive solutions are none of these things. Therefore I built something much simpler.
data-elixir is our single key of universal power. This one tag buys us a lot and that doesn't change for background images. Elixir will recognize that we're not operating on a image and will thus "smart-assume" (pat. pending) you'd like a style attribute. Sweet sauce!
Another sweet deal is that we're actually using the same class from up above. The upcoming elixir function call isn't limited to any of the markup groups or individual images it will be operating on. Therefore it can safely be reused elsewhere on other img tags as well as to calculate the CSS for background images. Cool right? I know I definitely love the heck out of this feature. Less code to write and maintain further down iteration lane.
+
<script>
elixir({
".base-resize": {
"widths": [400,800,1200,2400]
},
".lazy": {
"widths": [400,800,1000,1200,1400,1600,2200,2800],
"heights": [200,400,500,600,700,800,1100,1400],
"lazy_tag": "data-src",
"lazy_url": "assets/img/loading.svg"
}
});
$(".lazy img").unveil();
</script>
</body>
</html>
In true Elixir form, the elixir function couldn't be much simpler or more straight forward. Just call elixir() and inside that function, as it's only argument, include an object of all the elements you'd like to operate on. Let's take a quick look at the four options you have available to you.
*Note: These are all optional. You could just as easily include a key name with an empty object and Elixir will roll with its defaults.
