c0de
/
simple-s3-gallery
1
0
Fork 0
Code Issues Pull Requests 1 Projects Releases Wiki Activity

Modularize into template files, add root gen 

Removes most of the inline HTML to their own files
Uses the most basic setup to create links for all the existing index
files created with GenTemplate
This commit is contained in:
David Todd 2019-04-10 00:00:33 -05:00
parent a9023f9380
commit 8e77c43d32
7 changed files with 307 additions and 153 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
.gitignore vendored
View File

@ -3,3 +3,4 @@ thumbs/*
GenThumb.log
index*.html
.vscode
gallery.html

30
GenGallery.py Executable file
View File

@ -0,0 +1,30 @@
#!/usr/bin/env python3
# GenThumb.py - Part of the simple s3 gallery
# Usage: ./GenThumb.py
from pathlib import Path
import getopt
import sys
import os
# Set these to override
baseuri = os.environ.get('BASEURI',"https://s3.wasabisys.com/c0de-photography/")
thumb_path = os.environ.get('THUMBNAILS', "./thumbs")
# Load templates into memory
gallery_template = open('templates/root_gallery.html', 'r').read()
card_template = open('templates/card.html', 'r').read()
# Get all the index files in local directory
indexlist = list(Path(".").rglob("index_*.html"))
with open('gallery.html', 'w') as gallery:
thumbrow = ""
for index in indexlist:
the_template = card_template # Don't mutate the source
# basic string replacements
the_template = the_template.replace("{{FULLLINK}}", index.name)
the_template = the_template.replace("{{TITLE}}", index.name.strip("index_").strip(".html").replace(":", "/"))
thumbrow += the_template.replace("{{THUMBNAIL}}", "thumbs/folder.png")
gallery.write(gallery_template.replace("{{THUMBROW}}", thumbrow))

160
GenTemplate.py
View File

@ -23,159 +23,12 @@ for opt, arg in opts:
elif opt in ("-p", "--pathlist"):
pathlist_file = arg # Index file created by GenThumb.py
template = """
<html>
<head>
<title>Simple S3 Gallery</title>
<meta http-equiv="content-type" content="text/html; charset=UTF-8" />
<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="David Todd" />
<link rel="icon" type="image/png" href="https://secure.gravatar.com/avatar/1e346a54257cf0a9932fcfc1e61c015d" />
<!-- Bootstrap core CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<style>
.bg-dark {
background-color: #343a40cc !important;
}
nav.bcrumb {
margin-left: 1rem;
margin-top: 0.5rem;
}
.jumbotron {
padding-top: 3rem;
padding-bottom: 3rem;
margin-bottom: 0;
background-color: #fff;
}
@media (min-width: 768px) {
.jumbotron {
padding-top: 6rem;
padding-bottom: 6rem;
}
}
.jumbotron p:last-child {
margin-bottom: 0;
}
.jumbotron-heading {
font-weight: 300;
}
.jumbotron .container {
max-width: 40rem;
}
.card-header {
text-align: center;
padding: 0.25rem 0rem;
}
footer {
padding-top: 3rem;
padding-bottom: 3rem;
}
footer p {
margin-bottom: .25rem;
}
</style>
</head>
<body>
<header>
<div class="collapse bg-dark" id="navbarHeader">
<div class="container">
<div class="row">
<div class="col-sm-8 col-md-7 py-4">
<h4 class="text-white">About</h4>
<p class="text-white">This is a small gallery to represent images that I have taken over the past few years. Most of these are unsorted and unedited, and thus a lot are blurry or have lighting issues. I have taken, and thereby own all photos on this site.</p>
</div>
<div class="col-sm-4 offset-md-1 py-4">
<h4 class="text-white">Contact</h4>
<ul class="list-unstyled">
<li><a href="https://c0defox.es" class="text-white">My contact site</a></li>
<li><a href="https://t.me/c0defox" class="text-white">Hit me up on Telegram</a></li>
<li><a href="c0de#0689" class="text-white">My Discord is c0de#0689</a></li>
</ul>
</div>
</div>
</div>
</div>
<div class="navbar navbar-dark bg-dark shadow-sm">
<div class="container d-flex justify-content-between">
<span class="navbar-brand d-flex align-items-center">
<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" aria-hidden="true" class="mr-2" viewBox="0 0 24 24" focusable="false"><path d="M23 19a2 2 0 0 1-2 2H3a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h4l2-3h6l2 3h4a2 2 0 0 1 2 2z"/><circle cx="12" cy="13" r="4"/></svg>
<strong>Simple S3 Gallery</strong>
<nav class="text-dark bcrumb" aria-label="breadcrumb">
<ol class="breadcrumb">
{{BREADCRUMBS}}
</ol>
</nav>
</span>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarHeader" aria-controls="navbarHeader" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
</div>
</div>
</header>
<main role="main">
<!-- Optional for creating a notification -->
<!--
<section class="jumbotron text-center">
<div class="container">
<h1 class="jumbotron-heading">Album example</h1>
<p class="lead text-muted">Something short and leading about the collection below—its contents, the creator, etc. Make it short and sweet, but not too short so folks don’t simply skip over it entirely.</p>
<p>
<a href="#" class="btn btn-primary my-2">Main call to action</a>
<a href="#" class="btn btn-secondary my-2">Secondary action</a>
</p>
</div>
</section>
-->
<div class="album py-3 bg-dark">
<div class="container">
<div class="row">
{{THUMBROW}}
</div>
</div>
</div>
</main>
<footer class="text-muted">
<div class="container">
<p class="float-right"><a href="#">Back to top</a></p>
<p>Simple S3 Gallery &copy; 2019 <a href="https://c0defox.es">David Todd</a> - All photos are &copy; <a href="https://dtodd.us">David Todd</a></p>
</div>
</footer>
<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.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
</body>
</html>
"""
template2 = """
<div class="col-md-3">
<a href="{{FULLLINK}}" target="{{FULLLINK}}">
<div class="card mb-3 bg-dark text-white rounded">
<div class="card-header">{{TITLE}}</div>
<img class=card-img" width="100%" height="100%" src="{{THUMBNAIL}}" />
</div>
</a>
</div>
"""
# Load templates into memory
gallery_template = open('templates/root_gallery.html', 'r').read()
card_template = open('templates/card.html', 'r').read()
crumb_template = """<li class="breadcrumb-item" aria-current="page">{{PATH}}</li>"""
# Get the paths of all JPGs in the thumbnail directory
thumblist = list(Path(thumb_path).rglob("*.[jJ][pP][gG]"))
with open(pathlist_file, 'r') as pathlist:
@ -185,10 +38,11 @@ with open(pathlist_file, 'r') as pathlist:
pathlist.sort()
thumbrow = ""
for image in thumblist:
# Search the pathlist for any lines with a matching filename
indices = [i for i, s in enumerate(pathlist) if image.name in s]
if len(indices) > 0:
imagename = "%s" % image
the_template = template2
the_template = card_template # Don't mutate the source
the_template = the_template.replace("{{FULLLINK}}", pathlist[indices[0]])
the_template = the_template.replace("{{TITLE}}", imagename.strip("thumbs/"))
thumbrow += the_template.replace("{{THUMBNAIL}}", "%s" % image)
@ -199,5 +53,5 @@ with open(pathlist_file, 'r') as pathlist:
the_template = crumb_template
crumblist += the_template.replace("{{PATH}}", crumb)
index.write(template.replace("{{THUMBROW}}", thumbrow).replace("{{BREADCRUMBS}}", crumblist))
index.write(gallery_template.replace("{{THUMBROW}}", thumbrow).replace("{{BREADCRUMBS}}", crumblist))

1
GenThumb.py
View File

@ -52,6 +52,7 @@ def gen_thumb(image, imagepath):
logging.info("Saved Thumbnail as %s" % thumbname)
logging.debug("Creating pathlist file as: pathlist_%s.txt" % browse_path.replace('/', ':'))
with open('pathlist_%s.txt' % browse_path.replace('/', ':'), 'w') as pathlist:
for image in filelist:
imagepath = "%s" % image.parent

8
templates/card.html Normal file
View File

@ -0,0 +1,8 @@
<div class="col-md-3">
<a href="{{FULLLINK}}" target="{{FULLLINK}}">
<div class="card mb-3 bg-dark text-white">
<div class="card-header">{{TITLE}}</div>
<img class="card-img" width="250" src="{{THUMBNAIL}}" />
</div>
</a>
</div>

123
templates/root_gallery.html Normal file
View File

@ -0,0 +1,123 @@
<html>
<head>
<title>Simple S3 Gallery</title>
<meta http-equiv="content-type" content="text/html; charset=UTF-8" />
<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="David Todd" />
<link rel="icon" type="image/png" href="https://secure.gravatar.com/avatar/1e346a54257cf0a9932fcfc1e61c015d" />
<!-- Bootstrap core CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<style>
.jumbotron {
padding-top: 3rem;
padding-bottom: 3rem;
margin-bottom: 0;
background-color: #fff;
}
@media (min-width: 768px) {
.jumbotron {
padding-top: 6rem;
padding-bottom: 6rem;
}
}
.jumbotron p:last-child {
margin-bottom: 0;
}
.jumbotron-heading {
font-weight: 300;
}
.jumbotron .container {
max-width: 40rem;
}
.card-header {
text-align: center;
padding: 0.25rem 0rem;
}
footer {
padding-top: 3rem;
padding-bottom: 3rem;
}
footer p {
margin-bottom: .25rem;
}
</style>
</head>
<body>
<header>
<div class="collapse bg-dark" id="navbarHeader">
<div class="container">
<div class="row">
<div class="col-sm-8 col-md-7 py-4">
<h4 class="text-white">About</h4>
<p class="text-muted">This was a small gallery that I put together to make my photography available to the world. Images are grouped in folders for what I've done.</p>
</div>
<div class="col-sm-4 offset-md-1 py-4">
<h4 class="text-white">Contact</h4>
<ul class="list-unstyled">
<li><a href="https://c0defox.es" class="text-white">My contact site</a></li>
<li><a href="https://t.me/c0defox" class="text-white">Hit me up on Telegram</a></li>
<li><a href="c0de#0689" class="text-white">My Discord is c0de#0689</a></li>
</ul>
</div>
</div>
</div>
</div>
<div class="navbar navbar-dark bg-dark shadow-sm">
<div class="container d-flex justify-content-between">
<a href="#" class="navbar-brand d-flex align-items-center">
<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" aria-hidden="true" class="mr-2" viewBox="0 0 24 24" focusable="false"><path d="M23 19a2 2 0 0 1-2 2H3a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h4l2-3h6l2 3h4a2 2 0 0 1 2 2z"/><circle cx="12" cy="13" r="4"/></svg>
<strong>Simple S3 Gallery</strong>
</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarHeader" aria-controls="navbarHeader" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
</div>
</div>
</header>
<main role="main">
<!-- Optional for creating a notification -->
<!--
<section class="jumbotron text-center">
<div class="container">
<h1 class="jumbotron-heading">Album example</h1>
<p class="lead text-muted">Something short and leading about the collection below—its contents, the creator, etc. Make it short and sweet, but not too short so folks don’t simply skip over it entirely.</p>
<p>
<a href="#" class="btn btn-primary my-2">Main call to action</a>
<a href="#" class="btn btn-secondary my-2">Secondary action</a>
</p>
</div>
</section>
-->
<div class="album py-4 bg-dark">
<div class="container">
<div class="row">
{{THUMBROW}}
</div>
</div>
</div>
</main>
<footer class="text-muted">
<div class="container">
<p class="float-right"><a href="#">Back to top</a></p>
<p><a href="https://github.com/alopexc0de/simple-s3-gallery"></a>Simple S3 Gallery</a> &copy; 2019 <a href="https://c0defox.es">David Todd</a> - All photos are &copy; David Todd</p>
</div>
</footer>
<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.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
</body>
</html>

137
templates/sub_gallery.html Normal file
View File

@ -0,0 +1,137 @@
<html>
<head>
<title>Simple S3 Gallery</title>
<meta http-equiv="content-type" content="text/html; charset=UTF-8" />
<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="David Todd" />
<link rel="icon" type="image/png" href="https://secure.gravatar.com/avatar/1e346a54257cf0a9932fcfc1e61c015d" />
<!-- Bootstrap core CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<style>
.bg-dark {
background-color: #343a40cc !important;
}
nav.bcrumb {
margin-left: 1rem;
margin-top: 0.5rem;
}
.jumbotron {
padding-top: 3rem;
padding-bottom: 3rem;
margin-bottom: 0;
background-color: #fff;
}
@media (min-width: 768px) {
.jumbotron {
padding-top: 6rem;
padding-bottom: 6rem;
}
}
.jumbotron p:last-child {
margin-bottom: 0;
}
.jumbotron-heading {
font-weight: 300;
}
.jumbotron .container {
max-width: 40rem;
}
.card-header {
text-align: center;
padding: 0.25rem 0rem;
}
footer {
padding-top: 3rem;
padding-bottom: 3rem;
}
footer p {
margin-bottom: .25rem;
}
</style>
</head>
<body>
<header>
<div class="collapse bg-dark" id="navbarHeader">
<div class="container">
<div class="row">
<div class="col-sm-8 col-md-7 py-4">
<h4 class="text-white">About</h4>
<p class="text-white">This is a small gallery to represent images that I have taken over the past few years. Most of these are unsorted and unedited, and thus a lot are blurry or have lighting issues. I have taken, and thereby own all photos on this site.</p>
</div>
<div class="col-sm-4 offset-md-1 py-4">
<h4 class="text-white">Contact</h4>
<ul class="list-unstyled">
<li><a href="https://c0defox.es" class="text-white">My contact site</a></li>
<li><a href="https://t.me/c0defox" class="text-white">Hit me up on Telegram</a></li>
<li><a href="c0de#0689" class="text-white">My Discord is c0de#0689</a></li>
</ul>
</div>
</div>
</div>
</div>
<div class="navbar navbar-dark bg-dark shadow-sm">
<div class="container d-flex justify-content-between">
<span class="navbar-brand d-flex align-items-center">
<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" aria-hidden="true" class="mr-2" viewBox="0 0 24 24" focusable="false"><path d="M23 19a2 2 0 0 1-2 2H3a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h4l2-3h6l2 3h4a2 2 0 0 1 2 2z"/><circle cx="12" cy="13" r="4"/></svg>
<strong>Simple S3 Gallery</strong>
<nav class="text-dark bcrumb" aria-label="breadcrumb">
<ol class="breadcrumb">
{{BREADCRUMBS}}
</ol>
</nav>
</span>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarHeader" aria-controls="navbarHeader" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
</div>
</div>
</header>
<main role="main">
<!-- Optional for creating a notification -->
<!--
<section class="jumbotron text-center">
<div class="container">
<h1 class="jumbotron-heading">Album example</h1>
<p class="lead text-muted">Something short and leading about the collection below—its contents, the creator, etc. Make it short and sweet, but not too short so folks don’t simply skip over it entirely.</p>
<p>
<a href="#" class="btn btn-primary my-2">Main call to action</a>
<a href="#" class="btn btn-secondary my-2">Secondary action</a>
</p>
</div>
</section>
-->
<div class="album py-3 bg-dark">
<div class="container">
<div class="row">
{{THUMBROW}}
</div>
</div>
</div>
</main>
<footer class="text-muted">
<div class="container">
<p class="float-right"><a href="#">Back to top</a></p>
<p><a href="https://github.com/alopexc0de/simple-s3-gallery">Simple S3 Gallery</a> &copy; 2019 <a href="https://c0defox.es">David Todd</a> - All photos are &copy; David Todd</p>
</div>
</footer>
<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.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
</body>
</html>