Skip to content

Commit

Permalink
Merge pull request #570 from LIlGG/pref/use-thumbnail
Browse files Browse the repository at this point in the history 
pref: use thumbnails to support image display
  • Loading branch information
@ruibaby
ruibaby authored Sep 5, 2024
2 parents 39c624d + f0403af commit 172e941
Show file tree
Hide file tree
Showing 7 changed files with 53 additions and 111 deletions.
7 changes: 7 additions & 0 deletions templates/macro/content-thumb.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -81,6 +81,13 @@ <h1 th:text="${post.spec.title}"></h1>
class="lazyload"
th:src="${#theme.assets('/images/load/orange.progress-bar-stripe-loader.svg')}"
th:data-src="${post.spec.cover}"
th:data-srcset="|
${thumbnail.gen(post.spec.cover, 's')} 400w,
${thumbnail.gen(post.spec.cover, 'm')} 800w,
${thumbnail.gen(post.spec.cover, 'l')} 1200w,
${thumbnail.gen(post.spec.cover, 'xl')} 1600w
|"
data-sizes="auto"
alt="thumbnail of the cover of the post"
width="430"
height="300"
Expand Down
9 changes: 8 additions & 1 deletion templates/macro/page-header.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -20,8 +20,15 @@
<th:block th:if="${not #strings.isEmpty(frontCover)}">
<img
class="lazyload"
th:attr="data-src=${frontCover}"
th:src="${#theme.assets('/images/load/orange.progress-bar-stripe-loader.svg')}"
th:data-src="${frontCover}"
th:data-srcset="|
${thumbnail.gen(frontCover, 's')} 400w,
${thumbnail.gen(frontCover, 'm')} 800w,
${thumbnail.gen(frontCover, 'l')} 1200w,
${thumbnail.gen(frontCover, 'xl')} 1600w
|"
data-sizes="auto"
itemprop="contentUrl"
alt="large picture of the cover"
width="1920"
Expand Down
9 changes: 8 additions & 1 deletion templates/module/feature.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -17,8 +17,15 @@ <h1 class="fes-title" style="font-family: 'Ubuntu', sans-serif">
<div class="feature-container">
<a data-pjax th:href="${feature.link}" target="_blank" aria-label="visit the concentrated content">
<img
th:src="${feature.image}"
class="lazyload"
th:alt="${feature.title}"
th:data-src="${feature.image}"
th:data-srcset="|
${thumbnail.gen(feature.image, 's')} 400w,
${thumbnail.gen(feature.image, 'm')} 800w,
${thumbnail.gen(feature.image, 'l')} 1200w,
|"
data-sizes="auto"
alt="cover picture of focusing on content"
width="780"
height="160"
Expand Down
26 changes: 20 additions & 6 deletions templates/module/post-pagination.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -16,6 +16,13 @@
class="lazyload"
th:src="${#theme.assets('/images/load/orange.progress-bar-stripe-loader.svg')}"
th:data-src="${postCursor.previous.spec.cover}"
th:data-srcset="|
${thumbnail.gen(postCursor.previous.spec.cover, 's')} 400w,
${thumbnail.gen(postCursor.previous.spec.cover, 'm')} 800w,
${thumbnail.gen(postCursor.previous.spec.cover, 'l')} 1200w,
${thumbnail.gen(postCursor.previous.spec.cover, 'xl')} 1600w
|"
data-sizes="auto"
alt="The cover picture of the previous content"
height="160"
width="390"
Expand Down Expand Up @@ -68,6 +75,13 @@ <h3 th:text="${postCursor.previous.spec.title}"></h3>
class="lazyload"
th:src="${#theme.assets('/images/load/orange.progress-bar-stripe-loader.svg')}"
th:data-src="${postCursor.next.spec.cover}"
th:data-srcset="|
${thumbnail.gen(postCursor.next.spec.cover, 's')} 400w,
${thumbnail.gen(postCursor.next.spec.cover, 'm')} 800w,
${thumbnail.gen(postCursor.next.spec.cover, 'l')} 1200w,
${thumbnail.gen(postCursor.next.spec.cover, 'xl')} 1600w
|"
data-sizes="auto"
alt="The cover picture of the next content"
height="160"
width="390"
Expand All @@ -78,12 +92,12 @@ <h3 th:text="${postCursor.previous.spec.title}"></h3>
th:with="randomUrl = |${theme.config.random_image.rimage_url}?${_templateId}id=${postCursor.next.metadata.name}&${theme.config.random_image.rimage_custom_param_name}=${postCursor.next.metadata.name}&type=url&itype=${theme.config.random_image.rimage_cover_itype}${theme.config.random_image.rimage_cover_itype != 'image' ? '&id=' + theme.config.random_image.rimage_cover_id : ''}${#strings.isEmpty(theme.config.random_image.rimage_other_params) ? '' : '&' + theme.config.random_image.rimage_other_params}|"
th:src="${theme.config.random_image.rimage_cover_lqip == 'loading' ? #theme.assets('/images/load/orange.progress-bar-stripe-loader.svg') : (randomUrl + (#strings.isEmpty(theme.config.random_image.rimage_cover_lqip_params) ? '' : '&' + theme.config.random_image.rimage_cover_lqip_params))}"
th:data-srcset="|
${randomUrl}&th=400 400w,
${randomUrl}&th=960 960w,
${randomUrl}&th=1280 1280w,
${randomUrl}&th=1440 1440w,
${randomUrl}&th=1920 1920w
|"
${randomUrl}&th=400 400w,
${randomUrl}&th=960 960w,
${randomUrl}&th=1280 1280w,
${randomUrl}&th=1440 1440w,
${randomUrl}&th=1920 1920w
|"
data-sizes="auto"
class="lazyload"
th:classappend="${theme.config.random_image.rimage_cover_lqip == 'lowquality' ? 'blur-up' : ''}"
Expand Down
9 changes: 8 additions & 1 deletion templates/moment.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -17,7 +17,7 @@
<h1 th:text="${title}"></h1>
</th:block>

