带有面板列表组的Bootstrap 3缩略图中的TYPO3 TMENU

Question

I want to render a overviewsite in TYPO3 some kind of TMENU which isnt very easy. Relying on this HTML structure:

  <div class="col-xs-12 col-sm-4 col-md-4"> <div class="thumbnail"> <div class="headline"> <h2>Headline</h2> </div> <img src="img/product/picture.jpg" alt="..."> <div class="caption"> <div class="panel list-group"> <a href="#" class="list-group-item" data-toggle="collapse-next">Menu 1</a> <div class="collapse list-group-submenu"> <a class="list-group-item sub-item small"><span class="fa fa-chevron-right"></span> Submenu 1</a> <a class="list-group-item sub-item small"><span class="fa fa-chevron-right"></span> Submenu 2</a> </div> <a href="#" class="list-group-item" data-toggle="collapse-next">Menu 2</a> <div class="collapse list-group-submenu"> <a class="list-group-item sub-item small"><span class="fa fa-chevron-right"></span> Submenu 1</a> <a class="list-group-item sub-item small"><span class="fa fa-chevron-right"></span> Submenu 2</a> </div> <a href="#" class="list-group-item">Menu 3</a> <a href="#" class="list-group-item">Menu 4</a> <a href="#" class="list-group-item">Menu 5</a> </div> </div> </div> </div> 

The problem is now, that the main DIV isnt closed if there is no second navigation area. And im not able to insert a picture from mask which is assigned in the first level of the menu. Wrap cant insert any data. This is my actual poorly try. Are there any ideas here?

 # OVERVIEW MENU lib.overviewmenu = HMENU lib.overviewmenu { special = directory special.value.data = leveluid:2 # erstes level 1 = TMENU 1.expAll = 1 1 { # no state: normale Formatierung wrap = NO { before.cObject = LOAD_REGISTER before.cObject { parentImage.cObject = IMAGE parentImage.cObject.field = tx_mask_menuteaser } allWrap = <div class="col-xs-12 col-sm-4 col-md-4"><div class="thumbnail"><div class="headline"><h2>| wrapItemAndSub = ||*|||*|| #ATagBeforeWrap = 1 stdWrap { htmlSpecialChars = 0 htmlSpecialChars.preserveEntities = 0 crop = 50 | … } subst_elementUid = 1 } ACT = 1 ACT < .NO } 2 < .1 2 { # no state: normale Formatierung wrap = </h2></div><img src="{register:parentImage}" alt=""><div class="caption"><div class="list-group">|</div></div></div></div> NO { allWrap = wrapItemAndSub = ||*|||*|| #ATagBeforeWrap = 1 stdWrap { htmlSpecialChars = 0 htmlSpecialChars.preserveEntities = 0 crop = 50 | … } ATagParams = class="list-group-item" subst_elementUid = 1 } ACT = 1 ACT < .NO IFSUB = 1 IFSUB { #ATagBeforeWrap = 1 stdWrap { wrap = |<i class="fa fa-caret-down pull-right"></i> wrap.insertData = 1 htmlSpecialChars = 0 htmlSpecialChars.preserveEntities = 0 crop = 50 | … } ATagParams = class="list-group-item" data-toggle="collapse-next" subst_elementUid = 1 } ACTIFSUB = 1 ACTIFSUB < .IFSUB } 3 < .2 3 { # no state: normale Formatierung wrap = <div class="list-group-submenu collapse">|</div> NO { allWrap = linkWrap = <span class="fa fa-chevron-right"></span>&nbsp;| wrapItemAndSub = ||*|||*|| ATagBeforeWrap = 1 stdWrap { htmlSpecialChars = 0 htmlSpecialChars.preserveEntities = 0 crop = 50 | … } ATagParams = class="list-group-item sub-item small" subst_elementUid = 1 } ACT = 1 ACT < .NO } } 

Thanks and best, Chris

Answer 1

ouch very unbalanced code.

try to get the wraps closed where you open it.
Use before and after .

Otherwise be aware of IFSUB on top level. if you close a tag in the next menu level, you should only open it if you are sure to have a next level.

Answer 2

Try to something like this.

Your html like this.

<div class="col-xs-12 col-sm-4 col-md-4">
    <div class="thumbnail">
      <div class="headline">
        <h2>Headline</h2>
      </div>
      <img src="img/product/picture.jpg" alt="...">
      <div class="caption">              
         <!-- Add menu typoscript here -->
      </div>
   </div>              
