eZeeGallery Photo Dreamweaver Extension

eZeeGallery Photo Themes Tutorial

The eZeeGallery Theme pages

Note: In the eZeeGallery version 1 the gallery page will have an .asp extension, in the new version 2 the gallery page will have an .htm extension.

Version 1: gallery.asp
Version 2: gallery.htm

The User Guide will refer to the gallery page as gallery.asp/htm

Placement Images ( Version 1 only )

Version 1

After you have made your selections in the eZeeGallery Main interface, the gallery page is created for you and placed in the location you have defined in the interface. This page will be named " gallery.asp/htm" when using the Themes. Each Theme has a different layout and will appear differently if you open it up in Dreamweaver, however they all share something in common. The null broken placement images.

The broken thumbnails will be the exact size that you specified for the actual thumbnails in the interface, and there will be as many as you have determined to display in your Gallery page when viewed in a browser online.

The placement image for the Thumb NavLinks will be approx. 200px wide and 16px tall. This image basically opens up the space where the NavLinks will be.

The placement image for the Full Image is set to 400px by 400px. Your actual Full size images may be smaller or larger. You can change the size of this placement image in the Dreamweaver Property Inspector to suit your needs and it will not harm anything at all.

The Elements Theme in Dreamweaver design View

Version2

In eZeeGallery Version 2 the actual images will be inserted into your page in Design View. Version 2 does not use the "Placement Images". In version 2 you can also view the gallery page "locally" by pressing F12 on your keyboard without having a test server defined or the need to upload the files to preview the Gallery.

The Elements Theme in Dreamweaver design View

No matter which of the of the 7 Themes you choose, the " gallery.asp/htm" page will have another thing in common. Each one contains 3 separate divs that are used to contain the following items...

Thumb Images
Nav Links
Full Image

These divs are dynamically loaded with the images when the page loads in a browser.

Version 1

In order to view the raw gallery pages in any sort of viewable state in Dreamweaver, image placements are inserted into these divs by default. If these placement images were not there, the entire layout would collapse in upon itself as everything would be empty. These placement images are inserted here purely for visual purpose and ease of editing should you decide to make your own additions or modifications to the Theme page.

The placement images will appear as broken images. This is because they do not exist anywhere in your site nor are created for the gallery files by the extesnion. They are simply null placement images to expand the layout. You can leave these images there and upload your gallery page just as it is with these images. They will be replaced once the page loads. You can also delete them if you wish.

The CSS

Each Theme gallery page comes with its own external CSS ( cascading style sheet ) file. This file is responsible for the better part of the way each Gallery page is displayed. This CSS file is named " ezeegallery.css" and resides inside of the "" folder in the root of your site. You can change many of the aspects of the Gallery page by editing this CSS file.

The CSS file itself contains instructions for changing the aspects of the gallery page. Such aspects as making the entire layout wider or smaller, colors used, etc..

The Images

Each included Theme comes with its own images specific for the Theme chosen. These images are created and placed in the Theme folder inside of the "" folder. An editable PNG file for the images used in that particular Theme is also placed in this folder. This PNG file is named " assets.png".

File structure for the Dual Theme

You will need a graphics program such as Macromedia Fireworks to open and edit the images in the " assets.png" file.

Changing Themes

You can change the Theme of your gallery with a click of a mouse. Open your current gallery page and launch the Main Interface. Select another Theme of your choice and press the OK button. Your gallery page will be updated with the newly chosen theme and all of the new Themes assets will be created and copied to the "" folder.

It is not necessary to re create the thumbnails if you are using the same ones for the new Theme. If you change a Theme, you must upload the gallery page and the "" folder.

Note: After changing a Theme the new elements will be written to your open gallery page, however Dreamweaver will still render the stylesheet for the previous Theme. Just save the gallery page and re-open it and the new stylesheet will be rendered properly by Dreamweaver.

Changing Image Folders

You can change the Full Image folder at any time for your gallery. All you need to do is launch the Main Interface and browse to the new folder and click the OK button and the new folder will be active for the gallery.

If the thumbnails do not yet exist for the new image folder you must create them by either checking the the "Run Fireworks" option or run the eZeeThumb Creator independently for the new image folder.

Note: If you wish to change the thumbnail size you can do this from the Main interface by checking the "Run Fireworks" option or you can do it as well in the eZeeThumbCreator interface.

Upload your Files!

Note: As stated throughout the User Manual, It is recommended to upload the entire " " folder after making any changes to the gallery. This will assure that any changes you have made will be updated completely.