图库、瞬间的图片使用响应式图片

This commit is contained in:
j m 2024-09-15 19:24:24 +08:00
parent 2a1fe6bf63
commit 069530d7dc
5 changed files with 18 additions and 5 deletions

View File

@ -1,7 +1,7 @@
<th:block xmlns:th="https://www.thymeleaf.org"
th:fragment="article (post, type)"
th:with="updateInterval = ${T(java.lang.Math).floor((#dates.createNow().getTime()/1000.0 - post.status.lastModifyTime.getEpochSecond())/86400.0).intValue()},
thumbnail = ${#strings.isEmpty(post.spec.cover) ? #strings.isEmpty(theme.config.post.default_thumbnail) ? '' : theme.config.post.default_thumbnail + (#strings.contains(theme.config.post.default_thumbnail, '?') ? '&' : '?') + 'id=' + post.metadata.name : thumbnail.gen(post.spec.cover, 'l')}">
thumbnail = ${#strings.isEmpty(post.spec.cover) ? #strings.isEmpty(theme.config.post.default_thumbnail) ? '' : theme.config.post.default_thumbnail + (#strings.contains(theme.config.post.default_thumbnail, '?') ? '&' : '?') + 'id=' + post.metadata.name : thumbnail.gen(post.spec.cover, 'xl')}">
<div th:if="${!#strings.isEmpty(thumbnail)}" class="card widget">
<div class="cover-image" th:style="'background-image: url(' + ${thumbnail} + ')'">

View File

@ -1,7 +1,7 @@
<th:block xmlns:th="https://www.thymeleaf.org"
th:fragment="articleList (posts)">
<th:block th:each="post : ${posts}"
th:with="thumbnail = ${#strings.isEmpty(post.spec.cover) ? #strings.isEmpty(theme.config.post.default_thumbnail) ? '' : theme.config.post.default_thumbnail + (#strings.contains(theme.config.post.default_thumbnail, '?') ? '&' : '?') + 'id=' + post.metadata.name : thumbnail.gen(post.spec.cover, 'l')},
th:with="thumbnail = ${#strings.isEmpty(post.spec.cover) ? #strings.isEmpty(theme.config.post.default_thumbnail) ? '' : theme.config.post.default_thumbnail + (#strings.contains(theme.config.post.default_thumbnail, '?') ? '&' : '?') + 'id=' + post.metadata.name : thumbnail.gen(post.spec.cover, 'xl')},
thumbnail_mode = ${(theme.config.post.top_thumbnail_mode == 'grid' || (!post.spec.pinned && theme.config.post.thumbnail_mode == 'grid'))? 'grid' : (!#strings.isEmpty(post.metadata.annotations.get('thumbnail_mode')) && post.metadata.annotations.get('thumbnail_mode') != 'none')? post.metadata.annotations.get('thumbnail_mode') : post.spec.pinned ? theme.config.post.top_thumbnail_mode : theme.config.post.thumbnail_mode}">
<div th:if="${!#strings.isEmpty(thumbnail) && thumbnail_mode == 'back'}" class="card widget card-cover">
<a th:href="${post.status.permalink}">

View File

@ -13,7 +13,11 @@
<div class="main-content not-toc" data-target="Moment" th:data-id="${moment.metadata.name}">
[(${moment.spec.content.html})]
<mew-photos th:if="${!#lists.isEmpty(moment.spec.content.medium)}">
<img th:each="momentItem : ${moment.spec.content.medium}" th:if="${momentItem.type.name == 'PHOTO'}" th:src="${momentItem.url}" />
<img th:each="momentItem : ${moment.spec.content.medium}" th:if="${momentItem.type.name == 'PHOTO'}" th:src="${momentItem.url}"
th:srcset="|${thumbnail.gen(momentItem.url, 's')} 400w,
${thumbnail.gen(momentItem.url, 'm')} 800w,
${thumbnail.gen(momentItem.url, 'l')} 1200w|"
sizes="(max-width: 1200px) 100vw, 1200px"/>
</mew-photos>
<th:block th:if="${!#lists.isEmpty(moment.spec.content.medium)}" th:each="momentItem : ${moment.spec.content.medium}">
<mew-video th:if="${momentItem.type.name == 'VIDEO'}" th:src="${momentItem.url}"></mew-video>

View File

@ -24,7 +24,11 @@
<div class="main-content not-toc" data-target="Moment" th:data-id="${moment.metadata.name}">
[(${moment.spec.content.html})]
<mew-photos th:if="${!#lists.isEmpty(moment.spec.content.medium)}">
<img th:each="momentItem : ${moment.spec.content.medium}" th:if="${momentItem.type.name == 'PHOTO'}" th:src="${momentItem.url}" />
<img th:each="momentItem : ${moment.spec.content.medium}" th:if="${momentItem.type.name == 'PHOTO'}" th:src="${momentItem.url}"
th:srcset="|${thumbnail.gen(momentItem.url, 's')} 400w,
${thumbnail.gen(momentItem.url, 'm')} 800w,
${thumbnail.gen(momentItem.url, 'l')} 1200w|"
sizes="(max-width: 1200px) 100vw, 1200px"/>
</mew-photos>
<th:block th:if="${!#lists.isEmpty(moment.spec.content.medium)}" th:each="momentItem : ${moment.spec.content.medium}">
<mew-video th:if="${momentItem.type.name == 'VIDEO'}" th:src="${momentItem.url}"></mew-video>

View File

@ -12,7 +12,12 @@
</div>
<div class="photos-gallery load-block loading">
<div th:each="photo : ${photos.items}" th:href="${photo.spec.url}" data-fancybox="gallery" th:data-caption="${#strings.defaultString(photo.spec.description, photo.spec.displayName)}">
<img width="100%" height="100%" th:src="${photo.spec.url}" th:alt="${photo.spec.displayName}"/>
<img width="100%" height="100%" th:src="${photo.spec.url}"
th:srcset="|${thumbnail.gen(photo.spec.url, 's')} 400w,
${thumbnail.gen(photo.spec.url, 'm')} 800w,
${thumbnail.gen(photo.spec.url, 'l')} 1200w,
${thumbnail.gen(photo.spec.url, 'xl')} 1600w|"
sizes="(max-width: 1600px) 100vw, 1600px" th:alt="${photo.spec.displayName}"/>
<div class="info">
<div>
<svg viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"><path d="M834.9 913.6H189.7c-69.2 0-125.5-56.3-125.5-125.5V381.5c0-69.2 56.3-125.5 125.5-125.5h14.7c14.4 0 27.3-8.6 32.9-21.8l19.2-45.1c19.7-46.3 65-76.3 115.4-76.3h280.6c50.4 0 95.7 30 115.4 76.3l19.2 45c5.7 13.2 18.6 21.8 33 21.8h14.7c69.2 0 125.5 56.3 125.5 125.5V788c0.1 69.3-56.2 125.6-125.4 125.6z m-645.2-568c-19.8 0-35.8 16.1-35.8 35.8V788c0 19.8 16.1 35.8 35.8 35.8h645.2c19.8 0 35.8-16.1 35.8-35.8V381.5c0-19.8-16.1-35.8-35.8-35.8h-14.7c-50.4 0-95.7-30-115.4-76.3l-19.2-45c-5.6-13.2-18.6-21.8-33-21.8H372c-14.4 0-27.3 8.6-33 21.8l-19.2 45c-19.7 46.3-65 76.3-115.4 76.3h-14.7z"></path><path d="M512.3 742.8c-97.4 0-176.6-79.2-176.6-176.6s79.2-176.6 176.6-176.6 176.6 79.2 176.6 176.6-79.2 176.6-176.6 176.6z m0-263.6c-48 0-87 39-87 87s39 87 87 87 87-39 87-87-39-87-87-87z"></path></svg>