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:

enter image description here

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&amp;t=p&amp;p=1106&amp;token=a71bae9f5bfc837dce6b7974e6f63aca5cc656ae" width="165" height="158"   alt="" >enda</div>       <div class="item">c<img src="index.php?eid=dumpfile&amp;t=p&amp;p=1107&amp;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

Popular posts from this blog

c# - Validate object ID from GET to POST -

node.js - Custom Model Validator SailsJS -

php - Find a regex to take part of Email -