CODEWITHSUNDEEP
htmlwcmibm-wcm
Vaishnavi Dhamnikar
Vaishnavi Dhamnikar

Reputation: 13

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

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>

Upvotes: 0

Views: 287

Answers (2)

WartookMan
WartookMan

Reputation: 1

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>

Upvotes: 0

mshehata
mshehata

Reputation: 154

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>"

Upvotes: -1

Related Questions