Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/hydecorp/jekyll-replace-img
A Jekyll plugin to replace img tags with custom elements
https://github.com/hydecorp/jekyll-replace-img
custom-elements img jekyll jekyll-plugin lazy-loading
Last synced: about 2 months ago
JSON representation
A Jekyll plugin to replace img tags with custom elements
- Host: GitHub
- URL: https://github.com/hydecorp/jekyll-replace-img
- Owner: hydecorp
- License: mit
- Created: 2019-04-03T14:40:18.000Z (almost 6 years ago)
- Default Branch: master
- Last Pushed: 2019-11-09T19:48:16.000Z (about 5 years ago)
- Last Synced: 2024-10-12T09:40:51.224Z (3 months ago)
- Topics: custom-elements, img, jekyll, jekyll-plugin, lazy-loading
- Language: Ruby
- Homepage: https://hydejack.com
- Size: 33.2 KB
- Stars: 1
- Watchers: 2
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- Contributing: docs/CONTRIBUTING.md
- License: LICENSE.md
- Code of conduct: docs/CODE_OF_CONDUCT.md
Awesome Lists containing this project
README
# Jekyll Replace Image
[](https://travis-ci.org/hydecorp/jekyll-replace-img)
A Jekyll plugin to replace `img` tags with custom elements during site generation.
## What it does
It runs a regular expression to find HTML `img` tags against the output of each page and replaces matches with a user-defined replacement.
There are a number of custom elements you can use, such as [`progressive-img`][pi], [`amp-img`][ai] and (my very own) [`hy-img`][hy].
[io]: https://developer.mozilla.org/en-US/docs/Web/API/Intersection_Observer_API
[pi]: https://www.webcomponents.org/element/progressive-img
[ai]: https://www.ampproject.org/docs/reference/components/amp-img
[hy]: https://github.com/hydecorp/img
Note that replacing images during site generation is necessary for lazy-loading, because the browser will start loading any `img` tag as soon as it is parsed, before it can be touched by client side code.
## Why
1. Lazy-loading images increases page load speed and is recommended by Google.
2. So you can use the `` syntax for images without polluting your posts with lengthy HTML tags.
## Usage
1. Add the following to your site's Gemfile:
```ruby
gem 'jekyll-replace-img'
```
2. Add the following to your site's config file:
```yml
plugins:
- jekyll-replace-img
```
Note: If you are using a Jekyll version less than 3.5.0, use the `gems` key instead of `plugins`.
3. Configure and provide your replacement.
## Configuration
You can configure this plugin in `_config.yml` under the `replace_img` key. The defaults are:
```yml
replace_img:
re_img: ![]()
.*?)\s*/>
re_ignore: data-ignore
replacement: |
s>
![]()
s/>
```
### Image Regular Expression
You can set the `re_img` key to a custom regular expression to look for image tags (or possibly other tags). Note that the capture groups need to be named and match the names in `replacement`. E.g.:
![]()
.*?)\s*/>
Mind the use of the non-greedy quantifier (`*?`) in the capture group to avoid capturing all images in a single match!
You cannot provide flags and the regular expression is always case-insensitive.
### Ignore Regular Expression
You can provide a custom regular expression on the `re_ignore` key that will run against the text matched by the `re_img` expression. If it matches, the image will not be replaced.
You cannot provide flags and the regular expression is always case-insensitive. Data URLs are always ignored.
### Replacement
A replacement string for every sequence matched by `re_img` but not `re_ignore`. Has access to the named captures in `re_img`, which is `attributes` by default.
Capture groups can be inserted in the replacement like this `%s`, where `attribures` is the name of the capture group and `s` is the string tag. See Ruby's [`sprintf`][sprintf] documentation for more.
[sprintf]: https://ruby-doc.org/core-2.6.2/Kernel.html#method-i-sprintf
#### Example
s>
![]()
s/>
## TODO
- [ ] Allow multiple ignore expressions
- [ ] Allow substitutions of matched groups, e.g. `s/width/w`