typo3 - Typoscript add class to the first element using stdWrap -
i have custom requirement display image slider using typoscript. images taken default tt_content image content element.
i've added following typoscript code implement this;
lib.homeslider = coa lib.homeslider { 10 = content 10 { table = tt_content select { = colpos = 3 andwhere = deleted = 0 andwhere = hidden = 0 orderby = rand() } renderobj = files renderobj { references { table = tt_content fieldname = image } renderobj = image renderobj { file.import.data = file:current:uid file.treatidasreference = 1 stdwrap.typolink.parameter.data = file:current:link stdwrap.wrap = <div class="item active">|</div>|*|<div class="item">|</div>|*|<div class="item">|</div> } } } wrap = <div id="carousel-example-generic" data-ride="carousel" class="carousel slide carousel-fade"><div role="listbox" class="carousel-inner">|</div></div> }
this displayed images in frontend. requirement want add class "active" first image wrapper. i've added following code implement this, not working.
stdwrap.wrap = <div class="item active">|</div>|*|<div class="item">|</div>|*|<div class="item">|</div>
final html output need generate is;
<div id="carousel-example-generic" data-ride="carousel" class="carousel slide carousel-fade"> <div role="listbox" class="carousel-inner"> <div class="item active"> <a href="#"> <img src="images/temp/startbild1.jpg" alt="#"> </a> </div> <div class="item"> <a href="#"> <img src="images/temp/startbild2.jpg" alt="#"> </a> </div> <div class="item"> <a href="#"> <img src="images/temp/startbild3.jpg" alt="#"> </a> </div> </div> </div>
if knows solution, please me.
your original ts fine.
supposing have images in same ce (content element), not in several ces. such:
for easier readability, have modified following line:
stdwrap.wrap = <div class="item active">a|enda</div>|*|<div class="item">b|endb</div>|*|<div class="item">c|endc</div>
which gives me:
<div id="c1531" class="csc-default"> <div id="carousel-example-generic" data-ride="carousel" class="carousel slide carousel-fade"> <div role="listbox" class="carousel-inner"> <div class="item active">a<img src="index.php?eid=dumpfile&t=p&p=1106&token=a71bae9f5bfc837dce6b7974e6f63aca5cc656ae" width="165" height="158" alt="" >enda</div> <div class="item">c<img src="index.php?eid=dumpfile&t=p&p=1107&token=0dab49e1d8dac7c8cfd7a7910133cb2398c19030" width="420" height="132" alt="" >endc</div> </div> </div> </div>
edit: try random content
lib.homeslider = coa lib.homeslider { 10 = content 10 { table = tt_content select { = colpos = 3 andwhere = deleted = 0 andwhere = hidden = 0 } renderobj = files renderobj { maxitems = 2 #as many want sorting = rand #not working, maybe ext:lvrandfiles references { table = tt_content fieldname = image } renderobj = image renderobj { file.import.data = file:current:uid file.treatidasreference = 1 stdwrap.typolink.parameter.data = file:current:link stdwrap.wrap = <div class="item active">a|enda</div>|*|<div class="item">b|endb</div>|*|<div class="item">c|endc</div> } } } wrap = <div id="carousel-example-generic" data-ride="carousel" class="carousel slide carousel-fade"><div role="listbox" class="carousel-inner">|</div></div> }
Comments
Post a Comment