Page tags

Online manual

EXIF2HTM – convert your EXIF data to HTML, TXT and CSV files!

Introduction.

Exif2htm is a powerful tool allowing you to generate nice HTML tables using EXIF metadata taken from JPEG and TIFF files. The parameters of tables (fonts, colors, cell sizes) are completely customizable. This program is also capable of generating simple TEXT files and comma-separated CSV files, which are compatible with Microsoft Excel. Moreover, you will be able to generate nice web photo albums.

The program can be used by any user. It doesn’t really matter if you know or don’t know how to write HTML files. Although, if you aware of general HTML rules, you will certainly achieve more prosperous results.

Working with the program.

First of all, drag and drop some JPEG files from Windows Explorer to the program’s window. You may drag a group of files, but the order is important: the files will be shown in the table in the same order that is used when you add files. If you drag a folder, all subfolders and files from this folder will be also added to the list.

In the uppermost part of the window you can see the list of added files. Use context menu to clear it when needed.

Now look at the table with exif tags and values: if you click any file name, this table will be filled with exif tags, taken from the corresponding file (if there are exif tags, of course). Note, that photos taken by different cameras may have different tags.

Step 1 – creating a simple text list.

Just to show that making of list is simple, this part tells how to write selected exif info to a text file.

Switch to the “HTML options” tab. Don’t be confused when you see a lot of controls – you are unlikely to use them all at the same time, but advanced users feel a kind of creativity freedom when they understand that this software doesn’t impose any limitations on their ideas.

So, to create a text file, select “Output type” – “Text lines”. In this case Exif2htm will not write html tags to your file. Now switch to the script editor. When you have the list of tags loaded, click on any tag – it will be added to the script window. Tag names are added in braces. Everything that is added in braces will be processed by Exif2htm before saving the result file. There are also predefined names:

{Name} – the name of the file.
{Nameonly} – the name of the file without extension.
{Fullname} – full file name (with path and extension).
{Image} – insert image (jpg only).

You can use quick buttons above the script window to add these tags.

Now, to get the idea of how it works, type the following line in the script editor:

{Name} – {DateTime}

Click “Preview” button. You will see something like this:

IMG_2931.jpg – 2005:02:20 13:30:35
IMG_2933.jpg – 2005:02:20 13:38:43
IMG_2934.jpg – 2005:02:20 13:48:17
IMG_2946.jpg – 2005:02:20 13:55:50
IMG_2947.jpg – 2005:02:20 13:56:08

{Name} was replaced by file names and {DateTime} – by the date and time when the photo was taken.

Now this can be easily modified to save the CSV format. This format is convenient to load data in Microsoft Excel. To save CSV format, the data should be divided by commas (some versions require semicolons). Modify the script:

{Name},{DateTime}

Press save button, enter any name with “.csv” extension. Click on this file in Windows Explorer, MS-Excel will be loaded. In the first column you will see file names, and in the second one – dates and times.

Step 2 – creating a simple html file.

In this chapter you will find out how to create a simple html file without tables. They are not so visual as the ones with colorful tables, but still, having a simple list in html format may be useful.

First, in “HTML options”, “Output type” select “HTML lines”. Now add some photo files and switch to script editor. Add the following line:

{Name} – {FNumber}, {ExposureTime}<br>

You see “<br>” at the end of the line, it is a HTML tag that signals a new line. You can type it manually or by clicking “New line” quick button.

Click “Preview” button and you will see something like this:

IMG_3111.jpg – F8,0, 1/60 sec
IMG_3112.jpg – F8,0, 1/80 sec
IMG_3113.jpg – F6,3, 1/100 sec
IMG_3114.jpg – F6,3, 1/100 sec
IMG_3143.jpg – F5,6, 1/200 sec

You may save it and the page is ready for publishing in Internet.

Step 3 – creating a html table.

