Image Galleries

• Resize the images (note: if your images are larger than 640px on either side, the gallery plugin will automatically resize your images for you (some cropping may occur), so you can skip this step and just upload the images files.
• 'Create' the gallery page (i.e.: http://webdev.adelaide.edu.au/yoursite/gallery/)
• Click 'files' and then upload the image files at the top of the page by clicking 'browse' and 'submit'. This will put the images into the gallery folder(or whatever you called the gallery page).
• Go to the gallery page and click 'edit', write in the Heading and any information
• place the following line of code into the page via the 'html' icon:
  <!--WFINC="gallery(dir=.)"-->
• click 'update' then 'preview' and 'save changes'.

NOTE: If you are using the new template, please use the following code instead of the above suggested code:
<!--WFINC="gallery2(dir=.;title=Photo Gallery Name)"-->

Now all you need to do is wait until all of the thumbnail images have been compiled. You should only have to wait between 1/2 hour to 1 hour, depending on server load and the amount of images you have in the gallery.

Once the thumbnails all appear, just click 'upload dir' for the gallery page to make it live.

Image dimensions should be at the largest:

Landscape: 640x480 pixels (see example of Landscape size)
Portrait: 480x640 pixels (see example of Portrait size)

Ideally you should resize your images manually, to get the exact size and area of the image you want with Microsoft Office Picture Manager, or Photoshop. However, you can skip the resizing process and just upload the images into the gallery folder and let the server automatically resize them for you to the default 640x480 pixels. If your images are too high a resolution, the server will not resize them and will fall over unfortunately, so you may have to resize in MS Picture Manager, or Photoshop.

Keep in mind any image resizing that is automated like this, you will need to view the page in webdev then wait for the server to process and resize the images. If you have uploaded the images through TMS you can view the page straight away to start the resizing process. If you uploaded via Dreamweaver, you will need to wait an hour or so then view the page in webdev in order to start the resizing process.

How to resize in Pixlr.

You can add captions to images in two ways. The preferred method is to create a file called "gallery_captions.txt" in the same directory as the gallery images. Each image caption needs to sit on a line of its own. The format of each line in the file looks like this:

image_file_name.jpg = Image caption goes here

The images will appear in order of how they are listed within this caption file. If you only have captions for some of the images, then the images without captions will appear alphabetically at the end of the gallery.

If the "gallery_captions.txt' file is not found, the images will appear in alphabetical order.

How to create the gallery_captions.txt file

1. Go to the folder that holds the images. ie: http://webdev.adelaide.edu.au/yoursite/gallery/
2. In the address bar at the top of your browser, type 'gallery_captions.txt' after the gallery/
   
   e.g.: http://webdev.adelaide.edu.au/yoursite/gallery/gallery_captions.txt
3. Now press 'Enter' to search and when the error screen comes up, click 'create' in the first blue box at the bottom.

To display multiple galleries on one page, you need to alter the way you would generally structure the gallery. Instead of putting all the images in the gallery page's folder, you need to have them located in separate folders.

For example, the setup would now be as follows:

Gallery page: http://webdev.adelaide.edu.au/yoursite/gallery/

Then within /yoursite/gallery/ you would create folders for each set of gallery images:
http://webdev.adelaide.edu.au/yoursite/gallery/event1/
http://webdev.adelaide.edu.au/yoursite/gallery/event2/

You would then place the images for each gallery in their corresponding folder.

Then on the Gallery page at http://webdev.adelaide.edu.au/yoursite/gallery/ you need to add in the WFINC code as described above, but with the following code instead:

<!--WFINC="gallery(dir=event1)"-->

<!--WFINC="gallery(dir=event2)"-->

So instead of having the one line of code, you now have two (one for each gallery) and also you don't just have the .dir, you actually have to specify the folder name that holds the images in place of the .dir (current directory).

Note: It is a good idea to set up some basic information on your page first (headings and small paragraphs), then paste in the WFINC code after in the relevant spot it needs to go. This will generally be after an </p> or </h1> or </h2> tag. This will ensure your gallery appears where it should on the page!

The following options may be added to the WFINC code for alternative display functionality:

Adding in an Extra Option

To implement any of the above options, please edit the WFINC code using the following example's structure as a guideline:

<!--WFINC="gallery(dir=.;title=Image Gallery;orig_size=600x400;thumb_size=100x100)"-->

The above code will insert a gallery from the images in the current folder, the large size images would be resized to 600x400 pixels and the thumbnails would be resized to 100x100 pixels.

Please note: If you change the thumb_size, you will need to DELETE the old thumbnails and their folder, as these will no longer be in use and will take up valuable server space.