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:
- 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.mdinindex.mdinstead to useinclude_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
- Install Jekyll
- Clone the git repo:
git clone https://github.com/oliviergranoux/jekyll-gallery.git - Change folder:
cd jekyll-gallery - Run the website with
jekyll serve - open http://localhost:4000 on your browser
The static website is generated on _site folder.
There are 3 sections to modify to put your own content:
- 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.
- 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
*.jpgformat, - 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.
- 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.
- Other configurations
Some configurations of the website are set in _config.yml:
url-pathneed to be set correctly otherwise relative paths will not work,author,sitenamefor the name of the website,labelsfor 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.
- First install imagemagick within Ubuntu. On Windows 10, it is possible to use Ubuntu via WSL.
sudo apt-get install imagemagick
- After that, navigate to the folder of your images, create a temporary folder
newand 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:
- https://favicon.io/favicon-generator/ to generate the favicon,
- The pure CSS gallery Perfundo that I adapted (check the file
_sass/perfundo-fix.scss),
Here a non-exhaustive list of websites used for inspiration: