ограничение высоты изображений в ленте

maxcom · Jan 6, 2025 · d53e64b · d53e64b
1 parent 1de4daf
commit d53e64b
Show file tree

Hide file tree

Showing 3 changed files with 7 additions and 6 deletions.
diff --git a/src/main/webapp/WEB-INF/tags/image.tag b/src/main/webapp/WEB-INF/tags/image.tag
@@ -23,12 +23,15 @@
 <%@ attribute name="showInfo" required="false" type="java.lang.Boolean" %>
 <%@ attribute name="enableEdit" required="false" type="java.lang.Boolean" %>
 <%@ attribute name="sizes" required="false" type="java.lang.String" %>
+<%@ attribute name="heightLimit" required="false" type="java.lang.String" %>
 <%@ attribute name="enableSchema" required="false" type="java.lang.Boolean" %>
 <c:set var="sizesValue" value="${(empty sizes) ? '100vw' : sizes}" />
+<c:set var="heightLimitValue" value="${(empty heightLimit) ? '90vh' : heightLimit}" />
+
 <c:if test="${showImage!=null and showImage and image!=null}">
-  <div class="medium-image-container" style="max-width: <%= Math.min(image.getFullInfo().getWidth(), Image.MaxScaledSize()) %>px">
+  <div class="medium-image-container" style="max-width: <%= Math.min(image.getFullInfo().getWidth(), Image.MaxScaledSize()) %>px; max-height: ${heightLimitValue}">
   <figure class="medium-image" <%-- padding продублирован Pale Moon и других для браузеров, не умеющих min() --%>
-    style="position: relative; padding-bottom: ${ 100.0 * image.mediumInfo.height / image.mediumInfo.width }%; padding-bottom: min(${ 100.0 * image.mediumInfo.height / image.mediumInfo.width }%, 90vh); margin: 0"
+    style="position: relative; padding-bottom: ${ 100.0 * image.mediumInfo.height / image.mediumInfo.width }%; padding-bottom: min(${ 100.0 * image.mediumInfo.height / image.mediumInfo.width }%, ${heightLimitValue}); margin: 0"
   <c:if test="${enableSchema}">itemprop="associatedMedia" itemscope itemtype="http://schema.org/ImageObject"</c:if>>
     <c:if test="${preparedMessage.section.imagepost || image.fullInfo.width >= 1920 || image.fullInfo.height >= 1080}">
       <a href="${image.fullName}" itemprop="contentURL">
@@ -39,7 +42,7 @@
               src="${image.mediumName}"
               alt="<l:title>${title}</l:title>"
               srcset="${image.srcset}"
-              sizes="${sizesValue}" style="position: absolute"
+              sizes="${sizesValue}" style="position: absolute; max-height: ${heightLimitValue}"
               ${image.loadingCode}
               ${image.mediumInfo.code}>
       <meta itemprop="caption" content="${preparedMessage.message.title}">

diff --git a/src/main/webapp/WEB-INF/tags/news.tag b/src/main/webapp/WEB-INF/tags/news.tag
@@ -90,7 +90,7 @@
 
   <c:if test="${preparedMessage.image != null}">
     <lor:image title="${preparedMessage.message.title}" image="${preparedMessage.image}" sizes="(min-width: 47em) 40vw, 100vw"
-    preparedMessage="${preparedMessage}" showImage="true"/>
+    preparedMessage="${preparedMessage}" showImage="true" heightLimit="50vh"/>
   </c:if>
 
 <c:set var="group" value="${preparedMessage.group}"/>

diff --git a/src/main/webapp/sass/_common.scss b/src/main/webapp/sass/_common.scss
@@ -800,7 +800,6 @@ pre code .container:before, pre code .container:after {
 img.medium-image {
   width: auto;
   max-width: 100%;
-  max-height: 90vh;
   height: auto;
   image-orientation: none;
   left: 50%;
@@ -809,7 +808,6 @@ img.medium-image {
 
 .medium-image-container {
   margin: 1em auto;
-  max-height: 90vh;
 }
 
 figure.medium-image {