Design Management: Photo Albums

Design Management: Photo Albums

This guide will help you to manage the Photo Albums module design. Note, that you need to have some HTML skills. If you have any doubts, it’s better to request for a help.

The following templates are used to display all the module pages:

The PDA/Mobile version (if enabled) also has its own templates:

Each template has its own set of variables. They can be used differently and display different information. You can always check the list of variables available for the template by pressing the button shown on the image below:

Photo album main page

The main page consists of the thumbnails list. За отображение перечня отвечает переменная $BODY$. The $BODY$ variable is used to display the list. The number of entries displayed in the list can be set by the Number of posts displayed option.

By using the $PAGE_SELECTOR$ variable (page switcher), you can grant an option to view all the added posts from the main page.

If you are using sections or categories, then the $CATEGORIES$ variable will display them anywhere on a template. The variable will display the list of section and categories, that are placed into the root (no nesting into sections). If you want to change the design for categories or sections, you’d need to change the Design / Sections and categories settings.

It’s not possible to display the sorting menu and filters on the main page.

Section photos page

This page displays the list of the photos added into a section. The $BODY$ variable is used to display them. This template won’t be used, if no section was previously added.

The $PAGE_SELECTOR$ variable will display the page switcher buttons and the $CATEGORIES$ variable will display the list of categories listed into a section.

It’s possible to display the sorting menu on the main page by using the $SORTING_MENU$. You’ll be able to edit the menu design with the Design / Sorting menu options.

The $FILTER1_MENU$ and $FILTER2_MENU$ variables are used to display the filter lists

The section information is disaplyed with the $SECTION_NAME$, $SECTION_DESCR$ and $SECTION_URL$ variables. The values for these variables are set during the sections creating process.

Page listing album photos

The page with the categories list is always in use, since it's not possible to add a post into a catalog without a category.

The $BODY$, $PAGE_SELECTOR$, $SORTING_MENU$, $FILTER1_MENU$, variables are used for categories as well.

The $CATEGORIES$ variable is not used, since categories can't be nested into another categories.

Use the $SECTION_NAME$, $SECTION_DESCR$, $SECTION_URL$ variables to display the information about parent section.

The categories information is disaplyed with the $CAT_NAME$, $CAT_DESCR$ and $CAT_URL$ variables. The values for these variables are set during the categories creating process.

Page with a full-sized photo and comments

This template contains the information added when uploading a photo, for example: a short description, a name, filters or additional fields. Each field has its own variable, that can be placed anywhere within the template.

If the Commenting option was activated when creating a post, then the commenting form will be displayed. Go to the DesignEditorCommenting if you need to edit the commenting form.

Here are some unique codes, available for the Photo Albums module:

  • $FULL_PHOTO_DIRECT_URL$. A direct link to the file with a full size photo (if its size exceeds 500x500).
  • $FULL_PHOTO_URL$. A direct link to the page with a real size photo (if its size exceeds 500x500).
  • $NEAR_PHOTOS$. Thumbnails with the capability of quick switching

  • $OTHER_PHOTOS$. Links to other photos in the current album

  • $PHOTO_DESCR$, $PHOTO_NAME$, $PHOTO_NAME$. Description, name и and a direct link to a photo.
  • $PHOTO_SIZE$. A photo size in Px.
  • $PHOTO_WEIGHT$. A photo size in Kb.
  • $SLIDESHOW$. A photo slideshow (Flash).

  • $SLIDESHOW_BUTTON$. A button that opens photo slideshow.
  • $THUMBNAIL_URL$. A direct link to a thumbnail file.

Appearance of photo entries

The Appearance of entries template is used to display photos in the lists. In accordance to the design set, all the added photos are added to the $BODY$ variable, which is used in the following templates:

  • Module main page
  • Page with section/categories contents
  • Page with search results and entries rating

Any photo field can be placed into the Appearance of photo entries template.

Page with photo rating and search results

The Page with photo rating and search results template is used to display multiple types of pages: search page, rating page, user’s photos page.

The page with search results is the page where user’s search requests results are displayed as images (the Appearance of entries template). To get to this page a user must enter a request into the module’s search form (the $MODULE_SEARCH_FORM$ variable). The $SECTION_NAME$ variable will be used for the search results.

The page with entries rating displays the list of photos, sorted by rating, number of views or comments. A user should use one of the following variables to get to this page:

  • $TOP_COMMS_URL$ — link to entries TOP, sorted by comments
  • $TOP_NEW_URL$ — link to entries TOP, sorted by addition date
  • $TOP_RATING_URL$ — link to entries TOP, sorted by rating
  • $TOP_READS_URL$ — link to the entries TOP, sorted by views

The User’s photos page displays the list of photos added by the user. This page can be opened from the user’s profile, where the $_PHOTO_ACTIVITY_URL$ (link to user's activity page in Photo Album) and $_PHOTO_ENTRIES$ (number of Photo Album posts).

The $BODY$ varible is used to display the photos. The $PAGE_SELECTOR$ variable is used for the page selectors.

Entry adding/editing page

The main content of the page is the adding form. You can set its design with the set of fields specified in the module’s settings. All the form’s fields are displayed with the $BODY$ variable:

Private album login page

You can set the private attribute for an album (category) when creating/editing one:

Once a password is set, users will see the following page:

The password field is displayed by the $BODY$ variable. You can add any additional information beforeand after the field. It can be a text or a link to other site modules, that might be usefull to a user who doesn't know a password.

Photo page in a pop-up window

The template is used, when the Use the LightBox feature in categories feature is activated and the Gallery type is set to the New, and the Display the photo page in Lightbox is turned on:

Now when you click on a photo in the list, a detailed information about it is displayed in a pop-up window:

You can design such a window to your taste, by using variables available.

Style sheet (CSS)

The Photo Album module has its own CSS file, that is activated automatically. This file is only used within the Photo Album module. This way you can set the styles for the Photo Album module only and not worrying about other website modules, their display and upload speed, etc..

A clear CSS code is used for this template, no HTML.

Another specific of this template is that there are no variables available.

We suggest to create a design backup copy before making any changes, so that you can go back to a previous design, if necessary.

Use the Restore the default template option, in case you’d like to undo all the changes and go back to the standard design:

Design Management: Photo Albums