Html image gallery from bash
Before we took a file listing and made a list in an html file (http://computoman.blogspot.com/2014/11/file-listing-into-html-file.html) .
Must admit I do not know css, so I use what I know with simple html. This time we are going to use bash to create a picture gallery page. The main thing we want to do is to automate creation of web pages even if they are static so to speak. If things go as planned we will make an automated version of out bookmarks page http://computoman.blogspot.com/2014/09/bookmarks-plus.html.
There is a lot more that could be done, but thought this was a good start. The second picture is a more realistic size. Used filename without the extension for the alt tag. After I thought about it. this could also be used for several things including a comics section for our newspages (http://computoman.blogspot.com/2013/12/create-your-own-newspages.html) with a little coding changes. Comics come usually in sets of three frames
Anyway here is the skeleton of a program. May not work exactly right with html5.
Updated:
#!/bin/bash
# daffinitions
ls *.png > picdatafile
datafile="picdatafile"
htmlfile="test.html"
a=1
m="not done"
d=" "
#read the file
while read line
do fdata[$a]=$line
let a=a+1
done < $datafile
a=$a-1
# top
echo "<html>" > $htmlfile
echo "<body>" >> $htmlfile
echo "<h2><center>Picture list</center></h2>" >> $htmlfile
echo "<hr>" >> $htmlfile
echo "<center>" >> $htmlfile
echo "<table border="10">" >> $htmlfile
# middle
for (( COUNTER=1; COUNTER<=$a; COUNTER+=3 )); do
echo "<tr>" >> $htmlfile
for i in `seq 0 2`;
do
echo "<td>" >> $htmlfile
d=`echo ${fdata[$i+$COUNTER]} | sed 's/\([^\.]*\)\..*/\1/'`
theline='<img src="'${fdata[$i+$COUNTER]}'" alt="'${d}'" width="300" height="300" hspace="20" vspace="20">'
echo "$theline" >> $htmlfile
echo "</td>" >> $htmlfile
done
echo "</tr>" >> $htmlfile
echo "<br />" >> $htmlfile
done
echo "</table>" >> $htmlfile
echo "</center>" >> $htmlfile
# bottom
echo "</body>" >> $htmlfile
echo "</html>" >> $htmlfile
code generated:
Was looking for some pictures and and found that using the html file is great for previewing pictures on the local machine too,
Must admit I do not know css, so I use what I know with simple html. This time we are going to use bash to create a picture gallery page. The main thing we want to do is to automate creation of web pages even if they are static so to speak. If things go as planned we will make an automated version of out bookmarks page http://computoman.blogspot.com/2014/09/bookmarks-plus.html.
There is a lot more that could be done, but thought this was a good start. The second picture is a more realistic size. Used filename without the extension for the alt tag. After I thought about it. this could also be used for several things including a comics section for our newspages (http://computoman.blogspot.com/2013/12/create-your-own-newspages.html) with a little coding changes. Comics come usually in sets of three frames
Anyway here is the skeleton of a program. May not work exactly right with html5.
Updated:
#!/bin/bash
# daffinitions
ls *.png > picdatafile
datafile="picdatafile"
htmlfile="test.html"
a=1
m="not done"
d=" "
#read the file
while read line
do fdata[$a]=$line
let a=a+1
done < $datafile
a=$a-1
# top
echo "<html>" > $htmlfile
echo "<body>" >> $htmlfile
echo "<h2><center>Picture list</center></h2>" >> $htmlfile
echo "<hr>" >> $htmlfile
echo "<center>" >> $htmlfile
echo "<table border="10">" >> $htmlfile
# middle
for (( COUNTER=1; COUNTER<=$a; COUNTER+=3 )); do
echo "<tr>" >> $htmlfile
for i in `seq 0 2`;
do
echo "<td>" >> $htmlfile
d=`echo ${fdata[$i+$COUNTER]} | sed 's/\([^\.]*\)\..*/\1/'`
theline='<img src="'${fdata[$i+$COUNTER]}'" alt="'${d}'" width="300" height="300" hspace="20" vspace="20">'
echo "$theline" >> $htmlfile
echo "</td>" >> $htmlfile
done
echo "</tr>" >> $htmlfile
echo "<br />" >> $htmlfile
done
echo "</table>" >> $htmlfile
echo "</center>" >> $htmlfile
# bottom
echo "</body>" >> $htmlfile
echo "</html>" >> $htmlfile
code generated:
Was looking for some pictures and and found that using the html file is great for previewing pictures on the local machine too,
Comments
Post a Comment