[TASK] add data-caption for lightbox in news detail (#316)

t3kit · Oct 31, 2017 · 62ea836 · 62ea836
1 parent 2a11e76
commit 62ea836
Show file tree

Hide file tree

Showing 4 changed files with 76 additions and 11 deletions.
diff --git a/Configuration/TypoScript/Library/lib.fluidContent.setupts b/Configuration/TypoScript/Library/lib.fluidContent.setupts
@@ -103,11 +103,11 @@ lib.contentElement {
         media {
             popup {
                 data-caption {
-                    glue = <br>
-                    includeTitle = 0
-                    includeDescription = 1
-                    includeCopyright = 1
-                    labelCopyright = ©
+                    glue = {$lightbox.dataCaption.glue}
+                    includeTitle = {$lightbox.dataCaption.includeTitle}
+                    includeDescription = {$lightbox.dataCaption.includeDescription}
+                    includeCopyright = {$lightbox.dataCaption.includeCopyright}
+                    labelCopyright = {$lightbox.dataCaption.labelCopyright}
                 }
             }
         }

diff --git a/Configuration/TypoScript/Library/plugin.tx_themet3kit.constantsts b/Configuration/TypoScript/Library/plugin.tx_themet3kit.constantsts
@@ -0,0 +1,8 @@
+# Lightbox data-caption attribute settings
+lightbox.dataCaption {
+    glue = <br>
+    includeTitle = 0
+    includeDescription = 1
+    includeCopyright = 1
+    labelCopyright = ©
+}
diff --git a/Resources/Private/Extensions/News/Partials/Detail/MediaImage.html b/Resources/Private/Extensions/News/Partials/Detail/MediaImage.html
@@ -1,32 +1,78 @@
 <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:comment>
+	Added data-caption set by variable dataCaption.
+	Settings for caption are set in EXT:theme_t3kit/Resources/Private/Extensions/News/TypoScript/setup.ts
+
+	[PATCH begin]
+	2017-10-16 Anna Färber <anna[email protected]>
+	Replace f:image with f:media to override media rendering in other extensions.
+	Add data-caption attribute for simple-lightbox.js library.
+	[PATCH end]
+</f:comment>
+<f:variable name="dataCaption" />
+<f:variable name="glue">{settings.detail.media.image.lightbox.glue}</f:variable>
+<f:variable name="includeTitle">{settings.detail.media.image.lightbox.includeTitle}</f:variable>
+<f:variable name="includeDescription">{settings.detail.media.image.lightbox.includeDescription}</f:variable>
+<f:variable name="includeCopyright">{settings.detail.media.image.lightbox.includeCopyright}</f:variable>
+<f:variable name="labelCopyright">{settings.detail.media.image.lightbox.labelCopyright}</f:variable>
+
+<f:if condition="{mediaElement.title} && {includeTitle}">
+	<f:variable name="dataCaption">{mediaElement.title}</f:variable>
+</f:if>
+
+<f:if condition="{mediaElement.description} && {includeDescription}">
+	<f:if condition="{dataCaption}">
+		<f:variable name="dataCaption">{dataCaption}{glue}</f:variable>
+	</f:if>
+	<f:variable name="dataCaption">{dataCaption}{mediaElement.description}</f:variable>
+</f:if>
+
+<f:if condition="{mediaElement.originalResource.properties.copyright} && {includeCopyright}">
+	<f:if condition="{dataCaption}">
+		<f:variable name="dataCaption">{dataCaption}{glue}</f:variable>
+	</f:if>
+	<f:if condition="{labelCopyright}">
+		<f:variable name="dataCaption">{dataCaption}{labelCopyright} </f:variable>
+	</f:if>
+	<f:variable name="dataCaption">{dataCaption}{mediaElement.originalResource.properties.copyright}</f:variable>
+</f:if>
 
 <div class="mediaelement mediaelement-image">
 	<f:if condition="{mediaElement.link}">
 		<f:then>
 			<f:link.page pageUid="{mediaElement.link}" target="{n:targetLink(link:mediaElement.link)}">
-				<f:image image="{mediaElement}" title="{mediaElement.title}" alt="{mediaElement.alternative}" maxWidth="{f:if(condition: settings.media.maxWidth, then: settings.media.maxWidth, else: settings.detail.media.image.maxWidth)}" maxHeight="{f:if(condition: settings.media.maxHeight, then: settings.media.maxHeight, else: settings.detail.media.image.maxHeight)}" />
+				<f:media file="{mediaElement}" title="{mediaElement.title}" alt="{mediaElement.alternative}"
+					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)}" />
 			</f:link.page>
 		</f:then>
 		<f:else>
 			<f:if condition="{settings.detail.media.image.lightbox.enabled}">
 				<f:then>
 					<f:comment>
 						[PATCH begin]
