Typoscript 使用 stdWrap 将 class 添加到第一个元素

Question

我有一个使用 TypoScript 显示图像滑块的自定义要求。图片取自默认 tt_content 图片内容元素。

我添加了以下 TypoScript 代码来实现它；

lib.homeslider = COA
lib.homeslider {
    10 = CONTENT
    10 {
        table = tt_content
        select {    
            where = 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>
}

这显示了前端的图像。但我的要求是我想将 class "active" 添加到第一个图像包装器。我添加了以下代码来实现它，但没有用。

stdWrap.wrap = <div class="item active">|</div>|*|<div class="item">|</div>|*|<div class="item">|</div>

我需要生成的最终 HTML 输出是；

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

如果有人知道解决方案，请帮助我。

Answer 1

你原来的TS没问题

假设您在同一个 CE（内容元素）中有图像，而不是在多个 CE 中。因此：

为了便于阅读，我修改了以下行：

    stdWrap.wrap = <div class="item active">A|ENDA</div>|*|<div class="item">B|ENDB</div>|*|<div class="item">C|ENDC</div>

这给了我：

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

编辑：尝试随机内容

lib.homeslider = COA
lib.homeslider {
    10 = CONTENT
    10 {
        table = tt_content
        select {    
            where = colPos = 3
            andWhere = deleted = 0
            andWhere = hidden = 0
        }
        renderObj =  FILES
        renderObj {
            maxItems = 2 #as many as you want
            sorting = rand #not working, maybe with 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>
}

Answer 2

终于找到正确的脚本了；

lib.homeslider = COA_INT
lib.homeslider {
    10 = CONTENT
    10 {
        table = tt_content
        select {    
            where = colPos = 3
            andWhere = deleted = 0
            andWhere = hidden = 0
            orderBy = rand()
        }
        renderObj =  FILES
        renderObj {
            references {
                table = tt_content
                fieldName = image
            }
            stdWrap.wrap = |###SPLITTER###
            renderObj = IMAGE
            renderObj {
                file.import.data = file:current:uid
                file.treatIdAsReference = 1
                altText.data = file:current:title
                stdWrap.typolink.parameter.data = file:current:link
            }
        }
        stdWrap.split {
            token = ###SPLITTER###
            cObjNum = 1 |*| 2 |*| 3 || 4
            1.current = 1
            1.wrap = <div class="item active">|</div>

            2.current = 1
            2.wrap = <div class="item">|</div>

            3.current = 1
            3.wrap = <div class="item">|</div>

            4.current = 1
        }
    }
    wrap = <div id="carousel-example-generic" data-ride="carousel" class="carousel slide carousel-fade"><div role="listbox" class="carousel-inner">|</div></div>
}

Typoscript 使用 stdWrap 将 class 添加到第一个元素

Typoscript add class to the first element using stdWrap

typo3

typoscript

typo3-6.2.x