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

fUm die Vorschau von Bildern in einer eigenen Extension in einer der zahlreichen Lightboxen zu präsentieren sind ein paar Schritte nötig. Zuerst das Typoscript: 

  1. plugin.tx_myext_pi1 {
  2.   preview {
  3.    file.maxW=170
  4.    imageLinkWrap = 1
  5.    imageLinkWrap {
  6.     enable = 1
  7.     typolink {
  8.      ATagParams = class="lightbox" 
  9.      parameter.cObject = IMG_RESOURCE
  10.      parameter.cObject.file.import.data = TSFE:lastImageInfo|origFile
  11.      parameter.cObject.file.maxW = 700
  12.      parameter.cObject.file.maxH = 700
  13.     }
  14.    }
  15.   }
  16.  }

Dabei sorgt file.maxW für die Breite des Vorschaubildes und parameter.cObject.file.maxW für die Breite des Bildes in der Lightbox. Der Eintrag bei ATagParams variiert nach verwendeter Lightbox. Ich verwende hier die Colorbox, die eine Klasse mit dem Namen "lightbox" wünscht. 

Im PHP der Extension muss dieses Typoscript passend verwendet und ergänzt werden: 

  1. // $url = Pfad zur Bilddatei - aus der DB
  2. // $title = Titel / Kurzbeschreibung des Bildes, aus DB;
  3. $lConf = $this->conf['preview.'];
  4. $lConf['file'] = $url;
  5. $lConf['imageLinkWrap.']['typolink.']['title'] = $title;
  6. // Zuweisen zum Marker:
  7. $marker['###IMAGE###'] = $this->cObj->IMAGE($lConf);
  8. // etc.
  9.  

Kein großer Aufwand mehr im PHP ... Man übernimmt sinnvollerweise zuerst die Konfiguration in eine Variable ($lConf) und erweitert dann diese Konfiguration mit $lConf['file'] um den Pfad auf das Bild (in der Regel wohl aus der DB ausgelesen). Der Rest ist optional – wobei der title natürlich noch sinnvoll ist, da er in der Lightbox gezeigt wird. 

Damit ist sichergestellt, dass sowohl die direkt gezeigten Vorschaubilder wie auch die größeren Bilder in der Lightbox eine vorgegebene Maximalgröße bekommen. Weitere Attribute können natürlich nach Belieben entweder im Typoscript oder im PHP hinzugefügt werden. 

 

tt_news verwendet die Typoscript-Funktion filelink für die Ausgabe der Dateien, die mit einem News-Artikel verbunden werden. An sich ist das ziemlich leistungsfähig und auch gut zu konfigurieren. Kleines Beispiel: 

  1. plugin.tt_news.newsFiles {
  2.   icon = 1
  3.   icon.wrap = <span class="news-file-icon"> | </span>
  4.   size = 1
  5.   size.wrap = <span class="news-file-size"> | </span>
  6.   target = _blank
  7.   file.wrap = <span class="news-file-file"> | </span>
  8. }

Die verschiedenen Optionen sind im TSref zu finden. 

Leider fehlt eine entscheidende Möglichkeit, nämlich eigene Icons für die Dateien zu verwenden. In filelinks ist der Ordner, aus dem die Icons geladen werden, nämlich hart im PHP kodiert. Und zwar einschließlich der Pixelgröße der verwendeten Icons. 

ich habe viele Fragen dazu im Netz gefunden und auch ein paar Lösungsvorschläge, die aber alle nicht funktionieren - Kunststück, wenn der Ordner wirklich hart im PHP des Core drinsteht. Eine Möglichkeit gibt es aber doch: 

  1. plugin.tt_news.newsFiles {
  2.   stdWrap.substring = 78
  3.   stdWrap.innerWrap =<span class="news-file-icon"><img src="fileadmin/download-icons/ | "
  4.   stdWrap.HTMLparser = 1
  5.   stdWrap.HTMLparser.allowTags = a,img,span
  6.   stdWrap.HTMLparser.tags.img.fixAttrib.width.set = 32
  7.   stdWrap.HTMLparser.tags.img.fixAttrib.height.set = 32
  8. }

