Custom page footer

The page footer is automatically included at the bottom of your website’s client facing pages. The default footer has links to selected galleries and/or groups and to website pages that you have configured via Site configuration, Pages and menu. This article describes how you can create your own custom footer.

Recommended reading: Using the Code editor, Infradox XS customisation, Creating a custom Home page.

Building your custom footer

Go to Site configuration and click on Code editor. Next choose Page footer HTML in the dropdown box at the top of the page. If there’s no custom HTML yet, then the editor will be empty. If a custom footer already exists, the code will be displayed and you can see who last changed it and when. Click on the revision link to view and/or restore previous versions of the code. A maximum of 50 revisions can be stored.

Embedding CSS in your custom footer

You can embed CSS in the code that you enter for your footer while you are developing and testing. When you are done you should remove the CSS from the footer and you should put it in the Custom CSS instead. To embed CSS in the footer use the

tags at the top of the code. For example:

<style>
    .sitemap {
        border:1px solid red;
    }
</style>

HTML

It is best to use the classes that already exist. Use a browser with developer extensions installed (we recommend Chrome) so that you can inspect the elements used by the standard footer. You can also click “view page source” to see what the standard footer looks like while browsing your website in a separate window. If you leave the Enable footer HTML box unticked, you can still see what your custom footer will look like by using the url:

www.mywebsite.com/home/develop (replace www.mywebsite.com with the name of your website).

Example footer HTML:

<div class="sitemap">
     <div class="column left column1">
          <h3><?xs locale('pag_galleriestitle') ?></h3>
     </div>
     <div class="column column2">
          Some html here
     </div>
     <div class="column column3">
          Some more html here
     </div>
</div>

In the above example, the tag

<?xs locale('pag_galleriestitle') ?>

is used to output the title for the current language as specified via Site configuration, Pages and menu. This way, if you change this value in the repository your website will display the correct value everywhere automatically. You can however use normal text instead of repository tags.
For example

<h3>My galleries</h3> 
instead of 
<h3><?xs locale('pag_galleriestitle') ?></h3>

Displaying the list of galleries

To display the galleries (as on the standard footer) you can use the tag

<?xs gallerymenulist() ?>

For example:

<div class="sitemap">
     <div class="column left column1">
          <h3><?xs locale('pag_galleriestitle') ?></h3>
          <ul class="categories">
          <?xs gallerymenulist() ?>
          </ul>
     </div>
     <div class="column column2">
          Some html here
     </div>
     <div class="column column3">
          Some more html here
     </div>
</div>

The tag outputs list items, so you should put the tag between ul HTML tags.

Displaying links but only if the user is not logged in

If you want to display links to a password reminder page and/or the register page in the footer – but only for user who are not signed in – then you can use conditional tags. For example:

<div class="sitemap">
     <div class="column left column1">
          <h3><?xs locale('pag_galleriestitle') ?></h3>
     </div>
     <div class="column column2">
          <h3><?xs locale('pag_myaccounttitle') ?></h3>
         <ul>
<?xs if guest {
          <li><a href="/forgot-your-password"><?xs locale('loc_fpass') ?></a></li>
          <li><a href="/register"><?xs locale('loc_register') ?></a></li>
} ?>
          </ul>
     </div>
     <div class="column column3">
          Some more html here
     </div>
</div>

Likewise, you can also display HTML only if the user is logged in, for example:

<?xs if not guest {
      this only shows if the user is logged in
} ?>

You can find more information about the conditions in the article about building a custom home page.

Using SQL in your page footer

If you want to display information stored in the database, for example a list of contributors, then you can use the SQL widget. This is explained in detail in the article Using SQL in your pages.

What if I don’t want a footer at all?

If you do not want to make use of a footer at all, then simply enable the Custom footer HTML and leave the code editor empty.