Detail.html 11.1 KB
Newer Older
1
<html xmlns:f="http://typo3.org/ns/TYPO3/CMS/Fluid/ViewHelpers"
2
3
	xmlns:n="http://typo3.org/ns/GeorgRinger/News/ViewHelpers"
	xmlns:t3o="http://typo3.org/ns/T3o/T3olayout/ViewHelpers" data-namespace-typo3-fluid="true">
4

5
<f:layout name="Detail" />
6
7
8
9
10
11
12

<!--
	=====================
		News/Detail.html
-->

<f:section name="content">
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
	<f:if condition="{newsItem}">
		<n:format.nothing>
			<n:excludeDisplayedNews newsItem="{newsItem}" />
			<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>
			<f:render partial="Detail/Opengraph" arguments="{newsItem: newsItem, settings:settings}" />
		</n:format.nothing>
30

31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
		<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>
53

54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
		<f:if condition="{newsItem.mediaNonPreviews}">
			<f:then>
				<f:render section="headline" arguments="{_all}" />
				<div class="row">
					<div class="col-md-12 mt-3 pb-3">
						<div class="thumbnail">
							<f:render section="pictureset" arguments="{file:newsItem.mediaNonPreviews.0}" />
							<f:if condition="{newsItem.mediaNonPreviews.0.title} || {newsItem.mediaNonPreviews.0.description}">
								<div class="caption">
									<f:if condition="{newsItem.mediaNonPreviews.0.description}">
										<div class="caption__description">
											{newsItem.mediaNonPreviews.0.description}
										</div>
									</f:if>
								</div>
							</f:if>
						</div>
					</div>
					<div class="col-md-12">
						<f:render section="inner-content" arguments="{_all}" />
					</div>
					<f:for each="{newsItem.mediaNonPreviews}" iteration="iterator" as="mediaElement">
						<f:if condition="{iterator.isFirst}">
							<f:else>
								<div class="col-md-4">
									<f:link.typolink parameter="{f:uri.image(image:mediaElement, width: '1950')}" additionalAttributes="{data-fancybox: 'f-{newsitem.uid}'}">
										<f:media file="{mediaElement}"
											width="{f:if(condition: settings.media.maxWidth, then: settings.media.maxWidth, else: settings.detail.media.image.maxWidth)}"
											height="{f:if(condition: settings.media.maxHeight, then: settings.media.maxHeight, else: settings.detail.media.image.maxHeight)}"
											alt="{mediaElement.alternative}" title="{mediaElement.title}"
											class="img-fluid" />
									</f:link.typolink>
								</div>
							</f:else>
						</f:if>
					</f:for>
				</div>
			</f:then>
			<f:else>
				<f:render section="headline" arguments="{_all}" />
				<f:render section="inner-content" arguments="{_all}" />
			</f:else>
		</f:if>
		<f:render section="discourse" arguments="{_all}" />
	</f:if>
99
100
101
</f:section>

<f:section name="headline">
102
103
104
105
106
107
	<div class="mb-3">
		<time datetime="{f:format.date(date:newsItem.datetime, format:'Y-m-d')}">
			<f:format.date format="D. jS F, Y">{newsItem.datetime}</f:format.date>
			<meta itemprop="datePublished" content="{f:format.date(date:newsItem.datetime, format:'Y-m-d')}" />
		</time>
	</div>
108

109
	<h1 itemprop="headline">{newsItem.title}</h1>
110

