Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

pref: use thumbnails to support image display #570

Merged
merged 1 commit into from
Sep 5, 2024
Merged

pref: use thumbnails to support image display #570

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
7 changes: 7 additions & 0 deletions templates/macro/content-thumb.html
View file
Open in desktop
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
Open in desktop
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
Open in desktop
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
Open in desktop
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
Open in desktop
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
Open in desktop
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
Open in desktop
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
Loading