ANIMATED HEADER IMAGE WITH IMAGE HEADER SLIDESHOW (FL_HEADER_SLIDE)

Transcription

1 ANIMATED HEADER IMAGE WITH IMAGE HEADER SLIDESHOW (FL_HEADER_SLIDE) (STEP BY STEP INSTRUCTIONS 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: Template: Multiflex 3 by rasi ( 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

2 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 (Figure 3). Figure 2: Click on the text, not on the install button to the left of the extension FIGURE 3:CHOOSE VERSION Accept everything afterwards and go to the next step. INSTALL PERFECTLIGHTBOX 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 (Figure 4). Accept the default settings and go to the next step.

3 FIGURE 4: CHOOSE VERSION 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!

4 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)

5 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

6 (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)

7 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)

8 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

9 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!

10 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 (). We provide typo3 customized templates and services to customers in Europe and China.