Am 14. September 2017 haben wir eine überarbeitete Fassung unserer Datenschutzrichtlinie veröffentlicht. Wenn Sie video2brain.com weiterhin nutzen, erklären Sie sich mit diesem überarbeiteten Dokument einverstanden. Bitte lesen Sie es deshalb sorgfältig durch.

TYPO3 CMS 6.2 Grundkurs

Ausgaben mit Link- und Image-ViewHelper realisieren

LinkedIn Learning kostenlos und unverbindlich testen!

Jetzt testen Alle Abonnements anzeigen
Sobald das Grundgerüst eines Template steht, werden in FLUID häufig bestimmte Ausgaben mittels ViewHelper realisiert. In diesem Video erleben Sie die häufig verwendeten Link- und Image-ViewHelper im praktischen Einsatz.

Transkript

Bei der Arbeit mit FLUID kann es hilfreich sein, oder in manchen Fällen auch dringend notwendig werden, sich von speziellen Helferfunktionen unterstützen zu lassen. Dies sind in FLUID sogenannte ViewHelper. FLUID selbst bringt bereits eine Vielzahl von ViewHelpern mit. Eine Übersicht finden Sie zum Beispiel im TYPO3-Wiki, unter wiki.typo3.org/Fluid. Die Standard-ViewHelper von FLUID werden immer mit f: eingeleitet. f ist hierbei ein entsprechender Namespace. Sie haben die Möglichkeit, auch einen eigenen Namensraum mit eigenen ViewHelpern zu verwenden. Ein solcher ViewHelper existiert beispielsweise, um Links auf eine Seite zu erstellen. Sie finden die Information hierzu unter f:link.page. Und dahinter kann dann die zu verlinkende Page-ID angegeben werden. Wir haben auf unserer Beispielseite hier im Layout eine Grafik, die aktuell auf Slash verlinkt. Allerdings ist unsere URL natürlich localhost/t3kurs, sodass wir hier am besten eine Verlinkung korrekt auf die Home-Seite hätten, in unserem Fall also die ID 1. Wir wollen das FLUID-Template nun also entsprechend anpassen, um eine korrekte Verlinkung vorzunehmen. Die Grafik findet sich in diesem Fall unterhalb der Layouts in unserem Layout Rahmen. Sie finden hier eine direkte Verlinkung per a href, die wir nun durch einen FLUID-ViewHelper entsprechend ersetzen wollen. Die Syntax war f:link. Und wir verwenden den page-ViewHelper. Dahinter müssen wir die pageUid eingeben und wollen auf die Seiten-ID 1 verlinken. Unser Bild bleibt nach wie vor erhalten. Und schließen den Tag entsprechend. Wir verwenden hier wieder f:link. Und Sie müssen darauf achten, hier auch entsprechend .page noch zu verwenden, das Pendant zum öffnenden Tag. Wir speichern ab, clearen den Cash, und laden die Seite erneut. Sie sehen hier eine Verlinkung auf t3kurs und entsprechend dort auf die Seiten-ID 1. Sofern Sie eine Funktionalität wie Simulate Static, realURL, oder coolURI verwenden, würde hier TYPO3 diese Seiten-ID natürlich auch in eine entsprechend konfigurierte URL konvertieren. Sie sind so im Template unabhängig und überlassen TYPO3 die Erstellung einer korrekten URL. Als weiteres Beispiel wollen wir nun noch einen ViewHelper zur Einbindung von ViewHelper verwenden, etwa für unsere beiden Logografiken hier unten. Im TYPO3-Wiki finden Sie hierzu entsprechend auch einen Hinweis auf f:image. So sieht dann entsprechend das Tag aus. Wir haben f:image gefolgt von der URL. Und Sie haben hinten die Möglichkeit, beispielsweise auch automatisch eine Konvertierung auf eine passende Größe anzugeben. In unserem Fall werden die Bilder über ein Partial ausgegeben. Dieses finden Sie unter Private, dann Partials, und hier die Ausgabe für einen Logoblock. Sie sehen allerdings, wir haben hier eine Variable inhalt, die ausgegeben werden soll. Die enthält sowohl den Textblock als auch das Bild. Hier wird seitens TYPO3 vorher schon das komplette HTML als Objekt zusammengebaut und dann nur noch an FLUID übergeben. Was wir an dieser Stelle allerdings benötigen, ist rein die Bild-URL, und diese dann natürlich unverändert. Um reine Werte statt Objekten zu übergeben, müssen wir diese seitens TypoScript auf einem Wege an FLUID durchreichen. Wir werden hier dann entsprechend den Inhalt lediglich auf den Textblock reduzieren und dahinter in unserem Partial das Bild ergänzen. Wir verwenden hier also nun ein f:image. Dahinter kommt die Angabe der entsprechenden Quelle. Das heißt, wir können hier zum Beispiel die logoUrl verwenden. Und wir wollen dann noch beispielhaft mal eine manuelle Breite setzen, beispielsweise 80 Pixel. Anschließend muss dieses Tag noch geschlossen werden. Und jetzt kommen wir zur notwendigen Änderung bei der Übergabe. Das Partial wird aufgerufen über unser Template. Das ist hier. Und wir müssen hier unseren neuen Parameter logoURL übergeben. Dieser kommt nun nicht mehr direkt über inhalt, was ein Objekt wäre, sondern kommt aus der Variable settings. Und hier haben wir dann logoURL1 zum Beispiel. Und darunter die logoURL2. Jetzt müssen wir dies noch entsprechend aus TypoScript übergeben. Hierzu wechseln wir ins Backend, ins Setup, und finden hier unseren bisherigen Logoblock. Das Bild wollen wir in dieser Form allerdings gar nicht mehr übergeben. Deswegen können wir die Angabe für das Objekt 20 hier entsprechend auskommentieren. Wir wollen stattdessen definieren, dass unser Logo per settings übergeben wird. Der Variablenname hier ist relativ beliebig. Wir können hier logoURL1 verwenden, und übergeben entsprechend die andere Variable in logoURL2. Der Logoblock selbst besteht dann jetzt eigentlich nur noch aus einem Textblock. Der Vollständigkeit halber kopieren wir diesen einfach mal, sodass wir einen Block2 haben, welcher natürlich eine Kopie von Block1 ist. Die settings müssen wir uns jetzt entsprechend weiter unten bei dem FLUIDTEMPLATE statt in den variables in den settings übergeben lassen. Die settings holen wir hier entsprechend aus der TypoScript-Variable settings. Wir speichern ab und betrachten das Ergebnis im Frontend. Sie sehen hier, dass die Logos nun kleiner dargestellt werden, natürlich nur als Beispiel. Dies ist die Bestätigung, dass unsere logoURLs jeweils korrekt an den ViewHelper f:image durchgereicht wurden und dieser entsprechend auch die Generierung eines temporären Bildes übernommen hat, hier also mit 80 Pixel Breite. Werfen wir vielleicht einen Blick in den HTML-Quelltext. Sie sehen hier, dass TYPO3 eine temporäre Datei generiert hat. Diese wurde im Ordner _processed_ abgelegt und sie hat eine Breite von 80 Pixel sowie eine automatisch entsprechend angepasste Höhe erhalten. Das HTML-Image-Tag haben wir an dieser Stelle nicht selbst angegeben, sondern dies wurde durch den entsprechenden ViewHelper automatisch generiert. Sie haben in diesem Video gesehen, wie praktisch ViewHelper sein können, beispielhaft den link-ViewHelper sowie den image-ViewHelper kennengelernt, und ganz nebenbei gelernt, wie die Übergabe von variables an FLUID-Template erfolgt, beziehungsweise wie ohne Interpretation settings durchgereicht werden können.

TYPO3 CMS 6.2 Grundkurs

Erfahren Sie alles Wichtige für den Einstieg in das Content-Management-System TYPO3 CMS sowie zu Themen wie Mehrsprachigkeit und Multidomainfähigkeit bis hin zur News-Verwaltung.

Derzeit sind keine Feedbacks vorhanden...
 

Dieser Online-Kurs ist als Download und als Streaming-Video verfügbar. Die gute Nachricht: Sie müssen sich nicht entscheiden - sobald Sie das Training erwerben, erhalten Sie Zugang zu beiden Optionen!

Der Download ermöglicht Ihnen die Offline-Nutzung des Trainings und bietet die Vorteile einer benutzerfreundlichen Abspielumgebung. Wenn Sie an verschiedenen Computern arbeiten, oder nicht den ganzen Kurs auf einmal herunterladen möchten, loggen Sie sich auf dieser Seite ein, um alle Videos des Trainings als Streaming-Video anzusehen.

Wir hoffen, dass Sie viel Freude und Erfolg mit diesem Video-Training haben werden. Falls Sie irgendwelche Fragen haben, zögern Sie nicht uns zu kontaktieren!