Unterschiede

Hier werden die Unterschiede zwischen zwei Versionen der Seite angezeigt.

--- typo3:images [2015/02/04 19:21] – admin
+++ typo3:images [2018/11/01 13:04] (aktuell) – [Vorschaubilder beschneiden, aber Lightbox im Original] admin
@@ Zeile 2: / Zeile 2: @@
 ===== 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 ====
@@ Zeile 70: / Zeile 115: @@
 ----
+==== 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 =====

Snippets + Wiki

Benutzer-Werkzeuge

Webseiten-Werkzeuge

Unterschiede

Seiten-Werkzeuge