transformer.xslt
GENERATE THE MAIN INDEX PAGE AND ADDITIONAL INDEX PAGES
These pages are generated the exact same way and it is done using almost the exact same code, but you can NOT the code for the main index page and use it for the additional index pages. The main index page is the first page you see when you view the gallery, its called index.html. The additional index pages are the html pages that appear when you click on the next button on the index page to go to the next page of thumbnails. They are labeled index_1.html, index_2.html, and so on depending on the number of images you have and how many you choose to display per page.
There are slight differences in the code between these pages, mainly in the pagination logic but you dont have to worry about that. I suggest working on the main index page first and then copying just the stuff you changed or added and place it in the same location in the code for the additional index pages.
I will only be going over the code for the main index page below. Apply what you do to the main index page to the additional index pages code block.
The next lines of code are located in the EDITABLE - GENERATE MAIN INDEX PAGES comment section of transformer.xml.
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 within the EDITABLE - GENERATE MAIN INDEX PAGE comment section of transformer.xml.
When you look at this section of the code you will see that it is basically a regular html page with head and body tags. It looks more complex then it really is. You can add you html code to this page like it was any other html page, just place your code between the body tags.
Let’s go through the code now.
CSS Styles
Normally all your css styles go in galleryMaker.xml, but in this case we need values that were entered from the right panel of the web module for some of our css styles. These styles must be defined here so that we can use those values. If you don’t need values such as thumbnail width, number of columns, and number of rows you can go ahead and delete the entire <style></style> tag.
If you do need to use the value or values of thumbnail width, number of columns, or number of rows you can use the code below to place those values within your css style.
Thumbnail Width
The thumbnail width value that was entered into the right panel can be accessed by pasting the code below where you want the value to appear (the ceiling() rounds the number up to the nearest whole number):
Number of Columns
The number of columns value that was entered into the right panel can be accessed by pasting the code below where you want the value to appear (the ceiling() rounds the number up to the nearest whole number):
Number of Rows
The number of rows value that was entered into the right panel can be accessed by pasting the code below where you want the value to appear (the ceiling() rounds the number up to the nearest whole number):
Displaying the Identity Plate
When a user checks the checkbox next to Identity Plate in the right panel of the web module it mean they want the Identity Plate to be displayed in their web gallery. We make the Identity Plate appear wherever we want but placing the code below where we want it to appear.
Displaying the Page Headers
The page headers include the text for Site Title, Group Title, and Group Description. We defined the default values for these in galleryMaker.xml.
You can place the code above wherever you want these bits of text to appear in your html.
Display your thumbnails Next you will find the div layer for the thumbnail rows: Here is the code within the thumbrow div layer: If you like the way the thumbnails are laid out in this template then you can skip ahead. For the others, I will explain what is going on with this block of code below in case you want to change it. The above block of code starts off with defining the thumbrow div layer, then it loops through all your images and adds one thumbnail image to the row until it reaches the number of columns that were set in the right panel of the web module. Once it reaches that number it closes the first thumbrow div layer and starts another thumbrow div layer. Once all images for this page are displayed the last thumbrow div layer is closed out. Instead of placing these in div layers you can use tables, paragraph breaks, regular breaks, or whatever you like to separate out the rows. Display Next and Previous page links For the next page link look for the code Display contact info and link Once you have the main index html page complete, apply the changes you made here to the code within the GENERATE ADDITIONAL INDEX PAGES commented section. Again, the code is basically the exact same so it should be easy to apply your changes, but do NOT copy the entire main index page code and paste it into the additional pages section. That is pretty much it for the transformer.xslt file! In the next section we will go over the gallery.xml file
Now we get to the section of code in this file which actually displays the grouping of thumbnail images. This code is located right under the Page Headers section above and is at the beginning of the EDITABLE CODE - BUT DO NOT REMOVE THIS CODE BELOW commented section. This gets a little tricky, but I will do my best to explain it. The first thing you will see in this section the code for the container div layer:
This is the beginning of a div layer that encloses all of the thumbnails, and its purpose is only for centering the thumbnails within the page. This div layer is not required and you can modify, move, or delete it if you choose. The closing div tag for the container is at the bottom of the page. I would suggest just keeping it in there and use it to center your thumbnails.
The purpose of this div layer is to place each row of thumbnails in its own div layer for display purposes. Do not remove this div layer unless you know what you are doing.
This block of code is only used to lay out the thumbnails in columns and rows, it does not affect each thumbnail image individually. Like we have done in this template, you may enclose each thumbnail in its own html table or whatever you want, but you don’t put any of that code here. All html code that you want to surround each individual thumbnail goes in the EDITABLE CODE - THUMBNAIL IMAGES AND HTML section.
The last part of the code is the previous and next page links display. The code below, which is located between the <!– START - SHOW PAGINATION LINKS –><!– END - SHOW PAGINATION LINKS –> comments can be moved to wherever you like. You can also enclose it in a table or other html code. In this template we have given it its own div layer called navigation whose style is defined in galleryMaker.xml. You can change the text for these links if you would like, and you can also place images in to act as the buttons. For the previous page link look for the code
Replace the: << at the end with whatever you want.
Replace the: >> at the end with whatever you want.
The code that displays the contact info and link is as follows:
This code for the contact text and link can be moved or deleted if you choose.
