ANIMATED HEADER IMAGE WITH IMAGE HEADER SLIDESHOW

MEELA WEB & TRANS
www.meela.biz
ANIMATED HEADER IMAGE
WITH IMAGE HEADER SLIDESHOW
(FL_HEADER_SLIDE)
(STEP BY STEP INSTRUC TIONS FOR REAL BEGINNERS)
I am writing this tutorial out of frustration with the general lack of proper instructions that are generally
provided with typo3 extensions. Achieving results with typo3 is too often a trial and error process due to
the complexity of the overall structure of this CMS.
The author of this Plugin has not provided us with any installation instructions.
This tutorial is based on the following set up:
Typo3 Version: 4.3.2
Template: Multiflex 3 by rasi (www.rasi.ch)
INSTALL EXTENSIONS
First we have to install the extensions used to make this work. The FL_HEADER_SLIDE needs
T3MOOTOOLS and PERFECTLIGHTBOX installed on the system in order to work. We start by going into the
Extension Manager (in admin tools) and choose Import extensions form the drop down (Figure 1).
Figure 1: Extension Manager
INSTALL T3MOOTOOLS
We have to start by installing T3Mootools as this is the library which our extension is dependent on. So
type in t3mootools. The search result will include the one library we are looking for. IMPORTANT: Don’t
MEELA WEB & TRANS
www.meela.biz
install the library immediately. Instead click on the name T3 Mootools (Figure 2: red arrow). This will bring
you to a dialog in which you can choose the version you want to install. For our purposes we will install
version 1.2.3 (Figure 3).
Figure 2: Click on the text, not on the install button to the left of the extension
FIGURE 3:CHOOSE VERSION 1.2.3
Accept everything afterwards and go to the next step.
INSTALL PERFECTLIGHT BOX
We install Perfectlightbox in the same way by typing perfectlightbox in the search box under Import
Extensions. Here you can just click on the arrow next to the extension name to install the latest version.
Accept the default settings and go to the next step.
INSTALL FL_HEADER_SLIDE
Now we move on to actually installing the Header Slide extension. Search for it on the repository, but as
with T3Mootools we don’t want the latest version. Instead we click on the name again and choose version
0.1.12 (Figure 4). Accept the default settings and go to the next step.
MEELA WEB & TRANS
www.meela.biz
FIGURE 4: CHOOSE VERSION 0.1.12
PREPARE T3MOOTOOLS LIBRARY
Now we can leave the Extension Manager and start to prepare the T3Mootools library to work with our
extensions.
In your left menu you will see a new entry for T3Mootools Settings. Click on it and choose PROCESS &
ANALIZE t3mootools IN EXTENSIONS (Figure 5)
Figure 5: T3Mootools Settings
SELECT ALL under the next window and the click on CHECK (Figure 6). In the following window click on
MERGE & USE (Figure 7). Finally back in the t3mootools main settings window, click on SELECT ALL at the
bottom of the form and then click on CREATE MOOTOOLS LIBRARY (Figure 8).
That’s all we have to do here!
MEELA WEB & TRANS
www.meela.biz
Figure 6: Library Settings Mootools
Figure 7: Accept and Merge
TEMPLATE ADJUSTMENTS
Now we have to start with the actual implementation into the template. In your left menu under WEB,
select TEMPLATE and click on the page which contains your template, which in our case is root (Figure 9)
MEELA WEB & TRANS
www.meela.biz
Figure 8: template root
Click on Edit the whole template record and go to the tab INCLUDES where we will now choose the
extensions which will be included in every page that is loaded on our site. Simply click on the items you
want to include on the right side to select them.
IMPORTANT: Make sure you include fl_header_slide before perfectlightbox (Figure 9)
Figure 9: Include static extensions
That’s it, save and close the window and move on to the next step.
MULTIFLEX 3 TEMPLATE ADJUSTMENTS
Now we have to make our template aware of the extension in order to actually show it on our site. That
means we switch on our ftp client and browse to our template located under Fileadmin on the server
MEELA WEB & TRANS
www.meela.biz
(Figure 10). We will need to modify setup.txt and constants.txt in the typoscript folder of our template
(multiflex3).
Figure 10: Folder Structure Multiflex3
SETUP.TXT
In this file we add the mootools javascript library to our header in the template. The following three lines
go somewhere at the bottom of your header (Figure 11)
Figure 11: Multiflex3 setup.txt
Then we scroll down in the same document and find the layout of our site in the template section. There
we define the marker which will tell typo3 what to look for in our template. In my template I have called
the marker CHANGING_HEADER (Figure 12)
MEELA WEB & TRANS
www.meela.biz
Figure 12: Set a marker for your template
Save and close the document and upload it to your server. On we go…
CONSTANTS.TXT ADDITIONS
Open the constants.txt file and add some constants which will tell our extensions how to behave. We can
do the same thing in the constants editor in the backend of our typo3 server, but it’s nice to have a
typoscript method to do it, too.
IMPORTANT: We have to tell our perfectlightbox NOT TO USE JAVASCRIPT LIBRARIES, because we want to
use Mootools. That’w why we set includeJSLibraries to zero (Figure 13)
Figure 13: Turn off Javascript libraries in extensions
ADJUST CONSTANTS WITH CONSTANTS EDITOR
You can do it with the Constants Editor, too. Go into the backend and choose Template in your menu. In
the drop down menu, choose Constants Editor (Figure 14)
MEELA WEB & TRANS
www.meela.biz
Figure 14: Constants Editor
ADJUST YOUR HTML TEMPLATE
Finally we have to add the header slide to our html template. As I am using layout4 in the multiflex3
template, the sample below is an excerpt of layout4.html (Figure 15, Figure 16). We simply remove the
section in the original template which contains the header image and replace it with our MARKER which
we defined in setup.txt (Figure 12). <!--###CHANGING_HEADER### --> will tell our template to go look
for the extension and put images instead of our text line Changing Header Images between our MARKERS.
Figure 15: Original template
Figure 16: Modified template
MEELA WEB & TRANS
www.meela.biz
FINISHING TOUCHES
Bare with me for a few more seconds, we have to upload some images before we can relax with a beer!
Go to the backend again and choose Page in the Menu. Click on your root page and then choose Edit page
properties(Figure 17).
UPLOAD IMAGES
Figure 17: Edit page properties
A new tab has been added to our properties. Under Extended we can now upload images that will be used
in the slideshow (Figure 18)
Figure 18: Extended Properties
Once you uploaded your images, save and close the whole thing, empty your cache, hold your breath and
click on preview to admire your work!
MEELA WEB & TRANS
www.meela.biz
WELL DONE!!!!
FINISHED PRODUCT
FINAL WORDS
I could not have done this without the help of all the people that continue to keep these message boards
alive with useful hints and advise. Most of what I wrote has been provided elsewhere in some form, I
merely tried to make it comprehensible for amateurs like myself.
This tutorial was written and provided by Meela Web & Trans (www.meela.biz). We provide typo3
customized templates and services to customers in Europe and China.