Schnellnavigation:

Kategorien

« Juli 2017»
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          

Kopieren Sie diesen Link in Ihren RSS-Reader

RSS 0.91Nachrichten
RSS 2.0Nachrichten

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

Zur Zeit wird gefiltert nach: Anleitungen
Filter zurücksetzen

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.


[mehr]

Tipp: Dieser Artikel ist ein Update eines älteren Artikels zum gleichen Thema: Links im RTE auf Datensätze (News, t3blog) mit der Extension linkhandler. In den neuen Versionen von TYPO3 hat es einige Änderungen gegeben, so dass dieser Artikel nicht mehr genau stimmt. 

Zuerst haben wir das Problem, dass die Extension linkhandler unter TYPO3 6.x nicht mehr funktioniert und sogar das Backend unzugänglich macht, wenn sie über den Extensions-Manager installiert wird. Also mein Tipp: auf keinen Fall über den Extensionsmanager installieren, sondern diesen Fork von Github verwenden. Einfach herunterladen, das zip-Archiv auspacken und den entstehenden Ordner umbenennen in »linkhandler«. 

Danach gehts genau so weiter, wie in meinem Artikel beschrieben: es braucht zuerst eine Konfiguration des Linkbrowsers im TSconfig der Root-Seite. Diese kann für die neue News-Extension zum Beispiel so aussehen: 

  1. RTE.default.tx_linkhandler {
  2.   # beliebige Bezeichnung
  3.   tx_news {
  4.       # label / Karteikarte im Widget
  5.       label=News
  6.       # Tabellenname
  7.       listTables=tx_news_domain_model_news
  8.       # nur die Seiten im Seitenbaum zeigen, die auch die
  9.       # gewünschen Datensätze enthalten.
  10.       onlyPids=18
  11.   }
  12. }

Bei onlyPids müsst ihr natürlich die UID der Seite eintragen, auf der sich eure News-Datensätze befinden. Oder die Zeile auskommentieren, allerdings muss dann der ganze Baum nach News durchsucht werden, wenn man einen Link erstellen will. So ist es für den Redakteur bequemer.

Analog kann man den Linkhandler auch noch für die sonstigen Inhaltselement konfigurieren: 

  1. mod.tx_linkhandler {
  2.   # beliebige Bezeichnung
  3.   tx_news {
  4.       # label / Karteikarte im Widget
  5.       label=News
  6.       # Tabellenname
  7.       listTables=tx_news_domain_model_news
  8.       # nur die Seiten im Seitenbaum zeigen, die auch die
  9.       # gewünschen Datensätze enthalten.
  10.       onlyPids=18
  11.   }
  12. }

Danach muss im Typoscript-Setup der Link konfiguriert werden: 

  1. plugin.tx_linkhandler {
  2.   # Tabellenname
  3.   tx_news_domain_model_news {
  4.       # Link erzwingen, auch wenn die News versteckt ist
  5.       forceLink = 0
  6.       # typolink settings
  7.       parameter = 23
  8.       # alle nötigen Parameter
  9.     additionalParams = &tx_news_pi1[news]={field:uid}&tx_news_pi1[controller]=News&tx_news_pi1[action]=detail
  10.    additionalParams.insertData = 1
  11.       # use caching
  12.     useCacheHash = 1        
  13.  }
  14. }

Bei parameter muss die UID der Seite eingefügt werden, welche die Single-Darstellung der News enthält. Bei additionalParams müssen alle zusätzlichen Parameter rein, die für den Aufruf des richtigen Datensatzes nötig sind – hier dargestellt für die neue News-Extension. 

Die Unterschiede zur früheren Fassung sind also nicht gravierend, so dass ich für weitere Varianten einfach nochmals auf den alten Artikel verweisen möchte. Dort ist zum Beispiel noch beschrieben, wie man mit mehreren verschiedenen Ausgabeseiten arbeiten kann.  