Das ist dreckig, funktioniert aber ... Habe ich hier gefunden: Changing appearance of tt_news file list icons (ganz unten). Die Zahl (78) muss angepasst werden an den wrap für das icon ... 

 

Kategorien: Typoscript  Kommentare 1

IF-Konstrutionen in Typoscript sind reichlich verzinkt und kosten viel Hirnschmalz, vor allem wenn mehrere Bedingungen miteinander verknüpft werden sollen. Mein Problem: 

Ein neu erstelltes Inhaltselement soll es ermöglichen, bequem und schnell einen Downloadlink mit einem Vorschau-Bild zu erstellen. Es soll folgende Features haben: 

  • die Vorschau-Bilder sollen nebeneinander floaten
  • die Vorschaubilder sollen unabhängig vom Frontend-User-Login zwar immer erscheinen, bei bei fehlendem Login oder falscher Benutzergruppe abgedimmt werden. 
  • die Download-Links auf den Vorschaubildern sollen nur erscheinen, wenn der Besucher in einer bestimmten Frontend-Usergruppe ist
  • zusätzlich soll der Redakteur mit einer Checkbox bestimmen können, dass ausnahmsweise der Downloadlink auch dann gezeigt wird, wenn der Besucher nicht eingeloggt ist. 

Das kann alles noch über Typoscript gelöst werden. Die Schritte: 

  1. Extension erstellen, die tt_content um mehrere Felder erweitert
  2. Die extTables.php so anpassen, dass im Backend die richtigen Felder gezeigt werden 
  3. die Extension um ein Typoscript-Setup erweitern, das den Output vornimmt. 

Und darin ist die oben erwähnte IF-Konstruktion erforderlich: der Link wird gerendert, wenn der Besucher in der Usergruppe 10 ist ODER wenn eine Checkbox durch den Redakteur angeklickt wurde. 

Der wesentliche Teil des Typoscripts sieht so aus:

  1. 10 = COA
  2. 10 {
  3.   10 = IMAGE
  4.   10.file {
  5.       import = uploads/myExt/
  6.       import.field = preview
  7.       import.listNum = 0
  8.       maxW = 224
  9.       maxH = 209
  10.   }
  11.   # Link aus einem Feld holen.
  12.   stdWrap.typolink.parameter = uploads/myExt/{field:myLink}
  13.   stdWrap.typolink.parameter.insertData = 1
  14.  
  15.   # ODER-Verknüpfungen gehen am einfachsten über cObject.
  16.   stdWrap.typolink.parameter.if {
  17.       isTrue.cObject = COA
  18.       isTrue.cObject {
  19.         10 = TEXT
  20.         10.data= TSFE:fe_user|user|usergroup
  21.         10.if {
  22.             # Prüfen, ob in einer bestimmten User-Gruppe
  23.             value.data = TSFE:fe_user|user|usergroup
  24.             isInList = 10
  25.         }
  26.        
  27.         20 = TEXT
  28.         20.field = checkbox
  29.       }
  30.   }
  31. }

Eine OR-Verknüpfung geht am einfachsten über ein cObject. Das Ergebnis des gesamten cObjects wird true, wenn eine Zeile true wird. Man kann also auf diese Art beliebig viele Fehler mit OR verbinden. Etwas kniffliger ist es, wenn man auf einen bestimmten Wert prüfen will und nicht nur auf true oder false, weil in diesem Fall eine weitere IF-Konstruktion eingeschachtelt werden muss. 

Ganz am Schluss darf natürlich nicht vergessen werden, mit Hilfe der Extension naw_securedl und einer .htaccess-Datei im Uploads-Ordner der Extension die Downloads gegen Deeplinks abzusichern.  

Kategorien: Typoscript  Kommentare 0
Besuchen Sie mich auf Google+