</div>

And your typoscript LIke this.

lib.mainmenu = TMENU
lib.mainmenu{
  expAll = 1
  wrap = <div class="panel list-group">|</div>
  NO{
    ATagParams = class="list-group-item"
  }

  ACT = 1
  ACT {
    linkWrap= <li class="active">|</li>
  }

   IFSUB < .NO
   IFSUB = 1
   IFSUB {
       wrapItemAndSub = <div class="collapse list-group-submenu">|</div>
       ATagParams = class="list-group-item sub-item small"
       stdWrap.wrap = <span class="fa fa-chevron-right"></span> |
    }
}

Answer 3

Whats about this html structure? Would be much easier, isnt it?

                   <div class="panel list-group thumbnail">
                     <div class="headline"><h2>Headline</h2></div>
                     <img src="img/product/picture.jpg" alt="...">
                     <a href="#" class="list-group-item" data-toggle="collapse-next">Page 1</a>
                       <div class="collapse list-group-submenu">
                         <a class="list-group-item sub-item small"><span class="fa fa-chevron-right"></span> Submenu 1</a>
                         <a class="list-group-item sub-item small"><span class="fa fa-chevron-right"></span> Submenu 2</a>
                       </div>                        
                     <a href="#" class="list-group-item" data-toggle="collapse-next">Page 2</a>
                       <div class="collapse list-group-submenu">
                         <a class="list-group-item sub-item small"><span class="fa fa-chevron-right"></span> Submenu 1</a>
                         <a class="list-group-item sub-item small"><span class="fa fa-chevron-right"></span> Submenu 2</a>
                       </div>                            
                     <a href="#" class="list-group-item">Page 3</a>
                     <a href="#" class="list-group-item">Page 4</a>
                     <a href="#" class="list-group-item">Page 5</a>
                   </div>

Answer 4

Ive got it:

 # OVERVIEW MENU lib.overviewmenu = HMENU lib.overviewmenu { special = directory special.value.data = leveluid:2 # erstes level 1 = TMENU 1.expAll = 1 1 { # no state: normale Formatierung NO { after.cObject = COA after.cObject { 10 = FILES 10 { references { table = pages uid.field = uid fieldName = tx_mask_menuteaser } renderObj = IMG_RESOURCE renderObj { file.import.data = file:current:uid file.treatIdAsReference = 1 stdWrap.wrap= <img src='|' /> } } } linkWrap = <div class="headline"><h2>|</h2></div> wrapItemAndSub = <div class="col-xs-12 col-sm-4 col-md-4"><div class="thumbnail">|</div></div>|*|<div class="col-xs-12 col-sm-4 col-md-4"><div class="thumbnail">|</div></div>|*|<div class="col-xs-12 col-sm-4 col-md-4"><div class="thumbnail">|</div></div> stdWrap { htmlSpecialChars = 0 htmlSpecialChars.preserveEntities = 0 crop = 50 | … } subst_elementUid = 1 } ACT = 1 ACT < .NO } 2 < .1 2 { # no state: normale Formatierung wrap = <div class="caption"><div class="list-group">|</div></div> NO { linkWrap = allWrap = wrapItemAndSub = ||*|||*|| #ATagBeforeWrap = 1 stdWrap { htmlSpecialChars = 0 htmlSpecialChars.preserveEntities = 0 crop = 50 | … } ATagParams = class="list-group-item" subst_elementUid = 1 } ACT = 1 ACT < .NO IFSUB = 1 IFSUB { #ATagBeforeWrap = 1 stdWrap { wrap = |<i class="fa fa-caret-down pull-right"></i> wrap.insertData = 1 htmlSpecialChars = 0 htmlSpecialChars.preserveEntities = 0 crop = 50 | … } ATagParams = class="list-group-item" data-toggle="collapse-next" subst_elementUid = 1 } ACTIFSUB = 1 ACTIFSUB < .IFSUB } 3 < .2 3 { # no state: normale Formatierung wrap = <div class="list-group-submenu collapse">|</div> NO { allWrap = linkWrap = <span class="fa fa-chevron-right"></span>&nbsp;| wrapItemAndSub = ||*|||*|| ATagBeforeWrap = 1 stdWrap { htmlSpecialChars = 0 htmlSpecialChars.preserveEntities = 0 crop = 50 | … } ATagParams = class="list-group-item sub-item small" subst_elementUid = 1 } ACT = 1 ACT < .NO } }