Customize Your Photo Albums


Web Photos Pro uses a skin (or template) to format your photo albums.

Web Photos Pro 1.0 comes with a choice of two great-looking skins – one with a white background, and one with a black background. (Future versions of Web Photos Pro will come with a wider variety of skins to choose from, as well as color schemes for each skin.)

If the built-in skins don’t look right for your site, don’t worry, creating a skin to match your existing web site is easy.

 

What is a skin?

A skin is comprised of HTML, CSS, skin-variables, and skin-controls. If you’re familiar with programming, or if you’ve created Movable Type templates, you’ll have no problem understanding how to build a Web Photos Pro skin.

All HTML and CSS in a skin is output directly, while the skin-variables and skin-controls output page specific information such as the page title, album name, image information, etc..

 

Where do I start?

The first place to start is to read the skins documentation.

If you’re still confused, the next place to visit is our online support forum. Here you can get help with any questions you might have.

If you’re still having problems, you might be interested in our Skin Design Service.

 

Customized Skin Design Service

We’ve had several people ask whether we will help design a custom skin. The answer is yes!

If you have an existing web site, we can help you create a set of web skins that will make your photo pages look exactly like your web site.

The basic charge for creating a set of three skins (Gallery skin, Album skin, and Image skin) for use with Web Photos Pro is $75*.

To create a set of six skins (Gallery skin, Album skin, Image skin, Find skin, EXIF skin and Error skin) for use with Web Photos Pro Server Edition is $100*.

* Payable via Paypal. These charges assume you have an existing web site, with a format that can be converted for use with Web Photos Pro. Programming or design changes will be charged extra, and will be agreed upon before work commences.

Designing A Custom Skin

What Is A Skin?

A “skin” (sometimes known as a “template"), is what Web Photos Pro uses to create your photo albums.

Web Photos Pro comes with two built-in skins, one with a white background, and one with a black background.

Web Photos Pro also makes it easy to create a skin that matches your existing web site. The following sections describe how to make your own skin. If you have any problems, please don’t hesitate to use our online support forums.

Overview

When you upload an album using Web Photos Pro, in addition to uploading your photos Web Photos Pro creates and uploads a complete web-based photo album(*). This web-based photo album is comprised of three different kinds of pages:
  1. A gallery web page (showing the cover photo for every album in the gallery).
  2. An album web page (showing a thumbnail of every photo in the album).
  3. Individual photo web pages (one for each photo in the album).
When Web Photos Pro builds these web pages, it uses what we call a “skin” (sometimes also refered to as a “template"). A skin consists of HTML and CSS that define how the page is structured and what colors and fonts are to be used, along with “skin-variables” and “skin-controls” (defined below).

Web Photos Pro has three built-in skins that it uses to build your web pages – 1) a gallery skin, 2) an album skin, and 3) an image skin.

These built-in skins create nice looking, but very basic, web pages. Simple colors, blue header bar with basic breadcrumbs, simple thumbnail and image display. No special features. No slide show. No opening of images in a separate window. Nothing fancy. (At least not yet, not in the first version of Web Photos Pro.)

We know they’re basic, and so we’ve made it easy for you to create your own skins, and override the built-in ones. Following the steps below you’ll be able to create web pages that look and act just the way you want them to; whether that means matching your existing web site, or adding javascript, server-side code, or slide show capabilities.

By the way, if you make something cool, and want to share it with other Web Photos Pro users, please let us know by posting a note to the Skin Examples section of our support forum.

*Note: This is not the case if you have Web Photos Pro Server Edition installed on your web server. When Web Photos Pro Server Edition is installed on your web server, gallery, album and photo web pages are generated dynamically, and so no static web pages need to be uploaded. But overriding the built-in skins works the same way whether or not you have Web Photos Pro Server Edition installed.

The Built-in Skins

The built-in skins produce web pages that look as follows:
  • Gallery Web Page (Using The Built-in Skin)

    (You can also view this example web page in your browser.)

    This skin consists of breadcrumbs in a blue header bar, showing a link (optional) to a weblog or other web page, and the title of the gallery. Under the header bar the gallery title is displayed, followed by the gallery description and date. In the body of the page, cover photos are displayed for each album in the gallery, along with the album title, description, date and number of photos. Below the cover photos are links to the (optional) RSS and PhotoRSS files for the gallery. And if a Copyright has been defined in the PhotoRSS preferences panel, that will also be displayed at the bottom of the page.

    Which gallery data is displayed – title, description, date, and number of photos – is controlled via the “Gallery HTML” section of the HTML Preferences panel.

    More details on the built-in gallery skin can be seen here.


  • Album Web Page (Using The Built-in Skin)

    (You can also view this example web page in your browser.)

    This skin consists of breadcrumbs in a blue header bar, showing a link (optional) to a weblog or other web page, a link to the gallery web page, and the title of the album. Under the header bar the album title is displayed, along with the album description, date and number of photos. In the body of the page, thumbnails for each photo in the album are displayed along with the photo title, description, date, etc. At the bottom of the page are links to the (optional) RSS and PhotoRSS files for the album. And if a Copyright has been defined in the PhotoRSS preferences panel, that will also be displayed at the bottom of the page.

    Which album data is displayed – title, description, date, dimensions, etc. – is controlled via the “Album HTML” section of the HTML Preferences panel.

    More details on the built-in album skin can be seen here.



  • Image Web Page (Using The Built-in Skin)

    (You can also view this example web page in your browser.)

    This skin consists of breadcrumbs in a blue header bar, showing a link (optional) to a weblog or other web page, a link to the gallery web page, a link to the album web page, and the title of the photo. Under the header bar Next/Album/Prev links support stepping backwards and forwards through the photos in the album. Below that is the photo title, along with the photo description, date, file name, etc. To the right is the photo. And if a Copyright has been defined in the PhotoRSS preferences panel, that will be displayed at the bottom of the page.

    Which image data is displayed – title, description, date, dimensions, etc. – is controlled via the “Image HTML” section of the HTML Preferences panel.

    More details on the built-in image skin can be seen here.


