HTML album builder
Posted: 15 Aug 2008 18:38
Hello,
This is a basic HTML album builder. It browses recursively all pictures in a folder, building a simple HTML page.
Navigation in the album: click ON the left/right image side to go to the previous/next picture.
Use the sub folder name as album section title (H2 tag).
QUESTION: Is DOS able to read image file size (height, width)?
Here is the script and a result sample.
This is a basic HTML album builder. It browses recursively all pictures in a folder, building a simple HTML page.
Navigation in the album: click ON the left/right image side to go to the previous/next picture.
Use the sub folder name as album section title (H2 tag).
QUESTION: Is DOS able to read image file size (height, width)?
Here is the script and a result sample.
Code: Select all
::-------------------- Crée une Gallerie HTML Basée Sur Les Fichiers JPG/Gif/PNG
::********** USAGE: LAUNCH IT FROM THE ROOT OF THE FOLDER ALBUM
::********** Customize Picture Size And File Extention To Catch
SET /a h=480
SET /a w=640
SET ex="*.JPG" "*.Gif" "*.PNG"
::-------------------------------------------------------------
SET /a w2=%w%/2
@ECHO OFF
CD /D "%~DP1"
@SETLOCAL ENABLEDELAYEDEXPANSION
SET PTI=Paris 2008.02
FOR %%a in ("%CD%") DO SET Racine=%%~DPna
Call:LenS "%Racine%" "LR" & SET /a LR+=1
:CHOI
ECHO.-------------------------
ECHO.Cr‚ation D'un Album Photo
ECHO.Patientez ...
ECHO.
:FLOG
SET z=index.html
IF /i NOT "%~DP1"=="" (SET z=%~DP1\%z%) ELSE (SET z=.\%z%)
SET CN=0
TYPE NUL>"%z%"
(
ECHO.^<HTML^>^<HEAD^>
ECHO.^<TITLE^>%PTI%^</TITLE^>
ECHO.^<STYLE type="text/css"^>
ECHO.HTML.*{margin:0Px;padding:0Px}
ECHO.BODY {margin:8Px; font: 12Px Verdana; cursor: default}
ECHO..Pic {padding:8Px 8Px 20Px 0;color:#FCFCFC;}
ECHO.IMG {border-width:0Px;}
ECHO.H1 {font:bold 18Px Arial;color:#EFEFEF;}
ECHO.H2 {font:bold 14Px Arial;color:#EFEFEF;margin:0 0 5Px 0}
ECHO.SPAN {color:#FFFFCC;font-size:24Px}
ECHO.IMG {cursor:pointer;}
ECHO.^</STYLE^>
ECHO.^</HEAD^>
ECHO.^<BODY bgcolor="#666666"^>
ECHO.
IF /i NOT "%PTI%"=="" (ECHO.^<H1^>%PTI%^</H1^>)
::-------------------------------- Browse Folders
FOR /f "Delims=" %%f in ('DIR /b/s/on %ex%') DO (
SET /a CN+=1
SET /a Pr=CN-1
SET /a Nx=CN+1
Call:HEAD "%%~DPf" "%%~f" "!Pr!" "!CN!" "!Nx!"
ECHO.
)
ECHO.
ECHO.^</BODY^>^</HTML^>
)>>"%z%"
GOTO:FinN
:FinE
ECHO.&COLOR 0C
IF DEFINED ErrF (ECHO.*** ERREUR: Fichier Absent^^!)
IF DEFINED ErrD (ECHO.*** ERREUR: Dossier Absent^^!)
IF DEFINED ErrE (ECHO.*** ERREUR: De L'Extention^^!)
:FinN
Pause&EXIT
ENDLOCAL&ECHO.&ECHO.END. BYE ......&PING -n 2 LocalHost>Nul&EXIT /b::___________
::*********************************************** Renvoie La Taille D'une Chaine
:LenS
SET s_=%~1
:LOOP
SET /a L_+=1
SET s_=%s_:~0,-1%
IF "%s_%"=="" (SET %~2=%L_%&GOTO:EOF) ELSE GOTO:LOOP
GOTO:EOF
::******************************************************************* HTML BLOCK
:HEAD
SET P0_=%~1
SET P0_=!P0_:~,-1!
SET P0_=!P0_:~%LR%!
ECHO.^<A name="P%~4"/^>
IF /i NOT "%P0_%"=="" (SET P0_=!P0_:\= \ !)
IF /i NOT "%P1_%"=="%~1" (IF /i NOT "!P0_!"=="" (ECHO.^<H2^>!P0_!^</H2^>))
SET P1_=%~1
SET P2_=%~2
SET P2_=!P2_:~%LR%!
ECHO.^<DIV class="Pic"^>^<IMG src="%P2_%" USEMAP="#Ma%~4"/^> %~n2^</DIV^>
ECHO.^<MAP name="Ma%~4"^>
ECHO. ^<AREA shape="rect" coords="0,0,!w2!,!h!" href="#P%~3" title="Previous"^>
ECHO. ^<AREA shape="rect" coords="!w2!,0,!w!,!h!" href="#P%~5" title="Next >"^>
ECHO.^</MAP^>
GOTO:EOF
::______________________________________________________________________________Code: Select all
<HTML><HEAD>
<TITLE>Paris 2008.02</TITLE>
<STYLE type="text/css">
HTML.*{margin:0Px;padding:0Px}
BODY {margin:8Px; font: 12Px Verdana; cursor: default}
.Pic {padding:8Px 8Px 20Px 0;color:#FCFCFC;}
IMG {border-width:0Px;}
H1 {font:bold 18Px Arial;color:#EFEFEF;}
H2 {font:bold 14Px Arial;color:#EFEFEF;margin:0 0 5Px 0}
SPAN {color:#FFFFCC;font-size:24Px}
IMG {cursor:pointer;}
</STYLE>
</HEAD>
<BODY bgcolor="#666666">
<H1>Paris 2008.02</H1>
<A name="P1"/>
<H2>Guesthouse</H2>
<DIV class="Pic"><IMG src="Guesthouse\Pic_000005.jpg" USEMAP="#Ma1"/> Pic_000005</DIV>
<MAP name="Ma1">
<AREA shape="rect" coords="0,0,320,480" href="#P0" title="Previous">
<AREA shape="rect" coords="320,0,640,480" href="#P2" title="Next >">
</MAP>
<A name="P2"/>
<DIV class="Pic"><IMG src="Guesthouse\Pic_000006.jpg" USEMAP="#Ma2"/> Pic_000006</DIV>
<MAP name="Ma2">
<AREA shape="rect" coords="0,0,320,480" href="#P1" title="Previous">
<AREA shape="rect" coords="320,0,640,480" href="#P3" title="Next >">
</MAP>
<A name="P3"/>
<DIV class="Pic"><IMG src="Guesthouse\Pic_000007.jpg" USEMAP="#Ma3"/> Pic_000007</DIV>
<MAP name="Ma3">
<AREA shape="rect" coords="0,0,320,480" href="#P2" title="Previous">
<AREA shape="rect" coords="320,0,640,480" href="#P4" title="Next >">
</MAP>
<A name="P4"/>
<DIV class="Pic"><IMG src="Guesthouse\Pic_000008.jpg" USEMAP="#Ma4"/> Pic_000008</DIV>
<MAP name="Ma4">
<AREA shape="rect" coords="0,0,320,480" href="#P3" title="Previous">
<AREA shape="rect" coords="320,0,640,480" href="#P5" title="Next >">
</MAP>
<A name="P5"/>
<H2>Guesthouse \ Arround</H2>
<DIV class="Pic"><IMG src="Guesthouse\Arround\Pic_000009.jpg" USEMAP="#Ma5"/> Pic_000009</DIV>
<MAP name="Ma5">
<AREA shape="rect" coords="0,0,320,480" href="#P4" title="Previous">
<AREA shape="rect" coords="320,0,640,480" href="#P6" title="Next >">
</MAP>
<A name="P6"/>
<DIV class="Pic"><IMG src="Guesthouse\Arround\Pic_000010.jpg" USEMAP="#Ma6"/> Pic_000010</DIV>
<MAP name="Ma6">
<AREA shape="rect" coords="0,0,320,480" href="#P5" title="Previous">
<AREA shape="rect" coords="320,0,640,480" href="#P7" title="Next >">
</MAP>
<A name="P7"/>
<DIV class="Pic"><IMG src="Guesthouse\Arround\Pic_000011.jpg" USEMAP="#Ma7"/> Pic_000011</DIV>
<MAP name="Ma7">
<AREA shape="rect" coords="0,0,320,480" href="#P6" title="Previous">
<AREA shape="rect" coords="320,0,640,480" href="#P8" title="Next >">
</MAP>
<A name="P8"/>
<H2>Misc</H2>
<DIV class="Pic"><IMG src="Misc\Pic_000058.jpg" USEMAP="#Ma8"/> Pic_000058</DIV>
<MAP name="Ma8">
<AREA shape="rect" coords="0,0,320,480" href="#P7" title="Previous">
<AREA shape="rect" coords="320,0,640,480" href="#P9" title="Next >">
</MAP>
<A name="P9"/>
<DIV class="Pic"><IMG src="Misc\Pic_000960.jpg" USEMAP="#Ma9"/> Pic_000960</DIV>
<MAP name="Ma9">
<AREA shape="rect" coords="0,0,320,480" href="#P8" title="Previous">
<AREA shape="rect" coords="320,0,640,480" href="#P10" title="Next >">
</MAP>
<A name="P10"/>
<DIV class="Pic"><IMG src="Misc\Pic_001192.jpg" USEMAP="#Ma10"/> Pic_001192</DIV>
<MAP name="Ma10">
<AREA shape="rect" coords="0,0,320,480" href="#P9" title="Previous">
<AREA shape="rect" coords="320,0,640,480" href="#P11" title="Next >">
</MAP>
</BODY></HTML>