Skip to content

Commit 45cc3c3

Browse files
pxamikedmh
pxamike
authored and
dmh
committed
[BUGFIX] add video (internal, vimeo, youtube) support for different news 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
1 parent 3422e9d commit 45cc3c3

File tree

9 files changed

+58
-11
lines changed

9 files changed

+58
-11
lines changed

‎Resources/Private/Extensions/News/Partials/Detail/MediaVideoObjectFit.html‎

Lines changed: 15 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,15 @@
1+
<html xmlns:f="http://typo3.org/ns/TYPO3/CMS/Fluid/ViewHelpers">
2+
<div class="mediaelement">
3+
<div class="mediaelement-video">
4+
<f:media class="object-fit" file="{mediaElement}" width="{settings.detail.media.video.width}" height="{settings.detail.media.video.height}"/>
5+
</div>
6+
7+
<f:if condition="{mediaElement.description}">
8+
<div class="medialement-alternative-content">
9+
<p class="news-img-caption">
10+
{mediaElement.description}
11+
</p>
12+
</div>
13+
</f:if>
14+
</div>
15+
</html>

‎Resources/Private/Extensions/News/Partials/List/Cards.html‎

Lines changed: 4 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -39,7 +39,10 @@
3939
</div>
4040
</f:if>
4141
<f:if condition="{mediaElement.originalResource.type} == 4">
42-
<f:media file="{mediaElement}" additionalConfig="{loop: '0', autoplay: '0'}"/>
42+
<div class="news-cards__media-preview"
43+
style="height:{f:if(condition:settings.media.maxHeight, then: settings.media.maxHeight, else: settings.list.media.image.maxHeight)}px">
44+
<f:media file="{mediaElement}" width="768" class="object-fit" additionalConfig="{loop: '0', autoplay: '0'}"/>
45+
</div>
4346
</f:if>
4447
<f:if condition="{mediaElement.originalResource.type} == 5">
4548
<div class="news-cards__media-preview"

‎Resources/Private/Extensions/News/Partials/List/NewsCarousel.html‎

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -22,7 +22,9 @@
2222
</div>
2323
</f:if>
2424
<f:if condition="{mediaElement.originalResource.type} == 4">
25-
<f:render partial="Detail/MediaVideo" arguments="{mediaElement: mediaElement}"/>
25+
<div class="news-carousel__media-preview">
26+
<f:render partial="Detail/MediaVideoObjectFit" arguments="{mediaElement: mediaElement}"/>
27+
</div>
2628
</f:if>
2729
<f:if condition="{mediaElement.originalResource.type} == 5">
2830
<div class="news-carousel__media-preview">

‎Resources/Private/Extensions/News/Partials/List/SimpleList.html‎

Lines changed: 5 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -30,15 +30,17 @@
3030
<f:alias map="{mediaElement: '{newsItem.mediaPreviews.0}'}">
3131
<f:if condition="{mediaElement.originalResource.type} == 2">
3232
<div class="news-simple-list__media-preview">
33-
<f:media file="{mediaElement}" class="object-fit"/>
33+
<f:media file="{mediaElement}" class="object-fit" />
3434
</div>
3535
</f:if>
3636
<f:if condition="{mediaElement.originalResource.type} == 4">
37-
<f:media file="{mediaElement}" additionalConfig="{loop: '0', autoplay: '0'}" />
37+
<div class="news-simple-list__media-preview">
38+
<f:media file="{mediaElement}" class="object-fit" additionalConfig="{loop: '0', autoplay: '0'}" />
39+
</div>
3840
</f:if>
3941
<f:if condition="{mediaElement.originalResource.type} == 5">
4042
<div class="news-simple-list__media-preview">
41-
<f:media file="{mediaElement}" class="object-fit"/>
43+
<f:media file="{mediaElement}" class="object-fit" />
4244
</div>
4345
</f:if>
4446
</f:alias>

‎Resources/Private/Extensions/News/Partials/List/Timeline.html‎

Lines changed: 5 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -61,15 +61,17 @@ <h2 class="news-timeline__header">{currentYear}</h2>
6161
<f:alias map="{mediaElement: '{newsItem.mediaPreviews.0}'}">
6262
<f:if condition="{mediaElement.originalResource.type} == 2">
6363
<div class="news-timeline__media-preview">
64-
<f:media file="{mediaElement}" class="object-fit"/>
64+
<f:media file="{mediaElement}" class="object-fit" />
6565
</div>
6666
</f:if>
6767
<f:if condition="{mediaElement.originalResource.type} == 4">
68-
<f:media file="{mediaElement}" additionalConfig="{loop: '0', autoplay: '0'}" />
68+
<div class="news-timeline__media-preview">
69+
<f:media file="{mediaElement}" class="object-fit" additionalConfig="{loop: '0', autoplay: '0'}" />
70+
</div>
6971
</f:if>
7072
<f:if condition="{mediaElement.originalResource.type} == 5">
7173
<div class="news-timeline__media-preview">
72-
<f:media file="{mediaElement}" class="object-fit"/>
74+
<f:media file="{mediaElement}" class="object-fit" />
7375
</div>
7476
</f:if>
7577
</f:alias>

‎Resources/Public/css/main.css‎

Lines changed: 8 additions & 1 deletion
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎Resources/Public/less/main.less‎

Lines changed: 9 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -3952,6 +3952,12 @@
39523952
clear: both;
39533953
}
39543954

3955+
.news iframe,
3956+
.news video {
3957+
border: 0;
3958+
display: block;
3959+
}
3960+
39553961
.news .nav ul {
39563962
float: left;
39573963
display: inline;
@@ -4491,7 +4497,9 @@
44914497
.news-carousel__media-preview {
44924498
margin-bottom: 20px;
44934499

4494-
img {
4500+
img,
4501+
iframe,
4502+
video {
44954503
min-height: 180px;
44964504
}
44974505
}

‎felayout_t3kit/dev/styles/main/plugins/news/news.less‎

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -7,6 +7,12 @@
77
clear: both;
88
}
99

10+
.news iframe,
11+
.news video {
12+
border: 0;
13+
display: block;
14+
}
15+
1016
.news .nav ul {
1117
float: left;
1218
display: inline;

‎felayout_t3kit/dev/styles/main/plugins/news/newsCarousel.less‎

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -24,7 +24,9 @@
2424
.news-carousel__media-preview {
2525
margin-bottom: 20px;
2626

27-
img {
27+
img,
28+
iframe,
29+
video {
2830
min-height: 180px;
2931
}
3032
}

0 commit comments

Comments
 (0)