FastShot renders images using templates. Physically, these are located in ~/DesktopModules/avt.FastShot/templates/. Each template is made of two parts:

• main.xsl
  This is an XSL file that contains the HTML layout that is transformed against the images XML that FastShot generates
  
• theme.css and other graphics
  All styles used in the XSL file are defined in theme.css, that may load additional resources (images for example) as needed.

Each FastShot module can have a different template attached to it (even if on the same page). FastShot will dynamically load corresponding CSS file.

FastShot separates the item management from rendering by using templates. Templates are based on imaging scripts written in jQuery.

Following scripts are integrated:

• LightBox Integration - Templates based on this script render list of thumbnails with LightBox support. This template is also used when embedding images inside MyTokens aware modules. See demo.

• Galleriffic Integration - Galleriffic provides a rich, post-back free experience optimized to handle high volumes of photos while conserving bandwidth. See demo.

• SpaceGallery Integration - SpaceGallery uses zoom effect to cycle between images. Useful for simple presentations or slideshows. See demo.

• s3Slider Integration - s3Slider is a slideshow script that also uses images captions and descriptions to build rich presentation. See demo.

The XML used to transform the XSL file has the following structure:

• fastshot/root
  • mid ModuleID for current instance
    • img
      • id Item ID as it appears in FastShot table
      • title Image Title
      • desc Image Description
      • thumburl URL of the thumbnail (this could be the URL to script that generates the thumbnail, but this shouldn't matter to the template designed)
      • thumb_width thumbnail width
      • thumb_height thumbnail height
      • imgurl URL to the enlarged image
      • editurl link that triggers Image Edit Dialog to open
      • editurl_comp link that redirects to Image Edit page (for compatibility purposes)
      • deleteurl link that triggers delete confirmation to appear
    • img …
    • img …

More information about each of these fields can be found on this page.

There are other details into it when writing your own templates.

1. If you have the design you want (in psd format for example), we can implement the template for you, assuming you agree to share your template with the rest of the community. Please contact us on our forums or contact form.
   
2. If your template is going to display images in a grid manner, then it's recommended to set the class FastShot_grid on the root ul element. What happens is usually thumbnails are not equal in size, and the grid will look unpleasant because of the floats. If you set the class as specified, FastShot will register a client script that resizes all containers around the thumbnails to be the same size as the largest of them. This delivers desired behavior.