EN | FR | DE | IT
home | previous | next | index | search

External Website

If you manage a website outside from LionsBase (e.g., your multi-district website), you may want to import and show content from LIonsBase. This is typically the case with the list of clubs, upcoming events or social activities.

You have basically two possibilities to achieve this goal:

  1. Import raw data using the LionsBase Web Service API
  2. Integrate generated pages from LionsBase

We will describe one way of integrating generated pages. The steps are:

  1. Choose an existing LionsBase club to prepare pages to be integrated in an external website (e.g., your-club-name.domain.tld)
  2. Use an empty template for the page to prevent LionsBase design such as navigation menu and club banner to be generated, thus generating only formatted content
  3. Ensure the page is hidden in the navigation menu of your LionsBase website
  4. Use an iframe in your external website and reference your page

Using an Empty Template

Please refer to chapter Changing the Layout of a Page and choose an empty template.

Prepare your page in TYPO3 as usual, using content elements of type text, images or plugins.

Hiding a Page in Navigation Menu

When you edit your page, open tab “Access” and tick the checkbox “Hide in Menus”:

Access tab allowing pages to be hidden in menus

This ensures the page is accessible when one knows its URI but will not show up in the navigation menu of the corresponding LionsBase website.

Using an iframe

First of all you need to know the ID of your page to be referenced. One way to retrieve this ID is to edit the page and have a look at the bottom right of the tab area, just as with any record within TYPO3:

The ID is shown when editing a page or a record

In this case, this is “702”. As your club website is accessible from https://your-club-name.domain.tld (e.g., https://salzburg.lions.at), the page with the ID 702 is accessible from https://your-club-name.domain.tld/index.php?id=702.

Now open your external website and insert a HTML snippet:

<iframe width="100%" id="myFrame" src="https://your-club-name.domain.tld/index.php?id=702" scrolling="no" frameborder="0">
        An iframe capable browser is required to view this page.

Having the attribute id="myFrame" lets you resize the height of the iframe dynamically, if needed, by using a few lines of JavaScript in the section “head” of your page:

<script type="text/javascript">
function sizeFrame() {
        var F = document.getElementById("myFrame");
        if (F.contentDocument) {
                F.height = F.contentDocument.documentElement.scrollHeight+30; //FF 3.0.11, Opera 9.63, and Chrome
        } else {
                F.height = F.contentWindow.document.body.scrollHeight+30; //IE6, IE7 and Chrome
window.onload = sizeFrame;

If you do not want to do this, make sure to provide an attribute “height” instead.

Documentation created using Sphinx 1.8.3 and integrated in TYPO3 with restdoc.