Edit img tag optimized lazy load images for your Jekyll site
MIT License
Edit img tag optimized lazy load images for your Jekyll site
Gemfile
Add the following to your site's Gemfile
:
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
:
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 your favorite library and add your site. For example:
You can change applying jekyll hook container.
This library is :posts
by default.
See also: https://jekyllrb.com/docs/plugins/#hooks
Gemfile
Add the following to your site's Gemfile
:
gem 'jekyll-lazy-load-image'
_plugins
Add the following to your site's _plugins
, for example create _plugins/lazy-load-image.rb
:
JekyllLazyLoadImage.configure do |config|
config.owners = %i[posts documents]
end
JekyllLazyLoadImage.execute
bin/setup
to setup your local development environment.bin/console
to load a local Pry console with the Gem.bundle exec rake spec