111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
	<f:if condition="{newsItem.categories -> f:count()} > 0">
		<div class="news-single__categories d-inline-block mb-3">
			<span><f:translate key="categories" />:</span>
			<f:for each="{newsItem.categories}" as="category" iteration="iterator">
			<span>
				<f:if condition="{category.uid}=={settings.budgetCategoryID}">
					<f:then>
						<f:link.page title="{category.title}" class="active" pageUid="{settings.budgetListPid}">{category.title}</f:link.page>
						<f:if condition="{iterator.isLast} == false">, </f:if>
					</f:then>
					<f:else>
						<f:link.page title="{category.title}" class="active" pageUid="{settings.listPid}" additionalParams="{tx_news_pi1:{overwriteDemand:{categories: category.uid}}}">{category.title}</f:link.page>
						<f:if condition="{iterator.isLast} == false">, </f:if>
					</f:else>
			</f:if>
			</span>
			</f:for>
			<f:if condition="{newsItem.authorFeUser}">
				<f:then>
					<span class="news-list__item-author d-block small"><f:translate key="author" arguments="{0:dd.authorFeUser.name}" /> {newsItem.authorFeUser.name}</span>
					<f:format.raw><t3o:gravatar emailAddress="{newsItem.authorFeUser.email}" size="40" class="gravatar" /></f:format.raw>
				</f:then>
				<f:else>
					<f:if condition="{newsItem.author}">
						<span class="news-list__item-author d-block small">
							<f:translate key="author" arguments="{0:newsItem.author}" />
							<f:if condition="{newsItem.authorEmail}">
								<f:format.raw><t3o:gravatar emailAddress="{newsItem.authorEmail}" size="40" class="gravatar" /></f:format.raw>
							</f:if>
						</span>
141
					</f:if>
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
				</f:else>
			</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">
					<div class="mt-3">
						<f:render partial="Detail/Shariff" />
					</div>
				</n:extensionLoaded>
			</f:if>
		</div>
	</f:if>
157
158
159
</f:section>

<f:section name="inner-content">
160
161
162
163
164
165
166
	<n:renderMedia news="{newsItem}" imgClass="img-fluid" videoClass="video-wrapper" audioClass="audio-wrapper">
		<f:if condition="{newsItem.teaser}">
			<!-- teaser -->
			<div class="lead mt-3" itemprop="description">
				<f:format.html>{newsItem.teaser}</f:format.html>
			</div>
		</f:if>
Thomas Löffler's avatar
Thomas Löffler committed
167

168
169
170
171
		<!-- main text -->
		<div class="news-text-wrap" itemprop="articleBody">
			<f:format.html>{newsItem.bodytext}</f:format.html>
		</div>
172

173
174
175
176
177
178
		<f:if condition="{newsItem.contentElements}">
			<!-- content elements -->
			<f:cObject typoscriptObjectPath="lib.tx_news.contentElementRendering">
				{newsItem.contentElementIdList}
			</f:cObject>
		</f:if>
179

180
	</n:renderMedia>
181

182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
	<f:if condition="{newsItem.contributors}">
		<div class="news-list__item-author d-block small">
			<b>Additional contributors for this article</b>
			<ul>
				<f:for each="{newsItem.contributors}" as="contributor">
					<li>
						<f:translate extensionName="t3org_layout" key="tx_t3org_layout.news.contributors.roles.{contributor.role}">
							role
						</f:translate>
						:
						{contributor.authorFeUser.name}
					</li>
				</f:for>
			</ul>
		</div>
	</f:if>
198
199
200
201
202
203
	<f:if condition="{settings.backPid}">
		<!-- Link Back -->
		<f:link.page class="btn btn-default" pageUid="{settings.backPid}">
			<f:translate key="back-link" />
		</f:link.page>
	</f:if>
204

205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
	<f:if condition="{newsItem.allRelatedSorted}">
		<!-- Related news records -->
		<section class="container newsrelated">
			<div class="col-md-12 mt-3 mb-3">
				<div class="frame frame-default frame-type-text frame-layout-0">
					<header>
						<h2>
							<f:translate key="related-news" />
						</h2>
					</header>
					<ul class="list-unstyled d-block">
						<f:for each="{newsItem.allRelatedSorted}" as="related">
							<li>
								<n:link class="news-related-item d-block mb-3" newsItem="{related}"
									settings="{settings}" title="{related.title}">
									<small>
										<time datetime="{f:format.date(date:related.datetime, format:'%d %B %Y')}">
											<f:format.date format="%d %B %Y">{related.datetime}</f:format.date>
											<meta itemprop="datePublished"
												content="{f:format.date(date:related.datetime, format:'Y-m-d')}" />
										</time>
