FrontPage Photo Gallery

Front Page
Flash Tutorials

 


Photo Gallery - how to customise the vertical layout

Vertical Gallery
Some of this is the same as for the Horizontal and Montage layouts, but please read carefully, as it does differ later on.

Open your newly created folder containing the pages Front Page created, thumbnails, larger images and your gallery page (as discussed in the all galleries section). I am assuming your gallery is on a page that already has either text or other graphics, or has used a template, opposed to a blank empty page being used.

The content of your folder should look something like this (some of the icons will probably be different to yours though - and yes, I know I have spelt ballerina wrong! ):

Content of gallery folder


We will be using the real.htm file.

With all other pages closed - open this file up and look for the following code, just below the body tag - delete that code.

Delete this code, found just below the opening body tag

Save your page and changes just made. Keep the page open, and go back into Folders view and locate those two files that are referenced in the code - the real_p.htm and the real_x.htm - delete both those pages.

In HTML view of the real.htm, copy everything between the <body> and </body> tags, but excluding those two tags. Do not save or close the page.

Open up the page you originally inserted the gallery onto - in Normal view, you will not see the images now, but just some code saying that the album should be there .... that is normal. Go into HTML view and find code that looks like this (only the file path to the page will be different):

<!--webbot bot="PhotoAlbum" U-Include="myphotos/real.htm" clientside TAG="BODY" -->

Highlight all that code and paste over the top the content you just copied from the HTML view of the real.htm. Save your page. Now you can delete the real.htm.

You can now edit the gallery from the normal view of your main page, just like you would edit any other aspect of your page.

Table Layout
The vertical  layout has one main table, inside of which is a table for each thumbnail image. That table has several cells - some spacer cells, and a cell to the right in which there is  another table, that holds yet another table - into which your Title and Description will go.  If you did not add a Title or Description when using the Wizard - that table will still exist.

Below is an image showing you how one of the thumbnail tables for the Vertical Layout looks (normal view).

Front Page's normal view of a table

I have now given the tables borders and a bit of cell spacing, so now you can see exactly how Front Page has created them. The blue bordered table is the main "holding" table, inside is a table for the thumbnails, and inside that table is another table for the text. There are also some spacer cells and cells for horizontal rules made by using JavaScript. I do not normally remove these borders, until I have altered the layout to my liking - it makes it so much easier to see which cell belongs to which table, when color coded.

Layout of Gallery Tables - with borders

These tables you can alter how you wish. Careful if you move the thumbnail that you don't lose the hyperlink to your larger image. If you do, then just right click on the image and select "hyperlink" and browse to where your larger image is.

You need to be aware of the JavaScript that is used - what it does, and how to change it if you want. The next section will deal with that.

Next: Code used in the Vertical Gallery

 
 
Try out the award-winning graphics software from Xara. Xara offers a graphics creation solution for all skill levels, from the template-based web graphics package Xara Webstyle, to the supremely fast illustration and photo composition tool Xara Xtreme. There’s also a dead easy NavBar & Menu creator and a nifty 3D screensaver maker. What they all have in common is a user interface your granny could use, and top quality graphics output... and a great value price.

Find out more