фиксы расчета sizes для изображений

maxcom · Jan 4, 2025 · 8661aa8 · 8661aa8
1 parent d714e76
commit 8661aa8
Show file tree

Hide file tree

Showing 4 changed files with 13 additions and 7 deletions.
diff --git a/src/main/webapp/WEB-INF/jsp/boxlets/gallery.jsp b/src/main/webapp/WEB-INF/jsp/boxlets/gallery.jsp
@@ -26,7 +26,7 @@
         <div style="position: relative; padding-bottom: ${ 100.0 * item.mediumInfo.height / item.mediumInfo.width }%; margin: 0">
           <c:url var="url" value="${item.item.link}"/>
           <a href="${url}" style="position: absolute">
-            <img sizes="(min-width: 60em) 24vw, 100vw"
+            <img sizes="(min-width: 70em) 24vw, (min-width: 47em) 50vw, 100vw"
                  srcset="${item.item.image.srcset}"
                  src="${item.item.image.medium}"
                  alt="<l:title>${item.item.title}</l:title>"

diff --git a/src/main/webapp/WEB-INF/tags/image.tag b/src/main/webapp/WEB-INF/tags/image.tag
@@ -22,7 +22,9 @@
 <%@ attribute name="showImage" required="false" type="java.lang.Boolean" %>
 <%@ 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="enableSchema" required="false" type="java.lang.Boolean" %>
+<c:set var="sizesValue" value="${(empty sizes) ? '100vw' : sizes}" />
 <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">
   <figure class="medium-image" <%-- padding продублирован Pale Moon и других для браузеров, не умеющих min() --%>
@@ -37,7 +39,7 @@
               src="${image.mediumName}"
               alt="<l:title>${title}</l:title>"
               srcset="${image.srcset}"
-              sizes="100vw" style="position: absolute"
+              sizes="${sizesValue}" style="position: absolute"
               ${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
@@ -1,5 +1,5 @@
 <%--
-  ~ Copyright 1998-2023 Linux.org.ru
+  ~ Copyright 1998-2025 Linux.org.ru
   ~    Licensed under the Apache License, Version 2.0 (the "License");
   ~    you may not use this file except in compliance with the License.
   ~    You may obtain a copy of the License at
@@ -89,7 +89,8 @@
   </c:if>
 
   <c:if test="${preparedMessage.image != null}">
-    <lor:image title="${preparedMessage.message.title}" image="${preparedMessage.image}" preparedMessage="${preparedMessage}" showImage="true"/>
+    <lor:image title="${preparedMessage.message.title}" image="${preparedMessage.image}" sizes="(min-width: 47em) 40vw, 100vw"
+    preparedMessage="${preparedMessage}" showImage="true"/>
   </c:if>
 
 <c:set var="group" value="${preparedMessage.group}"/>

diff --git a/src/main/webapp/WEB-INF/tags/topic.tag b/src/main/webapp/WEB-INF/tags/topic.tag
@@ -102,10 +102,12 @@
   <div class="msg-container">
 
   <div class="msg_body">
+    <c:set var="sizes" value="(min-width: 70em) 80vw, 100vw" />
+
     <c:if test="${empty preparedMessage.additionalImages or not imageSlider}">
       <c:if test="${preparedMessage.image != null}">
         <lor:image title="${preparedMessage.message.title}" image="${preparedMessage.image}" enableSchema="true"
-                   preparedMessage="${preparedMessage}" showImage="true"
+                   preparedMessage="${preparedMessage}" showImage="true" sizes="${sizes}"
                    enableEdit="${messageMenu.topicEditable && showImageDelete && not preparedMessage.section.imagepost}"/>
       </c:if>
     </c:if>
@@ -117,13 +119,14 @@
             <div class="slider-container">
               <c:if test="${preparedMessage.image != null}">
                 <lor:image title="${preparedMessage.message.title}" image="${preparedMessage.image}" enableSchema="true"
-                           preparedMessage="${preparedMessage}" showImage="true"
+                           preparedMessage="${preparedMessage}" showImage="true" sizes="${sizes}"
                            enableEdit="${messageMenu.topicEditable && showImageDelete && not preparedMessage.section.imagepost}"/>
               </c:if>
 
               <c:forEach var="image" items="${preparedMessage.additionalImages}">
                 <lor:image title="${preparedMessage.message.title}" image="${image}" enableSchema="true"
-                           preparedMessage="${preparedMessage}" showImage="true" enableEdit="${messageMenu.topicEditable && showImageDelete}"/>
+                           preparedMessage="${preparedMessage}" showImage="true" sizes="${sizes}"
+                           enableEdit="${messageMenu.topicEditable && showImageDelete}"/>
               </c:forEach>
             </div>