SingleView.html

<f:layout name="Default" />

{namespace sg=SGalinski\SgNews\ViewHelpers}
{namespace rx=Reelworx\RxShariff\ViewHelper}

<f:section name="main">
	<f:if condition="{settings.publisher}">

		<f:if condition="{settings.publisherLogo}">
			<f:alias map="{leftBrace: '{', rightBrace: '}'}">
				<script type="application/ld+json">
						{leftBrace}
							"@context": "http://schema.org/",
							"@type": "NewsArticle",
							"author": "{newsMetaData.news.author}",
							"publisher": {leftBrace}
								"@type": "Organization",
								"name": "{settings.publisher}",
								"logo":   {leftBrace}
									"@type": "ImageObject",
									"url": "{settings.publisherLogo}"
								 {rightBrace}
							{rightBrace},
							"image": "<f:uri.image absolute="TRUE" image="{newsMetaData.imageObject}" />",
							"headline": "{newsMetaData.news.navTitle}",
							"description": "{newsMetaData.news.description}",
							"dateCreated": "<f:format.date format="Y-m-d">{newsMetaData.news.creationDate}</f:format.date>",
							"datePublished": "<f:format.date format="Y-m-d">{newsMetaData.news.creationDate}</f:format.date>",
							"dateModified": "<f:format.date format="Y-m-d">{newsMetaData.news.lastUpdated}</f:format.date>"
						{rightBrace}
				</script>
			</f:alias>
		</f:if>

	</f:if>

	<div class="intro-section">
		<section class="dark-bg">
			<div class="tx-sgnews-single-header {f:if(condition: newsMetaData.imageObject, then: 'tx-sgnews-single-header-image')}">
				<f:if condition="{newsMetaData.imageObject}">
					<div class="tx-sgnews-single-image">
						<picture>
							<source media="(max-width: 1200px)"
									srcset="{f:uri.image(src: newsMetaData.imageObject.uid, treatIdAsReference: '1', width: '1200c', height: '403c', cropVariant: 'small')}">
							<f:image image="{newsMetaData.imageObject}" alt="" width="1845c"
									 height="619c" cropVariant="large"/>
						</picture>
					</div>
				</f:if>
				<div class="tx-sgnews-single-header-content">
					<div class="tx-sgnews-teaser-title">
						<h1>{newsMetaData.news.subtitleWithFallbackToTitle}</h1>
					</div>
					<div class="tx-sgnews-teaser">
						<div class="tx-sgnews-teaser-inner">
							<div class="tx-sgnews-teaser-meta">
								<span class="author">
									<f:if condition="{newsMetaData.news.authorFrontendUser}">
										<f:then>
											<f:if condition="{newsMetaData.news.authorFrontendUser.www}">
												<f:then>
													<f:link.page pageUid="{newsMetaData.news.authorFrontendUser.www}">
														{newsMetaData.news.authorFrontendUser.name}
													</f:link.page>
												</f:then>
												<f:else>
													{newsMetaData.news.authorFrontendUser.name}
												</f:else>
											</f:if>
										</f:then>
										<f:else>
											{newsMetaData.news.author}
										</f:else>
									</f:if>
								</span>
								<f:if condition="{newsMetaData.news.location}">
									<span class="location">
										{newsMetaData.news.location}
									</span>
								</f:if>

								<span class="date">
									<f:format.date format="{f:translate(key:'frontend.dateformat')}">{newsMetaData.news.lastUpdated}</f:format.date>
								</span>

								<span class="category">
									<a href="{f:uri.page(pageUid: '{newsMetaData.category.uid}')}">
										{newsMetaData.category.subtitleWithFallbackToTitle}
									</a>
								</span>
								<f:if condition="{newsMetaData.news.tags}">
									<br />
									<span class="tags">
										<f:for each="{newsMetaData.news.tags}" as="tag" iteration="it">
											{tag.title}<f:if condition="{it.isLast}"><f:else>, </f:else></f:if>
										</f:for>
									</span>
								</f:if>
							</div>
						</div>
					</div>
				</div>
			</div>
		</section>

	</div>
	<section class="content light-bg ">
		<div class="container">
			<div class="tx-sgnews-single">
				<div class="tx-sgnews-single-container">
					<f:alias map="{content: '{f:cObject(typoscriptObjectPath: \'lib.mainContent\')}'}">
						<div class="tx-sgnews-single-content">
							<p>
								<a href="#comments">{f:cObject(typoscriptObjectPath: "lib.sgCommentsGetCountWithLabel")}</a>
								<span>//</span>
								<f:translate key="frontend.singleview.readingTime" />
								<strong>
									<sg:getReadingTime content="{content}" />
								</strong>
							</p>

							{content -> f:format.raw()}
						</div>
					</f:alias>

					<hr>
					<div class="tx-sgnews-meta-bar">
						<rx:shariff services="facebook,twitter,googleplus,whatsapp" enableBackend="true" />
						<div class="tx-sgnews-likes" id="tx-sgnews-likes" data-uid="{newsMetaData.news.uid}">
							<button class="tx-sgnews-like-buton btn btn-sm btn-info">
							<span class="tx-sgnews-number-of-likes">
								<span class="badge"><i class="fa fa-star-o" aria-hidden="true"></i>
									<span class="tx-sgnews-number-of-likes-value">{newsMetaData.news.likes}</span>
								</span>
							</span>
								<f:translate key="frontend.singleview.likeButton" />
							</button>
						</div>
					</div>

					<f:if condition="{newsMetaData.news.relatedNews}">
						<div class="tx-sgnews-single-related">
							<h3>
								<f:translate key="frontend.singleview.relatedArticles" />
							</h3>

							<ul>
								<f:for each="{newsMetaData.news.relatedNews}" as="relatedNewsEntry">
									<li>
										<a href="{f:uri.page(pageUid: '{relatedNewsEntry.uid}')}">
											{relatedNewsEntry.subtitleWithFallbackToTitle}
										</a>
									</li>
								</f:for>
							</ul>
						</div>
					</f:if>
				</div>
			</div>
		</div>
	</section>

	<section class="content dark-bg">
		<div class="container">
			<div class="tx-sgnews-single-footer">
				<sg:extendedIf condition="{previousNews}" or="{nextNews}">
					<div class="tx-sgnews-single-footer-browser">
						<f:if condition="{previousNews}">
							<a href="{f:uri.page(pageUid: '{previousNews.uid}')}" class="btn btn-md btn-info tx-sgnews-footer-browser-previous">
								<f:translate key="frontend.singleview.previousArticle" />
							</a>
						</f:if>

						<f:if condition="{nextNews}">
							<a href="{f:uri.page(pageUid: '{nextNews.uid}')}" class="btn btn-md btn-info tx-sgnews-footer-browser-next">
								<f:translate key="frontend.singleview.nextArticle" />
							</a>
						</f:if>
					</div>
				</sg:extendedIf>
			</div>
		</div>
	</section>

	<section class="content light-bg">
		<div class="container">
			<div class="tx-sgnews-single-comments">
				<div id="comments" class="tx-sgnews-comments-inner">
					<f:cObject typoscriptObjectPath="lib.sgCommentsIndex" />
				</div>
			</div>
		</div>
	</section>
</f:section>