Split von Bildern in der Detailansicht von TYPO3 news

Beschreiben wir sowohl wie es früher (tt_news) ging als auch wie es heute (tx_news) geht.

Standardmäßig werden, sofern mehrere Bilder in einem news Datensatz hinterlegt werden, diese in einem Container in identischer Größe unter- oder nebeneinander dargestellt:
Bei tt_news im Marker ###NEWS_IMAGE### (res/news_template.tmpl oder einer anderen der vorhandenen Vorlagen) bei tx_news in der Datei MediaImage.html (Resources/Private/Partial/Detail/MediaImage.html). Die Größe der Bilder wird im Typoscript gesetzt (und kann bei tx_news in der Flexform überschrieben werden).

plugin.tt_news.displaySingle.image.file.maxW = 240
plugin.tt_news.displaySingle.image.file.maxH = 180

bzw.

plugin.tx_news.settings.detail.media.image.maxWidth = 282
plugin.tx_news.settings.detail.media.image.maxHeight =

Aufteilung mehrerer Bilder in der Single Ansicht von tt_news

In der Regel wird man die Aufteilung in der Form benötigen, dass das erste Bild in einer bestimmten Art dargestellt wird und alle übrigen in einer anderen. Klassisches optionSplit.
Man benötigt also ein bisschen Typoscript und den modifizierten Bilder-Marker:

plugin.tt_news.displaySingle {
  imageMarkerOptionSplit = 1|*|2
  image {
    file.maxW = 800|*|500
    file.maxH = 360|*|240
  }
}
<div class="news-single-item">
...
  ###NEWS_IMAGE_1###
  ...
  ###NEWS_IMAGE_2###
  ...
...
</div>

Aufteilung mehrerer Bilder in der Detail Ansicht von tx_news

Will man das gleiche in tx_news, also mit Fluidtemplates, umsetzen, wird es etwas komplizierter – der Preis der Moderne.
In der Datei Resources/Private/Templates/News/Detail.html gibt es diesen Viewhelper (ca. in Zeile 100)

<f:render partial="Detail/MediaContainer" arguments="{media: newsItem.media, settings:settings}" />

Dieser soll in unserem Fall alle weiteren Bilder darstellen – für das erste Bild erstellen wir einen eigenen Viewhelper

<f:render partial="Detail/MediaContainerFirstPicture" arguments="{media: newsItem.media, settings:settings}" />

und fügen ihn zusätzlich an der gewünschten Stelle in die Datei Detail.html ein.
Für die nun zu erstellende Datei Resources/Private/Partial/Detail/MediaContainerFirstPicture.html wird zunächst eine Kopie der Datei Resources/Private/Partial/Detail/MediaContainer.html erstellt und dann in der Abfrage isFirst ein eigenes Partial untergebracht – der else Zweig bleibt leer. (Anmerkung: der Code wird hier nur für den Fall von Bildern durchgespielt: condition="{mediaElement.originalResource.type} == 2").

<html xmlns:f="http://typo3.org/ns/TYPO3/CMS/Fluid/ViewHelpers" data-namespace-typo3-fluid="true">
<f:if condition="{media}">
	<!-- media files -->
	<div class="news-img-wrap">
		<f:for each="{media}" as="mediaElement" iteration="mediaElementIterator" reverse="0">
            <f:if condition="{mediaElementIterator.isFirst}">
                <f:then>
                    <f:if condition="{mediaElement.originalResource.type} == 2">
                        <f:render partial="Detail/MediaImageIsFirst" arguments="{mediaElement: mediaElement, settings:settings}"/>
                    </f:if>
                </f:then>
                <f:else>
                </f:else>
            </f:if>
		</f:for>
	</div>
</f:if>
</html>

Die nun zu erstellende Datei Resources/Private/Partial/Detail/MediaImageIsFirst.html ist zunächst eine Kopie der Datei Resources/Private/Partial/Detail/MediaImage.html. Hier kann man dann an den benötigten Stellen die settings-Parameter modifizieren, so dass über Typoscript die Größe für das erste Bild angegeben werden kann.

...
<f:image image="{mediaElement}" title="{mediaElement.title}" alt="{mediaElement.alternative}" maxWidth="{f:if(condition: settings.media.maxWidth, then: settings.media.maxWidth, else: settings.detail.isfirst.media.image.maxWidth)}" maxHeight="{f:if(condition: settings.media.maxHeight, then: settings.media.maxHeight, else: settings.detail.isfirst.media.image.maxHeight)}" />
...

Entscheidend ist dies: else: settings.detail.isfirst.media.image.maxWidth bzw. else: settings.detail.isfirst.media.image.maxHeight>. Im Typoscript steht dann zum Beispiel dieses:

plugin.tx_news.settings {
  ...
  detail.media.image.maxWidth = 360
  detail.media.image.maxHeight = 240
  detail.isfirst.media.image.maxWidth = 800
  detail.isfirst.media.image.maxHeight = 500
  ...
}

In der Datei Resources/Private/Partial/Detail/MediaContainer.html wird schließlich noch eine Abfrage erstellt, ob es mehr als ein Bild gibt und dann die im else Zweig befindliche Ausgabe generiert:

<html xmlns:f="http://typo3.org/ns/TYPO3/CMS/Fluid/ViewHelpers" data-namespace-typo3-fluid="true">
<f:if condition="{media}">
	<!-- media files -->
    <f:if condition="{media -> f:count()} != 1">
    <f:comment>
       Nur anzeigen, wenn es mehr als ein Bild gibt
    </f:comment>
        <div class="news-img-wrap news-img-wrap-detail-list">
            <f:for each="{media}" as="mediaElement" iteration="mediaElementIterator" reverse="0">
                <f:if condition="{mediaElementIterator.isFirst}">
                    <f:then>
                    </f:then>
                    <f:else>
                        <f:if condition="{mediaElement.originalResource.type} == 2">
                            <f:render partial="Detail/MediaImage" arguments="{mediaElement: mediaElement, settings:settings}"/>
                        </f:if>
                    </f:else>
                </f:if>
            </f:for>
        </div>
    </f:if>
</f:if>
</html>

Zusammengafasst benötigt man zwei zusätzlich Partails (HTML-Dateien), Modifizierungen in ebenfalls zwei Dateien (MediaContainer.html und Detail.html) und das zugehörige Typoscript.