Images

Snippets

Konstanten für Bildgrößen und Lightbox

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

Bildbeschreibung in Lightbox ausgeben

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

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.

Das Static Template erweitert lib.parseFunc_RTE muss daher nach der grundsätzlichen Konfiguration eingefügt werden!

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

TypoScript:

lib.parseFunc_RTE.tags.img.postUserFunc.imageLinkWrap {
    JSwindow = 0
    directImageLink = 1
    linkParams.ATagParams.dataWrap = class="lightbox" rel="lightbox"
}

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.

# 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
  }
}

Header-Image aus Seiteneigenschaften

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

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

ab TYPO3 6.1 Durch den FAL (File Abstraction Layer) wird nur die ID einer Filereferenz gespeichert. Durch treatIdAsReference = 1 wird diese aufgelöst.

lib.headerimage = IMAGE 
lib.headerimage { 
  file { 
    import = uploads/media/ 
    import { 
      data = levelmedia: -1, slide 
      listNum = 0 
    } 
    treatIdAsReference = 1 
    required = 1 
  } 
  altText.data = page : title 
}

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:

lib.pageBackgroundImage = IMG_RESOURCE
lib.pageBackgroundImage {
  file {
    import = uploads/media/
    import.data = levelmedia:-1, slide
    import.listNum = 0
    treatIdAsReference = 1
    required = 1
  }
}

Fluid-Template:

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

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):

lib.contentElement.settings.media.popup.crop.data = file:current:size

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

Snippets + Wiki

Benutzer-Werkzeuge

Webseiten-Werkzeuge

Inhaltsverzeichnis