Man kann Youtube-Videos in TYPO3 sehr bequem über das Inhaltselement »Medien« einbetten. Leider bettet das die Videos ausschließlich als Flash-Videos ein, was dazu führt, dass auf iPad oder iPhone nur der alternative Text zu sehen ist. Youtube bietet allerdings eine neue Möglichkeit, ein Video über ein iFrame einzubetten, die automatisch zwischen Flash-Video und HTML5-Video unterscheiden kann, je nachdem, was Browser und Plattform eben können. Das funktioniert z. B. so: 

  1. <iframe class="youtube-player" type="text/html" width="600" height="342" src="http://www.youtube.com/embed/IOtXGmWWxAs" frameborder="0"><iframe>

Man muss allerdings den Code selbst zusammenstellen, noch kann man ihn offensichtlich nicht automatisch von Youtube holen. Die URL beginnt mit 

  1. http://youtube/embed/VIDEO_ID

und Breite und Höhe müssen angepasst werden. Das sollte allerdings nicht allzu schwierig sein. Danach einfach den Code in ein HTML-Inhaltselement in TYPO3 einbauen. 

Genauere Erläuterungen sind hier zu finden. Zum Ausprobieren zum Beispiel eine  kleine Landingpage, die ich für das BRK gemacht habe: Hausnotruf in Schwaben. Funktioniert auch auf dem iPhone wunderbar. 

In letzter Zeit stoße ich in verschiedenen Foren immer wieder auf missglückte Versuche, TYPO3 auf einem Server zu installieren. Da werden die seltsamsten Fehler gemacht. Eigentlich ist der grundlegende Ablauf relativ einfach, und wurde in der neuen Version 4.4 und dem Introduction-Package noch einmal vereinfacht. 

Allerdings gilt das nur, wenn der Server auch korrekt für den Einsatz von TYPO3 konfiguriert ist, was bei billigen Provodern oft nicht der Falls ist. Aber das lasse ich jetzt erst mal aussen vor, bzw. verweise ich einfach auf die entsprechende Seite bei typo.org. Jetzt die prinzipielle Anleitung:  


[mehr]
Kategorien: Anleitungen  Kommentare 1
Tags: install

Zumindest in den neueren Versionen von tYPO3 (meines Wissens ab 4.3) ist es möglich, in den normalen Menüs eine interne oder externe Seite in ein Popup-Fenster zu laden, ohne dazu eine zusätzliche Extension bemühen zu müssen. Dazu bekommt die betreffende Seite (egal ob Standard oder Link to external URL) einfach die Fenstergröße mitgeteilt.

Dazu wird in das Feld »Target« anstatt den üblichen Angaben wie »_blank« in den Seiteneigenschaften einfach die Fenstergröße geschrieben, z. B. so:

500x600 - das ergibt ein Fenster in Standardeinstellungen mit der Größe 500x600 Pixel.

Es können aber noch mehr Angaben eingefügt werden, die im wesentlichen die Darstellung des Browserfensters regeln, also Scrollbalken ja/nein, Fenster-Zoom ja/nein, Werkzeugleiste ja/nein und so weiter:

500x600:status=1,menubar=1,scrollbars=1,resizable=1,location=1,directories=1,toolbar=1

Man beachte den Doppelpunkt zwischen der Größenangabe und dem Rest. Damit sind alle Einstellungen möglich, die Typoscript über die typolink-Funktion erlaubt. (Dort zu finden unter den Stichworten »parameter« und »JSwindow_params«)

Popup-Links im RTE

Natürlich geht das ganze auch im RTE.

Tipp: Bei internen Seiten muss natürlich darauf geachtet werden, dass die Inhalte auch im Popup-Fenster Platz haben. Also muss entweder das Fenster entsprechend groß engstellt werden, oder der Admin / Entwickler muss ein eigenes Template für derartige Popp-Fenster vorsehen. Dieses Template muss der Seite dann noch zugewiesen werden. 

Weiterführende Links:

Kategorien: Anleitungen  Kommentare 0
Tags: popup, rte
Besuchen Sie mich auf Google+