View Larger Image

Infradox XS customisation

Infradox XS websites can be customised with back office settings and tools. Further-going customisation can be achieved with CSS, Javascript/JQuery and the built-in Infradox coding language.

If you want to start working on advanced customisations with the code editor, you will need to have experience with at least CSS and HTML, possibly with Javascript and JQuery. And you’ll need to familiarise yourself with the Infradox coding language – which uses XS tags, functions and condition blocks. The level of experience that is required depends on what you want to achieve. You can of course contract Xpertise or any 3rd party developer to do the work for you.

Develop mode and Production mode

Enable develop mode when you are making website changes with the code editor. To do this;

Before 31.4: go to Site configuration, Website configuration, and select the Develop mode radio button at the top of the page. Then save your changes at the bottom of the page.
Version 31.4 or later: go to the Code editor and click the ‘mode’ button at the top of the page.

When in develop mode, caching functions are disabled. Once you are done, remember to switch back to production mode.

General information, syntax and indentation

The custom pages are built with normal HTML and CSS, and you can use several Infradox XS tags and conditions.

Infradox XS tags start with <?xs and end with ?>

With regards to the Infradox tags and conditions:

tags and conditions must be in lower case
tags and conditions must use the exact syntax, error checking is mimimal
widget tags must be on their own line, other tags can be used anywhere and on the same line too
condition opening tags must be on their own line and condition closing tags must be on their own line as well
conditions must be properly nested

Code indentation

If you need support from Xpertise/Infradox in case there are problems with your custom page, then it is very important that you have used proper indentation (with tabs) and white space so that your code is easy to read. For example:

<div id="pagewrapper"><!--?xs html('mainmenutop.inc') ?-->
<div id="contentwrapper">Your html goes here....</div>
</div>

and not something like this:

<div id="pagewrapper"><!--?xs html('mainmenutop.inc') ?-->
<div id="contentwrapper">Your html goes here....</div>
</div>

Availability of tags

Most tags can be used on any of the pages that you can edit with the built-in code editor, but some tags can be used on certain pages only. For example, the gallery related tags can be used on the gallery related pages only. Have a look at for example the article about building the Features page, or about the Contributor pages for further information.

Embedding CSS in your pages

While you are developing a custom page, you can embed CSS in the template itself with the <style></style> tags (see below) – so that you won’t have to switch between the page HTML editor and the Custom CSS editor. Once you’re done however, you should remove the CSS from the page, and you should then insert it in the Custom CSS template. You should avoid the use of inline CSS.

It is recommended that you also read the article Using custom CSS.

Note that although XS allows to be logged in on a single computer only, you can open the editor with the CSS template in one browser tab, and an editor with the HTML template you are working on in another browser tab.

If you have a development server that is publicly accessible, you can also consider editing a CSS file on your own server and including that file by adding it to the Infradox includes file (in the code editor). You can then make changes to your local file without having to use the editor. Once you are done testing, you can either paste your CSS in the code editor’s CSS file, or you can upload it to the web server (after which you’ll of course have to change the includes file again.

It is important to write specific CSS. XS has administrator/staff member functions that are integrated in the client facing pages or appear on top of client facing pages. If your CSS isn’t specific enough you may break such functions. By writing CSS for specific pages only, you can prevent such problems. For example, the home page body has the body id “home“, use this to create CSS rules that only affect the home page and no other pages. To test your CSS you can add the following to the top of the page.


<style>
#home .someclass {<br />
        width:100%;<br />
        float:left;<br />
        position: absolute;<br />
        top: 300px;<br />
        z-index: 1000;<br />
        height: auto;<br />
}<br />
</style>

Conditions

The Infradox XS condition tags are used to include or exclude page fragments depending on a condition.

Note that the opening and closing tags must be on their own separate lines, the rest goes on the lines in between. Have a look at the guest conditions below:

<!--?xs if guest { ... } ?-->

<!--?xs if not guest { ... } ?-->

The HTML between the { and } will be included if the condition is true. As an example, if you want to display a link but only if the user is not logged in, then you can insert the following code in the template:

<!--?xs if guest {<br ?--> <a href="/register">Click here to register</a> or <a href="/loginpage">click here to log in</a>
} ?>

You can also use a NOT condition, e.g.

<!--?xs if not guest {<br ?--> <a href="/logout">Click here to log out</a>
} ?>

The order in which you use conditions is important

Infradox XS uses a preparser and a parsed strings cache to considerably improve website performance. Parsed strings (page fragments) are stored for users, guests, admins and so on separately – as well as localised versions for each fragment. This is why the order in which you use conditions is important. Consider the following example:

<!--?xs if page('searchresults') {<br ?--> <!--?xs if not guest {</p>
<li><a class="loggedin bulkaction lightbox" href="#" title="<?xs constant('cBulkbtntolightbox','') ?-->"><!--?xs constant('cBulkbtntolightbox','','1') ?-->
<ul>
 	<li></li>
</ul>
 

} ?>
} ?>

<!--?xs if page('sharedlightbox') {<br ?--> <!--?xs if not guest {</p>
<li><a class="loggedin bulkaction lightbox" href="#" title="<?xs constant(cBulkbtntolightbox,'') ?-->"><!--?xs constant('cBulkbtntolightbox','','1') ?-->
<ul>
 	<li></li>
</ul>
 

} ?>
} ?>

The cached version of the above code for guests (visitors who are not logged in) will look like this (the code that is not for guests is gone after parsing):

<!--?xs if page('searchresults') { } ?-->

<!--?xs if page('sharedlightbox') { } ?-->

The above example shows that there are now two conditions left that will never be true if the user is a guest. So the code should be changed to the much more efficient code below:

<!--?xs if not guest {<br ?--> <!--?xs if page('searchresults') {</p>
<li><a class="loggedin bulkaction lightbox" href="#" title="<?xs constant('cBulkbtntolightbox','') ?-->"><!--?xs constant('cBulkbtntolightbox','','1') ?-->
<ul>
 	<li></li>
</ul>
 

} ?>

<!--?xs if page('sharedlightbox') {</p>
<li><a class="loggedin bulkaction lightbox" href="#" title="<?xs constant(cBulkbtntolightbox,'') ?-->"><!--?xs constant('cBulkbtntolightbox','','1') ?-->
<ul>
 	<li></li>
</ul>
 

} ?>
}?>

Subdomain conditions

You can use the subdomain conditions to include or exclude html or other elements depending on the active subdomain. For example:

<!--?xs if subdomain(0) { NO subdomain active } ?-->

<!--?xs if not subdomain(0) { one of my subdomains is active } ?-->

<!--?xs if subdomain(11) { subdomain with id 11 is active } ?-->

<!--?xs if not subdomain(11) { subdomain with id 11 is currently not active } ?-->

More information about dynamic subdomains can be found here. Also, have a look at the <?xs session() ?> tag further down.

Website configuration conditions

<!--?xs if config('xsp_searchpos==1') { // do this is the search function setting is 1 } ?-->

Search related conditions

You can use the below conditions to test for search related conditions.
The conditions can also be used with the NOT operator.
For example

<!--?xs if not search('userfilteractive') { ... } ?-->

<!--?xs if search('userfilteractive') { ... } ?-->

Include fragment if the user’s results were filtered.

<!--?xs if search('lastsearchvalue') { ... } ?-->

The user did search at least once

<!--?xs if search('truncated') { ... } ?-->

The search results were truncated to the maximum number of results

<!--?xs if search('latest') { ... } ?-->

The search results are retrieved with the “Latest” command (e.g. www.mysite.com/latest)

<!--?xs if search('suppbrowsing') { ... } ?-->

The search results were retrieved with a command that retrieves all files for a specific contributor/supplier

<!--?xs if search('match') { ... } ?-->

The executed search command retrieved one or more results (i.e. files were found)

Other user related conditions

You can use the following conditions to include or exclude code fragments depending on the user’s permissions:

<!--?xs if sharedlightbox {<br ?--> // the user has accessed a shared lightbox and,
// his condition can be used to display a button so the user can return to this lightbox at all times
// see custom toolbars for examples of use
// note that this is not the same as <!--?xs if page('sharedlightbox') { ...true if viewing a shared lightbox... } ?-->
} ?>
<!--?xs if previewunmarked { // user has access to unmarked comping images } ?-->
<!--?xs if ordersystem { // user is logged in and the order system is enabled } ?-->
<!--?xs if supplierupload { // logged in as contributor with upload permissions } ?-->
<!--?xs if suppliereditor { // logged in as contributor with permissions to edit own content (metadata) } ?-->
<!--?xs if administrator { // logged in with administrator permissions } ?-->
<!--?xs if jurymember { // contest module and user is jury member } ?-->
<!--?xs if contestresults { // contest module and user may view contest results } ?-->

Server conditions

You can include or exclude code fragments depending on the values of server variables (more below). You can use == and <> to test the variable.

<!--?xs if server('variablename==1') { // print if variable has a value equal to 1 } ?-->

<!--?xs if server('variablename<>1') {<br ?--> // print if variable does not have a value equal to 1
} ?>

Important: you can’t use the NOT keyword for server variables, see below.

<!--?xs if not server('test==1') { // this will cause an error, you can't use NOT for server variable based conditions } ?-->
<!--?xs if server('test<>1') {<br ?--> // but this is possible
} ?>

To use the value of a custom variable in a server condition, the variable name must start with an underscore:

<!--?xs if server('_test==1') { // the custom (session) variable has a value of 1 } ?-->
<!--?xs if server('_test<>1') {<br ?--> // the custom (session) variable does not have a value equal to 1
} ?>

All the custom templates have a unique XST id that you can use in your templates to include/exclude html or script depending on the active page. For example:

<!--?xs if server('xst==1') {<br ?--> <script>alert('you are on the home page')</script>
} ?>

There’s an overview of all the page/template id’s further down in this article.

Module conditions

Locale conditions

You can also use a condition to e.g. display HTML depending on the select website language. This condition requires the locale id as its parameter. For example:

<!--?xs if locale('1') { This is language number one } ?-->

 

or

<!--?xs if not locale('1') { This is not language one } ?-->

Contributor profile page conditions

There’s a number of conditions that you can use on the profile pages to allow your contributors to change what shows on their page.

For example

<!--?xs if contributor('latestuploadswidget') {</p>
<ul class="hideifempty latestthumbs" id="latestthumbs">
     <?xs widget('latestthumbnail', {htmllist:1,supplierid:"contributorid",max:5,thumbsize:1,containerid:"latestthumbs",backgroundimg:1,url:"preview"}) ?-->

} ?>

For more information about developing the contributor profile pages, please read setting up the contributor pages.

Constants

You can output the string value of the server side constants with the <?xs constant(‘name’,’file’) ?> tag. Where ‘name’ is the name of the constant and ‘file’ is the name of the file that contains the constant. For example <?xs constant(‘cItemsTotal’,’orders’) ?>

‘File’ may be empty for the default constants file. For example <?xs constant(‘cClose’,”) ?>

The constant tag outputs the localised constant depending on the active user interface language.

Variables – var()

There are two types of variables that you can use in your code, i.e. server variables (not persisted) and session variables. Session variables have names that start with an underscore.
You can print the value of either type variables with the <?xs var(‘variablename’) ?> tag. For example:

<!--?xs var('somevariable') ?-->

The above tag will output whatever value the server variable somevariable has.

<!--?xs var('somevariable',{replaceparams:1=Disable,default=Enable}) ?-->

The above example uses the replaceparams parameter to output the text Disable if the server variable somevariable has a value of 1, or else it will output the text Enable.

<!--?xs var('somevariable',{replaceparams:default=unknown}) ?-->

The above example uses the replaceparams parameter to output the value of the server variable somevariable, and it will output ‘unknown’ if the variable is blank/has no value.

If you want to test for a value that is contained in a variable, then you can use containsreplace instead. For example, if variable somevariable has ABCDE and you use containsreplace:C=checked then the output will be “checked” (because C is in ABCDE).

<!--?xs var('somevariable',{containsreplace:RM=checked}) ?-->

XS Build number

To get the buildnumber (to add to script tags) use <?xs var(‘includebuild’) ?>

Also see the session() tag below for access to certain variables.

Also see the explanation of the server() condition above, that can be used to include or exclude code fragments depending on a server variable value.

<!--?xs if server('somevariable==1') { // include this } ?-->

Repository properties – rproperty()

The rproperty tag can be used to output a value that is stored in the repository.

<!--?xs rproperty('xsp_searchpos','0') ?-->

Contact details

The contact details (Site configuration, General Settings) can be output with the following tags:

<!--?xs rproperty('ts_copyright') ?--> Website Copyright

<!--?xs rproperty('ts_credit') ?--> Website Credit

<!--?xs rproperty('ts_email') ?--> Website main e-mail address

<!--?xs rproperty('ts_phone') ?--> Website main phone number

<!--?xs rproperty('ts_fax') ?--> Website main fax number

For information re localised properties, scroll down to the section about Localised tags.

Search data – search()

<!--?xs search('fieldname',{options}) ?--> // replace fieldname with valid property, e.g. 'lastsearchvalue'

Examples/fields that you can use with this tag:

<!--?xs search('lastsearchvalue') ?--> outputs what the user last searched for, for display purposes
<!--?xs search('lastsearchquery') ?--> outputs what the user last searched for, the executed query
<!--?xs search('lastsearchmatchcount') ?--> outputs the number of found files
<!--?xs search('lastsearchmatchtrunc') ?--> outputs the truncated number of found files e.g. 5,000 of 200,000 files
<!--?xs search('lastsearchpagetitle') ?--> outputs the title for the last search or browse results
<!--?xs search('lastsearchprops') ?--> outputs a json record for use in your script

User and session data – session()

<?xs session(‘fieldname’,{options}) ?>

Examples:

<!--?xs session('username') ?-->

<!--?xs session('usersuppliername',{urlmode:1}) ?-->

Some examples of fields that you can use with the session tag:

<!--?xs session('guest') ?--> outputs 1 if not logged in, or 0 if logged in (also see below)
<!--?xs session('localeid') ?--> outputs the active locale (e.g. 1 for English, 2 for Dutch, 3 for French etc)
<!--?xs session('sessionid') ?--> the user's session id
<!--?xs session('userid') ?--> the id of the logged in user or 0 if not logged in
<!--?xs session('username') ?--> the logged in user's display name / full name
<!--?xs session('userfirstname') ?--> the logged in user's first name
<!--?xs session('userlastname') ?--> the logged in user's last name
<!--?xs session('userorgname') ?--> the logged in user's organisation name
<!--?xs session('usersuppliercode') ?--> the supplier code of the logged in user with supplier permissions
<!--?xs session('usersuppliername') ?--> the supplier's name
<!--?xs session('cartid') ?--> the id of the user's cart
<!--?xs session('cartcount') ?--> number of items in the cart
<!--?xs session('subdomainname') ?--> the name of the active subdomain or blank if no subdomain is active
<!--?xs session('subdomainid') ?--> the id of the active subdomain or 0 if no subdomain is active

The session(‘guest’) tag can also be used to output text (e.g. a class name). For example:

<a class="<?xs session(guest,'needlogin','loggedin') ?> downloadpdf" href="#">PDF</a>

The above tag outputs the text needlogin if not logged in, or else the text loggedin. The Infradox script library uses the classes needlogin and loggedin to attach handlers to all links that require one to be logged in. By default such links will then display the log in dialog if a guest user (someone who is not logged in) clicks on a link that requires one to be logged in.

Below are some more user related fields that you can use:

userpricecalc > the active price calculator option
userpayforpermissions > 1=user must pay to enable permissions
userunmarked > 1=user has permissions for comps without watermarks
usercurrency > the user’s currency, e.g. EUR
userhasdisc > the user has a discount
userdiscperc > the user’s discount percentage
userhiderfprices > 1=hide prices for RF files for this user
userip > the user’s IP address
useripcountry > the country of the user’s IP address
userterritoryid > the id of the user’s country
userisagent > 1=the user is an agent
userdownloaddirect > 1=the user has “download direct” permissions
userbrowser > the user’s browser
useros > the user’s operating system
userdlmax > the user has download permissions and there’s a max number of downloads configured
userdlmaxdays > the number of days for above, e.g. max 100 downloads in 30 days
userdlcount > the number of downloads already used in “userdlmaxdays”

The fields usersuppliercode and usersuppliername will only output data if the logged in user is a supplier/contributor. You can for instance use these fields to create a url to the user’s profile page, e.g.

<a href="/contributor/<?xs session('usersuppliercode') ?>/<?xs session('usersuppliername',{urlmode:1}) ?>.html">Go to your profile page</a>

You can use the subdomain variables for instance to change colors by applying special classes to HTML elements.

In the below example, we have created a class:

#mastheadcontainer .subdomain11 {
background-color:purple;
}

This class will change the background color of the header if the subdomain with id 11 is active:

<div id="masthead" class="subdomain<?xs session('subdomainid') ?>">

Tags

Paths

To get the relative path of the centralised CSS use:

<!--?xs path('xscss') ?-->

For example:

<img decoding="async" id="mobilemenubutton" src="<?xs path('xscss') ?>/../images/responsive/menu-alt-512.png" width="50" />

To get the relative path of the centralised JS use:

<!--?xs path('xsjs') ?-->

To get the relative path to the jquery folder use:

<!--?xs path('jquery') ?-->

Highlighting items in the main menu – menu()

You can use the tag <?xs menu(‘id’) ?> to highlight a menu item (show as active menu). ‘id’ must be replaced by a valid menu id between apostrophes. You can use a code inspector to find out the id of an element in the menu.

Localised strings – print()

<!--?xs print() ?-->

Example:

<!--?xs print('1:This is English','2:This is Dutch') ?-->

You can use the print tag to output localised strings. I.e. the string for the active website language will be printed. The strings for each language must be prefixed with the locale id followed by a colon, currently 1 for English, 2 for Dutch and 3 for French. If you need to use a comma in your text to print, then use the HTML code for it instead (,).

Adding links to switch between locales

The standard layouts have a locale menu that appears in the page header. If you build your own page header or if you want to display locale links elsewhere, then here’s an example:

<h3></h3>
<ul>
 	<li><a href="/home/locale/1/<?xs session('sessionid') ?>">English</a></li>
 	<li><a href="/home/locale/2/<?xs session('sessionid') ?>">Nederlands</a></li>
 	<li><a href="/home/locale/3/<?xs session('sessionid') ?>">Français</a></li>
</ul>

Note the url to change to a different locale: /home/locale/{localeid}/{sessionid}
– where {localeid} must be 1 for English, 2 for Dutch or 3 for French. Other locales will be supported in future versions.
– and where {sessionid} must have the user’s session id, which you can output with the <?xs session(‘sessionid’) ?> tag.

Repository locales – locale()

Below is a list of names that you can use for the <?xs locale(‘localename’) ?> tag.
The repository values can be changed via Site configuration, Pages and menu.

If there’s no data in the fields, then the system defaults are automatcally used. You can specify the name of the constants files that has the defaults. If you don’t, then “defaults” is assumed (full name of constants file is constants-defaults.txt).
To specify a constants file for defaults, use the syntax <?xs locale(‘localename’,’constants’) ?> – for example <?xs locale(‘pag_contactustitle’,’defaults’) ?>

Note that you can also use the <?xs print() ?> tag to print literal localised strings (as described above).

Pages and menu, Website pages:

Contact us, pag_contactustitle
Search tips, pag_searchtipstitle
Help, pag_helptitle
FAQ, pag_faqtitle
About us, pag_aboutustitle
Privacy, pag_privacytitle
Terms, pag_termstitle
Galleries, pag_galleriestitle
Customer service, pag_servicetitle
Social, pag_socialtitle
Example <?xs locale(‘pag_contactustitle’) ?>

Pages and menu, Website menu

Home, men_hometitle
Search, men_searchtitle
Latest images, men_latesttitle
My account, pag_myaccounttitle
Reservations, lbl_reservations
Usage confirmation, lbl_usc
Licences, lbl_lic
Cart, lbl_cart
Lightbox, lbl_lightbox
Pages and menu, Custom menu items

Submenu id 30, men_customlabel30
Custom menu item 1, men_customlabel1
Custom menu item 2, men_customlabel2
et cetera for the rest of the custom menu items (e.g. men_customlabel7)

Pages and menu, Other locales

Register, loc_register
Log in, loc_login
Log out, loc_logout
Download orders, loc_dlorders
Forgot password, loc_fpass
Change password, loc_cpass

Functions

Using SQL queries – dbhtml()

You can run SQL queries and parse the resulting rows into HTML. Read the article Using SQL in your pages for more information.

Including sub templates – html()

<!--?xs html('thumbpages\toptoolbar.inc') ?-->
and
<!--?xs html('thumbpages\bottoolbar.inc') ?-->

Example: Listing the menu galleries – gallerymenulist()

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></h3>
</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> and </ul> HTML tags.

Outputting the locales menu items

<?xs localemenulist() ?> Outputs the available (enabled) locales as list items.

<div id="localedropdown"></div>

Page/Template ID’s

Below is an overview of the page/template id’s that you can use in your custom templates. E.g.

<!--?xs if server('xst==10') { ... } ?-->

and

<!--?xs var('xst') ?-->

1 home
2 searching
3 login page
4 error page
5 searchrequest
6 quoterequest
7 gallery
8 gallery group
9 gallery toplevel
10 cart
11 order/download
12 orders
14 invoices (overview)
15 contributors (overview)
16 explore
17 mailchimp subscribe
18 register
19 lost account
20 my account
21 change password
22 reservation/restrictions (overview)
23 following
24 confirm usage (overview)
25 tearsheets
26 prints
27 about
28 keyword index
29 terms
30 privacy
31 contact us
32 help
33 reset account
34 shared lightbox
35 activate account
36 preview fullscreen
37 preview modal
50 custom
51 … 70 custom1 … custom20