Typo3 - 来自带有类名的资源的带有 Typoscript 的图片库
Typo3 - Image Gallery with Typoscript from Ressources with Classnames
我对 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 的解决方案 - 但添加带有打字错误的类名会更优雅:
$(".produkte").children().each(function(i) {
$(this).find('img').addClass('hover-image' + (i+1));
});
你有一些语法错误,据我所知你需要一个计数器...:[=11=]
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
}
我对 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 的解决方案 - 但添加带有打字错误的类名会更优雅:
$(".produkte").children().each(function(i) {
$(this).find('img').addClass('hover-image' + (i+1));
});
你有一些语法错误,据我所知你需要一个计数器...:[=11=]
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
}