我正在实现一个基于TYPO3扩展“news”和Flexslider的新闻滑块。新闻滑块包含缩略图预览图像,这些图像通过“data-thumb”属性加载,该属性包含滑块中每个图像的URL。如何获取Fluid中的URL和新闻扩展?
我尝试了以下但我收到一个错误:
<li data-thumb="{f:uri.image(image:mediaElement,title:'{mediaElement.originalResource.title}',alt:'{mediaElement.originalResource.alternative}', maxWidth:'{settings.list.media.image.maxWidth}',maxHeight:'{settings.list.media.image.maxHeight}')}">...</li>
滑块中一个对象的完整部分如下所示:
<li class="item itemtype-{newsItem.type}{f:if(condition: newsItem.istopnews, then: ' topnews')}" data-thumb="{f:uri.image(image:mediaElement,title:'{mediaElement.originalResource.title}',alt:'{mediaElement.originalResource.alternative}', maxWidth:'{settings.list.media.image.maxWidth}',maxHeight:'{settings.list.media.image.maxHeight}')}" itemscope="itemscope" itemtype="http://schema.org/Article">
<n:excludeDisplayedNews newsItem="{newsItem}"/>
<f:if condition="{newsItem.mediaPreviews}">
<!-- media preview element -->
<f:then>
<div>
<n:link newsItem="{newsItem}" settings="{settings}" title="{newsItem.title}">
<f:alias map="{mediaElement: '{newsItem.mediaPreviews.0}'}">
<f:if condition="{mediaElement.originalResource.type} == 2">
<f:image image="{mediaElement}" title="{mediaElement.originalResource.title}" alt="{mediaElement.originalResource.alternative}" width="{f:if(condition: settings.media.maxWidth, then: settings.media.maxWidth, else: settings.list.media.image.maxWidth)}" height="{f:if(condition: settings.media.maxHeight, then: settings.media.maxHeight, else: settings.list.media.image.maxHeight)}"/>
</f:if>
<f:if condition="{mediaElement.originalResource.type} == 4">
<f:render partial="Detail/MediaVideo" arguments="{mediaElement: mediaElement}"/>
</f:if>
<f:if condition="{mediaElement.originalResource.type} == 5">
<f:image image="{mediaElement}" title="{mediaElement.originalResource.title}" alt="{mediaElement.originalResource.alternative}" width="{f:if(condition: settings.media.maxWidth, then: settings.media.maxWidth, else: settings.list.media.image.maxWidth)}" height="{f:if(condition: settings.media.maxHeight, then: settings.media.maxHeight, else: settings.list.media.image.maxHeight)}"/>
</f:if>
</f:alias>
</n:link>
</div>
</f:then>
<f:else>
<f:if condition="{settings.displayDummyIfNoMedia}">
<div>
<span class="no-media-element">
<n:link newsItem="{newsItem}" settings="{settings}" title="{newsItem.title}">
<f:image src="{settings.list.media.dummyImage}" title="" alt="" width="{f:if(condition: settings.media.maxWidth, then: settings.media.maxWidth, else: settings.list.media.image.maxWidth)}" height="{f:if(condition: settings.media.maxHeight, then: settings.media.maxHeight, else: settings.list.media.image.maxHeight)}"/>
</n:link>
</span>
</div>
</f:if>
</f:else>
</f:if>
<div class="flex-caption">
<h1 class="fvl flex-title">
<n:link newsItem="{newsItem}" settings="{settings}" title="{newsItem.title}">
<span itemprop="headline">{newsItem.title -> f:format.crop(maxCharacters: '40', respectWordBoundaries:'1')}</span>
</n:link>
</h1>
<p class="flexslider-subtitle">
<n:removeMediaTags>
<f:if condition="{newsItem.teaser}">
<f:then>
<span itemprop="description">{newsItem.teaser -> f:format.crop(maxCharacters: '{settings.cropMaxCharacters}', respectWordBoundaries:'1') -> f:format.stripTags()}</span>
</f:then>
<f:else>
<span itemprop="description"></div>{newsItem.bodytext -> f:format.crop(maxCharacters: '{settings.cropMaxCharacters}', respectWordBoundaries:'1') -> f:format.stripTags()}</span>
</f:else>
</f:if>
</n:removeMediaTags>
<span>
<n:link newsItem="{newsItem}" settings="{settings}" class="more" title="{newsItem.title}">
<f:translate key="more-link"/>
</n:link>
</span>
</p>
</div>
</li>
什么提示我做错了什么?我知道还有新闻滑块扩展,但我不希望进一步依赖另一个扩展。
看起来括号设置错误,您必须“逃离”开始和结束括号。
试试这个:
<li data-thumb="<f:format.raw>{</f:format.raw>
{f:uri.image(image:mediaElement)},
title:'{mediaElement.originalResource.title}',
alt:'{mediaElement.originalResource.alternative}',
maxWidth:'{settings.list.media.image.maxWidth}',
maxHeight:'{settings.list.media.image.maxHeight}'
<f:format.raw>}</f:format.raw>">...</li>
更新:
这是你的全部。你必须使用{newsItem.mediaPreviews.0}
:
<li class="item itemtype-{newsItem.type}{f:if(condition: newsItem.istopnews, then: ' topnews')}" data-thumb="<f:format.raw>{</f:format.raw>{f:uri.image(image:newsItem.mediaPreviews.0)},title:'{newsItem.mediaPreviews.0.originalResource.title}',alt:'{newsItem.mediaPreviews.0.originalResource.alternative}',maxWidth:'{settings.list.media.image.maxWidth}',maxHeight:'{settings.list.media.image.maxHeight}'<f:format.raw>}</f:format.raw>" itemscope="itemscope" itemtype="http://schema.org/Article">
<n:excludeDisplayedNews newsItem="{newsItem}"/>
<f:if condition="{newsItem.mediaPreviews}">
<!-- media preview element -->
<f:then>
<div>
<n:link newsItem="{newsItem}" settings="{settings}" title="{newsItem.title}">
<f:alias map="{mediaElement: '{newsItem.mediaPreviews.0}'}">
<f:if condition="{mediaElement.originalResource.type} == 2">
<f:image image="{mediaElement}" title="{mediaElement.originalResource.title}" alt="{mediaElement.originalResource.alternative}" width="{f:if(condition: settings.media.maxWidth, then: settings.media.maxWidth, else: settings.list.media.image.maxWidth)}" height="{f:if(condition: settings.media.maxHeight, then: settings.media.maxHeight, else: settings.list.media.image.maxHeight)}"/>
</f:if>
<f:if condition="{mediaElement.originalResource.type} == 4">
<f:render partial="Detail/MediaVideo" arguments="{mediaElement: mediaElement}"/>
</f:if>
<f:if condition="{mediaElement.originalResource.type} == 5">
<f:image image="{mediaElement}" title="{mediaElement.originalResource.title}" alt="{mediaElement.originalResource.alternative}" width="{f:if(condition: settings.media.maxWidth, then: settings.media.maxWidth, else: settings.list.media.image.maxWidth)}" height="{f:if(condition: settings.media.maxHeight, then: settings.media.maxHeight, else: settings.list.media.image.maxHeight)}"/>
</f:if>
</f:alias>
</n:link>
</div>
</f:then>
<f:else>
<f:if condition="{settings.displayDummyIfNoMedia}">
<div>
<span class="no-media-element">
<n:link newsItem="{newsItem}" settings="{settings}" title="{newsItem.title}">
<f:image src="{settings.list.media.dummyImage}" title="" alt="" width="{f:if(condition: settings.media.maxWidth, then: settings.media.maxWidth, else: settings.list.media.image.maxWidth)}" height="{f:if(condition: settings.media.maxHeight, then: settings.media.maxHeight, else: settings.list.media.image.maxHeight)}"/>
</n:link>
</span>
</div>
</f:if>
</f:else>
</f:if>
<div class="flex-caption">
<h1 class="fvl flex-title">
<n:link newsItem="{newsItem}" settings="{settings}" title="{newsItem.title}">
<span itemprop="headline">{newsItem.title -> f:format.crop(maxCharacters: '40', respectWordBoundaries:'1')}</span>
</n:link>
</h1>
<p class="flexslider-subtitle">
<n:removeMediaTags>
<f:if condition="{newsItem.teaser}">
<f:then>
<span itemprop="description">{newsItem.teaser -> f:format.crop(maxCharacters: '{settings.cropMaxCharacters}', respectWordBoundaries:'1') -> f:format.stripTags()}</span>
</f:then>
<f:else>
<span itemprop="description"></div>{newsItem.bodytext -> f:format.crop(maxCharacters: '{settings.cropMaxCharacters}', respectWordBoundaries:'1') -> f:format.stripTags()}</span>
</f:else>
</f:if>
</n:removeMediaTags>
<span>
<n:link newsItem="{newsItem}" settings="{settings}" class="more" title="{newsItem.title}">
<f:translate key="more-link"/>
</n:link>
</span>
</p>
</div>
</li>