Bilder in den Header einfügen

**musicfreak79** · 16.02.2013, 11:06

Hallo liebe Community,

ich arbeite mich gerade mit Peter Müllers Buch in Contao ein.

Wie bekomme ich ein Bild in den Header? Ein Hintergrundbild habe ich eingefügt. Jetzt möchte ich noch ein Logo platzieren.
Warscheinlich ist es hanz simpel, aber ich finde leider die Lösung bzw. den Weg zur Lösung nicht.

Ich verwende die Beispielseite von Peter Müller - Header, linke und rechte Spalte, Main und Footer.

Der Header ist ja als Frontendmodul erstellt. Wie kann ich da beliebige Bilder platzieren?

Vielen Dank schon einmal!

**derRenner** · 16.02.2013, 16:04

Hallo,

so z.B.:
leg dir ein neues Modul an - als Modultyp nimmst du 'Eigener HTML-Code'
in diesem HTML-Code gibst du nun einen Link mit Bild an und vergibst dem Link eine Klasse
z.B. <a class="logo" href="meinLink"><img src="meinLinkZumBild" /></a>

nun fügst du im Layout unter 'Frontend-Module' - 'Eingebundene Module' dein neues Modul in der Kopfzeile ein.
Nun formatierst du deine class noch ein wenig mit position:absolute
z.B. #header .logo {position:absolute; top:50px; left:100px;}

Wenn du nur ein Bild, ohne Link haben möchtest, dann lass den <a href>-Teil weg und vergib nur dem img eine Klasse, damit du die Position dann noch ein wenig formatieren kannst.

**musicfreak79** · 17.02.2013, 12:01

Hallo!

vielen Dank für den Tip. Es klappt.
Ich muss mich wohl intensiv mit css beschäftigen.

**pmmueller** · 17.02.2013, 18:11

Zitat von musicfreak79

Der Header ist ja als Frontendmodul erstellt. Wie kann ich da beliebige Bilder platzieren?

Ganz normales HTML. Also ein <img>-Element mit Pfadangabe zum Bild, dass du vorher in die Dateiverwaltung hochgeladen hast. Etwas in dieser Art:

<h1><img src="files/pfad/mein-logo.jpg" ...></h1>

Wenn du auf das Logo klicken möchtest, um zur Startseite zurückzukommen, dann legst du einen Link um das Bild. Wenn nicht, dann nicht.

Zum Bild einfügen brauchst du also weder absolute Positionierung noch sonst irgendwelche CSS-Zaubereien. Zur Positionierung reicht meist ein bisschen margin, padding oder ähnliches. Auch wenn es sicherlich eine gute Idee ist, HTML und CSS zu können

Wenn dir das mit handgeschriebenem HTML im Modul zu kompliziert erscheint, dann schaue dir ab Seite 613 in K24.1 an, wie man "Text im Fußbereich mit dem TinyMCE" pflegen kann. Das geht natürlich genau so auch für den Kopfbereich.

**rusty** · 19.02.2013, 13:23

Zitat von musicfreak79

Ich muss mich wohl intensiv mit css beschäftigen.

Das kann nicht schaden. Peter Müller hat dazu ja auch das passende Buch verfasst ...

Wenn es auf jeder Seite ein anderes Bild sein soll, das im Header erscheint, kannst du im Seitenlayout das Modul "Artikel" zusätzlich zur Hauptspalte auch für die Kopfzeile aktivieren. Anschließend lässt sich im Header ein Artikel platzieren, dem du z.B. ein Bild als Inhaltselement geben kannst.

Falls das für Redakteuere noch vereinfacht werden soll, bieten sich auch Erweiterungen an, die genau das tun: Ein Bild je Seite festlegen.
pageimage (offiziell kompatibel bis 2.11.6)
xseitenbilder (kompatibel ab 3.0.x)