Making an index of images, with image preview

[Mickets]

Hello all,

I've used DirHTML for some time now to generate indexes of various
different file types in different folder structures. It is a great,
flexible program.

Recently, I organized a library of PNG and SVG files, separated by
folders.

I want to make an index of the files, showing a preview of the images
together with the link for each file. I had some success adding an
<IMG SRC="... tag to each image link, but only by keeping the name of
the file as well. This is not ideal, as some file names are long and
all I want is the images.

I didn't have any success generating the link and the image, without
the name of the file.

What originally is generated is:

<a href="subfolder\image.png">image.png</a>


I would like to convert the link to the file name, and end with:

<a href="subfolder\image.png"><img src="subfolder\image.png"
width="50"></a>

In theory, I could just add <img src="subfolder\ before the file name,
and then close the tag afterwards. But since the subfolder varies, I
would need to use a variable such as %%F_PATH, but most variables have
limited use, and can't be used in this case, for example.

I tried using /FILE_MATCHES_INSIDE_A, but didn't have any success
either.

Any ideas?

Thanks for any help.

[dirhtml]

Try a script like this:

/FILE_HREF_APPEND
target="_new"><img src="%%F_PATH" alt="%%F_PATH" border="0"></
img><br /

Note that for non xhtml or html5 builds, end the line with <br instead
of <br /. The script is being inserted into the href's, so the final
trailing > can't be in the script.

----------

As an alternative, consider making thumbnails of each image, with the
thumbnails shown on the generated page, and a click bringing up the
full image. This way, you can have images shown on the main page that
are all the same size.

Assuming the thumbnails are in a "thumbnails" subfolder of the image
folder, this script should work:

/FILE_HREF_APPEND
target="_new"><img src="thumbnails/%%F" alt="%%F"
border="0"><img><br /

To use the thumbnail version, skip link generation for the thumbnail
folder by entering *thumbnails* as a skipped folder on the main page.
There are many freeware apps that can generate thumbnails.

[dirhtml]

A small fix to make it work for recursive builds (where each image
folder has a "thumbnails" sub-folder):

/FILE_HREF_APPEND
target="_new"><img src=%%RELATIVE_PATH/"thumbnails/%%F" alt="%%F"

[Mickets]

Hi,

Hmmm... it worked. I found that I had a tag leftover from some
previous tries and that was getting in the way... the %%F_PATH
variable wasn't being parsed, but now it is.

I got the image sizes to be all the same by adding a style:

<style type="text/css">

.mainimage {
max-width: 75px;
max-height: 75px;
width: expression(this.width > 75 ? "75px" : true);
height: expression(this.height > 75 ? "75px" : true);
}

It worked for most images, but some SVG appear extremely small for
some reason. I'll have to check them.

The thumbnails idea is great, but I'd have to see how I'd generate all
the thumbnails. IrfanView will probably do the trick, but the SVG
preview in IrfanView wasn't very good. I'll try.

Thanks again,

Michael

[dirhtml]

In the "small fix" code, I left out the / in the closing </img> tag.

/FILE_HREF_APPEND
target="_new"><img src=%%RELATIVE_PATH/"thumbnails/%%F" alt="%%F"

border="0"></img><br /

> border="0"></img><br /