Schnellnavigation:

Kategorien

Schlagwortwolke

api typoscript seo rte extension backend facebook templavoila extensions css sprachen fce datenbank google gifbuilder menü redaktion php hyphen ie6 formular security constants tceform webfonts silbentrennung typo3-camp twitter slide tag tca t3c suchmaschine sql tcadefaults suchtipps t3blog typolink zugriffsrechte
« August 2010»
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
Kommentare
RSS 2.0Nachrichten
Kommentare

In eigener Sache

Peter Linzenkirchner, Lisardo Multimedia 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 ... 

30August2010

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:

  1. tt_content.image.20.1.file.m.bgImg = fileadmin/....
  2. tt_content.image.20.1.file.m.mask = fileadmin/....
  3.  

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:

  1. lib.test = IMAGE
  2. lib.test {
  3.     file = GIFBUILDER
  4.     file {
  5.         XY = 1024,768
  6.         format = jpg
  7.         quality = 88
  8.         10 = IMAGE
  9.         10.file = fileadmin/backimage.jpg
  10.  
  11.         15 = IMAGE
  12.         15.offset = 420,18
  13.         15.file = fileadmin/overlay.png
  14.         15.mask = fileadmin/mask.png
  15.     }
  16. }

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.

  1. tt_content{
  2.   image.20.1.file >
  3.   image.20.1.file {
  4.       import.current = 1
  5.       width.field = imagewidth
  6.       m.mask.import.cObject = IMG_RESOURCE
  7.       m.mask.import.cObject.file = GIFBUILDER
  8.       m.mask.import.cObject.file {
  9.           # Hier wird die dynamische Maske mit der gleichen Größe wie das aktuelle
  10.           # Bild erstellt. Die 10 ist der Bezug auf das folgende IMAGE-Objekt
  11.           XY = [10.w],[10.h]
  12.           format = png
  13.           # Da der "XY" Parameter keinen stdWrap hat, finden wir die Größe durch
  14.           # erneutes Laden des Bilds heraus
  15.           10 = IMAGE
  16.           10.file {
  17.               import.current = 1
  18.               width.field = imagewidth
  19.               maxW = {$styles.content.imgtext.maxW}
  20.               maxW.override.data = register:maxImageWidth
  21.               maxWInText = {$styles.content.imgtext.maxWInText}
  22.               maxWInText.override.data = register:maxImageWidthInText
  23.           }
  24.           # Erstellen einer weißen Box die die ganze Größe einnimmt
  25.           20 = BOX
  26.           20.dimensions = 0,0,[10.w],[10.h]
  27.           20.color = #FFFFFF
  28.           # Positionierung der Lupe rechts unten
  29.           60 = IMAGE
  30.           60.file = fileadmin/img/mask2.png
  31.           60.align = r,b
  32.       }
  33.       # Nun muss noch der Hintergrund erstellt werden, Ablauf im Prinzip wie oben:
  34.       m.bgImg.import.cObject = IMG_RESOURCE
  35.       m.bgImg.import.cObject.file = GIFBUILDER
  36.       m.bgImg.import.cObject.file {
  37.           # wieder eine Maske mit der gleichen Größe wie das Bild erstellen
  38.           XY = [10.w],[10.h]
  39.           format = png
  40.           # und dazu das Bild erneut laden
  41.           10 = IMAGE
  42.           10.file {
  43.               import.current = 1
  44.               width.field = imagewidth
  45.               maxW = {$styles.content.imgtext.maxW}
  46.               maxW.override.data = register:maxImageWidth
  47.               maxWInText = {$styles.content.imgtext.maxWInText}
  48.               maxWInText.override.data = register:maxImageWidthInText
  49.           }
  50.           # wieder eine Box in der Größe des Bildes
  51.           15 = BOX
  52.           15.dimensions = 0,0,[10.w],[10.h]
  53.           15.color = #FFFFFF
  54.           # und darauf die Maske der Lupe platzieren
  55.           60 = IMAGE
  56.           60.file = fileadmin/img/plus2.png
  57.           60.align = r,b
  58.       }
  59.   }
  60. }

Möglich, dass es auch einfacher geht … aber diese Lösung tut was sie soll. Links, Alt- und Title-Attribute funktionieren.

Kategorien: Typoscript  
Links:
Trackback-Link  (Bitte kopieren)
Tags gifbuilder, wasserzeichen
 
| Mehr
  •  
  • Kommentare
  •  

Mein Kommentar

Benachrichtige mich, wenn jemand einen Kommentar zu dieser Nachricht schreibt.