transformer.xslt
As mentioned before, transformer.xslt converts an intermediate XML representation of the web gallery generated by Lightroom into the resulting HTML, CSS, and other files output by Lightroom. Most importantly for our purposes, this file is where all your html code will go for the design of your template. If you want to use css, you will define those styles in the galleryMaker.xml file first, and then use the class in your html you place in this file.
This file is very important to use as it is the file which will contain all your HTML code for you custom gallery.
In this section we will be going through all the editable bits of code throughout transformer.xml. All editable parts of the code within transformer.xml are labeled with an “EDITABLE CODE” comment.
*Note* Formatting of the code blocks seen in this tutorial had to be modified slightly to fit within the confines of this site. I have also removed the EDITIABLE CODE comments in this tutorial so the code is easier to read
Let’s have a look at the file, we will only go over the sections that you should change/modify for your needs.
THUMBNAIL IMAGE DISPLAY HTML CODE
The next lines of code are located in the EDITABLE - THUMBNAIL IMAGES AND HTML comment section of transformer.xml. This section of the code is where you put your html code to display the thumbnail images. In this template I place each thumbnail image in a table as you can see by the code below.
 |
 |
|
|
|
||
 |
 |
In the above code we have put in some html code to display each individual thumbnail image within a table. Note, whatever code you put in this section will affect each thumbnail image. You can not for example put html code here to surround or enclose a group of thumbnails with a table or div layer, this is done in another section. You do not need to place any html code here unless you want to modify the way the thumbnail images are displayed.
The only required line of code here is:
This is the code that actually places the thumbnail image in the html page. You can place this wherever you want your thumbnail image to appear within your code.
LARGE IMAGE PAGE HTML CODE
The next lines of code are located in the EDITABLE - GENERATE SINGLE IMAGE PAGE comment section of transformer.xml. This section of the code is where put your html code for the large image view html page. When you click on a thumbnail, this is the html page you will be brought to.
The only code you need to change in this block of code is the html code between the <!– START YOUR HTML CODE HERE. –> <!– END YOUR HTML CODE HERE. –> tags. You can put whatever html code you want for this page between these comments.The only required line of code is:
There are some blocks of code you may notice in this section such as the page navigation, image caption, and contact info. You can modify, move, or delete to fit your needs. The code for each of these are shown below.
