first commit again
This commit is contained in:
commit
f3c53283f8
383
!/index.html
Normal file
383
!/index.html
Normal file
|
|
@ -0,0 +1,383 @@
|
||||||
|
<!doctype html>
|
||||||
|
<html>
|
||||||
|
<head>
|
||||||
|
<link href="../icon.png" rel="shortcut icon"/>
|
||||||
|
<meta charset="utf-8"/>
|
||||||
|
<style>
|
||||||
|
a {
|
||||||
|
color: rgb(224,220,220);
|
||||||
|
text-decoration: none;
|
||||||
|
}
|
||||||
|
a:hover {
|
||||||
|
text-decoration: underline;
|
||||||
|
}
|
||||||
|
body {
|
||||||
|
font-family: Arial, Helvetica, sans-serif;
|
||||||
|
font-size: 18px;
|
||||||
|
letter-spacing: 2px;
|
||||||
|
line-height: 12px;
|
||||||
|
text-transform: uppercase;
|
||||||
|
}
|
||||||
|
div#bottom {
|
||||||
|
background-color: rgba(198, 192, 192, 0.6);
|
||||||
|
bottom: 0;
|
||||||
|
color: black;
|
||||||
|
height: auto;
|
||||||
|
left: 0;
|
||||||
|
line-height: 18px;
|
||||||
|
padding: 8px 32px;
|
||||||
|
position: absolute;
|
||||||
|
right: 0;
|
||||||
|
text-align: center;
|
||||||
|
text-transform: none; }
|
||||||
|
div#main {
|
||||||
|
/* background-color: rgb(112, 107, 107); */
|
||||||
|
background-color: rgb(0, 0, 0);
|
||||||
|
background-position: 0 0, 16px 16px;
|
||||||
|
background-size: 32px 32px;
|
||||||
|
bottom: 0;
|
||||||
|
left: 0;
|
||||||
|
position: fixed;
|
||||||
|
right: 0;
|
||||||
|
top: calc(60px - 1vw);
|
||||||
|
}
|
||||||
|
div#top_center {
|
||||||
|
background-color: rgb(104, 100, 100);
|
||||||
|
color: rgb(224,220,220);
|
||||||
|
height: calc(60px - 1vw);
|
||||||
|
left: 25%;
|
||||||
|
font-size: calc(36px - 1vw);
|
||||||
|
line-height: 32px;
|
||||||
|
padding: 8px 32px;
|
||||||
|
position: absolute;
|
||||||
|
text-align: center;
|
||||||
|
top: 0;
|
||||||
|
right: 25%;
|
||||||
|
}
|
||||||
|
div#top_left {
|
||||||
|
background-color: rgb(104, 100, 100);
|
||||||
|
color: rgb(224,220,220);
|
||||||
|
height: calc(60px - 1vw);
|
||||||
|
left: 0;
|
||||||
|
line-height: 32px;
|
||||||
|
padding: 8px 32px;
|
||||||
|
position: absolute;
|
||||||
|
text-align: left;
|
||||||
|
top: 0;
|
||||||
|
width: 25%;
|
||||||
|
}
|
||||||
|
div#top_right {
|
||||||
|
background-color: rgb(104, 100, 100);
|
||||||
|
color: rgb(224,220,220);
|
||||||
|
height: calc(60px - 1vw);
|
||||||
|
line-height: 32px;
|
||||||
|
padding: 8px 32px;
|
||||||
|
position: absolute;
|
||||||
|
top: 0;
|
||||||
|
right: 0;
|
||||||
|
text-align: right;
|
||||||
|
width: 25%;
|
||||||
|
}
|
||||||
|
|
||||||
|
span {
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
|
span:hover {
|
||||||
|
text-decoration: underline;
|
||||||
|
}
|
||||||
|
|
||||||
|
span:active {
|
||||||
|
color: rgb(178, 56, 50);
|
||||||
|
}
|
||||||
|
|
||||||
|
span.disabled {
|
||||||
|
cursor: default;
|
||||||
|
text-decoration: underline;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<div id="top_left">
|
||||||
|
<span id="back">back</span>
|
||||||
|
</div>
|
||||||
|
<div id="top_center">
|
||||||
|
<span id="previous">previous</span> | <span id="play">play</span> | <span id="next">next</span>
|
||||||
|
</div>
|
||||||
|
<div id="top_right">
|
||||||
|
<span id="small">1080p</span> | <span id="large">original</span>
|
||||||
|
</div>
|
||||||
|
<div id="main"></div>
|
||||||
|
<div id="bottom">loading...</div>
|
||||||
|
</body>
|
||||||
|
<script type="text/javascript" src="../js/jquery-3.3.1.min.js"></script>
|
||||||
|
<script type="text/javascript" src="../js/hammer.min.js"></script>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
var path
|
||||||
|
var current, previous, next
|
||||||
|
var img
|
||||||
|
var imageWidth, imageHeight, imageRatio
|
||||||
|
var timeout
|
||||||
|
var back = document.getElementById('back')
|
||||||
|
var previous = document.getElementById('previous')
|
||||||
|
var playPause = document.getElementById('play')
|
||||||
|
var next = document.getElementById('next')
|
||||||
|
var small = document.getElementById('small')
|
||||||
|
var large = document.getElementById('large')
|
||||||
|
var main = document.getElementById('main')
|
||||||
|
var bottom = document.getElementById('bottom')
|
||||||
|
var elements = {
|
||||||
|
27: back,
|
||||||
|
32: playPause,
|
||||||
|
37: previous,
|
||||||
|
39: next,
|
||||||
|
187: large,
|
||||||
|
189: small
|
||||||
|
}
|
||||||
|
var captions
|
||||||
|
$.getJSON("../js/captions.json", function(data) {
|
||||||
|
captions = data;
|
||||||
|
})
|
||||||
|
var hammertime = new Hammer(main)
|
||||||
|
hammertime.get('swipe').set({velocity: 3.0})
|
||||||
|
function hammerIt(elm) {
|
||||||
|
hammertime = new Hammer(elm, {});
|
||||||
|
hammertime.get('pinch').set({
|
||||||
|
enable: true
|
||||||
|
});
|
||||||
|
var posX = 0,
|
||||||
|
posY = 0,
|
||||||
|
scale = 1,
|
||||||
|
last_scale = 1,
|
||||||
|
last_posX = 0,
|
||||||
|
last_posY = 0,
|
||||||
|
max_pos_x = 0,
|
||||||
|
max_pos_y = 0,
|
||||||
|
transform = "",
|
||||||
|
el = elm;
|
||||||
|
|
||||||
|
hammertime.on('pan pinch panend pinchend', function(ev) {
|
||||||
|
|
||||||
|
//pan
|
||||||
|
if (scale != 1) {
|
||||||
|
posX = last_posX + ev.deltaX;
|
||||||
|
posY = last_posY + ev.deltaY;
|
||||||
|
max_pos_x = Math.ceil((scale - 1) * el.clientWidth / 2);
|
||||||
|
max_pos_y = Math.ceil((scale - 1) * el.clientHeight / 2);
|
||||||
|
if (posX > max_pos_x) {
|
||||||
|
posX = max_pos_x;
|
||||||
|
}
|
||||||
|
if (posX < -max_pos_x) {
|
||||||
|
posX = -max_pos_x;
|
||||||
|
}
|
||||||
|
if (posY > max_pos_y) {
|
||||||
|
posY = max_pos_y;
|
||||||
|
}
|
||||||
|
if (posY < -max_pos_y) {
|
||||||
|
posY = -max_pos_y;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
//pinch
|
||||||
|
if (ev.type == "pinch") {
|
||||||
|
scale = Math.max(.999, Math.min(last_scale * (ev.scale), 4));
|
||||||
|
}
|
||||||
|
if(ev.type == "pinchend"){last_scale = scale;}
|
||||||
|
|
||||||
|
//panend
|
||||||
|
if(ev.type == "panend"){
|
||||||
|
last_posX = posX < max_pos_x ? posX : max_pos_x;
|
||||||
|
last_posY = posY < max_pos_y ? posY : max_pos_y;
|
||||||
|
}
|
||||||
|
|
||||||
|
if (scale != 1) {
|
||||||
|
transform =
|
||||||
|
"translate3d(" + posX + "px," + posY + "px, 0) " +
|
||||||
|
"scale3d(" + scale + ", " + scale + ", 1)";
|
||||||
|
}
|
||||||
|
|
||||||
|
if (transform) {
|
||||||
|
el.style.webkitTransform = transform;
|
||||||
|
}
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
function get(url, callback) {
|
||||||
|
var request = new XMLHttpRequest()
|
||||||
|
request.open('GET', url, true)
|
||||||
|
request.onreadystatechange = function() {
|
||||||
|
if (request.readyState == 4) {
|
||||||
|
if (request.status == 200) {
|
||||||
|
callback(request.responseText, null)
|
||||||
|
} else {
|
||||||
|
callback(null, {
|
||||||
|
code: request.status,
|
||||||
|
text: request.statusText
|
||||||
|
})
|
||||||
|
}
|
||||||
|
}
|
||||||
|
};
|
||||||
|
request.send()
|
||||||
|
}
|
||||||
|
function loadImage() {
|
||||||
|
if (!['small', 'large'].includes(localStorage['pix.size'])) {
|
||||||
|
localStorage['pix.size'] = 'small'
|
||||||
|
}
|
||||||
|
small.className = localStorage['pix.size'] == 'small'
|
||||||
|
? 'disabled' : ''
|
||||||
|
large.className = localStorage['pix.size'] == 'large'
|
||||||
|
? 'disabled' : ''
|
||||||
|
bottom.style.display = 'block'
|
||||||
|
img = document.createElement('img')
|
||||||
|
img.style.position = 'absolute'
|
||||||
|
img.onload = function() {
|
||||||
|
imageWidth = img.width
|
||||||
|
imageHeight = img.height
|
||||||
|
imageRatio = imageWidth / imageHeight
|
||||||
|
onResize()
|
||||||
|
document.title = path.split('/').pop().toUpperCase()
|
||||||
|
// uncomment below for no captions
|
||||||
|
// bottom.style.display = 'none'
|
||||||
|
main.innerHTML = ''
|
||||||
|
main.appendChild(img)
|
||||||
|
//var img_alt = captions[current.split('/').pop()]
|
||||||
|
var img_alt = captions[current.split('/').slice(-2).join('/')]
|
||||||
|
if (img_alt != "") {
|
||||||
|
img.setAttribute('alt', img_alt)
|
||||||
|
bottom.innerHTML = img_alt
|
||||||
|
} else {
|
||||||
|
bottom.style.display = 'none'
|
||||||
|
}
|
||||||
|
}
|
||||||
|
img.setAttribute('src', '../' + (
|
||||||
|
localStorage['pix.size'] == 'small'
|
||||||
|
? current.replace('/', '/1080/') : current
|
||||||
|
))
|
||||||
|
hammerIt(img)
|
||||||
|
}
|
||||||
|
function mod(a, b) {
|
||||||
|
return (a % b + b) % b
|
||||||
|
}
|
||||||
|
function onHashchange() {
|
||||||
|
bottom.innerHTML = 'loading...'
|
||||||
|
current = null
|
||||||
|
previous = null
|
||||||
|
next = null
|
||||||
|
var hash = document.location.hash.slice(1)
|
||||||
|
if (!hash) return
|
||||||
|
var parts = hash.split('/')
|
||||||
|
var name = parts.pop().replace(/%20/g, ' ')
|
||||||
|
path = parts.join('/')
|
||||||
|
get('../' + path + '/index.html', function(html, error) {
|
||||||
|
if (error) return
|
||||||
|
var matches = html.match(/src="(.*?)"/g).map(function(match) {
|
||||||
|
return match.slice(5, -1).replace(/^256\//g, '')
|
||||||
|
})
|
||||||
|
var index = matches.indexOf(name)
|
||||||
|
if (index == -1) return
|
||||||
|
current = path + '/' + name
|
||||||
|
previous = path + '/' + matches[mod(index - 1, matches.length)]
|
||||||
|
next = path + '/' + matches[mod(index + 1, matches.length)]
|
||||||
|
loadImage()
|
||||||
|
})
|
||||||
|
}
|
||||||
|
function onKeydown(e) {
|
||||||
|
elements[e.keyCode] && elements[e.keyCode].onclick()
|
||||||
|
}
|
||||||
|
function onResize() {
|
||||||
|
var screenWidth = window.innerWidth
|
||||||
|
var screenHeight = window.innerHeight - 32
|
||||||
|
var screenRatio = screenWidth / screenHeight
|
||||||
|
var isSmaller = imageWidth < screenWidth
|
||||||
|
&& imageHeight < screenHeight
|
||||||
|
var isWider = imageRatio > screenRatio
|
||||||
|
img.style.width = (
|
||||||
|
isSmaller ? imageWidth
|
||||||
|
: isWider ? screenWidth
|
||||||
|
: screenHeight * imageRatio
|
||||||
|
) + 'px'
|
||||||
|
img.style.height = (
|
||||||
|
isSmaller ? imageHeight
|
||||||
|
: isWider ? screenWidth / imageRatio
|
||||||
|
: screenHeight
|
||||||
|
) + 'px'
|
||||||
|
img.style.left = (
|
||||||
|
isSmaller ? (screenWidth - imageWidth) / 2
|
||||||
|
: isWider ? 0
|
||||||
|
: (screenWidth - screenHeight * imageRatio) / 2
|
||||||
|
) + 'px'
|
||||||
|
img.style.top = (
|
||||||
|
isSmaller ? (screenHeight - imageHeight) / 2
|
||||||
|
: isWider ? (screenHeight - screenWidth / imageRatio) / 2
|
||||||
|
: 0
|
||||||
|
) + 'px'
|
||||||
|
}
|
||||||
|
function pause() {
|
||||||
|
timeout && clearTimeout(timeout)
|
||||||
|
timeout = null
|
||||||
|
}
|
||||||
|
function play() {
|
||||||
|
pause()
|
||||||
|
timeout = setTimeout(playing, 5000)
|
||||||
|
function playing() {
|
||||||
|
document.location.hash = next.replace(/ /g, '%20')
|
||||||
|
timeout = setTimeout(playing, 5000)
|
||||||
|
}
|
||||||
|
}
|
||||||
|
back.onclick = function() {
|
||||||
|
document.location = '../' + path
|
||||||
|
}
|
||||||
|
previous.onclick = function() {
|
||||||
|
document.location.hash = previous.replace(/ /g, '%20')
|
||||||
|
timeout && play()
|
||||||
|
}
|
||||||
|
playPause.onclick = function() {
|
||||||
|
if (playPause.innerHTML == 'play') {
|
||||||
|
playPause.innerHTML = 'pause'
|
||||||
|
play()
|
||||||
|
} else {
|
||||||
|
playPause.innerHTML = 'play'
|
||||||
|
pause()
|
||||||
|
}
|
||||||
|
}
|
||||||
|
next.onclick = function() {
|
||||||
|
document.location.hash = next.replace(/ /g, '%20')
|
||||||
|
timeout && play()
|
||||||
|
}
|
||||||
|
small.onclick = function() {
|
||||||
|
localStorage['pix.size'] = 'small'
|
||||||
|
loadImage()
|
||||||
|
}
|
||||||
|
large.onclick = function() {
|
||||||
|
localStorage['pix.size'] = 'large'
|
||||||
|
loadImage()
|
||||||
|
}
|
||||||
|
hammertime.on("swiperight", function(ev) {
|
||||||
|
document.location.hash = previous.replace(/ /g, '%20')
|
||||||
|
timeout && play()
|
||||||
|
})
|
||||||
|
hammertime.on("swipeleft", function(ev) {
|
||||||
|
document.location.hash = next.replace(/ /g, '%20')
|
||||||
|
timeout && play()
|
||||||
|
})
|
||||||
|
hammertime.on("tap", function(ev) {
|
||||||
|
var screenWidth = window.innerWidth
|
||||||
|
var clickX = ev.center.x
|
||||||
|
console.log(screenWidth)
|
||||||
|
if (clickX > screenWidth/2) {
|
||||||
|
document.location.hash = next.replace(/ /g, '%20')
|
||||||
|
timeout && play()
|
||||||
|
} else {
|
||||||
|
document.location.hash = previous.replace(/ /g, '%20')
|
||||||
|
timeout && play()
|
||||||
|
}
|
||||||
|
})
|
||||||
|
|
||||||
|
window.onhashchange = onHashchange
|
||||||
|
window.onkeydown = onKeydown
|
||||||
|
window.onresize = onResize
|
||||||
|
onHashchange()
|
||||||
|
</script>
|
||||||
|
</html>
|
||||||
30
README.md
Normal file
30
README.md
Normal file
|
|
@ -0,0 +1,30 @@
|
||||||
|
Some changes to a minimal photo gallery (pix)
|
||||||
|
* works with jpg (ignores png/other)
|
||||||
|
|
||||||
|
+ tap for previous/next
|
||||||
|
+ photos can have user defined captions
|
||||||
|
+ album titles
|
||||||
|
|
||||||
|
_____
|
||||||
|
Create folders ("albums") here, copy images into these folders.
|
||||||
|
|
||||||
|
To generate images (1080, 256), create HTML, run
|
||||||
|
python3 pix.py
|
||||||
|
|
||||||
|
pix.py to be run again if edit album.html and index.html, change the CSS, enable/disable captions, etc. or if photos are added/delete/renamed.
|
||||||
|
____
|
||||||
|
Captions -> to create json template using album and file names, run
|
||||||
|
python3 write_captionsJSON.py
|
||||||
|
|
||||||
|
-> generates captions.json in js folder {album/image.ext: "enter-caption-here", ...}
|
||||||
|
-> open captions.json in txt editor to edit / enter captions
|
||||||
|
* write_CaptionsJSON.py can be run again in case files are added/deleted
|
||||||
|
____
|
||||||
|
The image viewer supports the following keyboard shortcuts:
|
||||||
|
|
||||||
|
Escape Back
|
||||||
|
Left Previous
|
||||||
|
Space Play/Pause
|
||||||
|
Right Next
|
||||||
|
Minus 1080p
|
||||||
|
Plus Original
|
||||||
97
album.html
Normal file
97
album.html
Normal file
|
|
@ -0,0 +1,97 @@
|
||||||
|
<!doctype html>
|
||||||
|
<html>
|
||||||
|
<head>
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||||
|
<title>{title}</title>
|
||||||
|
<link href="../icon.png" rel="shortcut icon"/>
|
||||||
|
<meta charset="utf-8"/>
|
||||||
|
<style>
|
||||||
|
a {
|
||||||
|
color: rgb(128, 128, 128);
|
||||||
|
text-decoration: none;
|
||||||
|
}
|
||||||
|
a:hover {
|
||||||
|
text-decoration: underline;
|
||||||
|
}
|
||||||
|
body {
|
||||||
|
background-color: rgb(192, 192, 192);
|
||||||
|
color: white;
|
||||||
|
font-family: Arial, Helvetica, sans-serif;
|
||||||
|
font-size: 18px;
|
||||||
|
letter-spacing: 1.5px;
|
||||||
|
line-height: 18px;
|
||||||
|
text-transform: capitalize;
|
||||||
|
}
|
||||||
|
div#main {
|
||||||
|
background-color: rgb(162, 155, 152);
|
||||||
|
background-position: 0 0, 16px 16px;
|
||||||
|
background-size: 32px 32px;
|
||||||
|
bottom: 0;
|
||||||
|
left: 0;
|
||||||
|
overflow-y: auto;
|
||||||
|
padding: 16px;
|
||||||
|
position: absolute;
|
||||||
|
right: 0;
|
||||||
|
top: 96px;
|
||||||
|
}
|
||||||
|
div#main > div {
|
||||||
|
display: inline-block;
|
||||||
|
height: 128px;
|
||||||
|
margin: 4px;
|
||||||
|
overflow: hidden;
|
||||||
|
text-align: center;
|
||||||
|
width: 128px;
|
||||||
|
}
|
||||||
|
div#main > div:after {
|
||||||
|
content: "";
|
||||||
|
display: inline-block;
|
||||||
|
vertical-align: middle;
|
||||||
|
height: 100%;
|
||||||
|
}
|
||||||
|
div#top {
|
||||||
|
background-color: rgb(104, 100, 100);
|
||||||
|
color: #cc4039;
|
||||||
|
height: 32px;
|
||||||
|
left: 0;
|
||||||
|
line-height: 32px;
|
||||||
|
padding: 8px 16px;
|
||||||
|
position: absolute;
|
||||||
|
right: 0;
|
||||||
|
top: 0;
|
||||||
|
}
|
||||||
|
div#top > a {
|
||||||
|
color: rgb(224,220,220);
|
||||||
|
}
|
||||||
|
div#top_title {
|
||||||
|
background-color: rgba(153, 147, 144, 1);
|
||||||
|
color: black;
|
||||||
|
height: 32px;
|
||||||
|
left: 0;
|
||||||
|
line-height: 32px;
|
||||||
|
padding: 8px 32px;
|
||||||
|
position: absolute;
|
||||||
|
right: 0;
|
||||||
|
top: 48px;
|
||||||
|
}
|
||||||
|
img.landscape {
|
||||||
|
height: 128px;
|
||||||
|
margin-left: -32px;
|
||||||
|
}
|
||||||
|
img.portrait {
|
||||||
|
width: 128px;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<div id="top">
|
||||||
|
<a href="../"><< all images</a>
|
||||||
|
</div>
|
||||||
|
<div id="top_title">
|
||||||
|
{title}
|
||||||
|
</div>
|
||||||
|
<div id="main">
|
||||||
|
<!--# You can edit this file, but only above this line. #-->
|
||||||
|
<!--# You can edit this file, but only below this line. #-->
|
||||||
|
</div>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
72
index.html
Normal file
72
index.html
Normal file
|
|
@ -0,0 +1,72 @@
|
||||||
|
<!doctype html>
|
||||||
|
<html>
|
||||||
|
<head>
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||||
|
<title>Albums</title>
|
||||||
|
<link href="pix.png" rel="shortcut icon"/>
|
||||||
|
<meta charset="utf-8">
|
||||||
|
<style>
|
||||||
|
a {
|
||||||
|
/* color: rgb(128, 128, 128); */
|
||||||
|
color: rgb(196, 65, 50);
|
||||||
|
text-decoration: none;
|
||||||
|
}
|
||||||
|
a:hover {
|
||||||
|
text-decoration: underline;
|
||||||
|
}
|
||||||
|
body {
|
||||||
|
background-color: rgb(215, 214, 214);
|
||||||
|
color: black;
|
||||||
|
font-family: Arial, Helvetica, sans-serif;
|
||||||
|
font-size: 18px;
|
||||||
|
letter-spacing: 2px;
|
||||||
|
line-height: 18px;
|
||||||
|
/* text-transform: uppercase; */
|
||||||
|
}
|
||||||
|
div#main {
|
||||||
|
background-color: rgb(215, 214, 214);
|
||||||
|
bottom: 0;
|
||||||
|
left: 0;
|
||||||
|
position: absolute;
|
||||||
|
right: 0;
|
||||||
|
top: 48px;
|
||||||
|
background-position: 0 0, 16px 16px;
|
||||||
|
background-size: 32px 32px;
|
||||||
|
}
|
||||||
|
div#top {
|
||||||
|
background-color: rgb(210, 207, 207);
|
||||||
|
color: #b23832;
|
||||||
|
height: 32px;
|
||||||
|
left: 0;
|
||||||
|
line-height: 32px;
|
||||||
|
padding: 8px 32px;
|
||||||
|
position: absolute;
|
||||||
|
right: 0;
|
||||||
|
top: 0;
|
||||||
|
}
|
||||||
|
div#top > a {
|
||||||
|
color: #b23832;
|
||||||
|
}
|
||||||
|
li {
|
||||||
|
color: rgb(192, 192, 192);
|
||||||
|
margin-bottom: 12px;
|
||||||
|
}
|
||||||
|
ul {
|
||||||
|
list-style-type: none;
|
||||||
|
margin: 32px;
|
||||||
|
padding: 0;
|
||||||
|
text-align: left;
|
||||||
|
}
|
||||||
|
|
||||||
|
</style>
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<div id="top">
|
||||||
|
<a href="../../"><< back</a>
|
||||||
|
</div>
|
||||||
|
<div id="main">
|
||||||
|
<!--# You can edit this file, but only above this line. #-->
|
||||||
|
<!--# You can edit this file, but only below this line. #-->
|
||||||
|
</div>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
7
js/hammer.min.js
vendored
Normal file
7
js/hammer.min.js
vendored
Normal file
File diff suppressed because one or more lines are too long
2
js/jquery-3.3.1.min.js
vendored
Normal file
2
js/jquery-3.3.1.min.js
vendored
Normal file
File diff suppressed because one or more lines are too long
104
pix.py
Normal file
104
pix.py
Normal file
|
|
@ -0,0 +1,104 @@
|
||||||
|
import codecs
|
||||||
|
import os
|
||||||
|
import re
|
||||||
|
from PIL import Image, ExifTags
|
||||||
|
'''
|
||||||
|
# You can edit the following line with login details
|
||||||
|
#REMOTE_PATH = 'user@server:path-to-galleryAlbums/'
|
||||||
|
if not REMOTE_PATH.endswith('/'):
|
||||||
|
REMOTE_PATH += '/'
|
||||||
|
'''
|
||||||
|
# Size of thumbnails
|
||||||
|
SIZE_THUMBNAIL = 256
|
||||||
|
# Size of low-resolution images
|
||||||
|
SIZE_SMALL = 1080
|
||||||
|
|
||||||
|
def create_directory(path):
|
||||||
|
dirname = os.path.dirname(path)
|
||||||
|
if not os.path.exists(dirname):
|
||||||
|
os.mkdir(dirname)
|
||||||
|
|
||||||
|
def write_html(source, target, html, title=''):
|
||||||
|
with codecs.open(source, 'r', encoding='utf-8') as f:
|
||||||
|
html_original = f.read()
|
||||||
|
html_original = re.sub('\{title\}', title.title(), html_original)
|
||||||
|
indent = html_original.split('<!--#')[0].split('\n')[-1]
|
||||||
|
html = re.sub('\n', '\n{}'.format(indent), '\n{}\n'.format(html))
|
||||||
|
with codecs.open(target, 'w', encoding='utf-8') as f:
|
||||||
|
f.write(re.sub(
|
||||||
|
'(?<=#-->).*?(?=<!--#)', html, html_original, flags=re.DOTALL
|
||||||
|
))
|
||||||
|
|
||||||
|
html_index = '<ul>'
|
||||||
|
# For each album
|
||||||
|
for path in [f for f in sorted(os.listdir('./')) if os.path.isdir(f) and f != '!' and f.lower() != 'videos' and f.lower() != 'js']:
|
||||||
|
html_index += ('\n <li><a href="{0}">{0}</a></li>'.format(path))
|
||||||
|
html_album = ''
|
||||||
|
# For each image
|
||||||
|
for name in [f for f in sorted(os.listdir(path)) if f.lower().endswith('.jpg')]:
|
||||||
|
path_large = os.path.join(path, name)
|
||||||
|
path_small = os.path.join(path, str(SIZE_SMALL), name)
|
||||||
|
path_thumbnail = os.path.join(path, str(SIZE_THUMBNAIL), name)
|
||||||
|
print(path_large)
|
||||||
|
image = Image.open(path_large)
|
||||||
|
# Fix orientation
|
||||||
|
exif = {
|
||||||
|
ExifTags.TAGS[k]: v
|
||||||
|
for k, v in (image._getexif() or {}).items()
|
||||||
|
if k in ExifTags.TAGS
|
||||||
|
}
|
||||||
|
orientation = exif.get('Orientation', 1)
|
||||||
|
if orientation == 6:
|
||||||
|
image = image.rotate(-90, expand=True)
|
||||||
|
elif orientation == 8:
|
||||||
|
image = image.rotate(90, expand=True)
|
||||||
|
if orientation != 1:
|
||||||
|
image.save(path_large)
|
||||||
|
ratio = image.size[0] / image.size[1]
|
||||||
|
# Create low-resolution image
|
||||||
|
if not os.path.exists(path_small):
|
||||||
|
create_directory(path_small)
|
||||||
|
image.resize(
|
||||||
|
(int(round(SIZE_SMALL * ratio)), SIZE_SMALL)
|
||||||
|
if ratio > 1 else
|
||||||
|
(SIZE_SMALL, int(round(SIZE_SMALL / ratio))),
|
||||||
|
Image.ANTIALIAS
|
||||||
|
).save(path_small)
|
||||||
|
# Create thumbnail
|
||||||
|
if not os.path.exists(path_thumbnail):
|
||||||
|
create_directory(path_thumbnail)
|
||||||
|
image.resize(
|
||||||
|
(SIZE_THUMBNAIL, int(round(SIZE_THUMBNAIL / ratio)))
|
||||||
|
if ratio > 1 else
|
||||||
|
(int(round(SIZE_THUMBNAIL * ratio)), SIZE_THUMBNAIL),
|
||||||
|
Image.ANTIALIAS
|
||||||
|
).save(path_thumbnail)
|
||||||
|
# Create HTML
|
||||||
|
html_album += (
|
||||||
|
'{0}<div><a href="../!/#{1}/{2}">'
|
||||||
|
'<img class="{3}" src="{4}/{2}"/></a></div>'
|
||||||
|
).format(
|
||||||
|
'' if not html_album else '\n', path, name,
|
||||||
|
'landscape' if ratio > 1 else 'portrait', SIZE_THUMBNAIL
|
||||||
|
)
|
||||||
|
# Cleanup
|
||||||
|
for p in [
|
||||||
|
os.path.join(path, str(SIZE_SMALL)),
|
||||||
|
os.path.join(path, str(SIZE_THUMBNAIL))
|
||||||
|
]:
|
||||||
|
for n in [f for f in os.listdir(p) if f.lower().endswith('.jpg')]:
|
||||||
|
if not os.path.exists(os.path.join(path, n)):
|
||||||
|
os.remove(os.path.join(p, n))
|
||||||
|
# Write album HTML
|
||||||
|
write_html(
|
||||||
|
'album.html', os.path.join(path, 'index.html'), html_album, path
|
||||||
|
)
|
||||||
|
html_index += '\n</ul>'
|
||||||
|
# Write index HTML
|
||||||
|
write_html('index.html', 'index.html', html_index)
|
||||||
|
|
||||||
|
# Alternatively, you can comment this out and use FTP / run rsync separately
|
||||||
|
'''
|
||||||
|
print("Syncing albums...")
|
||||||
|
os.system('rsync -av --ignore-existing ./ "{}"'.format(REMOTE_PATH))
|
||||||
|
'''
|
||||||
30
write_captionsJSON.py
Normal file
30
write_captionsJSON.py
Normal file
|
|
@ -0,0 +1,30 @@
|
||||||
|
#!/usr/bin/python3
|
||||||
|
import os
|
||||||
|
import json
|
||||||
|
import subprocess
|
||||||
|
from collections import OrderedDict
|
||||||
|
|
||||||
|
#usage: python3 write_captionsJSON.py
|
||||||
|
|
||||||
|
# do not overwrite existing captions
|
||||||
|
if not os.path.exists("js/captions.json"):
|
||||||
|
captions = {}
|
||||||
|
else:
|
||||||
|
captions = json.load(open("js/captions.json"))
|
||||||
|
subprocess.call(['cp', 'js/captions.json', 'js/captions.json.back'])
|
||||||
|
# CleanUp needed for renamed files (?how)
|
||||||
|
# cleanup deleted images
|
||||||
|
captions = { k : v for k,v in captions.items() if os.path.exists(k)}
|
||||||
|
|
||||||
|
# For each album
|
||||||
|
for path in [f for f in os.listdir('./') if os.path.isdir(f) and f != '!' and not 'videos' in f and f != 'js']:
|
||||||
|
# For each image
|
||||||
|
for name in [f for f in sorted(os.listdir(path)) if f.lower().endswith('.jpg')]:
|
||||||
|
path_name = path + "/" + name
|
||||||
|
if path_name not in captions.keys():
|
||||||
|
captions[path_name] = ""
|
||||||
|
|
||||||
|
# write 'sorted dict' to file
|
||||||
|
with open("js/captions.json","w") as j:
|
||||||
|
json.dump(OrderedDict(sorted(captions.items())), j, indent=2)
|
||||||
|
|
||||||
Loading…
Reference in New Issue
Block a user