Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/clnhlzmn/jekyll-pig
A jekyll plugin to build a progressive image gallery using pig.js
https://github.com/clnhlzmn/jekyll-pig
Last synced: about 1 month ago
JSON representation
A jekyll plugin to build a progressive image gallery using pig.js
- Host: GitHub
- URL: https://github.com/clnhlzmn/jekyll-pig
- Owner: clnhlzmn
- License: other
- Created: 2019-08-09T11:58:10.000Z (over 5 years ago)
- Default Branch: master
- Last Pushed: 2024-10-04T18:01:10.000Z (2 months ago)
- Last Synced: 2024-10-30T12:51:28.870Z (about 1 month ago)
- Language: Ruby
- Size: 31.3 KB
- Stars: 12
- Watchers: 3
- Forks: 3
- Open Issues: 2
-
Metadata Files:
- Readme: readme.md
- License: license.md
Awesome Lists containing this project
- awesome-jekyll-plugins - **Jekyll PIG** - pig](https://rubygems.org/gems/jekyll-pig)) - Uses ImageMagick and pig.js to create progressive image galleries for Jekyll sites. (Bundled Icons / Images)
README
# jekyll-pig
This is a plugin that makes it easy to include progressive image galleries in your Jekyll site. Jekyll-pig is made possible with [minimagick](https://github.com/minimagick/minimagick) and [pig.js](https://github.com/schlosser/pig.js).
# How to use
## 1. install [ImageMagick](https://imagemagick.org)
## 2. add `- jekyll-pig` to the plugins list in your site's `_config.yml`
## 3. install jekyll-pig
Either add `gem jekyll-pig` to your site's `Gemfile` and run `bundle install` or run `gem install jekyll-pig`
## 4. add a section called `galleries` to your site's `_config.yml`
It should look like this:
```
galleries:
-
path:
name:
-
```
These lines tell jekyll-pig where to find your images and how to organize the generated output. `` shouldn't have any spaces.
## 5. add images to your gallery folders
## 6. add gallery folder paths to exclude list in `_config.yml` and to your `.gitignore`
## use `{% include .html %}` in your pages and posts to include a the gallery identified by `gallery-name`
## 7. run `jekyll build`
# What happens
## jekyll-pig generates a bunch of content
```
├── _data
│ ├── .json #data for a specific gallery (one for each gallery)
│ └── ...
├── _includes
│ ├── .html #gallery include file (one for each gallery)
│ └── ...
├── assets
│ ├── html
│ │ ├──
│ │ │ └── .html #an html page using layout: page for each image
│ │ └── ...
│ ├── img
│ │ ├──
│ │ │ ├── 20
│ │ │ │ ├── . #each image resized into various size thumbnails
│ │ │ │ └── ...
│ │ │ ├── 100
│ │ │ │ └── ...
│ │ │ ├── 250
│ │ │ │ └── ...
│ │ │ ├── 500
│ │ │ │ └── ...
│ │ │ └── 1024
│ │ │ └── ...
│ │ └── ...
│ ├── js
│ │ ├── pig.min.js #js required for the gallery
│ │ └── ...
│ └── ...
└── ...
```
# What you will see
Wherever you `{% include .html %}` you will see a progressive image gallery.
Check out [mine](https://colinholzman.xyz/gallery).
# Notes
Each image in a gallery is linked to generated page for that image. The default jekyll theme lists all pages at the top of every page. To keep all your image pages from cluttering your page listing the generate pages include `exclude: true` front matter. You can modify your `header.html` include file like this:
```
{%- if my_page.title and my_page.exclude != true -%}
{{ my_page.title | escape }}
{%- endif -%}
```
The above just prevents the page link from appearing if `my_page.exclude` is `true`.