A Jekyll pure CSS responsive photo gallery
Jekyll Gallery uses Jekyll Static Site Generator (SSG) to generate the website.
This pure CSS gallery use HTML5, media queries, CSS3, SCSS & mixin. It does not use any JavaScript.
Notes:
width: auto;
unlike Firefox.albums.md
in index.md
instead to use include_relative
. Indeed it seems that GitHub Pages does not interpret correctly it if these files include both layout variables, even it works locally.A demo is visible on http://oliviergranoux.github.io/jekyll-gallery
git clone https://github.com/oliviergranoux/jekyll-gallery.git
cd jekyll-gallery
jekyll serve
The static website is generated on _site
folder.
There are 3 sections to modify to put your own content:
Each page is in the folder albums
and has the same content, except two variables title
and folder
that you need to specify.
Note: the filename of the page must be the same than the value of folder
.
Images are in assets/images/albums
. Create a folder which name is the same than the previous value folder
and put your images inside.
Notes:
*.jpg
format,width | suffix |
---|---|
500 px | -500w |
700 px | -700w |
800 px | -800w |
1200 px | -1200w |
screen width range | thumbnails | large size |
---|---|---|
[ 0px .. 576px [ | 500px | 500px |
[ 576px .. 768px [ | 500px | 500px |
[ 768px .. 992px [ | 700px | 700px |
[ 992px .. 1200px [ | 800px | 800px |
[ 1200px .. n [ | 500px | 1200px |
See below how to resize images. . The original image is not needed for the site, leave it only if you want to keep the original format.
The file _data/albums.yml
has to be modified to display correctly each album.
Notes:
Some configurations of the website are set in _config.yml
:
url-path
need to be set correctly otherwise relative paths will not work,author
,sitename
for the name of the website,labels
for all labels used. Do not hesite to translate them for your need.Colors can be redefined from _sass/colors.scss
, where they are based by default on three main colors. They can be change as you wish.
Here a simple solution I found to resize images in batch.
sudo apt-get install imagemagick
new
and execute for example this command line:for file in *.jpg; do convert $file -resize '600' -interlace Plane -quality 75 -strip -set filename:base "%[basename]" "new/%[filename:base]-600w.jpg"; done;
This command line will resize all *.jpg
images of the current folder with a width of 600px while maintening the ratio of images. All new images will be saved in 'new' folder with the suffix '-600w' in the filename. For explanation of line, you can check on the documentation of ImageMagick.
Note: for small images which need to be enlarged, you have to use the following command (just change -resize
option). Do not use it with images that need to be reduced: I noticed that will not reduce the size of generated image.
for file in *.jpg; do convert $file -resize '600x<' -interlace Plane -quality 75 -strip -set filename:base "%[basename]" "new/%[filename:base]-600w.jpg"; done;
Note: this command line work only for *.jpg
files and not *.JPG
files. Plese adapt this line for each size wanted.
Update (November 30, 2020): added the parameters -interlace Plane -quality 75 -strip
to optimize the size of images and set images progressive for web.
Repository is licensed under the MIT license.
Some solutions used to do this project:
_sass/perfundo-fix.scss
),Here a non-exhaustive list of websites used for inspiration: