2018-12-03 23:29:59 +02:00
<!doctype html>
< html lang = "en" >
< head >
< meta charset = "utf-8" >
< meta name = "viewport" content = "width=device-width, initial-scale=1, shrink-to-fit=no" >
< meta name = "description" content = "" >
< meta name = "author" content = "" >
< link rel = "icon" href = "assets/icon.png" >
< title > PiGallery 2< / title >
< link rel = "stylesheet" href = "https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css"
integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
< link rel = "stylesheet" href = "style.css" >
2023-05-21 14:28:34 +02:00
< link rel = "stylesheet" href = "gh-fork-ribbon.min.css" >
2018-12-19 22:41:01 +02:00
<!-- Global site tag (gtag.js) - Google Analytics -->
< script async src = "https://www.googletagmanager.com/gtag/js?id=UA-131201011-1" > < / script >
< script >
window.dataLayer = window.dataLayer || [];
2019-01-12 19:08:34 +02:00
function gtag() {
dataLayer.push(arguments);
}
2018-12-19 22:41:01 +02:00
gtag('js', new Date());
gtag('config', 'UA-131201011-1');
< / script >
2019-01-12 19:08:34 +02:00
<!-- Place this tag in your head or just before your close body tag. -->
< script async defer src = "https://buttons.github.io/buttons.js" > < / script >
2018-12-03 23:29:59 +02:00
< / head >
< body class = "text-center" >
2023-05-21 14:28:34 +02:00
< a class = "github-fork-ribbon" href = "https://github.com/bpatrik/pigallery2" data-ribbon = "Fork me on GitHub" title = "Fork me on GitHub" > Fork me on GitHub< / a >
2018-12-03 23:29:59 +02:00
< div class = "cover-container d-flex w-100 h-100 p-3 mx-auto flex-column " >
< header class = "masthead" >
< div class = "inner" >
2019-01-12 19:08:34 +02:00
< h3 class = "masthead-brand" >
< img src = "assets/icon_inv.png" width = "30" height = "30" class = "d-inline-block align-top"
alt=""> PiGallery 2
< / h3 >
2018-12-03 23:29:59 +02:00
< nav class = "nav nav-masthead justify-content-center" >
< a class = "nav-link active" href = "index.html" > Features< / a >
< a class = "nav-link" href = "https://github.com/bpatrik/pigallery2" > Install< / a >
< / nav >
< / div >
< / header >
< main class = "content" >
< div class = "row" >
< div class = "col" >
< h3 >
PiGallery 2 is a self-hosted directory-first photo gallery website.
< / h3 >
2022-12-09 11:10:59 +02:00
< a href = "https://pigallery2.onrender.com/" > Try our live demo! < span class = "small" > (First load may take up 30s, while the server boots up)< / span > < / a >
2019-01-12 19:08:34 +02:00
2018-12-03 23:29:59 +02:00
< / div >
2019-01-12 19:08:34 +02:00
< / div >
< div class = "github-button-wrapper" >
2021-05-23 23:14:39 +02:00
<!-- Place this tag where you want the button to render. -->
< a class = "github-button" href = "https://github.com/bpatrik/pigallery2" data-size = "large" data-icon = "octicon-star"
data-show-count="true" aria-label="Star bpatrik/pigallery2 on GitHub">Star< / a >
<!-- Place this tag where you want the button to render. -->
< a class = "github-button" href = "https://github.com/bpatrik/pigallery2/fork" data-size = "large"
data-icon="octicon-repo-forked"
data-show-count="true" aria-label="Fork bpatrik/pigallery2 on GitHub">Fork< / a >
2018-12-03 23:29:59 +02:00
< / div >
< img class = "banner-photo" src = "assets/main_page.jpg" style = "width: 100%" >
< div class = "row" >
< div class = "col" >
The gallery is a directory first gallery. It renders your directory structure as it is.
2022-03-12 00:42:08 +02:00
Supports rich search queries and fully < a href = "https://www.docker.com/" > dockerized< / a > .
2018-12-03 23:29:59 +02:00
< / div >
< / div >
< h3 class = "section-header" > Main features:< / h3 >
< hr / >
< div class = "row feature" >
< div class = "col" >
< h3 > Photo viewer< / h3 >
Nice photo viewer with optional information panel that shows all important information about the photo.
< / div >
< div class = "col-12 col-md-8" >
< img class = "card-img-right" src = "assets/lightbox_info.jpg" style = "width: 100%" >
< / div >
< / div >
< div class = "row feature" >
< div class = "col-12 col-md-8 order-last order-md-first" >
< img class = "card-img-right" src = "assets/map.jpg" style = "width: 100%" >
< / div >
< div class = "col" >
< h3 > Map< / h3 >
2018-12-08 12:28:56 +02:00
PiGallery2 reads the location data of the photos and puts them on a nice map.
2018-12-03 23:29:59 +02:00
The gallery also supports *.gps file to show your tracked path on the map too.
2018-12-08 12:28:56 +02:00
It by default supports < a href = "https://www.openstreetmap.org" > OpenStreetMap< / a > and < a
href="https://www.mapbox.com">Mapbox< / a > , but you can also add you own favourite map provider.
2018-12-03 23:29:59 +02:00
< / div >
< / div >
< div class = "row feature" >
< div class = "col" >
2021-05-23 23:14:39 +02:00
< h3 > Advanced searching< / h3 >
App supports full < a href = "https://en.wikipedia.org/wiki/Boolean_algebra" > boolean logic< / a > with negation and
exact or wildcard search.
It also provides handy suggestions with autocomplete.
2023-02-24 22:53:18 +02:00
< p / >
2021-05-23 23:14:39 +02:00
2023-02-24 22:53:18 +02:00
< h5 > Match types< / h5 >
2021-05-23 23:14:39 +02:00
< code class = "code-block p-2 text-light rounded bg-secondary d-block" >
person:"John" # exact match < br / >
person:(John) # wildcard match < br / >
person:John # same as person:(John) < br / >
person!:John # negation
< / code >
2018-12-03 23:29:59 +02:00
< / div >
< div class = "col-12 col-md-8" >
< img class = "card-img-right" src = "assets/search.jpg" >
< / div >
2021-05-23 23:14:39 +02:00
< / div >
< div class = "row feature" >
< div class = "col" >
2023-02-24 22:53:18 +02:00
< h5 > Supported keywords< / h5 >
2021-05-23 23:14:39 +02:00
< code class = "code-block p-2 text-light rounded bg-secondary d-block" >
after:2020< br / >
before:2021< br / >
orientation:portrait< br / >
orientation:landscape< br / >
2023-09-08 23:24:51 +02:00
max-rating:1< br / >
max-rating:5< br / >
min-resolution:1< br / >
max-resolution:10< br / >
min-faces:1< br / >
max-faces:10< br / >
2021-05-23 23:14:39 +02:00
keyword:"house"< br / >
caption:"caption"< br / >
2022-05-06 05:19:59 +02:00
directory:"dir name/another dir"< br / >
2021-05-23 23:14:39 +02:00
file_name:"img.jpg",< br / >
person:"John",< br / >
position:"USA" # use city, state, country names< br / >
5-km-from:(New York) # photos 5 km from the center of New York < br / >
2023-09-08 23:24:51 +02:00
any_text:"apple", # searches for apple everywhere, "any_text:" can be omitted < br / >
last-4-days:every-week < br / >
last-4-days:every-month < br / >
last-4-days:every-year < br / >
last-4-days:2-days-ago < br / >
last-4-days:2-weeks-ago < br / >
last-4-days:2-months-ago < br / >
last-4-days:2-years-ago < br / >
2021-05-23 23:14:39 +02:00
< / code >
2023-09-08 23:24:51 +02:00
See all here: < a href = "https://github.com/bpatrik/pigallery2/blob/5368b4ed4e1a61097dbc88aa076aaf9c21524a8d/src/frontend/app/ui/gallery/search/search-query-parser.service.ts#L9" > search-query-parser.service.ts< / a > .
2023-02-24 22:53:18 +02:00
< p / >
< h5 > Bool expressions< / h5 >
2021-05-23 23:14:39 +02:00
< code class = "code-block p-2 text-light rounded bg-secondary d-block" >
John and Kate # photos with "John" and "Kate" (any string match) < br / >
John Kate # same as "John and Kate" < br / >
John or Kate # photos with "John" or "Kate" (any string match) < br / >
2-of:(John, Kate, Steve) # lists photos that satisfies at least 2 out of the 3 names (any string match)
< / code >
2023-02-24 22:53:18 +02:00
< p / >
< h5 > Sort order< / h5 >
Add an empty file like < code class = "code-block p-1 text-light rounded bg-secondary" > .order_[ORDER].pg2conf< / code >
to a folder to override the default sorting for that folder.
It's not recursively applied to subfolders.< br / >
Replace < code class = "code-block p-1 text-light rounded bg-secondary" > [ORDER]< / code > in the above shown filename by one of the following values:< br / >
< code class = "code-block p-2 text-light rounded bg-secondary d-block" >
descending_name< br / >
ascending_name< br / >
descending_date< br / >
ascending_date< br / >
random< br / >
< / code >
2021-05-23 23:14:39 +02:00
< / div >
2018-12-03 23:29:59 +02:00
< / div >
< div class = "row feature" >
< div class = "col-12 col-md-8 order-last order-md-first" >
< img class = "card-img-right" src = "assets/sharing.jpg" style = "width: 100%" >
< / div >
< div class = "col" >
< h3 > Sharing< / h3 >
You can share your photo folders with your friends.
The sharing link can be also password protected.
2022-03-12 00:42:08 +02:00
Limitations: you cannot share search results.
2018-12-03 23:29:59 +02:00
< / div >
< / div >
< div class = "row feature" >
< div class = "col" >
< h3 > Easy settings< / h3 >
PiGallery2 has a rich settings page where you can easily set up the gallery.
2022-12-09 11:10:59 +02:00
< a href = "https://pigallery2.onrender.com/admin" > Click here to see all the setting in the live demo.< / a >
2018-12-03 23:29:59 +02:00
< / div >
< div class = "col-12 col-md-8" >
< img class = "card-img-right" src = "assets/settings.jpg" style = "width: 100%" >
< / div >
< / div >
< div class = "row feature" >
< div class = "col-12 col-md-8 order-last order-md-first" >
< img class = "card-img-right" src = "assets/video.jpg" style = "width: 100%" >
< / div >
< div class = "col" >
< h3 > Video playback< / h3 >
It also supports *.mp4, *.webm, *.ogv and *.ogg files.
< / div >
< / div >
< div class = "row feature" >
< div class = "col" >
< h3 > Random link< / h3 >
You can create a link that will serve a random photo from your gallery.
You can use this link with 3rd party applications, like with an automatic wallpaper changer gadget.
< / div >
< div class = "col-12 col-md-8" >
< img class = "card-img-right" src = "assets/random_link.jpg" style = "width: 100%" >
< / div >
< / div >
2022-03-12 00:42:08 +02:00
< div class = "row feature" >
< div class = "col-12 col-md-8 order-last order-md-first" >
< img class = "card-img-right" src = "assets/local_filters.jpg" style = "width: 100%" >
< / div >
< div class = "col" >
< h3 > Local filters< / h3 >
Rich filter panel, where you can further filter your directory or search results.
< / div >
< / div >
2018-12-03 23:29:59 +02:00
< h3 class = "section-header" > All features:< / h3 >
< hr / >
2022-11-21 21:49:10 +02:00
< ul class = "text-start" >
2019-01-12 19:08:34 +02:00
< li > supported formats:
< ul >
< li > images: < strong > jpg, jpeg, jpe, webp, png, gif, svg< / strong > < / li >
< li > videos: < strong > mp4, ogg, ogv, webm< / strong > < / li >
< / ul >
< / li >
2018-12-03 23:29:59 +02:00
< li > < strong > Rendering directories as it is< / strong >
< ul >
< li > Listing subdirectories recursively< / li >
< li > Listing photos in a nice grid layout
< ul >
< li > supporting most common image formats< / li >
< li > showing < strong > tag/keywords, locations, GPS coordinates< / strong > for photos< / li >
< li > rendering photos on demand (on scroll)< / li >
< / ul >
< / li >
< / ul >
< / li >
< li > < strong > On the fly thumbnail generation< / strong > in several sizes
< ul >
< li > prioritizes thumbnail generation (generating thumbnail first for the visible photos)< / li >
< li > saving generated thumbnails to TEMP folder for reuse< / li >
< li > supporting several core CPU< / li >
2021-01-04 12:11:55 +02:00
< li > supporting hardware acceleration (< a href = "https://github.com/lovell/sharp" > sharp< / a > )
2018-12-03 23:29:59 +02:00
< / li >
< / ul >
< / li >
2018-12-12 22:03:06 +02:00
< li > Custom lightbox for full screen photo and video viewing
2018-12-03 23:29:59 +02:00
< ul >
< li > keyboard support for navigation< / li >
< li > showing low-res thumbnail while full image loads< / li >
< li > Information panel for showing < strong > Exif info< / strong > < / li >
< li > Automatic playing< / li >
< li > gesture support (swipe left, right, up)< / li >
2018-12-12 22:03:06 +02:00
< li > shortcut support< / li >
2018-12-03 23:29:59 +02:00
< / ul >
< / li >
< li > Client side caching (directories and search results)< / li >
2018-12-12 22:03:06 +02:00
< li > Rendering < strong > photos< / strong > with GPS coordinates < strong > on open street map< / strong >
2018-12-03 23:29:59 +02:00
< ul >
2018-12-12 22:03:06 +02:00
< li > .gpx file support: rendering paths to map< / li >
< li > supports OSM and Mapbox by default, but you can add any provider that has a tile url< / li >
2018-12-03 23:29:59 +02:00
< / ul >
< / li >
< li > < strong > Two modes: SQL database and no-database mode< / strong >
< ul >
< li > both modes supports
< ul >
< li > user management< / li >
< li > password protection can be disabled/enabled< / li >
< / ul >
< / li >
< li > database mode supports:
< ul >
< li > faster directory listing< / li >
< li > searching< / li >
< li > instant search, auto complete< / li >
< li > sharing< / li >
< li > setting link expiration time< / li >
< / ul >
< / li >
< / ul >
< / li >
2019-07-21 17:00:07 +02:00
< li > Faces (persons) support
< ul >
< li > reads Adobe's XMP Face region metadata. (It is defined by the Metadata Working Group (MWG).)< / li >
< / ul >
< ul >
< li > shows face bounding box over images< / li >
< / ul >
< / li >
2018-12-03 23:29:59 +02:00
< li > internalization / translation support< / li >
< li > Nice design
< ul >
< li > responsive design (phone, tablet desktop support)< / li >
< / ul >
< / li >
< li > Setup page< / li >
< li > Random photo url
< ul >
< li > You can generate an url that returns a random photo from your gallery. You can use this feature to develop
3rd party applications, like: changing desktop background
< / li >
< / ul >
< / li >
< li > video support
< ul >
< li > fully supports < em > .mp4 files and partially (might have errors with safari and IE) supports < / em > .ogg,
< em > .ogv, < / em > .webm files
< / li >
< li > uses ffmpeg and ffprobe to generate video thumbnails< / li >
< / ul >
< / li >
2022-01-14 00:25:36 +02:00
< li > Markdown based blogging support
< ul >
< li > You can write some note in the *.md files for every directory< / li >
< / ul >
< / li >
2018-12-03 23:29:59 +02:00
< / ul >
2023-05-21 14:28:34 +02:00
< hr / >
< p > Fork me on GitHub ribbon provided by < a href = "https://github.com/simonwhitaker/github-fork-ribbon-css" > simonwhitaker< / a > < / p >
2018-12-03 23:29:59 +02:00
< / main >
< / div >
<!-- Bootstrap core JavaScript
================================================== -->
<!-- Placed at the end of the document so the pages load faster -->
< script src = "https://code.jquery.com/jquery-3.3.1.slim.min.js"
integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo"
crossorigin="anonymous">< / script >
< script src = "https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"
integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49"
crossorigin="anonymous">< / script >
< script src = "https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"
integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy"
crossorigin="anonymous">< / script >
< / body >
< / html >
