Skip to content

Instantly share code, notes, and snippets.

@MattiasNilsson

MattiasNilsson/Detail.html

Created February 24, 2021 10:57
Show Gist options
  • Save MattiasNilsson/903b5cfe770fa9eadafd3d4de2c32895 to your computer and use it in GitHub Desktop.
Save MattiasNilsson/903b5cfe770fa9eadafd3d4de2c32895 to your computer and use it in GitHub Desktop.
Download ZIP
Content editable view for News Detail in Frontend Editing for TYPO3 (news/Resources/Private/Templates/News/Detail.html)
Raw
Detail.html
<html xmlns:f="http://typo3.org/ns/TYPO3/CMS/Fluid/ViewHelpers"
xmlns:n="http://typo3.org/ns/GeorgRinger/News/ViewHelpers"
xmlns:rx="http://typo3.org/ns/Reelworx/RxShariff/ViewHelper"
data-namespace-typo3-fluid="true">
<f:layout name="Detail" />
<!--
=====================
News/Detail.html
-->
<f:section name="content">
<f:if condition="{newsItem}">
<f:then>
<n:format.nothing>
<n:excludeDisplayedNews newsItem="{newsItem}" />
<f:if condition="{settings.detail.showMetaTags}">
<f:render partial="Detail/Opengraph" arguments="{newsItem: newsItem, settings:settings}" />
</f:if>
<f:if condition="{newsItem.alternativeTitle}">
<f:then>
<n:titleTag>
<f:format.htmlentitiesDecode>{newsItem.alternativeTitle}</f:format.htmlentitiesDecode>
</n:titleTag>
</f:then>
<f:else>
<n:titleTag>
<f:format.htmlentitiesDecode>{newsItem.title}</f:format.htmlentitiesDecode>
</n:titleTag>
</f:else>
</f:if>
</n:format.nothing>
<f:if condition="{settings.detail.showPrevNext}">
<n:simplePrevNext pidList="{newsItem.pid}" news="{newsItem}" as="paginated" sortField="datetime">
<f:if condition="{paginated}">
<ul class="pager">
<f:if condition="{paginated.prev}">
<li class="previous">
<n:link newsItem="{paginated.prev}" settings="{settings}">
<span aria-hidden="true">&larr; </span>{paginated.prev.title}
</n:link>
</li>
</f:if>
<f:if condition="{paginated.next}">
<li class="next">
<n:link newsItem="{paginated.next}" settings="{settings}" class="next">
{paginated.next.title} <span aria-hidden="true"> &rarr;</span>
</n:link>
</li>
</f:if>
</ul>
</f:if>
</n:simplePrevNext>
</f:if>
<div class="header">
<core:contentEditable table="tx_news_domain_model_news" field="title" uid="{newsItem.uid}">
<h3 itemprop="headline">{newsItem.title}</h3>
</core:contentEditable>
</div>
<div class="footer">
<p>
<!-- date -->
<span class="news-list-date">
<time itemprop="datePublished" datetime="{f:format.date(date:newsItem.datetime, format:'Y-m-d')}">
<f:format.date format="{f:translate(key:'dateFormat')}">{newsItem.datetime}</f:format.date>
</time>
</span>
<f:if condition="{newsItem.categories}">
<f:render partial="Category/Items" arguments="{categories:newsItem.categories, settings:settings}" />
</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>
<f:if condition="{newsItem.author}">
<!-- author -->
<span class="news-list-author" itemprop="author" itemscope="itemscope" itemtype="http://schema.org/Person">
<f:translate key="author_simple" /> <span itemprop="name">{newsItem.author}</span>
</span>
</f:if>
</p>
</div>
<n:renderMedia news="{newsItem}" imgClass="img-responsive" videoClass="video-wrapper" audioClass="audio-wrapper">
<f:if condition="{newsItem.teaser}">
<!-- teaser -->
<div class="teaser-text" itemprop="description">
<core:contentEditable table="tx_news_domain_model_news" field="teaser" uid="{newsItem.uid}">
<f:format.html>{newsItem.teaser}</f:format.html>
</core:contentEditable>
</div>
</f:if>
<f:if condition="{newsItem.contentElements}">
<!-- content elements -->
<f:cObject typoscriptObjectPath="lib.tx_news.contentElementRendering">{newsItem.contentElementIdList}</f:cObject>
</f:if>
<f:render partial="Detail/MediaContainer" arguments="{media: newsItem.mediaNonPreviews, settings:settings}" />
<!-- main text -->
<div class="news-text-wrap" itemprop="articleBody">
<core:contentEditable table="tx_news_domain_model_news" field="bodytext" uid="{newsItem.uid}">
<f:format.html>{newsItem.bodytext}</f:format.html>
</core:contentEditable>
</div>
</n:renderMedia>
<f:if condition="{settings.backPid}">
<!-- Link Back -->
<div class="news-backlink-wrap">
<f:link.page pageUid="{settings.backPid}">
<f:translate key="back-link" />
</f:link.page>
</div>
</f:if>
<f:if condition="{settings.detail.showSocialShareButtons}">
<f:comment>
Care about the privacy of your readers?
Checkout https://typo3.org/extensions/repository/view/rx_shariff
and it will be used automatically!
</f:comment>
<n:extensionLoaded extensionKey="rx_shariff">
<f:render partial="Detail/Shariff" />
</n:extensionLoaded>
</f:if>
<!-- related things -->
<div class="news-related-wrap">
<f:comment>
Various options exist to fetch different related information:
- {newsItem.allRelatedSorted}: all related news, related und related from, sorted by date
- {newsItem.related}: all related
- {newsItem.relatedSorted}: all related, sorted by date
- {newsItem.relatedFrom}: all related from
- {newsItem.relatedFromSorted}: all related from, sorted by date
</f:comment>
<f:if condition="{newsItem.allRelatedSorted}">
<!-- Related news records -->
<div class="news-related news-related-news">
<h4>
<f:translate key="related-news" />
</h4>
<ul>
<f:for each="{newsItem.allRelatedSorted}" as="related">
<li>
<span class="news-related-news-date"><f:format.date format="{f:translate(key:'dateFormat')}">{related.datetime}</f:format.date></span>
<n:link newsItem="{related}" settings="{settings}" title="{related.title}">
{related.title}
</n:link>
</li>
</f:for>
</ul>
</div>
</f:if>
<f:if condition="{newsItem.relatedFiles}">
<!-- related files -->
<div class="news-related news-related-files">
<h4>
<f:translate key="related-files" />
</h4>
<ul>
<f:for each="{newsItem.relatedFiles}" as="relatedFile">
<li>
<span class="news-related-files-link">
<a href="{relatedFile.originalResource.publicUrl -> f:format.htmlspecialchars()}" target="_blank">
{f:if(condition:relatedFile.originalResource.title, then:relatedFile.originalResource.title, else:relatedFile.originalResource.name)}
</a>
</span>
<span class="news-related-files-size">
{relatedFile.originalResource.size -> f:format.bytes()}
</span>
</li>
</f:for>
</ul>
</div>
</f:if>
<f:if condition="{newsItem.relatedLinks}">
<!-- Related links -->
<div class="news-related news-related-links">
<h4>
<f:translate key="related-links" />
</h4>
<ul>
<f:for each="{newsItem.relatedLinks}" as="relatedLink">
<li>
<f:link.typolink parameter="{relatedLink.uri}" title="{relatedLink.title}" target="{n:targetLink(link:relatedLink.uri)}">{f:if(condition: relatedLink.title, then: relatedLink.title, else: relatedLink.uri)}</f:link.typolink>
<f:if condition="{relatedLink.description}"><span>{relatedLink.description}</span></f:if>
</li>
</f:for>
</ul>
</div>
</f:if>
</div>
</f:then>
<f:else>
</f:else>
</f:if>
</f:section>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment