Quantcast
Channel: TYPO3 Template & Typoscript - TYPO3 Forum
Viewing all articles
Browse latest Browse all 197

Menü der Unterseiten mit Bild: Jetzt für fluid_styled_content und richtigem Ausschnitt (Crop)

$
0
0
Liebes Forum,

ich möchte auch mal etwas geben und vielleicht die Lösung mit Eurer Hilfe ausbauen und verfeinern. 

Oft benötigt man das CE sitemap/menu als Menü mit Bildern aus den Media-Ressourcen der Seiten. Seit fluid_styled_content funktionieren aber die alten TS-Scripte mit tt_content.menu.20.4 nicht mehr. Nun hatte ich folgendes Skript gefunden, dass das Menü in Fluid baut:
https://www.rutschmann.biz/blog/post/typo3-7-lts-fluid-styled-content-spezialmenue-auflistung-der-unterseiten-mit-bild-aus-seiteneigens/

Das funktioniert, solange man nicht den vom Redakteur über das neue Crop-Tool gewählten Ausschnitt verwenden will. Das geht damit nämlich leider nicht. Das liegt daran, dass das resultierende {media} keine Bildobjekte enthält, sondern nur ein Array aus Eigenschaften des Bildes ist. Sonst könnte man prima über <f:media /> das Bild einbinden, wie es das fsc MediaGallery Partial macht. 

Ich habe rumprobiert und folgende Lösung gefunden:
FLUID 

<html xmlns:f="http://typo3.org/ns/TYPO3/CMS/Fluid/ViewHelpers" xmlns:ce="http://typo3.org/ns/TYPO3/CMS/FluidStyledContent/ViewHelpers" data-namespace-typo3-fluid="true">
<ce:menu.directory pageUids="{pageUids}" as="pages">
    <f:if condition="{pages}">
<dl class="ce-menu ce-menu-4">
<f:for each="{pages}" as="page">
<dt>
<f:link.page pageUid="{page.uid}">
<f:if condition="{page.nav_title}">
<f:then>
{page.nav_title}
</f:then>
<f:else>
{page.title}
</f:else>
</f:if>
</f:link.page>
</dt>
<dd> ## Hier binde ich die Media Ressource aus der entsprechenden Unterseite ein. ## Über data reiche ich das {page}-array an TS weiter
  <f:cObject typoscriptObjectPath="lib.pageimage" data="{page}"  />
</dd>
</f:for>
</dl>
</f:if>
</ce:menu.directory>
</html>Im TYPOSCRIPT vom Setup habe ich dann die Möglichkeit, zu entscheiden, ob ich das gecroppte Image haben möchte:

TYPOSCRIPT

pageimage = FILES
pageimage {
          references {
            table = pages ### Hier übernehme ich das aus Fluid übergebenen {page}-Array und ziehe die Seiten-ID der ### betreffenden Unterseite
            uid.dataWrap= {field: uid}
            fieldName = media
        }
        begin = 1 #ACHTUNG: Hier wird das zweite Bild genommen. Ggf anpassen
        maxItems = 1
        renderObj = IMAGE
        renderObj {
            file.width = 196m
            #file.height = 196c
            file.import.data = file:current:uid
## Hier wird der Crop angewendet
            file.crop.data = file:current:crop
            file.treatIdAsReference = 1
            altText.data = file:current:title
            wrap = <div class="slide">|</div>
        }
}Das funktioniert soweit. Eine Erweiterung hätte ich noch gerne, weiß aber nicht so recht, wie ich das anstellen soll. Ich habe das selbe Bild zwei Mal eingebunden. Einmal mit Crop für den Header und einmal mit Crop für das Bildmenü. Cool wäre es, könnte ich sagen: Wenn ein Bild vorhanden, begin = 0, ansonsten begin = 1. Ich habe Folgendes probiert:

FLUID:  
<f:if condition="{page.media} > 1">
  <f:then>
    <f:cObject typoscriptObjectPath="lib.pageimage" data="{uid:'{page.uid}', position:2}"  />
    </f:then>
    <f:else>
    <f:cObject typoscriptObjectPath="lib.pageimage" data="{uid:'{page.uid}', position:1}"  />
    </f:else>
 </f:if>
Hier wird über Fluid ermittelt, ob es mehr als ein Bild gibt. Die Position reiche ich an TS weiter. Als Text lässt sie sich auch ausgeben:

pageimage >
pageimage = TEXT
pageimage.dataWrap = {field:position}
aber begin lässt sich davon nicht beeindrucken:

pageimage = FILES
    pageimage {
          references {
            table = pages
            uid.dataWrap= {field: uid}
            fieldName = media
        }
        begin.dataWrap = {field:position} ### GEHT NICHT :-(
        maxItems = 1
        renderObj = IMAGE
        renderObj {
            file.width = 196m
            #file.height = 196c
            file.import.data = file:current:uid
            file.crop.data = file:current:crop
            file.treatIdAsReference = 1
            altText.data = file:current:title
            wrap = <div class="slide">|</div>
        }
    }

So. Vielleicht konnte ich ja dem ein oder anderen schon helfen, demnächst ein Bildmenü über das CE Sitemap/Menü zu erstellen. Wenn jemand eine Idee hat, wie ich "begin" dynamisieren kann, freue ich mich. 

Viele Grüße

Viewing all articles
Browse latest Browse all 197