---
layout: docs
title: Server Side Includes
lightbox: true
breadcrumb: [ "advanced.html", "Advanced" ]
---

== Server Side Includes

You can place static include files or executables in the ssi folder.
The static files will be place right after the body or just before the
end of the body.

IMPORTANT: This has *nothing to do* with the Apache module `mod_include`,
it just implements Thruks way of SSIs.

=== Common Includes

There are global includes, which will be included in every cgi
page:

* pass:[ssi/common-footer.ssi]
* pass:[ssi/common-footer-*.ssi]
* pass:[ssi/common-header.ssi]
* pass:[ssi/common-header-*.ssi]


=== Page Specific Includes

And there are page specific includes, which will only be placed in the
specific page:

* pass:[ssi/&lt;page&gt;-footer.ssi]
* pass:[ssi/&lt;page&gt;-footer-*.ssi]
* pass:[ssi/&lt;page&gt;-header.ssi]
* pass:[ssi/&lt;page&gt;-header-*.ssi]

Replace &lt;page&gt; with the name of the page. You can find the page name in the url (see screenshot). Includes are only possible for the cgi pages, not for static html pages like the index.html.

+++
<a title="ssi page" rel="lightbox[ssi]" href="ssi_page.png"><img src="ssi_page.png" alt="ssi page" width="50%" height="50%" /></a>
+++

=== Static and Dynamic Includes

Files will be statically placed inside the output of the normal cgi
output. Executables will be executed and the output will then be used
as content.

=== Template Toolkit Syntax

{% include new_since.ad version="2.34" %}
Starting with Thruk 2.34 you can use http://template-toolkit.org/docs/manual/Syntax.html[template toolkit syntax] in your ssi files.


=== Examples

To change the logo of the login page and add some help text, you could create a ssi file like this and store the company.png in your `usercontent/images` folder.

.login-header.ssi:
------
<script language="javascript" type="text/javascript">
<!--
  var note = "<span style='color: #EE6E00; font-size: 25px;'>Test Server</span>";
  jQuery(document).ready(function() {
    jQuery("DIV.loginmask IMG")
      .attr('src', '../usercontent/images/company.png')
      .attr('width', '50%')
      .attr('height', '50%');
    jQuery("DIV.loginmask A").first().after("<br><b><div align='center'>"+note+"</div></b>");
  });
-->
</script>
------


Hide images in plugin output of extinfo page if user is not in Admins contact group:

.extinfo-header.ssi:
------
[% IF !c.user_exists || !c.user.has_group("Admins") %]
<script>
jQuery(document).ready(function() {
    jQuery("TD.detail_plugin_output IMG").hide().after("<div>Image removed</div>");
});
</script>
[% END %]
------


Show alert box on all pages:

.common-header.ssi:
------
<div class="alert floating" style="position: absolute; left: 0; right: 0; margin-left: auto; margin-right: auto; z-index: 100; top: 7px; width: 600px; text-align: center;">
  This alert will be visible on pages.
</div>
------


Style custom variables box:

.common-header.ssi:
------
<style>
.cust_var {
    font-style: normal;
    font-size:13px;
    line-height:11px;
}
.cust_var td:first-child {
    text-transform: lowercase;
    font-weight: 600;
    color: var(--text-th) !important;
}
.cust_var td:first-child::first-letter {
    text-transform: uppercase;
}
.cust_var:first-child td {
    padding-top:8px;
}
.cust_var:last-child td {
    padding-bottom:4px;
}
</style>
------