Clarity.js is a simple library which automatically adds the @2x prefix to all the images you want.
<body>
<img src="img/img1.png">
...
...
<script src="path/to/clarity.min.js"></script>
</body>No kidding, the website is ready to kick some retina-butt.
This document will be updated once we get an official CDN.
Oh! That's simple, just do it like this:
<body>
<img src="img/img1.png">
<img src="img/img2.png" data-clarity="escape">
...
<script src="path/to/clarity.min.js"></script>
</body>Done! :D
Now, since Clarity.js works by getting in all of the img tags of the page before it, you will have to include it last; make sure that this file is the last one to be included.
Incase you're wondering why so, it's because, the moment your browser fetches Clarity.js, it executes the script which contains a function indexing all of the images. Since it starts the moment it's loaded, it traverses over all of the already-loaded elements (parsed HTML); so, if your image files are below Clarity.js's inclusion point, it won't add them to the index.
Want to specify your custom suffix for the retina image? Easy; now you can easily add configuration via a JSON-like form.
<body>
<img src="img/img1.png">
<img src="img/img2.png" data-clarity="escape">
...
<script src="path/to/clarity.min.js#{at2xSuffix: '_retina'}"></script>
</body>Now, the retina images will be like: img/img1_retina.png
Sometimes, for modularity, you want to place all the retina image files in a custom directory, with v1.0.1, you can do that:
<body>
<img src="img/img1.png">
<img src="img/img2.png" data-clarity="escape">
...
<script src="path/to/clarity.min.js#{at2xSuffix: '_retina', retinaDir: 'retina-files'}"></script>
</body>Now, for example, img1_retina.png's directory will be: img/retina-files/img1_retina.png. Remember, it's relative to the base path of the image files.
In case you're wondering is you can disable the library after you've included it: you can. As of version v1.0.2, you just need to add the #disabled tag in the src attribute and voilà. A more practical demo, here:
<body>
<img src="img/img1.png">
<img src="img/img2.png" data-clarity="escape">
...
<script src="path/to/clarity.min.js#disabled"></script>
</body>NOTE: The config object uses SINGLE quotation marks instead of the popular " form; it's required, otherwise the HTML parser won't be able to parse it.
If you think that you have the courage to download the repository, fix the code and then push it back again, feel free. :)
Custom Image Suffix- jQuery Plugin
- v1.0.1
- Added custom configuration options via a JSON like syntax.
- v1.0.2
- Added the ability to disable Clarity.js
- v1.0.21
- Fixed the minified version.
Clarity.js Official Website Shreyansh Pandey ([email protected])
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent