TYPO3 Extension Tutorials Dokumentation von T3NET

TYPO3 Extension Tutorials das TYPO3 Extension Kurzanleitung Dokumentation von T3NET

Referenzen Image
Sie befinden sich hier : 
Dokumentation / Extension Tutorials / EfA fontsize Script

EfA fontsize-Script in TYPO3 verwenden

Das Efa fontsize-Script ist kostenlos verfügbar bei Einfach für Alle. Dort erhalten Sie auch alle Informationen bezüglich der Funktionalität und Browser-Kompatibilität. Hier soll nur die Einbindung in TYPO3 kurz erläutert werden.
Die Idee zu dieser sehr sinnvollen Template-Erweiterung kam von mehreren Benutzern im Forum. Vielen Dank für die Mitarbeit.
Die drei verwendeten Symbole (Lupen) unterliegen der GPL und stammen von Gernot Ebenlechner.

1. Script herunterladen

Laden Sie die Datei efa-skripte.zip herunter, entpacken Sie das Archiv und speichern Sie die Dateien wie folgt:
fileadmin/scripts/efa_fontsize.js
fileadmin/scripts/styleswitcher.js
fileadmin/scripts/cookies.js

Wenn Sie statt der standardmäßig eingestellten Textlinks lieber Symbole verwenden möchten, laden Sie diese ebenfalls herunter und speichern Sie sie im Verzeichnis fileadmin/img/icons/. Wir verwenden hier drei Dateien: 16b_normal.gif, 16b_zoomIn.gif und 16b_zoomOut.gif. Sie können auch die auf dieser Seite dargestellten Symbole verwenden.

Wenn Sie die Symbole verwenden möchten, müssen Sie die Datei efa_fontsize.js editieren. Die Symbole werden statt der Textlinks an den drei dafür vorgesehenen Stellen eingesetzt (insgesamt dreimal). Alle Einstellungen werden in dieser Datei gemacht und sollten durch die in der Datei enthaltenen Kommentare selbsterklärend sein:

  1. ...
  2. var efa_bigger = ['',     //HTML to go before 'bigger' link
  3.           '<img src="fileadmin/img/icons/16b_zoomIn.gif" />',    //HTML to go inside 'bigger' anchor tag
  4.           'Schrift gr&ouml;sser',    //title attribute
  5. ...
  6.  

2. TypoScript Template ändern

Damit die Skripte von TYPO3 auf jeder Seite automatisch eingebunden werden, müssen Sie das Setup des Haupttemplates (befindet sich auf der Seite Home) um die rot markierten Zeilen ergänzen. Die Zeilennummer weichen von der tatsächlichen Position ab. Die Zeilen 16 bis 22 benötigen Sie nur, wenn Sie eine mehrsprachige Website betreiben. Um auf mehrsprachigen Seiten die Erläuterungstexte auch in der Fremdsprache anzeigen zu können, kopieren Sie die Datei efa_fontsize.js, übersetzen die anzuzeigenden Texte und speichern sie unter efa_fontsize-en.js. Diesen Schritt wiederholen Sie für jede Ihrer Sprachen. Durch die Condition (Zeile 16) wird das übersetzte Skript nur eingebunden, wenn der Benutzer die Sprache mit der ID 1 ausgewählt hat. Für zusätzliche Sprachen setzen Sie weitere Conditions. Achten Sie unbedingt auf die korrekte ID der jeweiligen Sprache.

  1. ...
  2. # Copying the content from TEMPLATE for <body>-section
  3. page.5 = HTML
  4. page.5.value (
  5. <script type="text/javascript">
  6. if (efa_fontSize) efa_fontSize.efaInit();
  7. </script>
  8. )
  9. page.10 < temp.mainTemplate
  10. # Copying the content from TEMPLATE for <head>-section
  11. page.headerData.5 = HTML
  12. page.headerData.5.value (
  13. <script type="text/javascript" src="fileadmin/scripts/cookies.js"></script>
  14. <script type="text/javascript" src="fileadmin/scripts/efa_fontsize.js"></script>
  15. )
  16. [globalVar = GP:L = 1]
  17. page.headerData.5 = HTML
  18. page.headerData.5.value (
  19. <script type="text/javascript" src="fileadmin/scripts/cookies.js"></script>
  20. <script type="text/javascript" src="fileadmin/scripts/efa_fontsize-en.js"></script>
  21. )
  22. [global]
  23. page.headerData.10 < temp.headTemplate
  24. ...

3. Lupen auf jeder Seite darstellen

Die Skripte werden nun zwar auf jeder Seite eingebunden aber um die Links auch darzustellen muß das Erweiterungstemplate +ext toolbar (das ist die Toolbar, in der sich schon der Klickpfad und die Sprachumschaltung befindet) ebenfalls erweitert werden.

  1. ...
  2. temp.teaser.40 = HTML
  3. temp.teaser.40.value (
  4. <div class="selectFontSize">
  5. <script type="text/javascript">
  6.  if (efa_fontSize) document.write(efa_fontSize.allLinks);
  7. </script>
  8. </div>
  9. )
  10. ...

4. Bekannte Probleme

  • Die Umschaltung der Schriftgrößen funktioniert nur, wenn der Benutzer JavaScript aktiviert hat. Ansonsten werden die Symbole nicht angezeigt.
  • Es werden nicht alle Browser unterstützt. Hier können Sie nachlesen, welche Browser unterstützt werden und welche nicht. Dort ist die Rede davon, daß Opera generell nicht unterstützt wird. Mit der mir vorliegenden Version Opera 9.00 funktioniert es jedoch einwandfrei.
Design 1
Design 2
Bookmark this page