[SOLVED] Shell script to make html pages of image embeds for lots of photos

Djyou · 11-23-2013, 01:18 AM

So best I can figure is cat some variables and some bash functions. I have no idea where to start this. But I have some phots I want to stick on my personal server to access from my phone. So I want to make one page for eache photo with nav buttong left and right will work. The picture are formatted "foo.001" With number going up as it progresses very logical. However I look at this problem and my mind goes blank I can't see and attack avenue other than manually making every single file. Not worth it as I can just look at them in that time. I am fairly certain it's doable but I just blank every time I open up an editor to start. Any tips?

Side Note, I would not turn down a spoon fed answer links to the right resources would not be unwelcome ^_^ Either way thanks for you time even if you just read and move on.

--Djyou

RockDoctor · 11-23-2013, 10:53 AM

Found a Perl script at MarginalHacks.com that worked for me when I set up a slideshow of images from an overseas trip I took last summer.

John VV · 11-23-2013, 01:27 PM

for html code on a web site
you are better off using a program like "Gallery"
http://galleryproject.org/
most CMS's will be able to run it

manually building static HTML pages is not going to give you good results
this is not the 1990's

propofol · 11-23-2013, 02:03 PM

You could start with this:
https://snipt.net/ardchoille42/bash-...image-gallery/

Potatoe · 11-23-2013, 02:51 PM

Code:

#!/bin/bash

oldifs=$IFS
IFS=$'\n'
IMGARRAY=""

for img in $(ls *.{png,jpg,jpeg,gif,svg} 2>/dev/null)
do IMGARRAY="$IMGARRAY\"$img\","
done

IFS=$oldifs
IMGARRAY=${IMGARRAY%?}

#echo "$IMGARRAY"

cat > view.html << EOHF
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<html>
<head>
<title>View Images</title>
<script type="text/javascript">
var imagearray = new Array($IMGARRAY)
var index = 0
function next() {
  if (index < imagearray.length - 1) {
    index = index + 1
    document.getElementById("image").src = imagearray[index]
  }
}
function prev() {
  if (index > 0) {
    index = index - 1
    document.getElementById("image").src = imagearray[index]
  }
}
</script>
</head>
<body>
<img id="image" src=""></img><br />
<dive align="center"><a href="#" onclick="prev()">« Previous</a>&nbsp;&nbsp;&nbsp;&nbsp;<a href="#" onclick="next()">Next »</a></div>
<script type="text/javascript">document.getElementById("image").src = imagearray[index]</script>
</body>
</html>
EOHF

Djyou · 11-23-2013, 06:58 PM

Whoa, Thanks pototatoe and everyone else. The reading material is appreiciated as is the script.
Was not expected this many replies so thanks.

--Djyou