Giter VIP home page Giter VIP logo

jekyll-photo-gallery's Introduction

Plugin is outdated & not maintained. It doesn't work with Jekyll 4+

Jekyll-Photo-Gallery

With Jekyll-Photo-Gallery you can easily generate a photo gallery for your Jekyll site or blog. Jekyll-Photo-Gallery generates a static index and a page for every photo based on the layouts photoIndex.html and photo.html. These layouts can be easily adapted to fit the style of your site. The photo layout is also automatically enriched with metadata such as photo location (Google Maps), ISO, F and speed values.
The whole plugin is setup so that new photos can be added with minimal effort. Thumbnails are automatically generated with ImageMagick on macOS and Linux. (It may work on windows as well, but you need to find out how to install ImageMagick yourself.)

Features

  • Dynamically loaded photo stream
  • Justified gallery layout
  • One URL per picture allows for easy sharing
  • Automatic thumbnail generation (on macOS, Linux)
  • One subpage per picture, ideal for SEO
  • Automatically embedded Schema.org meta information
  • Responsive photo view
  • Easily adaptable layouts
  • Google Maps Geolocation
  • EXIF tag supports
  • Support for albums/trips (alpha)
  • Embeddable galleries for posts (alpha)

Example

Demos

  1. [Demo site running the "sample-installation"]
  2. if you have a site running this (or a modified version of it) send me a comment and I'll add you :)

Installation Guide

  1. Download this repository and copy the contents of the folder "plugin" to your jekyll installation.

  2. Install the following gems or add them to your gemfile if you're using bundler.

    gem 'exifr'

Enable optional features

1. Enable automatic thumbnail generation

  1. Install imagemagick for your system (e.g. apt-get install imagemagick for Linux or brew install imagemagick on macOS)
  2. Install mini_magick gem install mini_magick
  3. Install jekyll-minimagick gem install jekyll-minimagick.
  4. Remove the '#' in the file "_plugins/jekyll-generate-thumbnails.rb" to enable thumbnail generation

2. Enable Google Maps Geolocation

  1. Obtain a Google Maps "Static Maps API key" from this site: https://developers.google.com/maps/documentation/static-maps/
  2. Create a new project for your site (or chose an existing one).
  3. Make sure that "Google Static Maps API" is selected in the API drawer, then select "Web browser (Javascript)" from the drawer below.
  4. Enter all the URL(s) of your website from which you'll be accessing google maps. E.g. *yoursite.com* or *localhost* or *.yoursite.com/* .. etc.
  5. Open layouts/photo.html and replace the existing key (around line 113) &key=AIzaSyCMXdSigC-sBH... with your new key.

3. Embed an album/gallery in a post

  1. Add album meta-data to the photos you want to include in your post.
  2. Go to _data/photos.yaml
  3. Add the property album: uniqueAlbumName
  4. Open your-post.md and add {% includeGallery uniqueAlbumName %}

Known bugs & limitations

1. Fixed order in detail view:
Atm every photo detail page contains its "previous picture" & "next picture" information. So even though you can change the order of pictures in a gallery via JS, when you load a detail view and click next the original next picture will be displayed. This also means that if you're in a album and you click on next in the detail view of the last picture it will go to the next picture regardless if that picture is in the album.

2. Only one album per photo:
Right now a photo can only be in one album at a time.

3. Why are you including the CSS files in head.html as well as individual templates?
To make the setup easier for people who just copy the specific templates. Including them once is enough.

Troubleshooting

If the gallery doesn't appear in your page but the files have been generated correctly then it's likely that there is a javascript error. In order to find the problem it's best to open the javascript console on Chrome (or your browser of choice) and to reload the page. If there's an error it will now appear in the console output.

1. Uncaught ReferenceError: $ is not defined:
This error happens when jQuery wasn't loaded before executing the gallery script. Make sure that your templates has the jQuery includes.

2. The gallery isn't justified, the thumbnails are in a vertical line:
Be sure to include the CSS files "justifiedGallery.min.css" and "jekyll-photo-gallery.css" in the template where you're using the gallery. If you're embedding the gallery in a post the template of the post also has to include these CSS files.

License (MIT)

Copyright (c) 2016 Theodor Winter

Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:

The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.

THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.

jekyll-photo-gallery's People

Contributors

aerobless avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.