Logos zuschneiden
Hier finden Sie eine Schritt-für-Schritt-Anleitung, wie Sie ein Bild oder ein Logo im TYPO3-System einbinden können, ohne dass es zu einem unerwünschten Bildbeschnitt kommt.
Unser Tutorial bezieht sich auf das Programm IrfanView.
Alternativ können Sie auch die formathaltende Funktionen direkt in TYPO3 nutzen (Cropping), oder falls Photoshop oder Paint 3D zur Verfügung stehen, ähnliche Schritte dort durchführen.
Der Kernpunkt dabei ist, sicherzustellen, dass einer der Bildwerte perfekt den Maximalwert erreicht, während der andere darauf abgestimmt wird und der Freistellungsraum angepasst wird.
1. Bildgröße überprüfen
- Öffnen Sie das TYPO3-System und schauen Sie im Leitfaden oder direkt im TYPO3-Element nach der benötigten Bildgröße. Diese Informationen sind wichtig, um das Bild korrekt zuzuschneiden.
- Unser Beispielbild (Uni-Logo) hat die Abmessungen 2480 x 2596 Pixel und soll ohne Bildbeschnitt im Element "Teaser-Karte" (430x223 Pixel) dargestellt werden.
Beispielbild
- Logo Universität Potsdam (Version Print-Design) (JPG, 320 KB)
Beispiele für Bildbearbeitungsprogramme
- Wenden Sie sich bei Fragen zur Installation an Ihre Systembetreuer.
2. Öffnen Sie das Bild im Bildbearbeitungsprogramm
Schritt 1
Öffnen Sie IrfanView und darin das Bild, das Sie anpassen möchten. Klicken Sie dafür auf "File" > "Open".
Schritt 2
Wählen Sie das anzupassende Bild aus und öffnen Sie es.
Schritt 3
Das Bild wird im Originalformat geöffnet. Am linken Seitenende sehen Sie die aktuelle Größe des Bildes.
Schritt 4
Klicken Sie im Menü nun auf "Image".
Schritt 5
Wählen Sie im Menü "Resize/Resample" aus.
Schritt 6
Ändern Sie die Bildgröße, indem Sie im Menü unter "Width" oder "Height" den gewünschten Maximalwert eingeben.
- Es ist wichtig, dass entweder die Breite oder die Höhe den vorgegebenen Maximalwert erreicht, während die andere Dimension geringer bleibt.
- Achten Sie darauf, dass das Häkchen bei "Preserve aspect ratio (proportional)" gesetzt ist, um die Proportionen beizubehalten. Diese Einstellung ermöglicht eine proportional korrekte Skalierung, die die optimale Darstellung sicherstellt.
- In unserem Beispiel geben Sie im Feld "Height" den Wert 223 ein, wodurch die Breite automatisch auf 213 Pixel skaliert wird.
- Die Größenskalierung erfolgt dabei proportional, um eine Verzerrung des Bildes zu vermeiden.
- Abschließend klicken Sie auf "OK", um die Änderungen zu bestätigen.
- Nur durch das anschließende Verbreitern der Canvas-Größe im nächsten Schritt kann der Freistellungsraum um das Logo erhöht werden, sodass kein Bildbeschnitt erfolgt.
Schritt 7
Öffnen Sie in IrfanView erneut das Feld "Image" im Menü und gehen Sie zum Feld "Change Canvas size".
Schritt 8
Vergrößern Sie jetzt das Bild, indem Sie die Canvas-Größe erweitern.
- Wählen Sie die Option "Method 2: Set total canvas dimensions in pixels".
- Geben Sie in den Feldern "Width" und "Height" die gewünschten finalen Maße ein; in unserem Beispiel ist dies "Width" 430 und "Height" 223. Dadurch erweitern Sie die Canvas-Größe und erzeugen Weißraum um das Bild.
- Im Feld "Anchor" wählen Sie "Center", um das Bild mittig zu platzieren und zu gewährleisten, dass keine Seiten beschnitten werden.
- Achten Sie darauf, dass "Weiß" als Hintergrundfarbe im Feld "Canvas" festgelegt ist.
- Abschließend klicken Sie auf "OK", um die Änderungen zu bestätigen.
Finale Ansicht und Speichern
- Speichern Sie das angepasste Bild in guter Qualität als JPG.
- Laden Sie das fertig bearbeitete Bild in das TYPO3-System hoch und binden Sie es ein.
- Überprüfen Sie, dass das Bild korrekt angezeigt wird, ohne dass es beschnitten wird.
3. Bild in TYPO3 hochladen und im Element "Teaser-Karte" einbinden
- Hier sind verschiedene Darstellungsmöglichkeiten für Bilder und Logos im Element "Teaser-Karte".
- Sie können dieses Element in einem Container platzieren, um mehrere Teaser nebeneinander anzuordnen.
- Teaserkarten bieten die Flexibilität, unterschiedliche Hintergrundfarben oder gar keinen Hintergrund zu verwenden.
Container mit zwei Spalten und zwei Teaser-Karten mit Text
Container mit zwei Spalten und zwei Teaser-Karten ohne Text
Container mit drei Spalten und drei Teaser-Karten mit Text
Container mit vier Spalten und vier Teaser-Karten mit Text
Container mit fünf Spalten und fünf Teaser-Karten mit Text
Container mit zwei Spalten (33-66)
Für diese Darstellung wurde ein Container mit zwei Spalten eingebunden. Die Variante 33-66 wurde ausgewählt. In der schmaleren Spalte wurde eine Teaser-Karte eingefügt. Das Feld für die Überschrift wurde unsichtbar gestellt, könnte aber optional genutzt werden. Das Feld für den Teaser-Text wurde leer gelassen, könnte aber optional genutzt werden. Das Feld für die Urheberangaben wurde leer gelassen, könnte aber optional genutzt werden. Es wurde kein Link hinterlegt. Deshalb ist das Logo nicht klickbar. Sobald ein Link hinterlegt werden würde, wäre das Bild klickbar.