Schnellnavigation:

Kategorien

Schlagwortwolke

api typoscript seo rte extension backend css templavoila facebook sprachen extensions gifbuilder datenbank google fce redaktion php menü hyphen ie6 formular security constants slide webfonts silbentrennung twitter typo3-camp tceform t3c tca tag t3blog sql sprachmenü tcadefaults suchmaschine suchtipps typo3camp
« Juli 2013»
S M T W T F S
  1 2 3 4 5 6
7 8 9 10 11 12 13
14 15 16 17 18 19 20
21 22 23 24 25 26 27
28 29 30 31      

Letzte Nachrichten

DSGVO
26.05.2018 18:39
Trackingtools und Datenschutzerklärung
14.03.2014 23:07
1:n und n:1 Relationen in Extbase
06.12.2013 12:04
Erste Abmahnungen wegen Google Analytics
04.10.2013 12:11

Kopieren Sie diesen Link in Ihren RSS-Reader

RSS 0.91Nachrichten
Kommentare
RSS 2.0Nachrichten
Kommentare

In eigener Sache

Peter Linzenkirchner, Lisardo EDV Beratung in Augsburg. Freelance und Partner für Design- und Webagenturen in Augsburg und München. Pixelgenaue Templates, valides HTML, barrierearm. TYPO3-Projekte, Extension-Programmierung und mehr ... 

30Juli2013

Lightbox im RTE (rtehtmlarea) ohne Extension

In den neueren Versionen von TYPO3 kann man recht einfach beliebige Lightboxen einbauen, ohne dafür spezielle Extensions zu benötigen. Ich möchte möglichst wenig Extensions verwenden, um Inkompatabilitäten zu verringern, Updates zu erleichtern und vor allem um das Risiko von Sicherheitslücken zu vermindern. Wie man dazu prinzipiell vorgeht, möchte ich kurz am Beispiel der Slimbox zeigen. 

(Kleiner Tipp: wie es TYPO3 4.x geht, steht in diesem älteren Artikel.)

Slimbox ist ein ganz nette Lightbox, die den großen Vorteil hat, sehr klein zu sein. Sie hat zwar wenig Features und ist nicht responsiv, aber zumindest das letztere ist nicht unbedingt ein Nachteil, weil auf einem Smartphone keine Lightbox gut funktioniert, auch keine responsive. Am Smartphone ist keine Lightbox immer noch die beste Lightbox. 

Nun, hier gehts auch nur ums Prinzip, man kann das mit beliebigen anderen Lightboxen auch umsetzen. 

Schritt 1: Lightbox korrekt einbinden

Praktisch alle Lightbox-Scripts sind so aufgebaut, dass man im Head zuerst jQuery laden muss, danach das Lightbox-Script sowie ein kleines JavaScript-Snippet als Autoloader oder Trigger. Ausserdem muss man natürlich das CSS einbinden. Also im Typoscript-Setup der Installation etwa so: 

  1. page.includeJSlibs {
  2.  # zuerst das aktuelle jQuery laden
  3.  10 = fileadmin/js/jquery.min.js
  4.  10 {
  5.   forceOnTop = 1
  6.  }  
  7.  # danach slimbox
  8.  20 = fileadmin/js/slimbox2.js
  9.  # und mein eigenes JavaScript
  10.  30 = fileadmin/js/main.js
  11. }

Dabei natürlich die Pfade angeben, in denen die Dateien auch liegen. Und das CSS: 

  1. page.includeCSS { 
  2.  10 = fileadmin/css/slimbox2.css
  3.  10.media = screen
  4. }

Jetzt fehlt noch der Trigger bzw. Autoloader. Für die Slimbox kann der zum Beispiel so aussehen: 

  1. if (!/android|iphone|ipod|series60|symbian|windows ce|blackberry/i.test(navigator.userAgent)) {
  2. ­  jQuery(function($) {
  3. ­  ­  $("a[rel^='lightbox']").slimbox({
  4. ­  ­  ­  ­ // hier können weitere Optionen eingefügt werden
  5. ­  ­  ­  ­­ counterText: "Bild {x} von {y}"
  6. ­  ­  }, null, function(el) {
  7. ­  ­  return (this == el) || ((this.rel.length > 8) && (this.rel == el.rel))
  8. ­  ­  });
  9. ­  });
  10. }

Das "counterText" ist nicht unbedingt nötig, aber man kann damit den Text übersetzen. Im Original ist der Hinweistext sonst englisch.

Schritt 2: Konstanten in TYPO3 einstellen: 

Im Backend von TYPO3 das Root-Template aufrufen und im Konstanten-Editor folgendes einstellen: 

  • Lightbox click-enlarge rendering aktivieren
  • Lightbox CSS class ausleeren (brauchen wir in dem Fall nicht)
  • Lightbox rel="" attribute so füllen: lightbox[{field:uid}]
Einstellungen in den Constants
Einstellungen in den Constants

Diese Zeile:

  1. lightbox[{field:uid}]

entspricht im Autoloader von Slimbox diesem Ausdruck: 

  1. $("a[rel^='lightbox']")

Alle Links, die einen Link dieser Art erhalten: 

  1. <a href="bildgros.jpg" rel="lightbox[32]">bildklein</a>
  2.  

lösen automatisch die Lightbox aus. 

Jetzt muss nur noch in den Inhaltselementen mit Bildern die Option »Klick vergrößern« aktiviert werden. Wenn man in einem Inhaltselement mehrere Bilder lädt, erscheinen diese automatisch als Galerie in der Lightbox. 

Ansicht in den Inhaltselementen
Ansicht in den Inhaltselementen

Schritt 3: Aktivieren im RTE

Der RTE muss natürlich so konfiguriert sein, dass Bilder angezeigt werden. Das passiert im Erweiterungsmanager in der Extension rtehtmlarea selbst. Dort gibt es die Option »Enable images in the RTE«, die aktiviert sein muss. Danach kann der RTE in TYPO3 Version 6.x automatisch korrekt mit Bildern umgehen. Damit man Bilder im RTE auch in der Lightbox öffnen kann, ist noch ein zweiter Schritt nötig: man muss im Hauptemplate im Setup der Site unter "Vollständigen Template-Datensatz bearbeiten" das Static Template des RTE »Clickenlarge Rendering (rtehatmlarea)« einbinden.

Einstellungen im Erweiterungsmanager
Einstellungen im Setup

Schritt 4: Bild im RTE mit Lightbox versehen

Wenn man ein Bild in den RTE geladen hat, kann man es mit der Maus markieren und mit der rechten Maustaste die Option »Bild verändern« wählen. Es erscheint ein Popup-Fenster, in dem man das »Klick Vergrößern« aktivieren kann. Das wars. 

Bild mit Kilck-Vergrößern versehen

Daber werden übrigens die Bilder, die in der Lightbox erscheinen automatisch auf die maximale Bildgröße reduziert, die in den Constants für die TYPO3-Installation festgelegt wurden. 

Kategorien: Anleitungen/Developer/Typoscript  
Links:
Trackback-Link  (Bitte kopieren)
 
| Mehr
  •  
  • Kommentare
  •