BASH photo gallery: Difference between revisions
No edit summary |
No edit summary |
||
(3 intermediate revisions by the same user not shown) | |||
Line 6: | Line 6: | ||
<meta charset="utf-8"> | <meta charset="utf-8"> | ||
<style> | <style> | ||
body { | |||
background: gray; | |||
} | |||
div.image { | div.image { | ||
float: left; | float: left; | ||
transform: scale(0.75, 0.75); | |||
transition-duration: 0.5s; | |||
transition-property: transform; | |||
} | |||
div.image img { | |||
border-radius: 20px; | |||
} | |||
div.image:hover { | |||
transform: scale(1.0, 1.0); | |||
} | } | ||
</style> | </style> | ||
Line 13: | Line 25: | ||
<body> | <body> | ||
EOF | EOF | ||
for i in *.JPG | for i in *.JPG | ||
do | do | ||
Line 18: | Line 31: | ||
if [ ! -f $t ]; then | if [ ! -f $t ]; then | ||
echo convert -resize 360x360 $i $t | echo convert -resize 360x360 $i $t | ||
convert -resize 360x360 $i $t | convert -resize 360x360 -auto-orient $i $t | ||
fi | |||
echo "<div class=\"image\"><a href=\"$i\"><img src=\"$t\" /></a></div>" >> index.html | |||
done | |||
for i in *.MP4 | |||
do | |||
t=${i%*.MP4}.thumb.jpg | |||
if [ ! -f $t ]; then | |||
echo $i | |||
ffmpeg -i $i -vframes 1 ${i%*.MP4}.jpg | |||
convert -resize 360x360 -auto-orient ${i%*.MP4}.jpg $t | |||
fi | fi | ||
echo "<div class=\"image\"><a href=\"$i\"><img src=\"$t\" /></a></div>" >> index.html | echo "<div class=\"image\"><a href=\"$i\"><img src=\"$t\" /></a></div>" >> index.html | ||
done | done | ||
cat << EOF >> index.html | cat << EOF >> index.html | ||
</body> | </body> | ||
Line 27: | Line 52: | ||
EOF | EOF | ||
</source> | </source> | ||
For an example of a result, see: [http://pzwart1.wdka.hro.nl/~mmurtaugh/xpub2019/ xpub2019] |
Latest revision as of 18:12, 15 July 2019
cat << EOF > index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style>
body {
background: gray;
}
div.image {
float: left;
transform: scale(0.75, 0.75);
transition-duration: 0.5s;
transition-property: transform;
}
div.image img {
border-radius: 20px;
}
div.image:hover {
transform: scale(1.0, 1.0);
}
</style>
</head>
<body>
EOF
for i in *.JPG
do
t=${i%*.JPG}.thumb.jpg
if [ ! -f $t ]; then
echo convert -resize 360x360 $i $t
convert -resize 360x360 -auto-orient $i $t
fi
echo "<div class=\"image\"><a href=\"$i\"><img src=\"$t\" /></a></div>" >> index.html
done
for i in *.MP4
do
t=${i%*.MP4}.thumb.jpg
if [ ! -f $t ]; then
echo $i
ffmpeg -i $i -vframes 1 ${i%*.MP4}.jpg
convert -resize 360x360 -auto-orient ${i%*.MP4}.jpg $t
fi
echo "<div class=\"image\"><a href=\"$i\"><img src=\"$t\" /></a></div>" >> index.html
done
cat << EOF >> index.html
</body>
</html>
EOF
For an example of a result, see: xpub2019