New image helper

bgstack15 — Sun, 27 Aug 2023 15:58:45 GMT

Because I love reinventing the wheel, here is my way-too-simple photo gallery web page generator.

	`#!/bin/sh`
	`# Startdate: 2023-07-13-5 16:48`
	`# Purpose: make simple html gallery of images and directories`
	`# Reference: tapestry-helper.sh`
	`# Usage:`
	`# Ensure no spaces in the filenames.`
	`# Improve:`
	`# add ".." links to any child directories.`
	`INDIR=/mnt/public/www/gallery/2013-01-picasa-partial-dump`
	`HTML_HEAD="${INDIR}/.header.html"`
	`HTML_FOOT="${INDIR}/.footer.html"`
	`DIRECTORY_ICON="/gallery/2013-01-picasa-partial-dump/folder.svg"`

	`THUMBNAIL_SIZE=300`
	`USE_THUMBNAILS=1`
	`if test -n "${USE_THUMBNAILS}" && test "${USE_THUMBNAILS}" = 1 ;`
	`then`
	`mkdir -p "${INDIR}/.thumbnails"`
	`fi`
	`# use MAKE_THUMBNAILS=1 to actually run convert, which slows the process down. You disable MAKE_THUMBNAILS when just regenerating the html`
	`test -z "${MAKE_THUMBNAILS}" && MAKE_THUMBNAILS=0`

	`cd "${INDIR}"`
	`# now that there are no spaces we can just do this`
	`# begin dir loop`
	`for word in $( find "${INDIR}" -mindepth 0 -type d ! -name '.thumbnails' ) ;`
	`do`
	`(`
	`cd "${word}"`
	`shortword="$( basename "${word}" )"`
	`mkdir -p ./.thumbnails`
	`rm -f ./index.html`
	`exec 3>&1`
	`exec 1>> ./index.html`
	`eval "cat <<EOF`
	`$( cat "${HTML_HEAD}" )`
	`EOF`
	`"`
	`# make a .. link if not the parent directory`
	`if ! test "${word}" = "${INDIR}" ; then`
	`echo "<div class=\"item\"><a href=\"..\"><img src=\"${DIRECTORY_ICON}\" class=\"thumb\">..</a></div>"`
	`fi`
	`tds="$( find . -mindepth 1 -maxdepth 1 -type d ! -name '.thumbnails' ! -name '.*' )"`
	`for td in ${tds} ; do`
	`td_basename="$( basename "${td}" )"`
	`#echo "<a href=\"${td}\"><img src=\"${DIRECTORY_ICON}\" class=\"thumb\">${td}</a>"`
	`echo "<div class=\"item\"><a href=\"${td}\"><img src=\"${DIRECTORY_ICON}\" class=\"thumb\">${td_basename}</a></div>"`
	`done`
	`tfs="$( find . -mindepth 1 -maxdepth 1 ! -type d ! -name '.ini' ! -name '..ini' ! -name '..swp' ! -name '.sh' ! -name '.html' ! -name '.db' ! -name 'folder.svg' ! -name '.' ! -name '.css' -printf '%T@ %P\n' \| sort -n \| awk '{print $NF}' )"`
	`for tf in ${tfs} ;`
	`do`
	`tf_in="${word}/${tf}"`
	`tf_thumb_web="${tf}"`
	`if test -n "${USE_THUMBNAILS}" && test "${USE_THUMBNAILS}" = 1 ;`
	`then`
	`tf_thumb="${word%%/}/.thumbnails/${tf%%.???}.jpg"`
	`tf_thumb_web=".thumbnails/${tf%%.???}.jpg"`
	`test "${MAKE_THUMBNAILS}" = "1" && convert -filter Lanczos -resize "${THUMBNAIL_SIZE}x${THUMBNAIL_SIZE}" "${word}/${tf}" "${tf_thumb}"`
	`fi`
	`echo "<a href=\"${tf}\"><img src=\"${tf_thumb_web}\" class=\"thumb\"></a>"`
	`done`
	`cat "${HTML_FOOT}"`
	`exec 1>&3`
	`)`
	`done # end dir loop`

My .header.html and .footer.html files are very basic.

<html>
<!-- started 2023-07-13 -->
<link rel="stylesheet" href="/gallery/2013-01-picasa-partial-dump/simple.css">
<head>
<title>${shortword}</title>
</head>
<body>

And footer just closes the html tags.

</body>
</html>

And the css.

.thumb {
   max-width: 300px;
   max-height: 300px;
}

div.item {
    vertical-align: top;
    display: inline-block;
    text-align: center;
    width: 120px;
}
/*
img {
    width: 100px;
    height: 100px;
    background-color: grey;
}
*/
div.item img {
   max-width: 220px;
   max-height: 220px;
}
.caption {
    display: block;
}

I just grabbed a random folder.svg from one of the GNOME Icon themes.

Knowledge Base (Posts about photos)

New image helper