Skip to content

Instantly share code, notes, and snippets.

@hasenbalg

hasenbalg/Item.html

Created July 18, 2019 10:48
Show Gist options
  • Save hasenbalg/d3ef0592cd7eed4cd96f02ec6473e7c7 to your computer and use it in GitHub Desktop.
Save hasenbalg/d3ef0592cd7eed4cd96f02ec6473e7c7 to your computer and use it in GitHub Desktop.
Download ZIP
TYPO3 News make first image the preview image in the news list
Raw
Item.html
<html xmlns:f="http://typo3.org/ns/TYPO3/CMS/Fluid/ViewHelpers"
xmlns:n="http://typo3.org/ns/GeorgRinger/News/ViewHelpers"
data-namespace-typo3-fluid="true">
<f:if condition="{newsItem.falMedia}">
<f:then>
<n:link newsItem="{newsItem}" settings="{settings}" title="{newsItem.title}">
<f:alias map="{mediaElement: '{newsItem.falMedia.0}'}">
<f:if condition="{mediaElement.originalResource.type} == 2">
<f:image class="full-width" image="{mediaElement}"
title="{mediaElement.originalResource.title}"
alt="{mediaElement.originalResource.alternative}"
/>
</f:if>
<f:if condition="{mediaElement.originalResource.type} == 5">
<f:image class="full-width" image="{mediaElement}"
title="{mediaElement.originalResource.title}"
alt="{mediaElement.originalResource.alternative}"
/>
</f:if>
</f:alias>
</n:link>
</f:then>
<f:else>
<f:if condition="{settings.displayDummyIfNoMedia}">
<span class="no-media-element">
<n:link newsItem="{newsItem}" settings="{settings}" title="{newsItem.title}">
<f:image class="full-width" src="{settings.list.media.dummyImage}" title="" alt=""
/>
</n:link>
</span>
</f:if>
</f:else>
</f:if>
<!--preview img end-->
<h4>
<n:link newsItem="{newsItem}" settings="{settings}" title="{newsItem.title}">
<span itemprop="headline">
{newsItem.title}
</span>
</n:link>
</h4>
<!--date-->
<p>
<time itemprop="datePublished" datetime="{f:format.date(date:newsItem.datetime, format:'d.m.Y')}">
<f:format.date format='d.m.Y'>{newsItem.datetime}</f:format.date>
</time>
&vert;
<f:if condition="{newsItem.firstCategory}">
<!-- first category -->
<span class="news-list-category">{newsItem.firstCategory.title}</span>
</f:if>
<f:if condition="{newsItem.tags}">
<!-- Tags -->
<span class="news-list-tags" itemprop="keywords">
<f:for each="{newsItem.tags}" as="tag">
{tag.title}
</f:for>
</span>
</f:if>
</p>
<!--date end-->
<!-- teaser -->
<n:removeMediaTags>
<f:if condition="{newsItem.teaser}">
<f:then>
<div itemprop="description">{newsItem.teaser -> f:format.crop(maxCharacters:
'{settings.cropMaxCharacters}', respectWordBoundaries:'1') -> f:format.html()}
</div>
</f:then>
<f:else>
<div itemprop="description">{newsItem.bodytext -> f:format.crop(maxCharacters:
'{settings.cropMaxCharacters}', respectWordBoundaries:'1') -> f:format.html()}
</div>
</f:else>
</f:if>
</n:removeMediaTags>
<n:link newsItem="{newsItem}" settings="{settings}" class="btn btn-secondary" title="{newsItem.title}">
<f:translate key="more-link"/>
</n:link>
<!--teaser end-->
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment