Skip to content

Statamic v2 Addon that automatically handles responsive images using srcset.

License

Notifications You must be signed in to change notification settings

aryehraber/statamic-responsive-img

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

41 Commits
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

ResponsiveImg

Never think about creating responsive images again.

This addon makes it super simple to output an img with multiple srcset sizes defined to ensure browsers only ever download the size it needs based on the viewport. Additionally, a base64-encoded SVG will be inlined to show a tiny, blurred image while the real image is loading -- this will ensure the image renders at the correct size on initial page load without an extra network request.

For more info on how this works under the hood, read Spatie's Responsive Image docs.

Getting started

To get started and for a list of available options, check out the docs.

Example

Below is a simple example of a banner image with a width of 2500px:

---
banner: /assets/img/hero-banner.jpg
---
<div>
  {{ responsive_img:banner attr="class:w-full" }}
</div>

Rendered HTML:

<div>
  <img class="w-full" srcset="/img/containers/main/img/banner.jpg/3a679c0fc2a494827cd78b9facbaf696.jpg 2500w, /img/containers/main/img/banner.jpg/86eb8f18c80bc4adb298f7d4aba23d98.jpg 2091w, /img/containers/main/img/banner.jpg/c43a27815f3003963dfe551aa80c088e.jpg 1749w, /img/containers/main/img/banner.jpg/ac56820bdeeb5e996abc606b40945d83.jpg 1464w, /img/containers/main/img/banner.jpg/f5c1a4ee11018fcafe1f07f41d2da07a.jpg 1224w, /img/containers/main/img/banner.jpg/cd8d32990fb26bde830403f19d0a0662.jpg 1024w, /img/containers/main/img/banner.jpg/6561461f81d6540cd5a635bf5d44dde6.jpg 857w, /img/containers/main/img/banner.jpg/019b9c8a02a7dc1291f9e60b29a2fc15.jpg 717w, /img/containers/main/img/banner.jpg/3613eed0a83dcb41766e8afdc425a59b.jpg 600w, /img/containers/main/img/banner.jpg/5495e24e576ba9b9cc2b49a4b4a25957.jpg 502w, /img/containers/main/img/banner.jpg/ffb73621c90e0fe4e7c7d4901dc151cb.jpg 420w, /img/containers/main/img/banner.jpg/6960fb223088098ca0c9b02fc114a087.jpg 351w, /img/containers/main/img/banner.jpg/baaebfbfd6755aa87317a224f9be302a.jpg 294w, /img/containers/main/img/banner.jpg/36bb43d811cccde3d1d5cd63909c48b1.jpg 246w, /img/containers/main/img/banner.jpg/5d6d9b6e1caa09376b1a5b6198a57df4.jpg 205w, data:image/svg+xml;base64,PCFET0NUWVBFIHN2ZyBQVUJMSUMgIi0vL1czQy8vRFREIFNWRyAxLjEvL0VOIiAiaHR0cDovL3d3dy53My5vcmcvR3JhcGhpY3MvU1ZHLzEuMS9EVEQvc3ZnMTEuZHRkIj4KPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHhtbDpzcGFjZT0icHJlc2VydmUiIHg9IjAiCiB5PSIwIiB2aWV3Qm94PSIwIDAgMjUwMCAxNjIwIj4KICA8aW1hZ2Ugd2lkdGg9IjI1MDAiIGhlaWdodD0iMTYyMCIgeGxpbms6aHJlZj0iZGF0YTppbWFnZS9qcGVnO2Jhc2U2NCwvOWovNEFBUVNrWkpSZ0FCQVFFQVlBQmdBQUQvL2dBN1ExSkZRVlJQVWpvZ1oyUXRhbkJsWnlCMk1TNHdJQ2gxYzJsdVp5QkpTa2NnU2xCRlJ5QjJPVEFwTENCeGRXRnNhWFI1SUQwZ056VUsvOXNBUXdBSUJnWUhCZ1VJQndjSENRa0lDZ3dVRFF3TEN3d1pFaE1QRkIwYUh4NGRHaHdjSUNRdUp5QWlMQ01jSENnM0tTd3dNVFEwTkI4bk9UMDRNand1TXpReS85c0FRd0VKQ1FrTUN3d1lEUTBZTWlFY0lUSXlNakl5TWpJeU1qSXlNakl5TWpJeU1qSXlNakl5TWpJeU1qSXlNakl5TWpJeU1qSXlNakl5TWpJeU1qSXlNakl5LzhBQUVRZ0FGQUFnQXdFaUFBSVJBUU1SQWYvRUFCOEFBQUVGQVFFQkFRRUJBQUFBQUFBQUFBQUJBZ01FQlFZSENBa0tDLy9FQUxVUUFBSUJBd01DQkFNRkJRUUVBQUFCZlFFQ0F3QUVFUVVTSVRGQkJoTlJZUWNpY1JReWdaR2hDQ05Dc2NFVlV0SHdKRE5pY29JSkNoWVhHQmthSlNZbktDa3FORFUyTnpnNU9rTkVSVVpIU0VsS1UxUlZWbGRZV1ZwalpHVm1aMmhwYW5OMGRYWjNlSGw2ZzRTRmhvZUlpWXFTazVTVmxwZVltWnFpbzZTbHBxZW9xYXF5czdTMXRyZTR1YnJDdzhURnhzZkl5Y3JTMDlUVjF0ZlkyZHJoNHVQazVlYm42T25xOGZMejlQWDI5L2o1K3YvRUFCOEJBQU1CQVFFQkFRRUJBUUVBQUFBQUFBQUJBZ01FQlFZSENBa0tDLy9FQUxVUkFBSUJBZ1FFQXdRSEJRUUVBQUVDZHdBQkFnTVJCQVVoTVFZU1FWRUhZWEVUSWpLQkNCUkNrYUd4d1Frak0xTHdGV0p5MFFvV0pEVGhKZkVYR0JrYUppY29LU28xTmpjNE9UcERSRVZHUjBoSlNsTlVWVlpYV0ZsYVkyUmxabWRvYVdwemRIVjJkM2g1ZW9LRGhJV0doNGlKaXBLVGxKV1dsNWlabXFLanBLV21wNmlwcXJLenRMVzJ0N2k1dXNMRHhNWEd4OGpKeXRMVDFOWFcxOWpaMnVMajVPWG01K2pwNnZMejlQWDI5L2o1K3YvYUFBd0RBUUFDRVFNUkFEOEFvd2FPOG82VmNqMEFoaG5wVGRKMTJOeUZiQXJjT3B3SGdNSytFeEN4Vk9mSTRuMUV1SVhVMWl4YkN4VzJYQXJUMmdyaXNoYjc1dU9sWElyc01Pb3J6YXRPbzNkbkhQR0tzN3Rua2R0SzZuaHNWbzI5ek1aQjg1b29yOW14TkdtNVhjVnNmQ2N6WFU2T3lsZGdNbW0zbHpMRko4akVVVVY4Zk9sRDJ6VmtkMUtVcmJuLzJRPT0iPjwvaW1hZ2U+Cjwvc3ZnPgo= 32w" onload="this.onload=null;this.sizes=Math.ceil(this.getBoundingClientRect().width/window.innerWidth*100)+'vw';" sizes="1px">
</div>

Credits

A big thank you to Spatie for the idea and the recursive size calculation in their Laravel Medialibrary package.

About

Statamic v2 Addon that automatically handles responsive images using srcset.

Resources

License

Stars

Watchers

Forks

Sponsor this project

Packages

No packages published