Graphische Sitemap mit Bild aus Inhalt

Ein Kunde von uns hat sich eine News Seite angelegt. Dort hat er per HTML seit fast 15 Jahren immer wieder die neuesten Artikel abgelegt. Leider aber in einer riesigen HTML Seite.

Für den Umbau auf eine SEO gemäße Darstellung  in Typo3 haben wir erstmal aus jedem Artikel eine eigene Seite erstellt. War einiges an Arbeit, aber eine bessere Lösung ist mir nicht eingefallen. Jede Seite wurde dann unterhalb einer Jahresseite abgelegt, damit das ganze übersichtlicher wird. (Und noch mehr Seiten für unseren SEO). Auf der Jahresseite habe ich dann eine Sitemap erstellt, mit ‚Auszug‘, oder Abstract. Das war jedoch, auch nach Formatierung über CSS einfach nicht gut genug.

Die Jahresseiten sollten für sich schon den richtigen Teaser Effekt haben und die Leute dazu verleiten auf die Unterseiten zu klicken. Dazu brauchten wir unterhalb einen Weiterknopf, aber vor allem ein Teaser-Bild aus dem Inhalt. Ich hatte mir überlegt jedes Bild als Resource für die Einzelnen Seiten einzubinden, und dann das als Menü auszugeben. Wurde schon verschiedendlich gemacht, aber hätte bedeutet, nochmal jede Seite anzufassen und hätte in Zukunft mehr Arbeit bedeuetet für den Kunden.

Also habe ich beschlossen die Standard-Sitemap mit Auszug für Typo3 umzuschreiben. Jetzt sieht das richtig gut aus und ist leicht erweiterbar.
Also erstmal das neue Menü definieren:

menu { news = HMENU news { special = directory special.value.field = pages wrap = <div>|</div><hr> 1 = TMENU 1 { NO = 1 NO { allWrap = <hr><div>|</div> stdWrap { htmlSpecialChars = 1 } ATagParams = target = "_top" afterWrap = | linkWrap = <h2>|</h2> after.cObject = COA after.cObject { wrap = | 10 < styles.content.get 10 { select { pidInList.field = uid max = 1 } renderObj = COA renderObj { wrap = <table cellpadding="0" cellspacing="0" border="0"><tr>|</tr></table> 10 = TEXT 10 { wrap = <td>|</td> field = bodytext stdWrap { crop = 360 | &nbsp;[...] parseFunc < lib.parseFunc_RTE parseFunc.nonTypoTagStdWrap.HTMLparser { keepNonMatchedTags = 0 htmlSpecialChars = 2 allowTags = img,u,ul,ol,b,strong,li,em,i,p,br,h1,h2,h3 removeTags = a } } } 20 = IMAGE 20 { wrap = <td>|</td> file { import = uploads/pics/ import.field = image width = 110 } altText.field = header titleText.field = header } } } 20 = TEXT 20 { required = 1 data = field : tx_gstaliaspro_aliaspro wrap = <a href="|">weiter...</a><br /> } } # after.cObject } # NO target = page } # 1 } # news

Dann die Standard-Definition für sitemap 4 überlagern:

tt_content.menu.20.4 < menu.news

Ich entschuldige mich bei denen, die wie ich Einrücken und Formatierung von Code für extrem wichtig halten. WordPress hat aber einfach alle Leerzeichen rausgeworfen, wie es auch korrekterweise in der HTML Definition beschrieben ist. Iirgendwann, wenn ich mal viel Zeit habe, versuche ich da eine bessere Lösung zu fiinden.