Kategorien
- [-]Developer (104)
- API (15)
- Backend (17)
- Extensions (29)
- HTML & CSS (4)
- Typoscript (33)
- [-]Redaktionelles (21)
- Anleitungen (9)
- Tipps (8)
- [-]Sonstiges (50)
- SEO (8)
Schlagwortwolke
« | September 2011 | » | ||||
---|---|---|---|---|---|---|
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 |
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
Letzte Kommentare
- Das liegt daran, dass die captcha.php versucht, das halbe...
- 05.12.2017 00:41
- Hallo, danke für den tollen Beitrag. Kann man die...
- 22.10.2015 10:05
- Vielen Dank für den Austausch guter Artikel. Es ist eine...
- 17.08.2015 10:58
- Hallo Peter, danke für die Extension. Ich habe sie auf...
- 27.08.2014 12:51
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: September 20
Filter zurücksetzen
Lightbox in eigener Extension
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:
- plugin.tx_myext_pi1 {
- preview {
- file.maxW=170
- imageLinkWrap = 1
- imageLinkWrap {
- enable = 1
- typolink {
- ATagParams = class="lightbox"
- parameter.cObject = IMG_RESOURCE
- parameter.cObject.file.import.data = TSFE:lastImageInfo|origFile
- parameter.cObject.file.maxW = 700
- parameter.cObject.file.maxH = 700
- }
- }
- }
- }
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:
- // $url = Pfad zur Bilddatei - aus der DB
- // $title = Titel / Kurzbeschreibung des Bildes, aus DB;
- $lConf = $this->conf['preview.'];
- $lConf['file'] = $url;
- $lConf['imageLinkWrap.']['typolink.']['title'] = $title;
- // Zuweisen zum Marker:
- $marker['###IMAGE###'] = $this->cObj->IMAGE($lConf);
- // etc.
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.
Eigene Datei-Icons in tt_news
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:
- plugin.tt_news.newsFiles {
- icon = 1
- icon.wrap = <span class="news-file-icon"> | </span>
- size = 1
- size.wrap = <span class="news-file-size"> | </span>
- target = _blank
- }
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:
- plugin.tt_news.newsFiles {
- stdWrap.substring = 78
- stdWrap.innerWrap =<span class="news-file-icon"><img src="fileadmin/download-icons/ | "
- stdWrap.HTMLparser = 1
- stdWrap.HTMLparser.allowTags = a,img,span
- stdWrap.HTMLparser.tags.img.fixAttrib.width.set = 32
- stdWrap.HTMLparser.tags.img.fixAttrib.height.set = 32
- }
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 ...