This feature is really cool! You have probably seen the demo samples on the program’s webpage (http://acritum.com/e2h) – you will be able to achieve such results and even outdo them.

As always, first of all you should select “output type” in “HTML options”. This time it will be “HTML table”. Switch to script editor.

The structure of HTML tables is not very difficult but you should know how it works. In HTML, the tables are written this way:

Code:

<table>
<tr>
<td>1</td>
<td>2</td>
</tr>
<tr>
<td>3</td>
<td>4</td>
</tr>
</table>

Table:

1 2
3 4

 

You can see, that <tr> are dividers for “lines” and <td> are dividers for <columns>. The part of code that is typed in bold font shows a sample of code for one complete line of the table. All you have to do is specify columns, and the rest will be done by Exif2htm. Of course, it adds a little bit of manual work, but you can decide how to arrange different tags in different columns – you may even show several tags in one cell of a column.

Now lets return to script editor. To reduce the amount of manual work, there is “Column” button and column parameters:

  • Horizontal and vertical alignment.
  • Column width and height. May be entered both in pixels and percent. If you enter a value in pixels, enter just number, for example 320; if you enter a value in percent, enter it with percent sign, for example, 80%.
  • Background and border colors. Read about colors later.
  • Nowrap function – disables text wrap in columns.

You may specify only some of these parameters – they are all not required but may be useful to achieve a special effect. Finally, press “Column” button to add this information to the script editor:

<td>

</td>

We have just created a column, but it is still empty. Place cursor in the empty line between <td> and </td> tags and add some information, for example:

<td>
{Name}
</td>

Now you can click “Preview” button and you will see one column filled with file names you added. But our task is to have at least two columns. Place the cursor at the end of script editor and add another column, then add any exif tag to it:

<td>
{Name}
</td>
<td>
{DateTime}
</td>

Well done, you have quite a useful table:

IMG_2931.jpg 2005:02:20 13:30:35
IMG_2933.jpg 2005:02:20 13:38:43
IMG_2934.jpg 2005:02:20 13:48:17
IMG_2946.jpg 2005:02:20 13:55:50
IMG_2947.jpg 2005:02:20 13:56:08

It is ready for publishing in Internet, but I recommend you to spend yet some time to make it more attractive. And don’t forget, that you may add unlimited number of columns.

Colors.

Colors are presented in this program the way they are presented in all HTML pages – #RRGGBB, where RR is red, GG – green and BB – blue. So, #FFFFFF is white, #000000 is black, #FFFF00 is yellow and so on. You can also use standard color names (black, yellow, blue, etc). This version doesn’t have internal color pickers, so you should calculate color codes yourself, or use another program with color pickers (Adobe Photoshop, Macromedia Dreamweaver and many others).

HTML options.

  • Output type: you already know what it is.
    HTML table – Exif2htm processes table tags.
    HTML lines – Exif2htm does not process table tags but process general HTML tags (<head>,<body> etc).
    TEXT lines – Exif2htm does not include any HTML tags in the result file.
  • HTML title: a string that will be shown as a window caption in Internet Explorer and other browsers.
  • Charset: specify charset (empty for English-content pages). For Russian pages we use “Windows-1251”.
  • Metatags file: full path to a text file with additional metatags. Useful when generating pages for Internet. This file may contain such lines:

    <meta name=”keywords” content=”pictures, photos, descriptions”>
    <meta name=”description” content=”Here you can find information about my photos”>

  • Page background color and text color.
  • Table background color.
  • Table align.
  • Table width and height (in pixels or in percent).
  • Border color.
  • Border width (0 – without border).
  • Odd line background, color and border color.
  • Even line background, color and border color (you may specify different colors for odd and even lines to achieve a special effect, see demo examples on program’s webpage).
  • Font name. Enter it as you see it in other programs: Arial, Courier New, Times New Roman. This version doesn’t have a font picker, but it will be added in further versions.
  • Font size and attributes. If you want to use these font settings, you must wrap your text in {font} {/font} tags. These tags will be automatically added when you click “Column” button if “Font” checkbox is checked. Here is an example of correct font settings use:
    <td>
    {font}
    {Name}
    {/font}
    </td>

    Don’t forget that you can specify fonts manually using HTML rules:

    <td>
    <font face=”Courier New” size=”4″ color=”#FF00FF”><b>{Name}</b></font>
    </td>
    <td>
    <font face=”Arial” size=”2″ color=”#00AAAA”><i>{DateTime}</i></font>
    </td>

    Resut:

    IMG_2931.jpg 2005:02:20 13:30:35
    IMG_2933.jpg 2005:02:20 13:38:43
    IMG_2934.jpg 2005:02:20 13:48:17
    IMG_2946.jpg 2005:02:20 13:55:50
    IMG_2947.jpg 2005:02:20 13:56:08
  • Number of leading columns. Specify the number of leading columns, reserved for each file. If it is 1, each file will be in a separate line of the table. If it is 2, then two files will be in one line, etc. This feature is used to generate webalbums. Click here to read more how to create them.
  • Custom headers. Add the names of headers – one name per line – and specify settings for the first line of the table. If you don’t specify the names of headers, they will not be used.

Saving and loading presets.

If you are going to use your settings with other files later, enter a preset name and click “Save”. Next time you want to use them, enter the same name and click “Load”.

Final notes.

1) You can show several tags in one cell, and even add captions:

<td>
Aperture: {FNumber}<br>Exposure time: {ExposureTime}<br>ISO: {CCD ISO}<br>Flash: {Flash}
</td>