<th:block th:fragment="content">
<th:block th:fragment="content(moment)">
<span class="moment-container">
<img
class="lazyload avatar"
Expand All @@ -43,6 +43,13 @@ <h1 th:text="${title}"></h1>
th:if="${momentItem.type.name == 'PHOTO'}"
th:src="${#strings.isEmpty(momentItem.url) ? #theme.assets('/images/load/load.gif') : momentItem.url}"
th:data-src="${momentItem.url}"
th:data-srcset="|
${thumbnail.gen(momentItem.url, 's')} 400w,
${thumbnail.gen(momentItem.url, 'm')} 800w,
${thumbnail.gen(momentItem.url, 'l')} 1200w,
${thumbnail.gen(momentItem.url, 'xl')} 1600w
|"
data-sizes="auto"
width="400"
height="400"
alt="moment picture"
Expand Down
102 changes: 1 addition & 101 deletions templates/moments.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -21,107 +21,7 @@ <h1 th:text="${title}"></h1>
<div class="moments-container">
<ul th:if="${moments.total gt 0}" class="moments-inner">
<li class="moments-item journal" th:each="moment : ${moments.items}" th:data-name="${moment.metadata.name}">
<span class="moment-container">
<img
class="lazyload avatar"
th:data-src="${moment.owner.avatar != null ? moment.owner.avatar : #theme.assets('/images/default/avatar.webp')}"
th:alt="${moment.owner.displayName}"
onerror="imgError(this)"
th:src="${#theme.assets('/images/load/trans.ajax-spinner-preloader.svg')}"
width="48"
height="48"
/>
<div class="moment-inner">
<span class="moment-content">
<th:block th:utext="${moment.spec.content.html}"></th:block>
</span>
<div
class="moment-medium fancybox-content"
th:if="${not #lists.isEmpty(moment.spec.content.medium)}"
th:classappend="|medium-${#lists.size(moment.spec.content.medium)}|"
>
<th:block th:each="momentItem : ${moment.spec.content.medium}">
<img
class="lazyload"
th:if="${momentItem.type.name == 'PHOTO'}"
th:src="${#strings.isEmpty(momentItem.url) ? #theme.assets('/images/load/load.gif') : momentItem.url}"
th:data-src="${momentItem.url}"
width="400"
height="400"
alt="moment picture"
/>
<video
th:if="${momentItem.type.name == 'VIDEO'}"
th:src="${momentItem.url}"
width="400"
height="400"
></video>
</th:block>
</div>
<div class="moment-footer">
<div class="moment-time">
<th:block th:with="momentHour=${#dates.hour(moment.spec.releaseTime)}">
<th:block th:if="${momentHour >= 5 and momentHour < 8}">
<span class="iconify moment-time-icon" data-icon="mdi:weather-sunset-up"></span>
</th:block>
<th:block th:if="${momentHour >= 8 and momentHour < 18}">
<span class="iconify moment-time-icon" data-icon="mdi:weather-sunny"></span>
</th:block>
<th:block th:if="${momentHour >= 18 and momentHour < 20}">
<span class="iconify moment-time-icon" data-icon="mdi:weather-sunset-down"></span>
</th:block>
<th:block th:if="${momentHour >= 20 or momentHour < 5}">
<span class="iconify moment-time-icon" data-icon="mdi:weather-night"></span>
</th:block>
</th:block>
<time
data-i18n="page.moments.time"
th:i18n-options="|{
'time': '${moment.spec.releaseTime}',
'params': {
'separator': '-',
'options': {
'year': 'numeric',
'month': '2-digit',
'day': '2-digit',
'hour': 'numeric',
'minute': 'numeric',
'second': 'numeric'
}
}
}|"
th:data-datetime="${moment.spec.releaseTime}"
itemprop="dateCreated datePublished"
>
</time>
</div>
<!-- 评论内容 -->
<div class="moment-tools">
<span
th:if="${haloCommentEnabled and theme.config.journal.journal_comment}"
class="comment-js noselect"
>
<span class="iconify" data-icon="solar:chat-dots-outline"></span>
<span class="noticom" th:text="${moment.stats.totalComment}"></span>
</span>
<span
th:if="${theme.config.journal.journal_likes}"
class="moment-like noselect"
th:data-links="${moment.stats.upvote}"
>
<span class="iconify" data-icon="solar:like-broken"></span>
<span class="moment-like-text" th:text="${moment.stats.upvote}"></span>
</span>
</div>
</div>
<div th:if="${haloCommentEnabled and theme.config.journal.journal_comment}" class="comment-box">
<!--/* 评论组件 */-->
<th:block
th:replace="~{module/comment :: comment(group = 'moment.halo.run', kind = 'Moment', name = ${moment.metadata.name})}"
/>
</div>
</div>
</span>
<th:block th:insert="~{moment :: content(${moment})}" />
</li>
</ul>
<th:block th:if="${moments.totalPages gt 1}">
Expand Down
2 changes: 1 addition & 1 deletion theme.yaml
View file
Original file line number Diff line number Diff line change
Expand Up @@ -18,6 +18,6 @@ spec:
settingName: theme-sakura-setting
configMapName: theme-sakura-configMap
version: 2.4.0
require: ">=2.17.0"
require: ">=2.19.0"
metadata:
name: theme-sakura

0 comments on commit 172e941

Please sign in to comment.