I am trying to wrap every 3rd item in a menu generated with TypoScript.
This is my menu:
tt_content.menu.20.4 >
tt_content.menu.20.4 < tt_content.menu.20.1
tt_content.menu.20.4.stdWrap.outerWrap = <div class="my-menu">|</div>
tt_content.menu.20.4.1.wrap = <ul>|</ul>
tt_content.menu.20.4.1.NO {
doNotLinkIt = 1
stdWrap.htmlSpecialChars = 0
stdWrap.cObject = COA
stdWrap.cObject {
# title
10 = TEXT
10 {
field = title
typolink.parameter.field = uid
typolink.ATagParams = class="more"
}
# abstract
20 = TEXT
20 {
field = abstract
htmlSpecialChars = 1
wrap = <span>|</span>
}
}
}
Via How can I apply a different wrap to every menu item? I know how to wrap every item different, is there a way to wrap three items together? And when there are more than 3 % x = 0 items, e.g. 14, the last opening tag has to be closed with the last item.
Current output:
<ul class="csc-menu csc-menu-1">
<li>
<a href="index.php?id=1">Page 1</a>
</li>
<li>
<a href="index.php?id=2">Page 2</a>
</li>
<li>
<a href="index.php?id=3">Page 3</a>
</li>
<li>
<a href="index.php?id=4">Page 4</a>
</li>
<li>
<a href="index.php?id=5">Page 5</a>
</li>
<li>
<a href="index.php?id=6">Page 6</a>
</li>
<li>
<a href="index.php?id=7">Page 7</a>
</li>
<li>
<a href="index.php?id=8">Page 8</a>
</li>
<li>
<a href="index.php?id=9">Page 9</a>
</li>
</ul>
Wanted output, something like this:
<div class="pack">
<a href="index.php?id=1">Page 1</a>
<a href="index.php?id=2">Page 2</a>
<a href="index.php?id=3">Page 3</a>
</div>
<div class="pack">
<a href="index.php?id=4">Page 4</a>
<a href="index.php?id=5">Page 5</a>
<a href="index.php?id=6">Page 6</a>
</div>
<div class="pack">
<a href="index.php?id=7">Page 7</a>
<a href="index.php?id=8">Page 8</a>
<a href="index.php?id=9">Page 9</a>
</div>
<div class="pack">
<a href="index.php?id=10">Page 10</a>
<a href="index.php?id=11">Page 11</a>
</div>
Basically you are asking 2 questions.
But for both you might use optionSplit. [1.]
First: "wrap every 3rd item"
Your code would look like that:
Second: "is there a way to wrap three items together"
Your code would look like that:
How optionSplit ist working in these cases:
Hope that helped.
PS: Don't forget to accept an answer ;-)
Links:
The below typoscript may help you (It's for page menu to group 3 page links together and you need to modify it according to your requirements.):