2) You can add small images to your table. In script editor, specify just one dimension – either width or height of an image. It will be used to resize large images. They will not be actually resized, they will be resized just in browser window. Use {Image} tag where you want to insert the image. Only JPEG images can be shown by browsers, so don’t try to do it with TIFF and RAW files. There is a way-around, however. You may convert and resize your images in an external program (ACDSee will do) and copy them to the folder where your html file will be saved. Before saving, check “No paths” checkbox in script editor window. Presto! Your html shows these images. You can upload the html file with these small images to Internet and all will work fine (see demo in the program’s page).

3) You can use any HTML tags in script editor. But they must not interfere with the tags which will be added automatically by Exif2htm. For example, you may add a hyperlink to your image files:

<td>
<a href=”{Fullname}” target=”_blank”>{Name}</a>
</td>

In this example, when a user clicks on a file name, this photo will be opened in a new browser window.

4) It may be useful for you to learn how the demo tables were created. It is possible if you load “demo1”, “demo2” and “demo3” presets – they are included to this distributive.

Creating Webalbums.

Leading columns feature was added in version 1.01. You will find it in “HTML options” tab. With the help of this feature you will be able to generate nice web albums. Look at the table below. It has 6 columns, but just 3 leading columns (they are marked with different colors):

Name Date Name Date Name Date
file-001.jpg 2005.01.10 15:22:14 file-002.jpg 2005.01.10 15:26:43 file-002.jpg 2005.01.10 15:29:22

Each leading column contains information for one single file. One leading column may have unlimited number of columns (in this example – 2 columns – name and date).

Now let’s see how to create a web album. To create a simple album, all we need to do is place small images to separate leading columns:

image1
image2
image3
image4
image5
image6
image7
image8
image9
image10
image11
image12

Each image should be a hyperlink to a bigger image. When a user clicks a small image, a new window with a bigger image will be opened. To make this album you will need 2 sets of images: one set will contain full-sized images, and the other set will contain small thumbnails. You can resize images in almost any image viewer, such as ACDSee. Leave small images with old names, you will drag them to Exif2htm to create a webpage. And full-sized images should contain any suffix. For example, if a small image is called “pic01.jpg”, you may call the corresponding full-sized image “pic01_big.jpg”. To access this image, one more predefined name was added – “{nameonly}”. It will be changed to the file’s name without extension. So, in your script you will have only one column:

<a href=”{nameonly}_big.jpg” target=”_blank” ><img src=”{name}” border=”0″></a>

If you use {image} word, you may shorten it (don’t forget that “no paths” checkbox matters! If it is off, full paths will be written to HTML, otherwise – only names):

<a href=”{nameonly}_big.jpg” target=”_blank” >{image}</a>

Your HTML image should be saved in the folder with images, otherwise it won’t work. If you want to store images in a separate folder, then specify full or relative paths:

<a href=”http://acritum.com/images/{nameonly}_big.jpg” target=”_blank” ><img src=”http://acritum.com/images/{name}” border=”0″></a>

or

<a href=”images/{nameonly}_big.jpg” target=”_blank” ><img src=”images/{name}” border=”0″></a>

That’s how it works. If you need an advanced album, you may add one more column and show there exif information about photos.

Demo presets are included to this distributive, you can learn how they work: “demoweb1” and “demoweb2”.

You can see how I created simple and advanced web albums in Internet (the photos were not included to this pack in order to keep its size as small as possible):

http://acritum.com/e2h/demo/webalbum/

I made these albums even more cool. When a bigger image is opened in a new window, it is aligned to the top-left corner of the window. In addition, you cannot specify the window’s name and colors and it is not possible to show additional captions in the window. So I wrote a simple PHP code that makes the background of the window yellow and shows the picture in the center of the window, framing it with a nice border. Here is the code:

<?php
echo(“<html>
<head>
<title>Exif2htm web demo (enlarged image)</title>
<meta http-equiv=\”Content-Type\” content=\”text/html; charset=windows-1251\”>
</head>

<body bgcolor=\”#FFFFCC\” text=\”#000000\”>
<p>&nbsp;</p><table width=\”520\” border=\”2\” height=\”400\” bgcolor=\”#FFFF99\” bordercolor=\”#FF9900\” align=\”center\”>
<tr>
<td align=\”center\” valign=\”middle\”><img src=\”$showimage\”></td>
</tr>
</table>
</body>
</html>”);
?>

To make it work, you should change your script:

<a href=”view.php?showimage={nameonly}_big.jpg” target=”_blank” ><img src=”{name}” border=”0″></a>

Support, contacts, registration.

The program was written by Anatoliy Kovalenko. A part of the program is based on the work of Gerry McGuire (dExif unit).

The program is distributed as shareware, it means that you may try it free of charge, but after the trial period you must either buy its license or uninstall it. Exif2htm demo version allows you to work with no more than 10 files at one time.

You will find the latest information in the web: http://acritum.com/e2h.