Layout Authoring Guide

Introduction

FotoBilder's style system is S2, which you can read more about here. Though that documentation is LiveJournal-centric and perhaps a little dated, it should illustrate the concepts.

Terminology

A style in S2 is the combinations of all the user's selected layers put together. This guide talks about writing the layout layer (or simply layout), but we may interchangeably call it a style, as you should be designing your layout to accomodate language, theme, and user layers easily, so the end result from your layout will be an infinite number of styles.

Focus

This guide lays down the suggestions and requirements to have a layout layer accepted into the FotoBilder core code, for use by others.

For Designers...

Before starting to design a layout, keep in mind the following:

• Copyrighted material - You may not clone copyrighted designs or use copyrighted images. All designs and graphics must be original works, or freely available under a suitable license for redistribution under a BSD-style license.
• Management links - All pictures pages and gallery pages should provide a link back to respective management URL, either with an icon or the recommended word "Manage". This link must only be visible if the remote user is logged in, so be sure your design looks good with it there or not.
• Action links - In addition to the management link, there are other action links that can optionally show up, such as a "Take Picture/Gallery" link which enables the viewing user to take the picture/gallery into their own collection, if the hosting user permits it. Accomodate space for this in your design.
• Navigation:
  • From a picture page with an associated gallery, it should be possible to go the previous and next picture in the gallery. Picture pages can also be viewed alone, without an associated gallery, in which case the design must work well without them.
  • Galleries can have one or more parents. At minimum, a gallery is under the index page, but galleries can also exist under multiple parent galleries. There should be at least "Parent/Up" link on a gallery page. The complete list of parent links can be included if space & design permits.
  • It should be possible to get to all galleries using your layout. Either the index page needs to show a complete tree of all galleries and their nesting (which may be big!) or the index page needs to only show the top level, letting the gallery pages show child galleries.
  • The index page should permit at minimum seeing both 1) the top level of the gallery list alphabetically and 2) the n most recently updated galleries. As such, your design should accomodate viewing the gallery list in different ways. For example: with the recently updated galleries list, you should include the date updated. For an alphabetic list, that's probably just clutter.
• Titles & Descriptions: the design should allow for a title and description for pictures. However, some styles may not have room for both. At minimum, the picture's title should be shown.

For implementors...

This is for programmers writing the S2 code to make a layout layer.

• Text Abstraction - All text in the layout should be easily overridable either in properties or by functions. The latter is required when the text changes based on a number. Example: "1 picture", "2 pictures". In that case, you can't use a property for the word "picture" and a property for the letter "s". Not all languages work like that. Further, text properties should never be fragments of a sentence. A good text property would be "No pictuures in this gallery." However, first make sure that the core layer doesn't already provide such a string. By utilizing the text functions and properties in the core, you make less work for the translators, who would otherwise have to duplicate their work for both the the core and your layout.
• Properties - The more properties you expose to the user layer, the better. However, keep them clear in purpose and grouped nicely. Some specific properties you'll want:
  • Colors: background, foreground, text, emphasis, shading, etc. However, don't go overboard. If possible, calculate some of your colors dynamically based on other colors, using the Color class's brighten, darken, inverse, and average methods.
  • Images: images should be interchangable, where possible.
  • Index Page behavior: the user should be able to select how the index page displays by default, showing most recently updated galleries, top layer sorted alphabetically, or otherwise.
• Palette modified images - Any image you use in your theme should be indexed (uses a palette), so it can be dynamically resent with a different palette to match the color theme. This rules out use of JPEGs. PNG files are recommended, though only with binary transparency. GIFs are also okay. The palimg_create() function will return an palette-modified Image object.