[BUGFIX] add video (internal, vimeo, youtube) support for different n…

…ews list views (#501) * [BUGFIX] Video (internal, vimeo, youtube) added to news list view needs styling. * [BUGFIX] Video (internal, vimeo, youtube) added to news list view needs styling. #2 * [BUGFIX] Video (internal, vimeo, youtube) added to news list view needs styling. #3 * [BUGFIX] reverse use of MediaVideoObjectFit in MediaContainer
t3kit · Apr 8, 2019 · 45cc3c3 · 45cc3c3
1 parent 3422e9d
commit 45cc3c3
Show file tree

Hide file tree

Showing 9 changed files with 58 additions and 11 deletions.
diff --git a/Resources/Private/Extensions/News/Partials/Detail/MediaVideoObjectFit.html b/Resources/Private/Extensions/News/Partials/Detail/MediaVideoObjectFit.html
@@ -0,0 +1,15 @@
+<html xmlns:f="http://typo3.org/ns/TYPO3/CMS/Fluid/ViewHelpers">
+<div class="mediaelement">
+	<div class="mediaelement-video">
+		<f:media class="object-fit" file="{mediaElement}" width="{settings.detail.media.video.width}" height="{settings.detail.media.video.height}"/>
+	</div>
+
+	<f:if condition="{mediaElement.description}">
+		<div class="medialement-alternative-content">
+			<p class="news-img-caption">
+				{mediaElement.description}
+			</p>
+		</div>
+	</f:if>
+</div>
+</html>
diff --git a/Resources/Private/Extensions/News/Partials/List/Cards.html b/Resources/Private/Extensions/News/Partials/List/Cards.html
@@ -39,7 +39,10 @@
 									</div>
 								</f:if>
 								<f:if condition="{mediaElement.originalResource.type} == 4">
-									<f:media file="{mediaElement}" additionalConfig="{loop: '0', autoplay: '0'}"/>
+									<div class="news-cards__media-preview"
+										style="height:{f:if(condition:settings.media.maxHeight, then: settings.media.maxHeight, else: settings.list.media.image.maxHeight)}px">
+										<f:media file="{mediaElement}" width="768" class="object-fit" additionalConfig="{loop: '0', autoplay: '0'}"/>
+									</div>
 								</f:if>
 								<f:if condition="{mediaElement.originalResource.type} == 5">
 									<div class="news-cards__media-preview"

diff --git a/Resources/Private/Extensions/News/Partials/List/NewsCarousel.html b/Resources/Private/Extensions/News/Partials/List/NewsCarousel.html
@@ -22,7 +22,9 @@
 											</div>
 										</f:if>
 										<f:if condition="{mediaElement.originalResource.type} == 4">
-											<f:render partial="Detail/MediaVideo" arguments="{mediaElement: mediaElement}"/>
+											<div class="news-carousel__media-preview">
+												<f:render partial="Detail/MediaVideoObjectFit" arguments="{mediaElement: mediaElement}"/>
+											</div>
 										</f:if>
 										<f:if condition="{mediaElement.originalResource.type} == 5">
 											<div class="news-carousel__media-preview">

diff --git a/Resources/Private/Extensions/News/Partials/List/SimpleList.html b/Resources/Private/Extensions/News/Partials/List/SimpleList.html
@@ -30,15 +30,17 @@
 						<f:alias map="{mediaElement: '{newsItem.mediaPreviews.0}'}">
 							<f:if condition="{mediaElement.originalResource.type} == 2">
 								<div class="news-simple-list__media-preview">
-									<f:media file="{mediaElement}" class="object-fit"/>
+									<f:media file="{mediaElement}" class="object-fit" />
 								</div>
 							</f:if>
 							<f:if condition="{mediaElement.originalResource.type} == 4">
-								<f:media file="{mediaElement}" additionalConfig="{loop: '0', autoplay: '0'}" />
+								<div class="news-simple-list__media-preview">
+									<f:media file="{mediaElement}" class="object-fit" additionalConfig="{loop: '0', autoplay: '0'}" />
+								</div>
 							</f:if>
 							<f:if condition="{mediaElement.originalResource.type} == 5">
 								<div class="news-simple-list__media-preview">
-									<f:media file="{mediaElement}" class="object-fit"/>
+									<f:media file="{mediaElement}" class="object-fit" />
 								</div>
 							</f:if>
 						</f:alias>

diff --git a/Resources/Private/Extensions/News/Partials/List/Timeline.html b/Resources/Private/Extensions/News/Partials/List/Timeline.html
@@ -61,15 +61,17 @@ <h2 class="news-timeline__header">{currentYear}</h2>
 									<f:alias map="{mediaElement: '{newsItem.mediaPreviews.0}'}">
 										<f:if condition="{mediaElement.originalResource.type} == 2">
 											<div class="news-timeline__media-preview">
-												<f:media file="{mediaElement}" class="object-fit"/>
+												<f:media file="{mediaElement}" class="object-fit" />
 											</div>
 										</f:if>
 										<f:if condition="{mediaElement.originalResource.type} == 4">
-											<f:media file="{mediaElement}" additionalConfig="{loop: '0', autoplay: '0'}" />
+											<div class="news-timeline__media-preview">
+												<f:media file="{mediaElement}" class="object-fit" additionalConfig="{loop: '0', autoplay: '0'}" />
+											</div>
 										</f:if>
 										<f:if condition="{mediaElement.originalResource.type} == 5">
 											<div class="news-timeline__media-preview">
-												<f:media file="{mediaElement}" class="object-fit"/>
+												<f:media file="{mediaElement}" class="object-fit" />
 											</div>
 										</f:if>
 									</f:alias>

diff --git a/Resources/Public/css/main.css b/Resources/Public/css/main.css
diff --git a/Resources/Public/less/main.less b/Resources/Public/less/main.less
@@ -3952,6 +3952,12 @@
     clear: both;
 }
 
+.news iframe,
+.news video {
+    border: 0;
+    display: block;
+}
+
 .news .nav ul {
     float: left;
     display: inline;
@@ -4491,7 +4497,9 @@
 .news-carousel__media-preview {
     margin-bottom: 20px;
 
-    img {
+    img,
+    iframe,
+    video {
         min-height: 180px;
     }
 }

diff --git a/felayout_t3kit/dev/styles/main/plugins/news/news.less b/felayout_t3kit/dev/styles/main/plugins/news/news.less
@@ -7,6 +7,12 @@
     clear: both;
 }
 
+.news iframe,
+.news video {
+    border: 0;
+    display: block;
+}
+
 .news .nav ul {
     float: left;
     display: inline;

diff --git a/felayout_t3kit/dev/styles/main/plugins/news/newsCarousel.less b/felayout_t3kit/dev/styles/main/plugins/news/newsCarousel.less
@@ -24,7 +24,9 @@
 .news-carousel__media-preview {
     margin-bottom: 20px;
 
-    img {
+    img,
+    iframe,
+    video {
         min-height: 180px;
     }
 }