Customising the feature page

Availability

XS version 24 or later

Related articles

Gallery management

Infradox XS tags, functions and conditions

Building a custom footer

Custom pages

Adding Custom CSS

Adding Javascript to your pages

XS Widgets

Introduction

The feature page is a special representation of galleries that have been configured as so called features in the gallery manager. The page is used to view e.g. photo stories. To enable it on your website, you'll have to save the template first because it is available as a custom page only. Once it is saved, you can modify the template to meet your requirements if you wish.

Prerequisites

You must have a solid understanding of javascript, HTML and CSS if you want to change the template. Xpertise-ICT can be contracted to make changes for you, or you can find other skilled web developers to make the changes for you. Please read the article about the Infradox XS tags, functions and conditions first. 

Activating the feature page

Go to the editor (Site configuration, Code editor) and change the drop down at the top of the page to Features page 1 html. The editor will be blank the first time you do this. Click on Load example to open a dialog that lists the current sample templates. Click the radio button next to the template name featurepage-1.txt and then click the Use code button at the bottom of the dialog. You'll see the code appear in the editor. Click Save at the bottom of the editor. You can now use the default feature page on your website.

How to see what the feature page looks like without changing gallery settings

If you want to see what the default feature page looks like without having to change the settings in the gallery manager, just go to any normal gallery. The feature page is used if the url has the layout 4 parameter. So, in the address bar of your browser just change the url of the gallery that you are viewing so that it includes this parameter -  and press enter.

For example, if the url below is showing in your address bar

http://www.mywebsite.com/gallery/infradox/1336/1341/578/0/summerflowers.html

Change it to

http://www.mywebsite.com/gallery/infradox/1336/1341/578/4/summerflowers.html

Note that the 4th number must be 4 to activate the feature page layout.

Making galleries appear as features 

To be displayed with the feature page layout, galleries must be part of a root level that is configured with the "Features" style. To change this setting, open the Gallery manager from the administrator toolbar, find the level that you want to change and click on it. Then click on "edit level" to see the properties and change the "Top level root style" dropdown to Features. Scroll down (if you don't see the Save button) and click Save. 

New galleries that are part of a Features root level, will always have the settings Display as gallery and Feature page layout. You can not change this. Groups that are part of a Features root level can be used to e.g. display all features (photo stories) from a single photographer. This is why it may be a good idea to create separate groups for each photographer that has features, as opposed to creating feature galleries with files from different photographers in the same group.

Note that the first photo in a gallery is displayed as the main image when the feature page loads. Not the index thumbnail. You can rearrange the order of display with drag & drop in the gallery manager. If you want the index thumbnail to be the same as the main image, then make sure that the first image in the gallery is the same as the one that you have selected as the index thumbnail.

The primary idea behind the feature layout, is to display text. The feature text is entered in the Description box when you are creating/editing a gallery. The gallery text is displayed in columns across the page. The first column will show and the main image is displayed next to it (you configure the width and height of the columns with the feature page widget, which is explained further down). If there's more text than fits one column, a link appears to display the full text (i.e. the rest of the columns).

Tags that you can use on this page

<?xs widget('featurepage',{maxh:500,fade:400,colw:300,colh:400,mdw:0,mdkw:1,onclick:2,buttons:previewbuttons}) ?>

<?xs gallery('description',{maxlen:30,cutword:0,case:capital}) ?>

<?xs gallery('titletrail') ?>

<?xs gallery('filecount') ?>

<?xs print('1:files','2:bestanden') ?> 

The feature page tag

<?xs widget('featurepage',{maxh:500,fade:400,colw:300,colh:400,mdw:0,mdkw:1,onclick:2,buttons:previewbuttons}) ?>

is used to configure how the page looks and functions and it should exist at the top of the page, underneath the menu tag.

Furthermore, the page requires a number of divs for the layout. The height of the inner container (featureinnerwrapper) is 520 pixels. This height is important because it affects the height of anything inside the container. If you want to change this height then you must override it with css. While you're developing, you can add the CSS at the top of the features page. For example:

#featureinnerwrapper {
    height: 585px;
}

Inside the container featureinnerwrapper, there's a container with the id xs_featurecontainer. This container will automatically get the width and height of its parent container.

 

  • maxh
    This parameter is used to set the maximum height of the container. 
  • colw
    The full text of the gallery/photo story is displayed in columns across the screen. This parameter is used to set the width of each column. 
  • fade
    This value affects how fast one image fades to the next when browsing the photos. Change its value to 0 to disable fading in and out.
  • mdkw
    1 to display the file's keywords inside the metadata column, if you use the value 0 - then the keywords will be inserted in the div xs_filekeywords. If you don't want photo keywords to display at all then you can make xs_filekeywords hidden in css (display:none).
  • onclick
    if this property has a value of 1, then clicking the larger image will take you to the normal preview page for that image.
    Use the value 2 (which is the default) to change to the next image within the feature page view instead.
  • buttons
    This is the class name of the div where the buttons for add to lightbox etc will appear. The default template uses the class name previewbuttons. If you don't want to show the buttons then remove buttons:previewbuttons from the widget.

 

Have more questions? Submit a request

0 Comments

Article is closed for comments.
Powered by Zendesk