[BUGFIX] adjust image height settings for news cards template (#382)

t3kit · Jan 30, 2018 · 8215842 · 8215842
1 parent 0636112
commit 8215842
Show file tree

Hide file tree

Showing 3 changed files with 30 additions and 19 deletions.
diff --git a/Resources/Private/Extensions/News/Partials/List/Cards.html b/Resources/Private/Extensions/News/Partials/List/Cards.html
@@ -33,16 +33,16 @@
 						<div class="news-cards__img-wrap">
 							<f:alias map="{mediaElement: '{newsItem.mediaPreviews.0}'}">
 								<f:if condition="{mediaElement.originalResource.type} == 2">
-									<div class="news-cards__media-preview">
-										<f:media file="{mediaElement}" width="{f:if(condition: settings.detail.media.image.maxWidth, then: settings.detail.media.image.maxWidth, else: settings.media.maxWidth)}"/>
+									<div class="news-cards__media-preview" style="height:{f:if(condition:settings.media.maxHeight, then: settings.media.maxHeight, else: settings.detail.media.image.maxHeight)}px">
+										<f:media file="{mediaElement}" width="768"/>
 									</div>
 								</f:if>
 								<f:if condition="{mediaElement.originalResource.type} == 4">
-									<f:media file="{mediaElement}" additionalConfig="{loop: '0', autoplay: '0'}" />
+									<f:media file="{mediaElement}" additionalConfig="{loop: '0', autoplay: '0'}"/>
 								</f:if>
 								<f:if condition="{mediaElement.originalResource.type} == 5">
-									<div class="news-cards__media-preview">
-										<f:media file="{mediaElement}" width="{f:if(condition: settings.detail.media.image.maxWidth, then: settings.detail.media.image.maxWidth, else: settings.media.maxWidth)}"/>
+									<div class="news-cards__media-preview" style="height:{f:if(condition: settings.detail.media.image.maxHeight, then: settings.detail.media.image.maxHeight, else: settings.media.maxHeight)}px">
+										<f:media file="{mediaElement}" width="768"/>
 									</div>
 								</f:if>
 							</f:alias>
@@ -52,7 +52,9 @@
 						<f:if condition="{settings.displayDummyIfNoMedia}">
 							<div class="news-cards__img-wrap">
 								<div class="no-media-element">
-									<div class="news-cards__media-preview" style="background-image:url('{f:uri.image(src: settings.list.media.dummyImage, treatIdAsReference: 1)}');"></div>
+									<div class="news-cards__media-preview"
+										style="background-image:url('{f:uri.image(src: settings.list.media.dummyImage, treatIdAsReference: 1)}');
+										height:{f:if(condition:settings.media.maxHeight, then: settings.media.maxHeight, else: settings.detail.media.image.maxHeight)}px"></div>
 								</div>
 							</div>
 						</f:if>

diff --git a/Resources/Private/Extensions/News/TypoScript/setup.ts b/Resources/Private/Extensions/News/TypoScript/setup.ts
@@ -1,5 +1,4 @@
 plugin.tx_news.settings.defaultDetailPid = {$themes.configuration.features.newsDefaultDetailPid}
-plugin.tx_news.settings.detail.media.image.lightbox.class = {$styles.content.textmedia.linkWrap.lightboxCssClass}
 
 plugin.tx_news.settings.newsCarousel.cropMaxCharacters = 136
 
@@ -22,13 +21,18 @@ plugin.tx_news.settings.detail.showPrevNext = 1
 # show a file type icon above the file name
 plugin.tx_news.settings.detail.showRelatedFileIcon = 0
 
-# 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}
+    detail.media.image {
+    # Lightbox data-caption attribute settings for use in Partials/Detail/MediaImage.html
+        lightbox {
+            glue = {$lightbox.dataCaption.glue}
+            includeTitle = {$lightbox.dataCaption.includeTitle}
+            includeDescription = {$lightbox.dataCaption.includeDescription}
+            includeCopyright = {$lightbox.dataCaption.includeCopyright}
+            labelCopyright = {$lightbox.dataCaption.labelCopyright}
+            class = {$styles.content.textmedia.linkWrap.lightboxCssClass}
+        }
+
+        maxHeight = 200
     }
 }
diff --git a/felayout_t3kit/dev/styles/main/plugins/news/newsCards.less b/felayout_t3kit/dev/styles/main/plugins/news/newsCards.less
@@ -6,18 +6,23 @@
     border: 1px solid @border-color;
     margin-bottom: 30px;
     border-radius: 3px;
-
-    > a {
-        display: inline-block;
-    }
 }
 
 .news-cards__media-preview {
-    min-height: 180px;
     background-size: cover;
     background-repeat: no-repeat;
     background-position: 50% 50%;
     margin-bottom: 20px;
+    overflow: hidden;
+    position: relative;
+
+    img {
+        top: 50%;
+        -webkit-transform: translateY(-50%);
+        transform: translateY(-50%);
+        position: absolute;
+        width: 100%;
+    }
 }
 
 .news-cards__text {