Skip to content

Latest commit

 

History

History
143 lines (96 loc) · 6.65 KB

README.md

File metadata and controls

143 lines (96 loc) · 6.65 KB
Raw

jekyll-gallery

A Jekyll pure CSS responsive photo gallery

Jekyll Gallery uses Jekyll Static Site Generator (SSG) to generate the website.

Table of content

Features

This pure CSS gallery use HTML5, media queries, CSS3, SCSS & mixin. It does not use any JavaScript.

Notes:

  • Tested with IE11 and recent versions of Edge, Chrome & Firefox, but not with Safari.
  • the thumbnail display was originally developped with Firefox, thus display differs slightly with other browsers. Indeed, Chrome and Edge do not interpret width: auto; unlike Firefox.
  • as the display of an album and its images uses only CSS (without JavaScript), the solution has a limitation: all images of an album have to be dowloaded, including large format for full screen displaying. Thus the size of download can be dramatically increased.
  • I copied the content of 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.

Get Started

A demo is visible on http://oliviergranoux.github.io/jekyll-gallery

Install

  1. Install Jekyll
  2. Clone the git repo: git clone https://github.com/oliviergranoux/jekyll-gallery.git
  3. Change folder: cd jekyll-gallery
  4. Run the website with jekyll serve
  5. open http://localhost:4000 on your browser

The static website is generated on _site folder.

Configure the gallery

There are 3 sections to modify to put your own content:

  1. Adding pages

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.

  1. Adding images

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:

  • Images have to be in *.jpg format,
  • it is preferable to remove any space in the filename and use ASCII characters,
  • Albums need several versions of each image (depending of width) and the suffix of each filename has to reflect the width:
width suffix
500 px -500w
700 px -700w
800 px -800w
1200 px -1200w
  • Depending of screen width, we select a different image size to be responsive and thus reduce the size of downloading while displaying the page of an album (using thumbnails) and displaying the page with a specific image.
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.

  1. Adding album's configuration

The file _data/albums.yml has to be modified to display correctly each album.

Notes:

  • indentation and empty lines are important otherwise Jekyll will not be able to build the site. Do not forget to check the Jekyll build log if it does not build.
  • order of albums in configuration is refleted while displaying the list of albums.
  • idem for the order of images of each album. The first image is also used as thumbnail in the list of albums.
  • captions are not mandatory and it is preferable to have short captions. Link is possible only in captions of images, but not in caption of albums.
  • filename of images is that of the original image, despite the website does not use the original image.
  1. Other configurations

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.

Resizing images in batch

Here a simple solution I found to resize images in batch.

  1. First install imagemagick within Ubuntu. On Windows 10, it is possible to use Ubuntu via WSL.
sudo apt-get install imagemagick
  1. After that, navigate to the folder of your images, create a temporary folder 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.

Author

Olivier Granoux

License

Repository is licensed under the MIT license.

Credits

Some solutions used to do this project:

Here a non-exhaustive list of websites used for inspiration: