j1n6 / jekyll-lazy-load-image

Edit img tag optimized lazy load images for your Jekyll site

Jekyll Lazy Load Image

Edit img tag optimized lazy load images for your Jekyll site

Usage

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 lazy load library

Select your favorite library and add your site. For example:

• lazysizes [Recommend]
• Echo.js
• 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

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

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