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
« | Mai 2024 | » | ||||
---|---|---|---|---|---|---|
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
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: wasserzeichen
Filter zurücksetzen
Bilder mit Lupe
Ziel ist, normale Inhaltsbilder von Typo3 mit einer Lupe oder einem Pluszeichen zu versehen, das darauf hindeutet, dass die Bilder vergrößert werden können. Die gleiche Technik kann aber auch verwendet werden, um die Bilder z. B. mit abgerundeten Kanten oder Schatten zu versehen.
Grundtechnik: Bilder mit Wasserzeichen
Die einfachste Möglichkeit ist es, das IMAGE-Objekt der Contentelemente mit einer Maske zu versehen:
Nachteil dieser Technik ist, dass die Bilder dazu alle eine vorgebene Größe haben müssen – Maske wie Hintergrund werden brutal auf die Größe der Bilder gezoomt. Das ist für Wasserzeichen u. U. ganz sinnvoll, aber um Bilder mit einer Lupe zu versehen ist dieser Ansatz ungeeignet.
GIFBUILDER verwenden
Prinzipiell können die Bilder über GIFBUILDER manipuliert werden, wie hier im GIFBUILDER-Artikel des typo3-Wikis wunderbar beschrieben. So können erstaunliche Effekte erreicht werden, wie z. B. transparente Flächen oder Texte mit Schatten auf Bildern. Ein Beispiel:
Leider hat diese Technik einen großen Nachteil: damit imageLinkWrap funktioniert, darf “file” kein GIFBUILDER-Objekt sein. Heisst im Klartext: man kann auf derartig manipulierte Grafiken keinen Link setzen, weder die Klickvergrößerung noch einen individuellen. Damit funktionieren auch die üblichen Lightbox-Skripte nicht mehr.
Falls das nicht benötigt wird, ist es aber die ideale Technik.
Tipp: Damit die Qualität der Bilder stimmt, muss im Install-Tool png_truecolor aktiviert werden, ausserdem muss die GDLIB 2 verwendet werden.
Lösung des Problems:
Sie erfolgt letztlich doch über die oben erwähnten Masken, allerdings mit einem recht aufwändigen Umweg. Grundlage meiner Lösung ist dieser Artikel im TYPO3wizard-Forum (meinen besten Dank an Andy!). Im Prinzip werden einfach Masken eingesetzt, diese werden allerdings mit Hilfe von IMG_RESSOURCE und GIFBUILDER mit einem Hintergrund in der Größe der Bilder versehen, so dass die Lupe selbst nicht mitzoomt sondern an einem ganz konkreten Platz positioniert werden kann.
- tt_content{
- import.current = 1
- width.field = imagewidth
- m.mask.import.cObject = IMG_RESOURCE
- m.mask.import.cObject.file = GIFBUILDER
- m.mask.import.cObject.file {
- # Hier wird die dynamische Maske mit der gleichen Größe wie das aktuelle
- # Bild erstellt. Die 10 ist der Bezug auf das folgende IMAGE-Objekt
- XY = [10.w],[10.h]
- format = png
- # Da der "XY" Parameter keinen stdWrap hat, finden wir die Größe durch
- # erneutes Laden des Bilds heraus
- 10 = IMAGE
- import.current = 1
- width.field = imagewidth
- maxW = {$styles.content.imgtext.maxW}
- maxW.override.data = register:maxImageWidth
- maxWInText = {$styles.content.imgtext.maxWInText}
- maxWInText.override.data = register:maxImageWidthInText
- }
- # Erstellen einer weißen Box die die ganze Größe einnimmt
- 20 = BOX
- 20.dimensions = 0,0,[10.w],[10.h]
- 20.color = #FFFFFF
- # Positionierung der Lupe rechts unten
- 60 = IMAGE
- 60.align = r,b
- }
- # Nun muss noch der Hintergrund erstellt werden, Ablauf im Prinzip wie oben:
- m.bgImg.import.cObject = IMG_RESOURCE
- m.bgImg.import.cObject.file = GIFBUILDER
- m.bgImg.import.cObject.file {
- # wieder eine Maske mit der gleichen Größe wie das Bild erstellen
- XY = [10.w],[10.h]
- format = png
- # und dazu das Bild erneut laden
- 10 = IMAGE
- import.current = 1
- width.field = imagewidth
- maxW = {$styles.content.imgtext.maxW}
- maxW.override.data = register:maxImageWidth
- maxWInText = {$styles.content.imgtext.maxWInText}
- maxWInText.override.data = register:maxImageWidthInText
- }
- # wieder eine Box in der Größe des Bildes
- 15 = BOX
- 15.dimensions = 0,0,[10.w],[10.h]
- 15.color = #FFFFFF
- # und darauf die Maske der Lupe platzieren
- 60 = IMAGE
- 60.align = r,b
- }
- }
- }
Möglich, dass es auch einfacher geht … aber diese Lösung tut was sie soll. Links, Alt- und Title-Attribute funktionieren.