How to create a nested HTML structure shown below using WCM Menu/Nav component?

Question

I am designing a carousel with three images. I need to implment following code using WCM. I am able to design with a single result design. Please guide me how to get three links in a set. All the images are in the same site area.

<div class="subBox">
    <div class="set">
        <div class="images"><img src='slide1.jpg' alt='' /></div>
        <div class="images"><img src='slide2.jpg' alt='' /></div>
        <div class="images"><img src='slide3.jpg' alt='' /></div>
    </div>
    <div class="set">
        <div class="images"><img src='slide4.jpg' alt='' /></div>
        <div class="images"><img src='slide5.jpg' alt='' /></div>
        <div class="images"><img src='slide6.jpg' alt='' /></div>
    </div>
    <div class="set">
        <div class="images"><img src='slide7.jpg' alt='' /></div>
        <div class="images"><img src='slide8.jpg' alt='' /></div>
        <div class="images"><img src='slide9.jpg' alt='' /></div>
    </div>
</div>

score 0 · Answer 1 · answered Mar 27 '18 at 10:38

Use a List Presentation in a Menu / Navigator - depending on whether you need to preserve the order. Set the maximum number of 9.

Header:

<div class="subBox">
  <div class="set">

Item Layout:

[Plugin:Matches pattern="(3|6)" text="[Placeholder tag='listnum']"]
  </div>
  <div class="set">
[/Plugin:Matches]
    <div class="images">[Element type="content" context="autofill" key="img"]</div>

Footer:

  </div>
</div>

score -1 · Answer 2 · edited Sep 16 '16 at 05:52

So you have one sitearea under this sitearea there is a set of content.

There is nothing out of the box can do it for you.

First Solution(Using Javascript)

render all Images in one hidden Div
add some java script code to construct your HTML

Second solution(Creating Custom Plugin)

Create custom plugin and pass to it index of the item and sublist items number and it only renders it's body if ("index" mod "Sublist items number" equal zero), you can get index from [Placeholder tag="listnum" htmlencode="false"] and in your case "Sublist items number" is 3
In menu design header ="<div class="subBox"><div class="set">" in design for each result render your item then use your custom plugin to render " " -> will render every 3 items design for footer "</div></div>"

How to create a nested HTML structure shown below using WCM Menu/Nav component?

2 Answers2

First Solution(Using Javascript)

Second solution(Creating Custom Plugin)