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:

Das Plugin beschreibt seine Features wie folgt:

1.) TYPO3 Login
Natürlich haben wir in der TYPO3 Workbench auch das bewährte “TYPO3 Backend” integriert. Neu hinzugekommen ist die Möglichkeit, das die Workbench nach einer “/typo3/index.php” prüft und nur den Loginbutton anzeigt, sofern eine TYPO3 installation vorliegt.

2.) Meine Projekte
Um noch schneller auf aktuelle Projekte zugreifen zu können, kann nun mit Hilfe der bookmarksfunktion ein Ordner hierfür angelegt und in der Konfiguration von TYPO3 Workbench ausgewählt werden. Die in diesem Ordner angelegten Bookmarks können dann schnell über TYPO3 Workbench aufgerufen werden. Optional wird beim Aufruf auch gleich die Login Seite in einem neuen Tab geöffnet.

3.) Referenzen
Da die TYPO3 Referenzen “TSREF” und TSconfig” auch im Docbook Format vorlagen, wurden diese als Hilfe-Dateien integriert. Über das Inhaltsverzeichnis und eine integrierte Suche können diese nun durchsucht werden. Textelemente können hieraus kopiert und in das TYPO3 Template eingefügt werden.

4.) Extensions finden
Über eine kurze Sucheingabe wird diese direkt an das Extension Repository von TYPO3 gesendet. Das Ergebnis öffnet in einem neuen Tab.

5.) Foren durchsuchen
Nach TYPO3 Hilfen in Google zu suchen ist mitlerweile recht unkomfortabel. Hierzu wurde eine Suche über verschiedenste Foren integriert. Welche Foren mit durchsucht werden sollen, kann der Benutzer in den Konfigurationseinstellungen definieren.

Und so sieht es aus:

Bisher nutzte ich das TYPO3 Backend Plugin von VisioConnect, das damit wohl überflüssig wird, da die Jungs von VisioConnect nun selbst für Nachschub sorgen.

» Zum Download des Firefox-Plugins “TYPO3 Workbench”

Zu gewinnen gibt es:

• “Das TYPO3 Profihandbuch – Der Leitfaden für Entwickler und Administratoren zu Version 4.1” und die DVD “TypoScript – Video-Training“
• Unter allen Teilnehmern ein Jahresabo des T3N Magazin mit einer “OpenSource” – Tasche, “Das TYPO3 Profihandbuch – Der Leitfaden für Entwickler und Administratoren zu Version 4.1″ und die DVD “TypoScript – Video-Training”

Einsendeschluss ist der 20.12.07 23:59 Uhr.

Zum Wettbewerb!

Folgend das TypoScript. Anzupassende Variablen folgen danach.

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

marks.DROPDOWN_NAVI = COA
  marks.DROPDOWN_NAVI {
  10 = HMENU
  10 {
     special = directory
     special.value = 1
     wrap = <div><select name="dropdown_navi" class="quickjump" size="1" onChange="document.location.href='index.php?id=' + this.value"> | </select></div>
 
     1 = TMENU
     1 {
       expAll = 1
       noBlur = 1
       NO {
         stdWrap.dataWrap = <option value="{field:uid}">
         allWrap = | </option>
         doNotLinkIt = 1
       }
       CUR = 1
       CUR {
         stdWrap.dataWrap = <option value="{field:uid}" selected="selected">
         allWrap = | </option>
         doNotLinkIt = 1
       }
     }
  }
  }

Hier die einzige anzupassende Variable.

6

special.value = 1

Hier wird die ID der Seite eingetragen, deren Unterseiten im Dropdown angezeigt werden sollen.

UPDATE 26.08.2007:

Viel einfacher geht es auch.

1
2
3
4
5
6
7
8

marks.DROPDOWN_NAVI = HMENU
marks.DROPDOWN_NAVI {
  special = directory
  special.value = 1
  1 = JSMENU
  1.target = _blank
  1.firstLabelGeneral = Sprung zu Seite
}

4

special.value = 1

Hier wird die ID der Seite eingetragen, deren Unterseiten im Dropdown angezeigt werden sollen.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22

marks.BREADCRUMB = COA
marks.BREADCRUMB {
10 = HMENU
10 {
  special = rootline
  special.range = 0|-1
  1 = TMENU
      1.noBlur = 1
      1.CUR = 1
      1.target = _self
      1.NO {
          stdWrap.field = nav_title // title
          ATagTitle.field = nav_title // title
          linkWrap = | |*| » |*|
          }
      1.CUR {
          stdWrap.field = nav_title // title
          linkWrap = | |*| » |*|
          doNotLinkIt = 1
          }
     }
}

Sieht dann ähnlich dem aus:

Startseite » Kategorie1 » Unterseite 1

Nicht vergessen, im HTML-Template den Marker via ###BREADCRUMB### zu platzieren.

Vorangestellt wird immer die Oberkategorie, in der man sich befindet, dahinter folgen alle Unterseiten der Oberkategorie. Der Link der aktuell besuchten Seite lässt mit CSS anpassen.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

temp.MENU = COA
temp.MENU {
	10 = TEXT
	10.dataWrap = &nbsp;&nbsp;<strong><a href="index.php?id={leveluid:1}">{leveltitle:1}</a></strong>
	15 = HTML
	15.value = &nbsp;&raquo;&nbsp;
 	20 = HMENU
 	20.entryLevel = 1
 	20.1 = TMENU
 	20.1 {
   		NO.ATagTitle.field = title
   		NO.linkWrap = &nbsp;&nbsp;|&nbsp; |*| &nbsp;&nbsp;|&nbsp; |*| &nbsp;&nbsp;|
   		ACT = 1
   		ACT.ATagTitle.field = title
   		ACT.ATagParams = class="aktiv"
   		ACT.linkWrap = &nbsp;&nbsp;|&nbsp; |*| &nbsp;&nbsp;|&nbsp; |*| &nbsp;&nbsp;|
	}
}

Das Ganze könnte dann in etwa so aussehen:

Oberkategorie » UnterseiteOberkat1 | UnterseiteOberkat2 | UnterseiteOberkat3