SOLVED
Sightly not working as expected
wrote...
Hi All,
I am using sightly to iterate through a list and display images. The images list will be fetched from the java class. I adding the code here for your understanding.
<div data-sly-use.img="${'GetImages' @ name='carouselimage', res=resource}" data-sly-unwrap > <!-- I am calling a java class (GetImages) to get the image information --><div class="container-fluid"><div class="row-fluid"><div class="carousel slide" id="myCarousel"><div class="carousel-inner"><div class="item active"><ul class="thumbnails"><p data-sly-list.imgRef="${img.carouselImages}" data-sly-unwrap > <!-- carouselImages list is fetcted from java class --><li class="span3"><div class="thumbnail" data-sly-test="${!imgRef}"><img src="http://placehold.it/260x180" alt="Alt text"></div><div class="thumbnail" data-sly-test="${imgRef}"><img src="${imgRef.src}" alt="${imgRef.alt}"></div><div class="caption"><h5>${imgRef.header}</h5></div></li><p data-sly-test="${imgRef.breakUl == true}" data-sly-unwrap ><p>Inside checking the condition : ${imgRef.breakUl}</p></ul> <!-- I am trying to cose the ul and start new ul. Since I need new UL after every four li tags--></div><div class="item"><ul class="thumbnails"></p></p></div></div><a data-slide="prev" href="#myCarousel" class="left carousel-control"><</a><a data-slide="next" href="#myCarousel" class="right carousel-control">></a></div></div></div></div>
Please help me on this. I explained the code in the comments. Please let me know if you need more understanding.
Thanks
Ramana Reddy
Please can somebody answer this question??/
wrote...
It is very hard for me to understand exactly what doesn't work here.
Are you able to provide a smaller example that I can look into?
Thank you Feike Visser for your reply. Below is the code which causing the problem.
<p data-sly-test="${imgRef.breakUl}" data-sly-unwrap > <p>Inside checking the condition : ${imgRef.breakUl}</p> <!--/* Please treat this as log */--> </ul> <!-- I am trying to cose the ul and start new ul. Since I need new UL after every four li tags--> </div></p>in the above code whenever the breakUl is true then I have to close the <ul> and <div> tags and start new <ul> and <div> tags. And this whole process is done on a list of objects. Some how the <ul> is closing but the <div> is not closing and list is continuing.
Thanks Regards
M. Ramana Reddy
wrote...
Can you create a small reproducible case, that isn't depending on your Java-class, use resource.listChildren or so for the list.
Then I can have a look.
Thanks Feike Visser for reply. Here I am trying explain the code in the comments.
<div data-sly-list.imgRef="${img.mapCarouselImages}" data-sly-unwrap > <!--/* Please think this as a list of objects are passed */ --> <span data-sly-test="${imgRefList.first}" data-sly-unwrap > <!--/* For the first time I need the css class "active" */--> <div class="item active"> </span> <span data-sly-test="${!imgRefList.first}" data-sly-unwrap > <!--/* If the element is not the first then I have to close the previous div tag and open the new tag in below condition. here I am getting the IllegalArgumentException : Invalid property name. If I remove this code then it is working but the div is not closing.*/--> </div> </span> <span data-sly-test="${!imgRefList.first}" data-sly-unwrap > <!--/* If it is other than first create the div with normal css class "item" */--> <div class="item"> </span> <ul class="thumbnails"> <!--/* Please don't bother the below code */--> <span data-sly-list="${img.mapCarouselImages[imgRef]}" data-sly-unwrap > <li class="span3"> <div class="thumbnail" data-sly-test="${!item}"> <img src="http://placehold.it/260x180" alt="Alt text"> </div> <div class="thumbnail" data-sly-test="${item}"> <img src="${item.src}" alt="${item.alt}"> </div> <div class="caption"> <h5>${item.header}</h5> </div> </li> </span> </ul> </div>I Tried to explain the code in the comments. Please do reply if need any further information.
Thanks in advance
M. Ramana Reddy
Related Conversations
