[v11.0/forgejo] fix(ui): add missing lazy load attribute to images (go-gitea#8246) (go-gitea#8283)

**Backport:** https://codeberg.org/forgejo/forgejo/pulls/8246

closes go-gitea#8076

(cherry picked from commit 7ab27a7)

Co-authored-by: Bente Groh <[email protected]>
Reviewed-on: https://codeberg.org/forgejo/forgejo/pulls/8283
Reviewed-by: Earl Warren <[email protected]>

Author: BeowulfR

modules/markup/markdown/markdown_test.go

@@ -44,6 +44,7 @@ func (g *ASTTransformer) transformImage(ctx *markup.RenderContext, v *ast.Image)
 		for _, attr := range v.Attributes() {
 			image.SetAttribute(attr.Name, attr.Value)
 		}
+		image.SetAttributeString("loading", []byte("lazy"))
 		for child := v.FirstChild(); child != nil; {
 			next := child.NextSibling()
 			image.AppendChild(image, child)

modules/markup/markdown/transform_image.go

@@ -108,6 +108,9 @@ func createDefaultPolicy() *bluemonday.Policy {
 	// Allow classes for emojis
 	policy.AllowAttrs("class").Matching(regexp.MustCompile(`^emoji$`)).OnElements("img")
 
+	// Allow attributes for images
+	policy.AllowAttrs("loading").Matching(regexp.MustCompile(`^lazy$`)).OnElements("img")
+
 	// Allow icons, emojis, chroma syntax and keyword markup on span
 	policy.AllowAttrs("class").Matching(regexp.MustCompile(`^((icon(\s+[\p{L}\p{N}_-]+)+)|(emoji)|(language-math display)|(language-math inline))$|^([a-z][a-z0-9]{0,2})$|^` + keywordClass + `$`)).OnElements("span")
 	policy.AllowAttrs("data-alias").Matching(regexp.MustCompile(`^[a-zA-Z0-9-_+]+$`)).OnElements("span")

modules/markup/sanitizer.go

@@ -75,6 +75,10 @@ func Test_Sanitizer(t *testing.T) {
 		// Emoji
 		`<span class="emoji" aria-label="thumbs up" data-alias="+1">THUMBS UP</span>`, `<span class="emoji" aria-label="thumbs up" data-alias="+1">THUMBS UP</span>`,
 		`<span class="emoji" aria-label="thumbs up" data-alias="(+!)">THUMBS UP</span>`, `<span class="emoji" aria-label="thumbs up">THUMBS UP</span>`,
+
+		// Images lazy loading
+		`<img src="/image1" alt="image1" loading="lazy">`, `<img src="/image1" alt="image1" loading="lazy">`,
+		`<img src="/image1" alt="image1" loading="eager">`, `<img src="/image1" alt="image1">`,
 	}
 
 	for i := 0; i < len(testCases); i += 2 {

modules/markup/sanitizer_test.go

@@ -192,8 +192,8 @@ func TestRenderMarkdownToHtml(t *testing.T) {
 <a href="https://example.com" rel="nofollow">remote link</a>
 <a href="/src/file.bin" rel="nofollow">local link</a>
 <a href="https://example.com" rel="nofollow">remote link</a>
-<a href="/image.jpg" target="_blank" rel="nofollow noopener"><img src="/image.jpg" alt="local image"/></a>
-<a href="https://example.com/image.jpg" target="_blank" rel="nofollow noopener"><img src="https://example.com/image.jpg" alt="remote image"/></a>
+<a href="/image.jpg" target="_blank" rel="nofollow noopener"><img src="/image.jpg" alt="local image" loading="lazy"/></a>
+<a href="https://example.com/image.jpg" target="_blank" rel="nofollow noopener"><img src="https://example.com/image.jpg" alt="remote image" loading="lazy"/></a>
 <a href="/image.jpg" rel="nofollow"><img src="/image.jpg" title="local image" alt=""/></a>
 <a href="https://example.com/image.jpg" rel="nofollow"><img src="https://example.com/image.jpg" title="remote link" alt=""/></a>
 <a href="https://example.com/user/repo/compare/88fc37a3c0a4dda553bdcfc80c178a58247f42fb...12fc37a3c0a4dda553bdcfc80c178a58247f42fb#hash" rel="nofollow"><code>88fc37a3c0...12fc37a3c0 (hash)</code></a>

modules/templates/util_render_test.go

@@ -4,7 +4,7 @@
 		{{if $attachments}}
 		<div class="card-attachment-images">
 			{{range $attachments}}
-				<img src="{{.DownloadURL}}" alt="{{.Name}}" />
+				<img src="{{.DownloadURL}}" alt="{{.Name}}" loading="lazy"/>
 			{{end}}
 		</div>
 		{{end}}

templates/repo/issue/card.tmpl

@@ -31,7 +31,7 @@
 				{{if FilenameIsImage .Name}}
 					{{if not (StringUtils.Contains (StringUtils.ToString $.RenderedContent) .UUID)}}
 					<a target="_blank" rel="noopener noreferrer" href="{{.DownloadURL}}">
-						<img alt="{{.Name}}" src="{{.DownloadURL}}" title="{{ctx.Locale.Tr "repo.issues.attachment.open_tab" .Name}}">
+						<img alt="{{.Name}}" src="{{.DownloadURL}}" title="{{ctx.Locale.Tr "repo.issues.attachment.open_tab" .Name}}" loading="lazy">
 					</a>
 					{{end}}
 				{{end}}

templates/repo/issue/view_content/attachments.tmpl

@@ -605,7 +605,7 @@
 			<div class="timeline-item-group">
 				<div class="timeline-item event" id="{{.HashTag}}">
 					<a class="timeline-avatar"{{if gt .Poster.ID 0}} href="{{.Poster.HomeLink}}"{{end}}>
-						<img src="{{.Poster.AvatarLink $.Context}}" alt="" width="40" height="40">
+						<img src="{{.Poster.AvatarLink $.Context}}" alt="" width="40" height="40" loading="lazy">
 					</a>
 					<span class="badge grey">{{svg "octicon-x" 16}}</span>
 					<span class="text grey muted-links">

templates/repo/issue/view_content/comments.tmpl

@@ -91,7 +91,7 @@
 						{{range $push.Commits}}
 							{{$commitLink := printf "%s/commit/%s" $repoLink .Sha1}}
 							<div class="flex-text-block">
-								<img class="ui avatar" src="{{$push.AvatarLink $.Context .AuthorEmail}}" alt="" title="{{.AuthorName}}" width="16" height="16">
+								<img class="ui avatar" src="{{$push.AvatarLink $.Context .AuthorEmail}}" alt="" title="{{.AuthorName}}" width="16" height="16" loading="lazy">
 								<a class="ui sha label" href="{{$commitLink}}">{{ShortSha .Sha1}}</a>
 								<span class="text truncate">
 									{{RenderCommitMessage $.Context .Message ($repo.ComposeMetas ctx)}}

templates/user/dashboard/feeds.tmpl

@@ -391,7 +391,7 @@ export default {
         <div class="ui top attached header tw-flex tw-flex-1">
           <b class="ui right">#{{ index + 1 }}</b>
           <a :href="contributor.home_link">
-            <img class="ui avatar tw-align-middle" height="40" width="40" :src="contributor.avatar_link" alt="">
+            <img class="ui avatar tw-align-middle" height="40" width="40" :src="contributor.avatar_link" alt="" loading="lazy">
           </a>
           <div class="tw-ml-2">
             <a v-if="contributor.home_link !== ''" :href="contributor.home_link"><h4>{{ contributor.name }}</h4></a>