Skip to content

Instantly share code, notes, and snippets.

@georgringer

georgringer/News-List.html

Last active May 1, 2019 11:06
Show Gist options
  • Star 1 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save georgringer/66f736d77fdde19d85996cf0fa25f00d to your computer and use it in GitHub Desktop.
Save georgringer/66f736d77fdde19d85996cf0fa25f00d to your computer and use it in GitHub Desktop.
Download ZIP
Example of an EXT:news templateLayout to support the SliderPro of bqworks
Raw
News-List.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:layout name="General"/>
<!--
=====================
Templates/News/List.html
-->
<f:section name="content">
<!--TYPO3SEARCH_end-->
<f:if condition="{news}">
<f:then>
<f:switch expression="{settings.templateLayout}">
<f:case value="slider">
<div id="example5" class="slider-pro">
<div class="sp-slides">
<f:for each="{news}" as="newsItem">
<div class="sp-slide">
<f:if condition="{newsItem.firstFalImagePreview}">
<f:then>
<f:media class="sp-image" file="{newsItem.falMediaPreviews.0}" width="500" />
</f:then>
<f:else>
<img class="sp-image" src="https://dummyimage.com/600x400/000/fff" />
</f:else>
</f:if>
<div class="sp-caption">{newsItem.teaser}</div>
</div>
</f:for>
</div>
<div class="sp-thumbnails">
<f:for each="{news}" as="newsItem">
<div class="sp-thumbnail">
<div class="sp-thumbnail-image-container">
<f:if condition="{newsItem.firstFalImagePreview}">
<f:then>
<f:media class="sp-thumbnail-image" file="{newsItem.falMediaPreviews.0}" width="100" />
</f:then>
<f:else>
<img class="sp-thumbnail-image" src="https://dummyimage.com/600x400/000/fff" />
</f:else>
</f:if>
</div>
<div class="sp-thumbnail-text">
<div class="sp-thumbnail-title">{newsItem.title}</div>
<div class="sp-thumbnail-description">{newsItem.bodytext -> f:format.crop(maxCharacters: '100', respectWordBoundaries:'1') -> f:format.html()}</div>
</div>
</div>
</f:for>
</div>
</div>
</f:case>
<f:case default="1">
<div class="news-list-view" id="news-container-{contentObjectData.uid}">
<f:if condition="{settings.hidePagination}">
<f:then>
<f:for each="{news}" as="newsItem" iteration="iterator">
<f:render partial="List/Item"
arguments="{newsItem: newsItem,settings:settings,iterator:iterator}"/>
</f:for>
</f:then>
<f:else>
<n:widget.paginate objects="{news}" as="paginatedNews"
configuration="{settings.list.paginate}"
initial="{offset:settings.offset,limit:settings.limit,recordId:contentObjectData.uid}">
<f:for each="{paginatedNews}" as="newsItem" iteration="iterator">
<f:render partial="List/Item"
arguments="{newsItem: newsItem,settings:settings,iterator:iterator}"/>
</f:for>
</n:widget.paginate>
</f:else>
</f:if>
</div>
</f:case>
</f:switch>
</f:then>
<f:else>
<div class="alert ">
<f:translate key="list_nonewsfound"/>
</div>
</f:else>
</f:if>
<!--TYPO3SEARCH_begin-->
</f:section>
</html>
Raw
page.ts
# TypoScript to include news plugin
lib.news = USER
lib.news {
userFunc = TYPO3\CMS\Extbase\Core\Bootstrap->run
extensionName = News
pluginName = Pi1
vendorName = GeorgRinger
switchableControllerActions {
News {
1 = list
}
}
settings < plugin.tx_news.settings
settings {
templateLayout = slider
limit = 5
# adopt to your needs
detailPid = 31
startingpoint = 37
}
}
page.10 < lib.news
# You could also include it in your fluid template with
# <f:cObject typoscriptObjectPath="lib.tx_news.contentElementRendering">{newsItem.contentElementIdList}</f:cObject>
@typo3biswa
Copy link

can you share how to get first image first image of news record in list view?

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment