Installation

First choose one of the page templates as starting point.

Then make sure to include the auto-updating header into your html head:

http://static.epfl.ch/latest/includes/head.html

or include the optimized auto-updating head links, head scripts and footer scripts into your html head/foot for optimal performances:

http://static.epfl.ch/latest/includes/head-links.html
http://static.epfl.ch/latest/includes/head-scripts.html
http://static.epfl.ch/latest/includes/foot-scripts.html

As most templating languages do not support including content from a remote server, including the files usually comes down to:

  1. Creating a cron job that retrieves the remote files and creates a local copy on your server every day, via wget for insance.
  2. Including the local copy into your application templates.

Optimized head/foot files

For better performances it is recommended to separate the CSS and JS loading.

Include the CSS using the head links into your <head> tag.

http://static.epfl.ch/latest/includes/head-links.html

Add your custom CSS just after and before the scripts for optimal performances.

Include the head scripts before the closing of your </head> tag.

http://static.epfl.ch/latest/includes/head-scripts.html

And include the scripts before the closing of your </body> tag.

http://static.epfl.ch/latest/includes/foot-scripts.html

or

http://static.epfl.ch/latest/includes/foot-scripts-notracking.html

if you do not want Google Analytics tracking on your site.

HTML head template versions ready for inclusions in custom templates
Version File name
EPFL head-links.html
CDH head-links-cdh.html
CDM head-links-cdm.html
ENAC head-links-enac.html
IC head-links-ic.html
INTER head-links-inter.html
SB head-links-sb.html
STI head-links-sti.html
SV head-links-sv.html
Associations head-links-associations.html
Neutral head-links-neutral.html

All-in-one head files

The simplest way to use the framework is to use the all-in-one head files versions:

HTML head template versions ready for inclusions in custom templates
Version File name
EPFL head.html
CDH head-cdh.html
CDM head-cdm.html
ENAC head-enac.html
IC head-ic.html
INTER head-inter.html
SB head-sb.html
STI head-sti.html
SV head-sv.html
Associations head-associations.html
Neutral head-neutral.html

Just include these into your html <head> tag.

If for some reason the latest version is not compatible with your system, specific versions can be accessed via:

http://static.epfl.ch/vX.Y.Z/includes/head.html

Integration of the EPFL banner in a site

Put the file head-links.html, head-script.html, foot-scripts.html together.


  <head>
   <title>Website name </title>
    <meta charset="utf-8" />
    <link rel="import" href="//static.epfl.ch/latest/includes/head-links.html">
    <link rel="import" href="//static.epfl.ch/latest/includes/head-scripts.html">
  </head>
  <body>
    <div id="page" class="site site-wrapper" itemscope itemtype="http://schema.org/WebPage">
     <header id="epfl-header" class="site-header epfl" role="banner" aria-label="Global EPFL banner" data-ajax-header="https://static.epfl.ch/latest/includes/epfl-header.en.html"></header>
    </div>
   <link rel="import" href="//static.epfl.ch/latest/includes/foot-scripts.html">
  </body>

Dynamically load the global header

Finally make sure your template includes a fallback global header that will dynamically load the full header:


  <header id="epfl-header" class="site-header epfl" role="banner" aria-label="Global EPFL banner" data-ajax-header="https://static.epfl.ch/latest/includes/epfl-header.en.html">
    ...
  </header>

The header version that will be loaded is specified by the data-ajax-header attribute, and can be one of:

Global head template versions ready for inclusions in templates
Version File name
Header with full search form epfl-header.en.html
Header with no local site search epfl-header-no-localsearch.en.html
If you chose the cron job approach described above for your CSS and JS, you'll also have to load the header via a cron job and update the data-ajax-header to point to your local copy. Otherwise you may end up with different versions that might not work properly together.

You can then further customize the search URLs and parameters as follows:

Add the following script at the end of your template:

// Overwrite local site search
require(["epfl-jquery"], function($){
  require(["search"], function(s){
    $("#epfl-header").epfl_search("update", {engines:{site:{url: "search.html", param: "q", ac: false}}});
  });
});
  • site is the name of the engine that handles the local site search
  • url is the url where the search form will be submitted
  • param is the name of the parameter containing the search query
  • ac: false means that the default auto-complete is disabled

Add the following script at the end of your template:

// Overwrite global EPFL sites search
require(["epfl-jquery"], function($){
  require(["search"], function(s){
    $("#epfl-header").epfl_search("update", {engines:{epfl:{url: "search.html", param: "q", ac: false}}});
  });
});
  • epfl is the name of the engine that handles the global sites search
  • url is the url where the search form will be submitted
  • param is the name of the parameter containing the search query
  • ac: false means that the default auto-complete is disabled