Anatomy of a Skin

Before building a new skin, you should familiarize yourself with the built-in skins. You can view the built-in skins for galleries, albums and images online.

A skin is comprised of HTML, CSS, skin-variables, and skin-controls.

All HTML and CSS in a skin is output directly, with no substitution, unless included in a <IFNOTEMPTY> tag (as explained below).

Skin-variables start and end with a $, e.g. $GALLERY_TITLE$, or $GALLERY_NUMALBUMS$, and they can be either data variables or format variables. Data variables are defined by Web Photos Pro and substituted into the skin as the web page is being generated. Format variables are defined by you, and are used to override the skin formatting options that are defined in the HTML Preferences panel.

Note: Each built-in skin has a large section in the middle that documents the data variables and format variables that are specific to that skin. Please refer to the individual skins (gallery, album, image) for more details.

There is one skin-control – “IFNOTEMPTY” – that can be used to hide or show text. The format of this control is:

    <IFNOTEMPTY $VARIABLE_NAME$>Sample text</IFNOTEMPTY>

If the value of the variable $VARIABLE_NAME$ is empty, the text between the beginning and ending tag (in this case “Sample text") is suppressed, otherwise the text is output.

Create Your Own Skins

To create your own skins, follow these steps:
  1. Copy The Built-In Skins To Your Computer

    You can view the gallery, album and image skins online, and save them as a text file on your computer (use “View Source” to get the html text from your browser).

    Or you can copy them directly from Web Photos Pro by opening the Preferences window, and selecting the HTML preferences panel. At the bottom of this panel is a button labeled “Copy Built-in Skins To Disk…” (see #5 in the screen shot below). Click this button, and Web Photos Pro will ask you where you want save a copy of the built-in skins onto your computer.

    Once saved onto your computer you can edit them with any text editor.


  2. Edit The Skins

    Open a skin with your favorite text editor, and change the HTML and CSS as much as you like. Match an existing site, create a new look, or add new functionality such as javascript or server-side code. Anything you can do in a web page you can do in a skin.

    Note 1: you do not need to override all three skins. For example, you might want to upgrade the image skin with slide show capabilities, but use the built-in gallery and album skins.

    After you have edited the skins, save them onto your computer. You will learn how to override the built-in skins in the next section.

    Note 2: you’ll notice there’s a big block of documentation in the middle of each of the built-in skins, inside an html comment block, just after the <body> tag. Feel free to remove that documentation when you create your own skin.

    If you need help editing your skins, please post a note on our Skins Questions forum so we can help you.

  3. Override The Built-in Skins

    In the HTML Preferences panel are three sections (see the screen shot above), labeled “Gallery HTML", “Album HTML” and “Image HTML".

    In the “Gallery HTML” section you will see a checkbox labeled “Use my Gallery skin…” (see #1 in the screen shot above), and similar checkboxes in the “Album HTML” and “Image HTML” sections.

    Click the “Use my Gallery skin…” checkbox. A button labeled “Select…” will be shown, along with an empty field to its right (see #2 in the screen shot above). Click the “Select…” button, and select the gallery skin that you created. After selecting the override skin file, the path to the skin will be shown in the field.

    Do the same for your album and image skins (see #3 and #4 in the screen shot above).

    Note: you do not need to override all three skins. For example, you might want to upgrade the image skin with slide show capabilities, but continue using the built-in gallery and album skins.

    To stop using a skin override, simply click the “Use my Gallery skin…” checkbox (see #1 in the screen shot above). This will remove the check mark, hide the “Select…” button and field, and cancel your override.

  4. Test Your Skins

    After you’ve overriden one or more of the built-in skins, you will want to test them to make sure they work correctly.

    My recommendation would be to create a new web gallery that uploads to a /test_skins/ directory on your web server. Then, create a test album with one or two photos, and upload it to this test web gallery. View the gallery, album and image web pages in your browser to see how they look. If they look ok, try uploading a larger album, one with 10 or more photos.

    If uploading is slow (e.g. you’re on a modem), you can use “Save Album To Disk”, output the test album to a directory on your computer, and then open the web pages in your browser. One problem with this method is that the <img> source hrefs will be coded to work from your web server rather than your hard disk, and so no photos will show in your browesr. But, you will be able to see what the pages look like, and by viewing the html source you will be able to tell whether your skin-variables were substituted properly, etc.

  5. Upload An Album Using The New Skins

    Once you have debugged all the skins you are overriding, you will want to re-upload your albums.

    You can do this in one of two ways:

    1. Start From Scratch Using an ftp client, remove all of the albums that you have already uploaded from your web server. Then use “Upload All Albums” (in the List of Albums “Albums” menu) to upload all of your albums again.
    2. One Album At A Time Option-click the “Upload” button in the List of Albums window. This will bring up a dialog allowing you to force the HTML for that album to be re-generated and re-uploaded.

  6. View The Uploaded Album(s) In Your Browser

    And make sure they look and work as you expect them to.

Finally, it’s worth repeating what was said above: If you make something cool, and want to share it with other Web Photos Pro users, please post a note to the Skin Examples section of our support forum.


---