External Website¶
If you manage a website outside from LionsBase (e.g., your multiple 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:
Import raw data using the LionsBase Web Service API
Integrate generated pages from LionsBase
We will describe one way of integrating generated pages. The steps are:
Choose an existing LionsBase club to prepare pages to be integrated in an external website (e.g.,
your-club-name.domain.tld)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
Ensure the page is hidden in the navigation menu of your LionsBase website
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”:
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:
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.
</iframe>
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;
//-->
</script>
If you do not want to do this, make sure to provide an attribute “height” instead.