2018-12-04 05:29:59 +08: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 20:28:34 +08:00
|
|
|
<link rel="stylesheet" href="gh-fork-ribbon.min.css">
|
2018-12-20 04:41:01 +08: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-13 01:08:34 +08:00
|
|
|
|
|
|
|
|
function gtag() {
|
|
|
|
|
dataLayer.push(arguments);
|
|
|
|
|
}
|
|
|
|
|
|
2018-12-20 04:41:01 +08:00
|
|
|
gtag('js', new Date());
|
|
|
|
|
|
|
|
|
|
gtag('config', 'UA-131201011-1');
|
|
|
|
|
</script>
|
2019-01-13 01:08:34 +08: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-04 05:29:59 +08:00
|
|
|
</head>
|
|
|
|
|
|
|
|
|
|
<body class="text-center">
|
2023-05-21 20:28:34 +08: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-04 05:29:59 +08: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-13 01:08:34 +08: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-04 05:29:59 +08: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 17:10:59 +08: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-13 01:08:34 +08:00
|
|
|
|
2018-12-04 05:29:59 +08:00
|
|
|
</div>
|
2019-01-13 01:08:34 +08:00
|
|
|
|
|
|
|
|
</div>
|
|
|
|
|
<div class="github-button-wrapper">
|
2021-05-24 05:14:39 +08: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-04 05:29:59 +08: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 06:42:08 +08:00
|
|
|
Supports rich search queries and fully <a href="https://www.docker.com/">dockerized</a>.
|
2018-12-04 05:29:59 +08: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 18:28:56 +08:00
|
|
|
PiGallery2 reads the location data of the photos and puts them on a nice map.
|
2018-12-04 05:29:59 +08:00
|
|
|
The gallery also supports *.gps file to show your tracked path on the map too.
|
2018-12-08 18:28:56 +08: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-04 05:29:59 +08:00
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
<div class="row feature">
|
|
|
|
|
<div class="col">
|
2021-05-24 05:14:39 +08: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-25 04:53:18 +08:00
|
|
|
<p/>
|
2021-05-24 05:14:39 +08:00
|
|
|
|
2023-02-25 04:53:18 +08:00
|
|
|
<h5>Match types</h5>
|
2021-05-24 05:14:39 +08: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-04 05:29:59 +08:00
|
|
|
</div>
|
|
|
|
|
<div class="col-12 col-md-8">
|
|
|
|
|
<img class="card-img-right" src="assets/search.jpg">
|
|
|
|
|
</div>
|
2021-05-24 05:14:39 +08:00
|
|
|
</div>
|
|
|
|
|
<div class="row feature">
|
|
|
|
|
<div class="col">
|
2023-02-25 04:53:18 +08:00
|
|
|
<h5>Supported keywords</h5>
|
2021-05-24 05:14:39 +08: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/>
|
|
|
|
|
maxRating:1<br/>
|
|
|
|
|
maxRating:5<br/>
|
|
|
|
|
minResolution:1<br/>
|
|
|
|
|
maxResolution:10<br/>
|
|
|
|
|
|
|
|
|
|
keyword:"house"<br/>
|
|
|
|
|
caption:"caption"<br/>
|
2022-05-06 11:19:59 +08:00
|
|
|
directory:"dir name/another dir"<br/>
|
2021-05-24 05:14:39 +08: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/>
|
|
|
|
|
any_text:"apple", # searches for apple everywhere, "any_text:" can be omitted
|
|
|
|
|
</code>
|
2023-02-25 04:53:18 +08:00
|
|
|
<p/>
|
|
|
|
|
<h5>Bool expressions</h5>
|
2021-05-24 05:14:39 +08: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-25 04:53:18 +08: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-24 05:14:39 +08:00
|
|
|
</div>
|
2018-12-04 05:29:59 +08: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 06:42:08 +08:00
|
|
|
Limitations: you cannot share search results.
|
2018-12-04 05:29:59 +08: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 17:10:59 +08:00
|
|
|
<a href="https://pigallery2.onrender.com/admin">Click here to see all the setting in the live demo.</a>
|
2018-12-04 05:29:59 +08: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 06:42:08 +08: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-04 05:29:59 +08:00
|
|
|
<h3 class="section-header">All features:</h3>
|
|
|
|
|
<hr/>
|
2022-11-22 03:49:10 +08:00
|
|
|
<ul class="text-start">
|
2019-01-13 01:08:34 +08: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-04 05:29:59 +08: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 18:11:55 +08:00
|
|
|
<li>supporting hardware acceleration (<a href="https://github.com/lovell/sharp">sharp</a>)
|
2018-12-04 05:29:59 +08:00
|
|
|
</li>
|
|
|
|
|
</ul>
|
|
|
|
|
</li>
|
2018-12-13 04:03:06 +08:00
|
|
|
<li>Custom lightbox for full screen photo and video viewing
|
2018-12-04 05:29:59 +08: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-13 04:03:06 +08:00
|
|
|
<li>shortcut support</li>
|
2018-12-04 05:29:59 +08:00
|
|
|
</ul>
|
|
|
|
|
</li>
|
|
|
|
|
<li>Client side caching (directories and search results)</li>
|
2018-12-13 04:03:06 +08:00
|
|
|
<li>Rendering <strong>photos</strong> with GPS coordinates <strong>on open street map</strong>
|
2018-12-04 05:29:59 +08:00
|
|
|
<ul>
|
2018-12-13 04:03:06 +08: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-04 05:29:59 +08: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 23:00:07 +08: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-04 05:29:59 +08: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 06:25:36 +08: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-04 05:29:59 +08:00
|
|
|
</ul>
|
|
|
|
|
|
2023-05-21 20:28:34 +08: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-04 05:29:59 +08: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>
|
