Created
December 17, 2019 22:01
-
-
Save nimrodolev/10e5a5c06dcd3f20d8e2867791e73b28 to your computer and use it in GitHub Desktop.
Jekyll include module to create a picture element with several source elements to allow using advanced format on supporting browsers
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| {% comment %} | |
| This tag assumes that you have some kind of a process to create webp | |
| versions of your images, maybe as part of your build pipeline. | |
| Also, my specific staging environment does have this webp generation setup | |
| which is why I exclude the webp source on staging - you can do the same for other | |
| environments, like development. | |
| {% endcomment %} | |
| {% assign src = include.src %} | |
| {% assign parts = src | split: '.' %} | |
| {% assign size_minus_1 = parts.size | minus: 1 %} | |
| {% assign no_extension = parts | slice: 0, size_minus_1 %} | |
| {% assign extension = parts.last %} | |
| {% assign first_half = no_extension | join: '.' %} | |
| {% assign webpsrc = first_half | append: '.webp' %} | |
| <picture> | |
| {% unless jekyll.environment == "staging" %} | |
| <source srcset="{{webpsrc}}" type="image/webp"> | |
| {% endunless %} | |
| <source srcset="{{src}}" type="image/{{extension}}"> | |
| <img src="{{src}}" alt="{{include.alt}}" style="{{include.style}}"> | |
| </picture> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment