Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/kenchan0130/jekyll-lazy-load-image
Edit img tag optimized lazy load images for your Jekyll site
https://github.com/kenchan0130/jekyll-lazy-load-image
jekyll ruby
Last synced: 19 days ago
JSON representation
Edit img tag optimized lazy load images for your Jekyll site
- Host: GitHub
- URL: https://github.com/kenchan0130/jekyll-lazy-load-image
- Owner: kenchan0130
- License: mit
- Created: 2018-07-18T00:32:32.000Z (over 6 years ago)
- Default Branch: master
- Last Pushed: 2023-03-27T20:56:49.000Z (over 1 year ago)
- Last Synced: 2024-05-01T20:57:32.708Z (8 months ago)
- Topics: jekyll, ruby
- Language: Ruby
- Homepage: https://rubygems.org/gems/jekyll-lazy-load-image
- Size: 81.1 KB
- Stars: 8
- Watchers: 3
- Forks: 3
- Open Issues: 4
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- License: LICENSE.txt
Awesome Lists containing this project
README
# Jekyll Lazy Load Image
[](https://github.com/kenchan0130/jekyll-lazy-load-image/actions/workflows/ci.yml)
Edit img tag optimized lazy load images for your Jekyll site
## Usage
### `Gemfile`
Add the following to your site's `Gemfile`:
```ruby
group :jekyll_plugins do
gem 'jekyll-lazy-load-image', require: 'jekyll-lazy-load-image/auto-execution'
end
```
and run bundle.
### `_config.yml`
Add the following to your site's `_config.yml`:
```yaml
lazy_load_image:
src_attr_name: data-src # [required] You need to specify the attributes to be saved for lazy loading
preload_image: /path/to/image # [optional] you can add a data uri or loading image as fallback src
class_attr_values: # [optional] if you want to add custom class value, please add values
- lazyload
ignore_selectors: # [optional] if you want to ignore applying lazy load image, please add selector (css or xpath)
- ".ignore-lazy-image-load"
- "/*[@class='ignore-lazy-image-load']"
additional_attrs: # [optional] if you want to add attributes, please add key value
"data-size": auto
```
### Select lazy load library
Select your favorite library and add your site. For example:
* [lazysizes](https://github.com/aFarkas/lazysizes) [Recommend]
* [Echo.js](https://github.com/toddmotto/echo)
* [TADA](https://github.com/fallroot/tada)
## Custom
### Customize container
You can change applying jekyll hook container.
This library is `:posts` by default.
See also: [https://jekyllrb.com/docs/plugins/#hooks](https://jekyllrb.com/docs/plugins/#hooks)
#### `Gemfile`
Add the following to your site's `Gemfile`:
```ruby
gem 'jekyll-lazy-load-image'
```
#### `_plugins`
Add the following to your site's `_plugins`, for example create `_plugins/lazy-load-image.rb`:
```ruby
JekyllLazyLoadImage.configure do |config|
config.owners = %i[posts documents]
end
JekyllLazyLoadImage.execute
```
## Development
- Use `bin/setup` to setup your local development environment.
- Use `bin/console` to load a local Pry console with the Gem.
## Testing
- `bundle exec rake spec`
## Contributing
1. Fork the project
2. Create a descriptively named feature branch
3. Add your feature
4. Submit a pull request