Lupe Suche
Responsiv Devices

8 - Bilder verwenden

Dein Template kann auch Bilder beinhalten. Du kannst sie wie gewohnt mit CSS (background-image) oder direkt mit HTML (<img src="... />) in der Datei Page.ss einbauen. Beachte die nötige Pfadangabe, deine Templatedateien werden immer in der Startdatei index.php angezeigt.

Der Ordner images

Alle Bilder die zum Template gehören (nicht die Bilder der Inhalte), sollten in den Ordner 'images'  untergebracht werden:
(Mit rechter Maustaste >Ziel Speichern unter >themes/meintemplate/images ...)

1. Kopiere die beiden bereitgestellten Bilder (weblabpor.png und printer.png) in den Ordner: themes/meintemplate/images

Bilder mit CSS einbinden

Im Absatz des header-Elements' soll das Bild 'weblabor.png' als Hintergrundbild eingefügt werden. Dazu musst du die Pfadangabe und die Position des Bildes in deine CSS-Datei 'layout.css' eintragen.

2. Ergänze den CSS-Stil header {...} mit den Angaben für das Hintergrundbild.
3. Speichere und Publiziere die Dateien
4. Untersuche das Ergebnis im Browser

header {
    height: 60px;
    background: #66CC99 url(../images/weblabor.png) no-repeat;
    background-position: 60% 0%;
    width:100%;
}

Den bestehenden Text 'Weblabor' in der Datei Page.ss kannst du löschen. Anstelle des Textes soll jetzt das Bild erscheinen.

<header><h1>Weblabor</h1></header>

Bilder ins HTML von Page.ss einbinden

Zum Template gehörende Bilder können auch direkt in die Datei Page.ss eingetragen werden. Das kann erforderlich sein, wenn diese Bilder ausgedruckt werden sollen. Hintergrundbilder werden Standardmässig ausgeblendet beim Drucken.

Bilder die interaktiv verwendet werden, Galerien oder in diesem Beispiel ein Print-Button, werden mit dynamischem Code, PHP oder Javascript direkt ins HTML eingetragen.

Im img-Tag musst du den Pfad in deinen Templateordner angeben. Wenn du ihn 'hart-codiert' schreibst, hast du dir den Nachteil eingehandelt, dass du deinen Template-Ordner-Namen benutzen musst. Das Template also eine absolute Pfadangabe benutzt, die sich so nicht zügeln lässt.

Mit dem PHP-Platzhalter $ThemeDir (DiePfadangabe für dein Template) kannst du diese Pfadangabe dynamisch ausgeben.

<footer>
  <p>Adresse in der Fusszeile</p>
  <a href="javascript:window.print()">
      <img src="$ThemeDir/images/printer.png">
  </a>
</footer>

 weblabor-bilder.png

Nicht zu verwechseln! Bilder die zum Inhalt gehören, werden über den Editor in die jeweiligen Seiten eingebaut. Sie gehören nicht zum Template.

Weiter zur Zusammenfassung von Tutorial 2