Скрипт генерирующий html галерею с миниатюрами.

Началось все с желания одной командой генерировать html страничку с галереей изображений. При этом, чтобы создавались миниатюры, отображался размер и разрешение файлов.


Введение


Для создания и автоматизации работы скрипта нам потребуется проделать три шага:

  • 1. Поиск изображений
  • 2. Процесс сборки html страницы в файл
  • 3. Создание превью, а также получение данных о размере и разрешении

Шаг 1. Создаем команду поиска изображений в определенной папке (каталоге)


Вначале идет команда определяющая каталог и записывающая его в переменную DIR (так же убирает «/» в конце пути к папке):

DIR=$1 ;
if [ -z "$1" ]; then "$DIR"=`pwd`;
	else 
	TEMP=`pwd`;
	cd "$DIR"; TEMP2=`pwd`;
	cd "$TEMP";
	DIR="$TEMP2";
	echo "$TEMP2";
fi;

Теперь нам следует «причесать» расширения файлов в нижний регистр:

for i in "$DIR"/*.[Pp][Nn][Gg]; do 
	mv "$i" "${i/%.[Pp][Nn][Gg]/.png}";
done ;
for i in "$DIR"/*.[Jj][Pp][Gg]; do 
	mv "$i" "${i/%.[Jj][Pp][Gg]/.jpg}";
done ;

Следующий шаг – поиск файлов (определение формата файла), для того чтобы лишнее не добавлялось при генерировании превью:

for i in "$DIR"/*  ; do 
        a=`file "$i"`;
                if [[ $a =~ 'PNG' ]] ; then 
                echo "PNG!!! $a" ;
                        P=*.png ;
                elif [[ $a =~ 'JPEG' ]] ; then 
                echo "JPEG!!! $a" ;
                        J=*.jpg ;
         fi ;
done ;

Следующая часть кода позволяет нам погрузится в директорию с изображениями, дабы убрать из названий файлов пробелы и &, а также создать директории с превью:

(cd "$DIR" && 
for i in $P $J; do 
        mv "$i" `echo $i | tr ' ' '_'`;
done ;
for i in $P $J; do 
        mv "$i" `echo $i | tr '&' 'n'`;
done ) ;

mkdir "$DIR"/thumbs

Теперь нам надо ввести наш домен, там где будут лежать стили и иконка. Все это конечно можно создавать прямо в папке с картинками, но лишние файлы нам ни к чему:

HTTP=http://your-domain.com 
DIRNAME=$(cd "$DIR" && echo "${PWD##*/}") ;
HTMLNAME="$DIR"/000_folder.html ;

Переменная DIRNAME распознает название папки, в которой лежат файлы, чтобы в последствии добавить название к страничке.
Переменная HTMLNAME содержит имя файла html. Можно добавить 000 в начале имени для расположения файла первым в списке (алфавитный порядок), так же поможет если делать страницы 001, 002 и т.д.
На данном этапе мы прописали скрипт поиска файлов изображений в конкретной папке (каталоге) и можем переходить к следующему шагу.


Шаг 2. Процесс сборки страницы в файл.


Сам процесс сборки html странички в файл (прописывается кодировка, название, стили, иконки):

echo "<!DOCTYPE html PUBLIC \"-//W3C//DTD XHTML 1.0 Strict//EN\" \"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd\">" > $HTMLNAME
echo "<html xmlns=\"http://www.w3.org/1999/xhtml\">" >> $HTMLNAME
echo "<head>" >> $HTMLNAME
echo "<meta http-equiv=\"content-type\" content=\"text/html; charset=utf-8\" />" >> $HTMLNAME
echo "<title>Image list</title>" >> $HTMLNAME
echo "<link rel=\"stylesheet\" type=\"text/css\" href=\"$HTTP/folder.css\" />" >> $HTMLNAME
echo "<link rel=\"icon\" href=\"$HTTP/favicon.ico\"  type=\"image/ico\" />" >> $HTMLNAME
echo "<link rel=\"shortcut icon\" href=\"$HTTP/favicon.png\"  type=\"image/png\" />" >> $HTMLNAME
echo "</head>" >> $HTMLNAME
echo "<body>" >> $HTMLNAME
echo "<div id=\"header\">" >> $HTMLNAME
echo "<h1>Pictures in folder \"$DIRNAME\"</h1>" >> $HTMLNAME
#echo "<h1>Pictures in folder</h1>" >> $HTMLNAME
echo "</div>" >> $HTMLNAME
#echo "<div id=\"next\">" >> $HTMLNAME
#echo    "<a href=\"$HTMLNAME\" title=\"next page\">next ►</a>" >> $HTMLNAME
#echo     "<a href=\"$HTMLNAME\" title=\"first page\">first ▲</a>" >> $HTMLNAME
#echo "</div>" >> $HTMLNAME
#echo "<div id=\"back\">" >> $HTMLNAME
#echo     "<a href=\"$HTMLNAME\" title=\"previous page\">◄ back</a>" >> $HTMLNAME
#echo     "<a href=\"$HTMLNAME\" title=\"last page\">▼ last</a>" >> $HTMLNAME
#echo "</div>" >> $HTMLNAME
echo "<div id=\"pict\">" >> $HTMLNAME

