====== Images ======

===== Snippets =====

==== Konstanten für Bildgrößen und Lightbox ====

<code typoscript>
styles.content.textmedia {
    linkWrap.lightboxEnabled = 1
    # linkWrap.height = 800
    linkWrap.width = 1200
    maxW = 860
    maxWInText = 400
    linkWrap.lightboxCssClass = lightbox
    linkWrap.lightboxRelAttribute = lightbox[{field:uid}]
}
</code>

----

==== Bildbeschreibung in Lightbox ausgeben ====

<code typoscript>
lib.contentElement.settings.media.popup.linkParams.title.data = file:current:description // file:current:title //file:current:alternative
</code>

----

==== ClickEnlarge Rendering/Lightbox für RTE ====

Um Bilder innerhalb des RTE in einer Lightbox vergrößern zu können, muss zuerst einmal das Static Template //ClickEnlarge Rendering (rtehtmlarea)// hinzugefügt werden.

<WRAP center round important 100%>
Das Static Template erweitert ''lib.parseFunc_RTE'' muss daher __nach__ der grundsätzlichen Konfiguration eingefügt werden!
</WRAP>

Anschließend ergänzen wir ''lib.parseFunc_RTE'' um die für die Lightbox benötigten Attribute:

**TypoScript:**
<code typoscript>
lib.parseFunc_RTE.tags.img.postUserFunc.imageLinkWrap {
    JSwindow = 0
    directImageLink = 1
    linkParams.ATagParams.dataWrap = class="lightbox" rel="lightbox"
}
</code>

----

==== Maximale Bildbreite nach Spalte (und BackendLayout) festlegen ====

Mit verschachtelten ''CASE''-Abfragen lässt sich die max. Bildbreite sowohl spaltenabhängig als auch nach gewähltem BackendLayout einstellen. Somit kann ein Redakteur ruhig mal eine Größenangabe im Inhaltselement vergessen, ohne dass direkt das Aussehen der Seite leidet.

<code typoscript>
# Anpassung von css_styled_content
tt_content {
  image.20.maxW.cObject = CASE
  image.20.maxW.cObject {
    key.field = colPos
    
    # Hauptspalte
    0 = CASE
    0 {
      key.data = levelfield:-1,backend_layout_next_level,slide
      key.override.data = page:backend_layout
      
      # BackendLayout UID 1: Hauptspalte auf gesamter Breite
      1 = TEXT
      1.value = 735
      
      # BackendLayout UID 2: Hauptspalte, schmaler wegen rechter Spalte
      2 = TEXT
      2.value = 510
    }
		
    # rechte Spalte
    2 = TEXT
    2.value = 200
  }
}
</code>

----

==== Header-Image aus Seiteneigenschaften ====

<wrap caution>bis TYPO3 6.x</wrap> Das erste Bild nutzen, das unter Seite / Ressourcen eingebettet wurde.

<code typoscript>
lib.headerimage = TEXT
lib.headerimage {
	data = levelmedia:-1, slide
	listNum = 0
	wrap = <img src="/uploads/media/|" alt="header"/>
}
</code>

<wrap caution>ab TYPO3 6.1</wrap> Durch den FAL (File Abstraction Layer) wird nur die ID einer Filereferenz gespeichert. Durch ''treatIdAsReference = 1'' wird diese aufgelöst.
<code typoscript>
lib.headerimage = IMAGE 
lib.headerimage { 
  file { 
    import = uploads/media/ 
    import { 
      data = levelmedia: -1, slide 
      listNum = 0 
    } 
    treatIdAsReference = 1 
    required = 1 
  } 
  altText.data = page : title 
} 
</code>

----

==== Background-Image aus Seiteneigenschaften ====

Prinzipiell ähnlich wie das obere Beispiel, nur als IMG_RESOURCE. Dieses cObject gibt nur den Bildpfad aus, kein komplettes ''img''-Tag.

**TypoScript:**
<code typoscript>
lib.pageBackgroundImage = IMG_RESOURCE
lib.pageBackgroundImage {
  file {
    import = uploads/media/
    import.data = levelmedia:-1, slide
    import.listNum = 0
    treatIdAsReference = 1
    required = 1
  }
}
</code>


**Fluid-Template:**
<code html>
<div class="bg-image" style="background-image: url(<f:cObject typoscriptObjectPath="lib.pageBackgroundImage" />)">
</code>

----

==== Vorschaubilder beschneiden, aber Lightbox im Original ====

Hierfür muss nichts in den Templates geändert werden, es genügt die folgende Zeile TypoScript (TYPO3 v8 oder höher):

<code typoscript>
lib.contentElement.settings.media.popup.crop.data = file:current:size
</code>

Dies überschreibt die Default-Einstellung ''file:current:crop'', welche sonst die beschnittene Version des Fotos auslesen würde.

----
===== Troubleshooting =====

==== TYPO3 6.x zeigt keine Bilder im Frontend an ====

Im Install Tool prüfen ob, unter ''[compat_version]'' noch 3.8 eingetragen ist. Dann muss zuerst der Upgrade Wizard verwendet werden. Entscheidend ist hier der Punkt //Migrate all file relations from tt_content.image and pages.media//.\\ 
Ein weiteres Indiz für eine alte ''[compat_version]'' ist eine für TYPO3 6.x ungewohnte Ansicht der Seiteneigenschaften.

Quelle: https://www.web-vision.de/support/Knowledgebase/Article/View/473/0/typo3-6x-zeigt-nach-der-installation-keine-bilder-im-frontend