Reino17/display-all-pictures-in-an-html-page.md

## display-all-pictures-in-an-html-page.md

      
    Raw
  

              display-all-pictures-in-an-html-page.md
            
          
    Directory structure:
dir1\image.jpg
dir1\image.png
dir2\image.jpg
dir2\image.png
image.jpg
image.png

Create a batch-script like the following:
@ECHO OFF
ECHO ^<html^>
SETLOCAL ENABLEDELAYEDEXPANSION
FOR /F "delims=" %%A IN ('DIR /A:-D /B /O:N /S *.jpg *.png') DO (
  SET "var=%%A"
  SET "var=!var:%CD%\=!"
  ECHO   ^<img src="!var:\=/!"/^>
)
ECHO ^</html^>

DIR /A:-D /B /S *.jpg *.png returns:
<full-path>\image.jpg
<full-path>\image.png
<full-path>\dir1\image.jpg
<full-path>\dir1\image.png
<full-path>\dir2\image.jpg
<full-path>\dir2\image.png

You can add /O:D for instance if you want to sort by date.
"var=!var:%CD%\=!" changes the full path to a relative one:
<full-path>\dir1\image.jpg --> dir1\image.jpg

"!var:\=/!" changes the backslash to a for HTML valid forward slash:
dir1\image.jpg --> dir1/image.jpg

Output:
<html>
  <img src="image.jpg"/>
  <img src="image.png"/>
  <img src="dir1/image.jpg"/>
  <img src="dir1/image.png"/>
  <img src="dir2/image.jpg"/>
  <img src="dir2/image.png"/>
</html>


Although this batch-script works in this particular case, cmd/Batch doesn't support HTML/XML at all. I suggest you have a look at a tool that does, like xidel.
xidel.exe -se "file:list(.,true(),'*.(jpg|png)')"
dir1\image.jpg
dir1\image.png
dir2\image.jpg
dir2\image.png
image.jpg
image.png

xidel.exe -se "for $x in file:list(.,true(),'*.(jpg|png)') return replace($x,'\\','/')"
dir1/image.jpg
dir1/image.png
dir2/image.jpg
dir2/image.png
image.jpg
image.png

xidel.exe -s --xquery "for $x in file:list(.,true(),'*.(jpg|png)') return serialize(<img src='{replace($x,'\\','/')}'/>)"
<img src="dir1/image.jpg"/>
<img src="dir1/image.png"/>
<img src="dir2/image.jpg"/>
<img src="dir2/image.png"/>
<img src="image.jpg"/>
<img src="image.png"/>

xidel.exe -s --xquery "serialize(<html>{for $x in file:list(.,true(),'*.(jpg|png)') return <img src='{replace($x,'\\','/')}'/>}</html>,{'indent':true()})"
<html>
  <img src="dir1/image.jpg"/>
  <img src="dir1/image.png"/>
  <img src="dir2/image.jpg"/>
  <img src="dir2/image.png"/>
  <img src="image.jpg"/>
  <img src="image.png"/>
</html>

The final command/query "prettified" (and with the necessary escape-characters):
xidel.exe -s --xquery ^"^
  serialize(^
    ^<html^>{^
      for $x in file:list(.,true(),'*.(jpg^|png)') return^
      ^<img src='{replace($x,'\\','/')}'/^>^
    }^</html^>,^
    {'indent':true()}^
  )^
"