В данном случае раскомментирована строка c добавлением названия папки на страницу, в случае если не нужно выводить его, просто закомментируйте строчку (и раскомментируйте следующую, в которой имя не выводится).
Аналогично дела обстоят и с кнопками перехода по страницам. Если вы хотите сделать постраничное разделение, то в данном случае необходимо делать страницы по частям (разделить фалы по папками и запускать скрпит отдельно на каждой, потом можно будет объединить все в одну папку), попутно их переименовывая, а так же редактировать сами страницы прописывая нужную (ссылку на следующую страницу), закомментировано. (слишком сложно но оставлено на всякий случай, в скрипте с php версией все куда проще, но и посмотреть без установки php (и поднятия сервера) не получится.)


Шаг 3. Плюшки.


Данный шаг является скорее творческим, призванным для информативности и удобства пользователя. На этом этапе мы будем создавать превью, а также получать данные о размере и разрешении файлов изображений. На данном этапе происходит погружение в директорию, подставляются данные о файлах из поиска, что был выше, и запускается цикл генерирующий превью. Утилита exiv2 записывает в переменную разрешение картинки, программа du определяет размер, имя файла (в случае если оно более 21 символа, то происходит его «обрезание»), команда echo выводит название и размеры, просто как отладочную информацию, чтобы знать если что-то пойдет не так:

(cd "$DIR" &&
for img in $J $P ; do 
	RZ=`exiv2 pr $img | grep "Размер изображения:" | awk '{print $3,$4,$5}'`
	SZ=`du -sh ./$img | awk '{print $1}'`
	nameimg=`echo "$img" | cut -b1-21`
	echo "$nameimg $RZ  ($SZ)"
	convert -auto-orient -resize '350x300' -quality 97% -strip $img thumbs/thumb_$img
#	echo "$img /thumbs/thumb_$img"
	echo "$img successfully resized";
	echo "	<div class=\"img\">" >> $HTMLNAME
	echo "          <a href=\"$img\" title=\"$img\" onclick=\"this.target='_blank'; return true;\">" >> $HTMLNAME
	echo "			<img src=\"thumbs/thumb_$img\" alt=\"\" />" >> $HTMLNAME
	echo "		</a>" >> $HTMLNAME
	echo "			<div class=\"desc\">" >> $HTMLNAME
	echo "$nameimg | $RZ  ($SZ)" >> $HTMLNAME
#	echo "$RZ  ($SZ)" >> $HTMLNAME
	echo "			</div>" >> $HTMLNAME
	echo "	</div>" >> $HTMLNAME
done ) ;

Утилита convert, из пакета imagemagic, создает превью размером 350х300 пикселей и качеством 97%, а так же убирает exif данные и переворачивает изображение основываясь на этих данных (для фото, параметр -auto-orient). В некоторых случаях его придется убрать, фотографии с некоторых фотоаппаратов переворачиваются дважды. Далее все эти параметры, а так же ссылки, заносятся в html файл (при клике на превью картинка откроется в новой вкладке).

Вся остальная закомментированная часть – это прошлые куски, которые мне казались не очень удачными и были заменены. Так же там есть кусочек который создает превью для .gif файлов, но так и не был доделан. Хотя сам по себе рабочий, но дополнительно нужно создавать временную директорию для правильного преобразования gif (параметр -coalesce).


Заключение.


Сам скрипт следует использовать по команде:

sh /путь к скрипту/script_001.sh /путь к папке с изображениями/

На этом все, пример работы скрипта, сам скрипт и css стиль для него можно найти ниже.


Страница пример


Скрипт (.sh)



Стиль css



Адаптация и правка текста Александр "Lucky" Шадрин