TYPO3 8.7 Menü/Sitemap Element mit Bildern

Das ging früher mit ein paar Zeilen TypoScript relativ einfach (hier ein Beispiel aus 2014). Heutzutage benötigt man eine eigene Extension oder man weiß sich anders zu helfen.

Hinweis: diese Anleitung gilt auch für TYPO3 9. Wie man das mit einer eigenen Extension macht ist hier beschrieben. Wem das zu kompliziert ist (z.B. mir) kann sich auch anders helfen, nämlich mit dem Umbau eines der vorhandenen Sitemap Elemente. In diesem Beispiel soll ein Ausgangspunkt gesetzt werden und die Unterseiten mit Bild, Titel und Inhaltsangabe dargestellt werden. Damit man das originale Element weiterhin verwenden kann, definiert man im Datensatz ein Layout, z.B. so:

TCEFORM.tt_content.layout.altLabels.1 = Sitemap als Bilderliste

Hinweis: Möchte man – was sinnvoll ist – die Option dieses Element auszuwählen nur für Datensätze verfügbar machen, die auch das entsprechende Sitemapelement verwenden, so modifiziere man obigen Code indem man den CType des Elements angibt – in unserem Beispiel also folgendermaßen:

TCEFORM.tt_content.layout.types.menu_sitemap_pages.altLabels.1 = Sitemap als Bilderliste

Der Datensatz bekommt also unter „Erscheinungsbild / Layout“ die Auswahl „Sitemap als Bilderliste“ und als Menüelement „Sitemap der ausgewählten Seiten“.
Dann holt man sich aus fluid_styled_content das Template MenuSitemapPages.html. Dieses wird dann folgendermaßen modifiziert:

<html xmlns:f="http://typo3.org/ns/TYPO3/CMS/Fluid/ViewHelpers" data-namespace-typo3-fluid="true">
<f:layout name="Default" />
<f:section name="Main">
    <f:if condition="{data.layout} == 1">
        <f:then>
            <f:render section="MenuMitBildern" arguments="{menu: menu}" />
        </f:then>
        <f:else>
            <f:render section="Menu" arguments="{menu: menu}" />
        </f:else>
    </f:if>
</f:section>
 
<f:section name="Menu">
    <f:if condition="{menu}">
        <ul>
            <f:for each="{menu}" as="page">
                <li>
                    <a href="{page.link}" {f:if(condition: page.target, then: ' target="{page.target}"')} title="{page.title}"><span>{page.title}</span></a>
                    <f:render section="Menu" arguments="{menu: page.children}" />
                </li>
            </f:for>
        </ul>
    </f:if>
</f:section>
 
<f:section name="MenuMitBildern">
    <f:if condition="{menu}">
        <div class="sitemap-mit-bildern">
            <f:for each="{menu}" as="page">
                <div class="owl-item">
                    <div class="header-post">
                        <a href="{page.link}" {f:if(condition: page.target, then: ' target="{page.target}"')} title="{page.title}">
                          <f:image src="fileadmin/{page.files.0.originalFile.identifier}" width="263c" height="155c" />
                        </a>
                    </div>
                    <div class="info-post">
                        <h3>
                            <a href="{page.link}"{f:if(condition: page.target, then: ' target="{page.target}"')} title="{page.title}">{page.title}</a>
			</h3>
                        <p>{page.data.abstract}</p>
                    </div>
                    <f:render section="Menu" arguments="{menu: page.children}" />
                </div>
            </f:for>
        </div>
    </f:if>
</f:section>
 
</html>

Die Zeile, in der das Bild generiert wird:

<f:image src="fileadmin/{page.files.0.originalFile.identifier}" width="263c" height="155c" />

verdient insofern Beachtung, als die 0 die erste Position markiert, sofern mehrere Bilder verwendet werden (entspricht also dem Wert der Eigenschaft listNum im TypoScript.

CropVarianten für Bilder im Menü/Sitemapelement

Möchte man für das Bild in der Sitemap eine Cropvariante definieren – in diesem Beispiel quadratisch – so fügt man z.B. folgendes in das PageTS Config ein:

TCEFORM.sys_file_reference.crop.config.cropVariants {
    default {
        title = Bilder
        selectedRatio = NaN
        allowedAspectRatios {
            NaN {
                title = Free
                value = 0.0
            }
            16:9 {
                title = 16:9
                value = 1.7777777
            }
            4:3 {
                title = 4:3
                value = 1.3333333
            }
            3:2 {
                title = 3:2
                value = 1.5
            }
            1:1 {
                title = 1:1
                value = 1
            }
        }
    }
    sitemap {
        title = Sitemap
        selectedRatio = 1:1
        allowedAspectRatios {
            NaN {
                title = Free
                value = 0.0
            }
            1:1 {
                title = 1:1
                value = 1
            }
        }
    }
}

Die Cropvariante „sitemap“ kann nun im Menü/Sitemap Element so verwendet werden:

<f:if condition="{page.files}">
    <img src="{f:uri.image(image:page.files.0,width:'500',height:'500',cropVariant:'sitemap')}">
</f:if>

Links zu Cropvarianten:
https://metinyilmaz.de/blog/typo3-image-cropvariants
https://www.clickstorm.de/blog/crop-funktion-fuer-bilder-in-typo3-8-7/