226

227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
										<f:if condition="{related.categories -> f:count()} > 0">
											<div class="d-inline-block news-related-item__categories">
												<span><f:translate key="categories" />:</span>
												<f:for each="{related.categories}" as="category" iteration="iterator">
													<span>{category.title}<f:if condition="{iterator.isLast} == false">,</f:if></span>
												</f:for>
											</div>
										</f:if>
									</small>
									<h5>{related.title}</h5>
								</n:link>
							</li>
						</f:for>
					</ul>
				</div>
			</div>
		</section>
	</f:if>
245
246


247
248
249
250
251
252
253
254
255
256
257
258
259
	<f:if condition="{newsItem.relatedFiles}">
		<!-- related files -->
		<section class="container">
			<div class="uploadsCard">
				<div class="card-header">
					<f:translate key="related-files" />
				</div>
				<ul class="list-group list-group-flush list-unstyled">
					<f:render partial="General/RelatedFiles" arguments="{files: newsItem.relatedFiles}" />
				</ul>
			</div>
		</section>
	</f:if>
Thomas Löffler's avatar
Thomas Löffler committed
260

261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
	<f:if condition="{newsItem.relatedLinks}">
		<!-- Related links -->
		<section class="container">
			<div class="frame frame-default frame-type-text frame-layout-0">
				<header>
					<h2>
						<f:translate key="related-links" />
					</h2>
				</header>
				<ul class="list-unstyled d-block">
					<f:for each="{newsItem.relatedLinks}" as="relatedLink">
						<li>
							<f:link.page class="d-block" pageUid="{relatedLink.uri}" title="{relatedLink.title}"
								target="{n:targetLink(link:relatedLink.uri)}">{f:if(condition:
								relatedLink.title, then: relatedLink.title, else: relatedLink.uri)}
							</f:link.page>
							<f:if condition="{relatedLink.description}"><span>{relatedLink.description}</span>
							</f:if>
						</li>
					</f:for>
				</ul>
			</div>
		</section>
	</f:if>
285
286

</f:section>
287

Thomas Löffler's avatar
Thomas Löffler committed
288
<f:section name="discourse">
289
	<div id="discourse-comments" class="mt-5"></div>
Thomas Löffler's avatar
Thomas Löffler committed
290

291
292
293
294
295
	<script>
		DiscourseEmbed = {
			discourseUrl: 'https://talk.typo3.org/',
			discourseEmbedUrl: '<f:uri.page absolute="1" additionalParams="{tx_news_pi1: {news: newsItem.uid, controller: \"News\", action: \"detail\"}}" />'
		};
Thomas Löffler's avatar
Thomas Löffler committed
296

297
298
299
300
301
302
303
304
		(function () {
			var d = document.createElement('script');
			d.type = 'text/javascript';
			d.async = true;
			d.src = DiscourseEmbed.discourseUrl + 'javascripts/embed.js';
			(document.getElementsByTagName('head')[0] || document.getElementsByTagName('body')[0]).appendChild(d);
		})();
	</script>
Thomas Löffler's avatar
Thomas Löffler committed
305
</f:section>
306
307
<f:section name="pictureset">
	<picture>
308
309
310
311
		<source srcset="{f:uri.image(image: file, maxWidth: 1200, cropVariant: 'default')}" media="(min-width: 1200px)">
		<source srcset="{f:uri.image(image: file, maxWidth: 1200, cropVariant: 'default')}" media="(min-width: 992px)">
		<source srcset="{f:uri.image(image: file, maxWidth: 992, cropVariant: 'tablet')}" media="(min-width: 768px)">
		<source srcset="{f:uri.image(image: file, maxWidth: 768, cropVariant: 'mobile')}" media="(max-width: 767px)">
312
		<!---Fallback--->
313
		<f:image class="img-fluid" image="{file}" maxWidth="1200" cropVariant="{default}" alt="{file.alternative}" title="{file.title}" />
314
315
	</picture>
</f:section>
316
</html>