TYPO3 Bildgalerie mit TypoScript (Imagecrop) und fancybox

vom 13. September 2011 in

Immer wieder verwende ich die FancyBox von Janis Skarnelis. In Verbindung mit jQuery eine wirklich gute Lightbox.

Gefunden hatte ich dazu dann ein schönes TS Schnipsel von keynet, was ich jedoch mittlerweile um Captions und einen Crop der Thumbnails erweitert hab.

Hier der ganze TS Code:

  1.  
  2. tt_content.image.20.1 {
  3.     # Den Standard imageLinkWrap entfernen und einen eigenen basteln
  4.     imageLinkWrap >
  5.     imageLinkWrap = 1
  6.     imageLinkWrap {
  7.     
  8.         # Linkwrapping bei aktivierter Klickvergrößerung oder einem gesetzten Link
  9.         enable.field = image_zoom
  10.         enable.ifEmpty.typolink.parameter.field = image_link
  11.         enable.ifEmpty.typolink.parameter.listNum.stdWrap.data = register : IMAGE_NUM_CURRENT
  12.         enable.ifEmpty.typolink.returnLast = url
  13.         enable.ifEmpty.typolink.parameter.listNum.splitChar = 10
  14.         
  15.         # Neuer wrapping Code
  16.         typolink {
  17.             target = {$styles.content.links.target}
  18.             extTarget = {$styles.content.links.extTarget}
  19.             
  20.             # Link mit Pfad und Name zum Originalbild oder
  21.             # Pfad und Name des umgerechneten lightbox Bild (wen maxH oder maxH erreicht ist)
  22.             parameter.cObject = IMG_RESOURCE
  23.             parameter.cObject.file {
  24.                 import.data = TSFE:lastImageInfo|origFile
  25.                 maxW = 800
  26.                 maxH = 600
  27.             }        
  28.             
  29.             # Ausnahme: wenn das linkfield nicht leer ist
  30.             parameter.override.field = image_link
  31.             parameter.override.listNum.stdWrap.data = register : IMAGE_NUM_CURRENT
  32.             parameter.override.if.isTrue.field = image_link
  33.             parameter.override.listNum.splitChar = 10
  34.             
  35.             # rel-Attribut hinzufügen, für Galerie-Funktion (durchblättern)
  36.             ATagParams = rel="gallery" title="{field:header}" class="lightbox"
  37.             #ATagParams.override = rel="gallery{field:uid}" title="{field:header}" class="lightbox"
  38.             ATagParams.override = rel="gallery{field:uid}" class="lightbox"
  39.             ATagParams.insertData = 1
  40.             ATagParams.if.isTrue.field = image_zoom
  41.  
  42.             # Bildunterschrift pro Bild            
  43.             ATagParams.postCObject = TEXT
  44.             ATagParams.postCObject{
  45.                 field = imagecaption
  46.                 stripHtml = 1
  47.                 split.token.char = 10
  48.                 split.token.if.isTrue = {$styles.content.imgtext.imageTextSplit}
  49.                 split.returnKey.data = register : IMAGE_NUM_CURRENT
  50.                 noTrimWrap = | title="|" |
  51.             }
  52.         }
  53.     }
  54. }
  56. # Beispiel um das entsprechende Bildobjekt zu überschreiben // hier werden die Captions in der Thumbnail-Ansicht ausgebldet
  57. page.10.marks.CONTENT.renderObj.image.20.1 < tt_content.image.20.1
  58. page.10.marks.CONTENT.renderObj.image {
  59.     20.rendering.dl.caption.wrap = !!<==:> | </dd>
  60.     20.1.file {
  61.         width.override = 150c
  62.         height.override = 150c
  63.     }
  64. }
  65.  

Anmerkungen: die Lighboxbildgröße ist auf 800x600 gesetzt. Der Crop des Thumnails ist 150x150.

Zudem sollte natürlich jQuery und die FancyBox eingebunden sein.

zurück