Custom typo3 Sitemap

This is an example to customize the Sitemap in the typo3 system. You can add image and define your own layout for the Sitemap. You have to modify your main template on the Setup section and your root page properties on the Resources tab in the TypoScript Configuration.

Add this typo3 script in your main template on the Setup section:

# Define Sitemap of the subpages with image
temp.SubPageWithImage = HMENU
temp.SubPageWithImage {
    special = directory
    special.value.field = pages
  
    1 = TMENU
    1 {
      expAll = 1
      NO {
            wrapItemAndSub = <div class="my_col">|</div><div class="clear"></div> 
            beforeImg {
                import = uploads/media/
                import.field = media
                import.listNum = last
                width = 100
                height = 100
            }
#            width = 50 # if your image doesn't showed up, uncomment this line
            beforeImgLink = 1
            beforeWrap = <div class="bild">|</div>
            linkWrap = <h1>|</h1>
            doNotLinkIt = 1
       }
    }
    2 = TMENU
    2 {
       expAll = 1
       wrap = <div class="wrapper"><ul>|</ul></div>
        NO {
          allWrap = <li> | </li>
          stdWrap.htmlSpecialChars = 1
        }
    }
}

# Define Sitemap of the pages with image
temp.PageWithImage < temp.SubPageWithImage
temp.PageWithImage.special = list

tt_content.menu.20 = CASE
tt_content.menu.20.key.field = menu_type
tt_content.menu.20.98 < temp.PageWithImage
tt_content.menu.20.99 < temp.SubPageWithImage

Add this script on the TypoScript Configuration section in your root page:

TCEFORM.tt_content.menu_type {
addItems {
98 = Menu of this page with image
99 = Menu of subpage of selected page with image
}
}

Now you will have 2 new Menu/Sitemap type in the Sitemap dropdown menu.

CSS example:

.my_col {}

.my_col .bild { float: left; width: 120px; }

.my_col h1 { margin: 0 0 5px 0; }

.clear { clear: left; height: 15px; }

.wrapper ul { width: 45em; /* room for 2 columns */ }

.wrapper ul li {

float: left;

width: 16em; /* accommodate the widest item */

margin: 0.2em 0 !important;

}

.wrapper { width:370px; float:left; }

.wrapper ul li a { display: block; width: 14em; text-decoration: none; }