-						2017-10-29 Anna Färber <anna[email protected]>
-						Remove rel Attribute from to have W3C confrom html.
+						2017-09-29 Anna Färber <anna[email protected]>
+						Remove rel Attribute from img to have W3C confrom html.
 						[PATCH end]
 						<a href="{f:uri.image(image:mediaElement, width:'{settings.detail.media.image.lightbox.width}', height:'{settings.detail.media.image.lightbox.height}')}"
 							title="{mediaElement.title}" class="{settings.detail.media.image.lightbox.class}"
 							rel="{settings.detail.media.image.lightbox.rel}">...</a>
+						</a>
 					</f:comment>
-					<a href="{f:uri.image(image:mediaElement, width:'{settings.detail.media.image.lightbox.width}', height:'{settings.detail.media.image.lightbox.height}')}" title="{mediaElement.title}" class="{settings.detail.media.image.lightbox.class}">
-						<f:image image="{mediaElement}" title="{mediaElement.title}" alt="{mediaElement.alternative}" maxWidth="{f:if(condition: settings.media.maxWidth, then: settings.media.maxWidth, else: settings.detail.media.image.maxWidth)}" maxHeight="{f:if(condition: settings.media.maxHeight, then: settings.media.maxHeight, else: settings.detail.media.image.maxHeight)}" />
+					<a href="{f:uri.image(image:mediaElement, width:'{settings.detail.media.image.lightbox.width}', height:'{settings.detail.media.image.lightbox.height}')}"
+						title="{mediaElement.title}" class="{settings.detail.media.image.lightbox.class}">
+						<f:media file="{mediaElement}" title="{mediaElement.title}" alt="{mediaElement.alternative}"
+							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)}"
+							data="{caption: dataCaption}" />
 					</a>
 				</f:then>
 				<f:else>
-					<f:image image="{mediaElement}" title="{mediaElement.title}" alt="{mediaElement.alternative}" maxWidth="{f:if(condition: settings.media.maxWidth, then: settings.media.maxWidth, else: settings.detail.media.image.maxWidth)}" maxHeight="{f:if(condition: settings.media.maxHeight, then: settings.media.maxHeight, else: settings.detail.media.image.maxHeight)}" />
+					<f:media file="{mediaElement}" title="{mediaElement.title}" alt="{mediaElement.alternative}"
+						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)}" />
 				</f:else>
 			</f:if>
 		</f:else>

diff --git a/Resources/Private/Extensions/News/TypoScript/setup.ts b/Resources/Private/Extensions/News/TypoScript/setup.ts
@@ -16,3 +16,14 @@ plugin.tx_news.settings.list.media.dummyImage = typo3conf/ext/theme_t3kit/Resour
 plugin.tx_news.settings.detail.shariffServices = facebook,twitter,whatsapp
 
 plugin.tx_news.settings.detail.showPrevNext = 1
+
+# Lightbox data-caption attribute settings for use in Partials/Detail/MediaImage.html
+plugin.tx_news.settings {
+    detail.media.image.lightbox {
+        glue = {$lightbox.dataCaption.glue}
+        includeTitle = {$lightbox.dataCaption.includeTitle}
+        includeDescription = {$lightbox.dataCaption.includeDescription}
+        includeCopyright = {$lightbox.dataCaption.includeCopyright}
+        labelCopyright = {$lightbox.dataCaption.labelCopyright}
+    }
+}