bild für blogbeitrag fotorama und dce

Bildunterschriften bei Fotorama in TYPO3 mit Dynamic Content Elements DCE

Die Fotorama Diashow ist sehr flexibel und in etliche Content Management Systeme integriert.
Für die Darstellung einer Bildunterschirft, die innerhalb des jeweiligen Bildes erscheint, benützt Fotorama das „data-tag“.

<div class=“fotorama“>
<img src=“1.jpg“ data-caption=“Bildunterschrift eins“  />
<img src=“2.jpg“ data-caption=“Bildunterschrift zwei“  />
</div>
 Die genaue Anleitung gibt es bei Fotorama hier: http://fotorama.io/customize/captions/

 Vorgehen bei TYPO3 – 7.x mit Dynamic Content Elements DCE

Innerhalb der Definition des DCE kreiert man ein Feld für Bilder. Als Backend-Element benutzt man:

TYPE:FAL
File Abstraction Layer (recommended)

DCE fal viewhelper

Hier nicht vergessen in der Definition des Backend-Feldes (TCA) die Variable eintragen:
In meinem Fall wird die Vorgabe: „fal“ durch „sliderImg“ ersetzt. Es gibt auch einen Hinweis in brauner Schrift.

Mit dieser Definition erhält man im Backend ein Feld zur Eingabe von Bildern, die ausgewählt werden können und dann automatisch den richtigen HTML-Code bekommen:

Backend DCE für FAL
TYPO3 Backend FAL

Der zugehörige HTML-Code sieht so aus:

<!–slider–>
<section class=“slider“>

<div class=“fotorama“ id=“fotorama“ data-nav=“thumbs“ data-allowfullscreen=“native“ data-autoplay=“4000″ data-stopautoplayontouch=“false“>

<img src=“fileadmin/Resources/Public/Images/sliderImg/slider01_805_480.jpg“ width=“805″ height=“480″ alt=“kommt von fal“  />

<img src=“fileadmin/Resources/Public/Images/sliderImg/slider02_805_480.jpg“ width=“805″ height=“480″ alt=“kommt vom fal“ />

<img src=“fileadmin/Resources/Public/Images/sliderImg/slider03_805_480.jpg“ width=“805″ height=“480″ alt=“from fal“ />

<img src=“fileadmin/Resources/Public/Images/sliderImg/slider04_805_480.jpg“ width=“805″ height=“480″ alt=“from fal“ />

</div>
</section>

WICHITG!
Das Alt-Attribut kommt vom FAL = File Abstraction Layer, also von der Bildverwaltung des Bilderordners im „fileadmin“. Dort kann man das Alt-Attribut angeben, nachdem man auf den Bildnamen geklickt hat. Genauso kann man dort das Title-Attribut angeben! Die Bilder bekommen diese Attribute also zentral für alle Verwendungen mit.

Wie bekommt man das „data-caption =“Die Bildunterschrift des Bildes“ in den Code?

Die Antwort steckt im „f:image-ViewHelper“ der innerhalb der DCEs verwendet wird:

Die Referenzseite findet man hier: https://docs.typo3.org/typo3cms/ExtbaseGuide/Fluid/ViewHelper/Image.html

Nachdem man wie oben beschrieben das Backend-Eingabefeld angelegt hat, muss man für das DCE noch im Template das Ganze zum Leben erwecken und fügt folgende Zeile in das Template ein:

<!–slider–>
<section class=“slider“>
<div class=“fotorama“ id=“fotorama“ data-nav=“thumbs“ data-allowfullscreen=“native“ data-autoplay=“4000″ data-stopautoplayontouch=“false“>
<f:for each=“{dce:fal(field:’sliderImg‘, contentObject:contentObject)}“ as=“fileReference“>   <f:image  src=“{fileReference.uid}“ treatIdAsReference=“1″  data=“{caption: fileReference.title}“ />
</f:for>
</div>
</section>

Der entsprechende vom DCE schon vorgegebene ViewHelper heißt:
„dce-fal“ indem wiederum der TYPO3 ViewHelper „f:image“ steckt.

dce fal-viewhelper

Der f:image-ViewHelper muss nun um das Data-Attribut erweitert werden, damit am Ende innerhalb des Data-Attributes die Texte erscheinen, die man im Title angegeben hat:

<f:image  src=“{fileReference.uid}“ treatIdAsReference=“1″  data=“{caption: fileReference.title}“ />

Dies bedeutet, dass im Data-Object „fileReference“, das zuvor mit dem ViewHelper kreiert wurde, der Titel ausgelesen wird und das Data-Attribut den Namen „caption“ nach dem Bindestirch bekommt, also „data-caption“:

Ausgabe am Ende:

<img data-caption=“here you see the title“ src=“fileadmin/Resources/Public/Images/sliderImg/slider01_805_480.jpg“ width=“805″ height=“480″ alt=“kommt von fal“ title=“here you see the title“ />

Etwas unschön ist, dass der ViewHelper gleichzeitig ein „title-tag“ mit demselben Inhalt erstellt.

 

Weitere Möglichkeiten mit dem „fileReference-object“

zeige ich in einem anderen Blogbeitrag, der sich um reine Bildabfolgen kümmert und wie man unter diese verschiedene Bildunterschriften setzen kann:

TYPO3-DCE – Mit dem FAL-Viewhelper Bildunterschriften (figcaption) erzeugen

 

Autor:

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.

*

code

* Die Checkbox für die Zustimmung zur Speicherung ist nach DSGVO zwingend.

Ich akzeptiere