Unsere Datenschutzrichtlinie wird in Kürze aktualisiert. Bitte sehen Sie sich die Vorschau an.

TYPO3 CMS 6.2 Grundkurs

Bilder über das IMAGE-Objekt ausgeben

Testen Sie unsere 2017 Kurse

10 Tage kostenlos!

Jetzt testen Alle Abonnements anzeigen
Für die Darstellung von Bildern im Frontend bietet es sich an, auf das IMAGE-Objekt zurückzugreifen. Mit wenigen Handgriffen realisieren Sie so die Bildausgabe.

Transkript

Um mittels TypoScript Bilder im Frontend anzeigen zu können, können wir auf das IMAGE-Objekt zurückgreifen. Bevor wir mit dem Beispiel starten, benötigen wir noch Dateien, die wir dann ausgeben können. Dazu habe ich das fileadmin-Verzeichnis geöffnet, welches wir in unserem t3kurs-Verzeichnis unter htdocs finden. Ich erweitere auf dieser Ebene die Ordnerstruktur um das Verzeichnis sys. Dieses Verzeichnis soll uns für alle Systemdateien dienen, also Dateien, die wir im Layout verwenden, JavaScript, CSS beispielsweise, aber auch eben Bilder. Unterhalb von sys lege ich ein Verzeichnis Public ab. In diesem Public-Verzeichnis werden alle Dateien liegen, die wir direkt über den Browser abrufen können, also eben CSS, JavaScript, Bilder und so weiter. Wir werden später parallel dazu ein Verzeichnis private anlegen. In dem private-Verzeichnis legen wir dann sämtliche Template-Dateien ab. Innerhalb von Public lege ich ein weiteres neues Verzeichnis an. Dieses benenne ich mit Images. Und ich habe in der Zwischenablage bereits zwei Grafiken. Diese füge ich nun hier ein und merke mir den Namen arrabiata. Es handelt sich hierbei um eine PNG-Datei. Ich schiebe das Ganze auf die Seite. Und wir bearbeiten das Template auf der Home-Site und wechseln dort in den Setup-Bereich. Hier erweitern wir nun unsere TypoScript-Struktur um ein IMAGE-Objekt. Ich notiere auch hier wieder obj als Präfix. Diesmal nehme ich aber den Bezeichner logo. Und mit dem Zuweisungsoperator mache ich das Ganze zum IMAGE-Objekt. Nach der Definition müssen wir noch den Pfad zu der Datei angeben. Das läuft wie folgt ab. Ich notiere also wieder den Namen und rufe die Eigenschaft file auf. Hier übergebe ich nun den Pfad, der lautet wie folgt: fileadmin, dann unser eben angelegtes Verzeichnis sys, dort Public/Images und arrabiata.png. Und jetzt binden wir das Objekt noch an das PAGE-Objekt, und zwar an der Stelle 30. Wir kopieren also unser obj.logo an die 30. Wenn ich nun speichere und über Web-Seite anzeigen das Frontend neu lade, sehen wir unterhalb der bisherigen Ausgaben unsere Logo-Ausgabe. Ich wechsle nochmal zurück ins Backend und wir sehen uns einige weitere Einstellungen des IMAGE-Objekts an. Praktisch ist hier vor allen Dingen die Codevervollständigung. Sie bietet mir schon ein Set an Funktionalitäten an. Beispielsweise kann ich ein altText angeben. Da verwenden wir "Logo Arrabiata", also eine Beschreibung als Alternativtext, falls das Logo nicht geladen werden kann, oder aber auch, um der Barrierefreiheit entgegen zu kommen. Wenn wir nun die Seite im Frontend neu laden und mit Firebug das Tag betrachten, sehen wir hier das alt-Attribut mit "Logo Arrabiata". Wir können das Bild auch Server-seitig verändern. Das heißt, wir können die Größen- und Breitenangaben verändern. Mit .file.width könnte ich das Ganze auf eine kleinere Größe rechnen lassen. Geben wir hier den Wert an 30. Der Wert wird in Pixel angegeben. Und laden die Seite im Frontend neu, sehen wir, dass unser Logo kleiner gerechnet worden ist. Wenn ich mit Firebug das Tag öffne, sehe ich auch, dass nicht nur das width-Attribut auf 30 Pixel gesetzt wurde, sondern auch Server-seitig die Datei neu im typo3temp-Verzeichnis abgelegt wurde. Ich wechsle wieder ins Backend und nehme diesen Wert heraus. Wir wollen unser Logo in voller Größe darstellen. Eine Anmerkung an dieser Stelle: Falls das Runterrechnen von Bildern bei Ihnen nicht funktioniert hat oder nicht funktioniert, kontrollieren Sie die Einstellungen von ImageMagick im Install-Tool. In der Regel hängt es dort. Fassen wir also zusammen: Das IMAGE-Objekt hilft uns bei der Ausgabe von Bildern im Frontend mittels TypoScript. Wir können Bilder in der Größe verändern. Wir können Attribute im Tag setzen. Und es gibt einige Einstellungen mehr, die Sie über die Codevervollständigung aufrufen 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.

Autovervollständigung
Christian H.

Hallo, das Training ist gut und hat mir vieles erklärt, was mir wirklich weitergeholfen hat. Nur eine Frage hat es offen gelassen: Sie benutzen im Tutorial eine Codevervollständigung (im Video "Bilder über das IMAGE-Objekt ausgeben", 3:23). Diese Möglichkeit habe ich nicht (Typo3 6.2.10). Wie kann ich diese Möglichkeit bei mir aktivieren? Mit freundlichen Grüßen

 

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!