All Projects â†’ michaelx â†’ jekyll-photos

michaelx / jekyll-photos

Licence: MIT license
Dead simple solution to add a photo gallery to a Jekyll site.

Programming Languages

HTML
75241 projects

Projects that are alternatives of or similar to jekyll-photos

Aphotomanager
Manage local photos on Android: gallery, geotag with photomap, privacy, tags, find, sort, view, copy, send, ... .
Stars: ✭ 164 (+248.94%)
Mutual labels:  photos, gallery, photo-gallery
Photos
📸 Your memories under your control
Stars: ✭ 157 (+234.04%)
Mutual labels:  photos, gallery, photo-gallery
Insgallery
📸 Instagram-like image picker for Android (一款 UI 炫酷高仿 Instagram 的图片、视频选择器)
Stars: ✭ 409 (+770.21%)
Mutual labels:  photos, gallery, photo-gallery
React Grid Gallery
Justified image gallery component for React
Stars: ✭ 571 (+1114.89%)
Mutual labels:  photos, gallery, photo-gallery
Photo view
📸 Easy to use yet very customizable zoomable image widget for Flutter, Photo View provides a gesture sensitive zoomable widget. Photo View is largely used to show interacive images and other stuff such as SVG.
Stars: ✭ 1,280 (+2623.4%)
Mutual labels:  photos, gallery
google-photos-vue
Google Photos album viewer built with Vue.js
Stars: ✭ 17 (-63.83%)
Mutual labels:  photos, gallery
Photato
Photato - The personal Pictures gallery
Stars: ✭ 130 (+176.6%)
Mutual labels:  photos, photo-gallery
Paparazzo
Custom iOS camera and photo picker with editing capabilities
Stars: ✭ 714 (+1419.15%)
Mutual labels:  photos, gallery
Ownphotos Frontend
Stars: ✭ 171 (+263.83%)
Mutual labels:  photos, gallery
Gallery shell
📷 Bash Script to generate static responsive image web galleries.
Stars: ✭ 198 (+321.28%)
Mutual labels:  photos, gallery
viewer
🖼 Simple file viewer with slideshow for media
Stars: ✭ 68 (+44.68%)
Mutual labels:  photos, photo-gallery
Github Pages Gallery
A zero dollar solution to host your photo/video gallery online using Github pages and GitHub Actions. No coding necessary.
Stars: ✭ 77 (+63.83%)
Mutual labels:  photos, gallery
Photo Blog
The Photo Blog Application based on Laravel 5 and Vue.js 2 + Prerender
Stars: ✭ 55 (+17.02%)
Mutual labels:  photos, gallery
React Native Photo Gallery
Simple, yet powerful image gallery for React Native. Features zoom and pagination ! 🖼
Stars: ✭ 105 (+123.4%)
Mutual labels:  photos, gallery
Lychee
A great looking and easy-to-use photo-management-system you can run on your server, to manage and share photos.
Stars: ✭ 816 (+1636.17%)
Mutual labels:  photos, gallery
envadrouille
Fast and customizable photo gallery.
Stars: ✭ 18 (-61.7%)
Mutual labels:  gallery, photo-gallery
photos
"Fx Fotos" is an opensource gallery app in react native with the same smoothness and features of Google Photos and Apple Photos. It is backend gnostic and connects to decentralized backends like "box", "Dfinity", "Filecoin" and "Crust".
Stars: ✭ 620 (+1219.15%)
Mutual labels:  photos, gallery
React Viewer
react image viewer, supports rotation, scale, zoom and so on
Stars: ✭ 502 (+968.09%)
Mutual labels:  photos, gallery
Selfhosted-Google-Photos-Alternative
A complete guide on exiting Google, Amazon or any proprietary service Photos storage with all the features you would want.
Stars: ✭ 143 (+204.26%)
Mutual labels:  photos, gallery
Ownphotos
Self hosted alternative to Google Photos
Stars: ✭ 2,587 (+5404.26%)
Mutual labels:  photos, gallery

jekyll-photos

Dead simple solution to add a photo gallery to a Jekyll site.

It’s easy to extend Jekyll with a small dose of creativity. Thanks to the template language Liquid, the only thing you often need is a new layout file. That’s what we use here as the foundation:

  • /_layouts/photo_set.html: The layout for each photo set, displaying every photo of a photo set.
  • photos.html: The overview page, displaying all photo sets.
  • berlin.md: An example photo set.
  • /images/photos/: The directory for all photos. You can change it in /_layouts/photo_set.html if you like.

Demo

jekyll-photos is unstyled, so that you can easily add your own CSS-flavor. Examples from my personal website: Overview page, a photo set.

Installation

Copy the files and folders of /jekyll/ into the root directory of your Jekyll project.

Note: If you already have a layout called photos or photos_set, just rename the files of jekyll-photos.

Usage

Once everything is in place, you only need to add a new page with the following YAML front matter block:

---
layout: photo_set
title: Berlin
permalink: /berlin/
description: "An example photo gallery."

photos:
    set: berlin
    size: 3
---

The important part is:

---
photos:
    set: berlin
    size: 3
---

set represents the photo set name and size the number of photos that the set contains.

Now, rename the three photos to berlin-1.jpg, berlin-2.jpg, and berlin-3.jpg, and move them to /images/photos/. That’s it!

Note: If you want to use a different file format for your photos or images, you need to adjust /_layouts/photo_set.html, or make it configurable. You could also use Jekyll File Exists to automatically detect what extension is available.

Extensibility

The goal of jekyll-photos is to show how easy it is to implement new site functions. It’s intentionally hold to the basics, which makes it easy to customize. For example, you could add photo categories or lazy load photos (like I do on my personal site).

Note that the project description data, including the texts, logos, images, and/or trademarks, for each open source project belongs to its rightful owner. If you wish to add or remove any projects, please contact us at [email protected].