Typo3 - 带有类名的Ressources的Typoscript图片库

时间:2017-11-02 11:39:42

标签: typoscript

我对typo3(版本7LTS)有一点问题。我想从页面的资源图像中创建一个小图像库,我正在使用这个标题来获取这些图像:

lib.produktSliderBig = FILES
lib.produktSliderBig {

  references {
    table = pages
    data = levelmedia:-1, slide
    treatIdAsReference = 1
  }
  sorting = sorting_foreign
  renderObj = COA
  renderObj {
    10 = IMAGE
    10 {
      file.import.data = file:current:publicUrl
      stdWrap.typolink.parameter.data = file:current:link
        }
        20 = TEXT
  20 {
    data = file:current:description
    wrap = <p class="flex-caption">|</p>
  }
     altText.data = file:current:description
     wrap = <li class="big">|</li>
    }
     stdWrap {
     wrap = <ul class="produkte-big">|</ul>
  }
}

page.77.subparts.produktSliderBig < lib.produktSliderBig

这会创建此输出:

<ul class="produkte-big"><li class="big"><img src="image1.jpg" width="1000" height="1000"   alt="" ><p class="flex-caption"></p></li>
<li class="big"><img src="image2.jpg" width="1000" height="1000"   alt="" ><p class="flex-caption"></p></li>
<li class="big"><img src="image3.jpg" width="1000" height="1000"   alt="" ><p class="flex-caption"></p></li></ul>

现在我需要为我的img标签添加一个类名 - 就像这样:

<img class="image1" src...
<img class="image2" src...

但我不知道该怎么做。有人可以帮忙吗?

这是一个使用jquery的解决方案 - 但添加带有typoscript的类名将更加优雅:

$(".produkte").children().each(function(i) {
    $(this).find('img').addClass('hover-image'  + (i+1));
});

1 个答案:

答案 0 :(得分:1)

你有一些语法错误,据我所知你需要一个计数器......:

lib.produktSliderBig = FILES
lib.produktSliderBig {
    references {
        table = pages
        data = levelmedia:-1, slide
        treatIdAsReference = 1
    }
    sorting = sorting_foreign
    renderObj = COA
    renderObj {
        10 = LOAD_REGISTER
        10 {
            Counter.cObject = TEXT
            Counter.cObject.data = register:Counter
            Counter.cObject.wrap = |+1
            Counter.prioriCalc = intval
        }
        20 = IMAGE
        20 {
            file.import.data = file:current:publicUrl
            titleText.data = file:current:title
            altText.data = file:current:alternative
            params.data = register:Counter
            params.dataWrap = class="image|"
            stdWrap.typolink.parameter.data = file:current:link
        }
        30 = TEXT
        30 {
            # this is a fallback if description is not available
            data = file:current:description // file:current:name
            stdWrap.wrap = <p class="flex-caption">|</p>
        }
        wrap = <li class="big">|</li>
    }
    stdWrap {
        wrap = <ul class="produkte-big">|</ul>
    }
    RESTORE_REGISTER
}