Schön wären da Bilder, die die Seiteninhalte optisch widerspiegeln. Denn Bilder sagen bekanntlich mehr als Tausend Worte. Darum folgend ein Code-Schnipsel, wie man das “Menü der Unterseiten (mit Inhaltsanangabe)” (csc-menu4) ein wenig aufhübscht, und mit Bildern versieht:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40

tt_content.menu = COA
tt_content.menu {
  10 = < lib.stdheader
  20 = CASE
  20 {
    4 < .default
    4.special = directory
    4.includeNotInMenu = 1
    4.wrap = <div class="csc-menu csc-menu-4">|</div>
    4.1.NO {
      before.cObject = COA
      before.cObject {
        10 = IMAGE
        10.file.import.field = media
        10.file.import = uploads/media/
        10.file.import.listNum = 0
        10.file.maxW = 80
        10.wrap = <div class="csc-menu-imagelink">|</div>
        10.imageLinkWrap = 1
        10.imageLinkWrap {
          enable = 1
          typolink {
            ATagParams.insertData = 1
            ATagParams = title="{field:title}"
            parameter.data = field:uid
            #addQueryString = 1
            #addQueryString.method = GET
          }
        }
      }
      allWrap >
      allWrap = <div class="csc-frame csc-frame-frame1">|<div style="clear:both;"></div></div>
      wrapItemAndSub = |
      after.required = 1
      after.data = field : abstract // field : description // field : subtitle
      after.htmlSpecialChars = 1
      after.wrap = <p class="csc-abstract">|</p>
    }
  }
}

Erläuterung

Die Bilder für die einzelnen Seiten werden in den Seiteneigenschaften der jew. Seiten im “Bilder”-Block hinterlegt. Die Größe ist dabei egal, denn das Code-Snippet begrenzt die Breite der Bilder auf max. 80 Pixel, sodass diese eine einheitliche Breite haben.

Die Höhe wird im Snippet nicht begrenzt, kann aber mittels der umschließenden CSS-Klasse csc-menu-imagelink per CSS geregelt werden, z.B. mit:

1
2
3
4
5

.csc-menu-4 .csc-menu-imagelink {
	height: 60px;
	overflow: hidden;
	float: left;
}

So hat man ein einheitliches Layout, das dennoch die Flexibilität der Sitemap genießt.

Wie das ganze aussehen kann, zeigt folgendes Bild:

Mit Einschränkungen benutzbar, aber wohl nicht wirklich produktiv einsetzbar.

Ein DIV mit einem Hintergrundbild soll auf jeder Seite angezeigt werden. Jedoch nur, wenn eine Datei als Hintergrundbild hinterlegt wurde. Sonst wird das DIV nicht angezeigt.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28

css = PAGE
css {
  typeNum = 22
  config {
    additionalHeaders = Content-type: text/css
    disableAllHeaderCode = 1
  }
  stdWrap.required = 1
  stdWrap.wrap = |
  10 = TEXT
  10.value (
    .content_header_pic {
  )
  20 = TEXT
  20.data = levelmedia: -1
  20.listNum = 0
  20.wrap = background: url('uploads/media/|');
  30 = TEXT
  30.value (
    border-top: 8px solid #0D337A;
    height: 105px;
    width: 100%;
    }
  )
  30.if {
    isTrue.data = levelmedia: -1
  }
}

Und die dynamisch generierte CSS-Datei im Header-Bereich natürlich noch aufrufen:

1
2
3
4
5
6
7
8

page = PAGE
 
page {
  headerData {
    16 = TEXT
    16.dataWrap = <link rel="stylesheet" type="text/css" href="index.php?id={field:uid}&type=22" />|
  }
}

Um die gewünschte Funktionalität zu gewährleisten, habe ich die Erweiterung RandomImage (cc_random_image) missbraucht, um die Hintergrundbilder per Zufall auslesen zu lassen. Der Vorteil an dieser Extension ist, dass sie einem Marker nicht nur den Dateinamen des Zufallsbildes mitgibt, sondern den kompletten Pfad mitsamt Dateiname. Dieser lässt sich natürlich vorzüglich in einem kleinen CSS-Block verwenden.

Installieren Sie zunächst die Extension wie in der beiliegenden Anleitung beschrieben und aktivieren Sie dabei das Häkchen CType Plugin! Dies brauchen wir später, um die Zufalls(hintergrund)bilder auf die Seite zu bringen.

Erstellen Sie dann einen Ordner im fileadmin-Verzeichnis, aus dem die Bilder für den Hintergrund später gelesen werden sollen. Nun erstellen Sie eine neue versteckte Seite und fügen das Plugin als Content-Element ein. In diesem Fall wird die Extension in die Rand-Spalte abgelegt, kann aber in jede der Spalten abgelegt werden (nur müssen Sie später im TypoScript-Code darauf achten, die korrekte Spalte anzugeben).

Haben Sie die Extension ausgewählt und eingefügt, fügen Sie nun folgenden Code in die TS-Setup-Textarea zu:

path = fileadmin/bg_pics/
fileExt = jpg,jpeg,gif,png
renderObj = HTML
renderObj.wrap = |
renderObj.value (
  <style type="text/css" media="screen">
  #content {
     background: url('###FILE_1###');
  }
  </style>
)

Wichtig ist hier die erste Zeile, in der Sie den Pfad angeben müssen, den Sie zuvor erstellt haben und in dem die Bilder liegen, die als Hintergrund dienen sollen.

In diesem Fall wird das Hinergrundbild einem Element mit der ID #content zugewiesen. Sie können das natürlich anpassen. Der Marker ###FILE_1### übergibt den kompletten Pfad mitsamt Dateiname.

So weit, so gut.

Um die Ausgabe auf die Seite zu bringen, genügen zwei TypoScript-Zeilen im Haupttemplate-Setup:

page.10.marks.RANDPIC < styles.content.getBorder
page.10.marks.RANDPIC.select.pidInList = 34

pidInList ist die ID jener Seite, auf der Sie das Plugin als Content-Element eingefügt haben. getBorder heißt, dass das Content-Element sich in der Rand-Spalte befindet.

Nun müssen Sie noch den Marker ###RANDPIC### in Ihrem Template-File platziere, um den CSS-Code auszugeben.

Fragen bitte in die Comments.