Preview images for Issue cards in Project Board view

models/repo/attachment.go

@@ -132,6 +132,21 @@ func GetAttachmentsByIssueID(ctx context.Context, issueID int64) ([]*Attachment,
 	return attachments, db.GetEngine(ctx).Where("issue_id = ? AND comment_id = 0", issueID).Find(&attachments)
 }
 
+// GetAttachmentsByIssueIDImagesLatest returns the latest image attachments of an issue.
+func GetAttachmentsByIssueIDImagesLatest(ctx context.Context, issueID int64) ([]*Attachment, error) {
+	attachments := make([]*Attachment, 0, 10)
+	return attachments, db.GetEngine(ctx).Where(`issue_id = ? AND (name like '%.apng'
+		OR name like '%.avif'
+		OR name like '%.bmp'
+		OR name like '%.gif'
+		OR name like '%.jpg'
+		OR name like '%.jpeg'
+		OR name like '%.jxl'
+		OR name like '%.png'
+		OR name like '%.svg'
+		OR name like '%.webp')`, issueID).Desc("comment_id").Limit(5).Find(&attachments)
+}
+
 // GetAttachmentsByCommentID returns all attachments if comment by given ID.
 func GetAttachmentsByCommentID(ctx context.Context, commentID int64) ([]*Attachment, error) {
 	attachments := make([]*Attachment, 0, 10)

routers/web/repo/projects.go

@@ -13,6 +13,7 @@ import (
 	issues_model "code.gitea.io/gitea/models/issues"
 	"code.gitea.io/gitea/models/perm"
 	project_model "code.gitea.io/gitea/models/project"
+	attachment_model "code.gitea.io/gitea/models/repo"
 	"code.gitea.io/gitea/models/unit"
 	"code.gitea.io/gitea/modules/base"
 	"code.gitea.io/gitea/modules/context"
@@ -302,6 +303,16 @@ func ViewProject(ctx *context.Context) {
 		return
 	}
 
+	issuesAttachmentMap := make(map[int64][]*attachment_model.Attachment)
+	for _, issuesList := range issuesMap {
+		for _, issue := range issuesList {
+			if issueAttachment, err := attachment_model.GetAttachmentsByIssueIDImagesLatest(ctx, issue.ID); err == nil {
+				issuesAttachmentMap[issue.ID] = issueAttachment
+			}
+		}
+	}
+	ctx.Data["issuesAttachmentMap"] = issuesAttachmentMap
+
 	linkedPrsMap := make(map[int64][]*issues_model.Issue)
 	for _, issuesList := range issuesMap {
 		for _, issue := range issuesList {

templates/repo/projects/view.tmpl

@@ -179,6 +179,11 @@
 
 					<!-- start issue card -->
 					<div class="card board-card" data-issue="{{.ID}}">
+						<div class="card-attachment-images">
+							{{range (index $.issuesAttachmentMap .ID)}}
+								<img src="{{.DownloadURL}}" alt="{{.Name}}" />
+							{{end}}
+						</div>
 						<div class="content p-0">
 							<div class="header">
 								<span class="dif ac vm {{if .IsClosed}}red{{else}}green{{end}}">

web_src/less/_base.less

@@ -980,7 +980,7 @@ a.commit-statuses-trigger {
 
 .ui.cards > .card > .content,
 .ui.card > .content {
-  border-color: var(--color-secondary);
+  border: none;
 }
 
 .ui.cards > .card > .extra,

web_src/less/features/projects.less

@@ -89,6 +89,25 @@
   font-size: 16px !important;
 }
 
+.board-card .card-attachment-images {
+  display: inline-block;
+  white-space: nowrap;
+  overflow: hidden;
+  text-align: center;
+}
+
+.board-card .card-attachment-images img {
+  display: inline-block;
+  max-height: 50px;
+  border-radius: var(--border-radius);
+  margin-right: 2px;
+}
+
+.board-card .card-attachment-images img:only-child {
+  max-height: 90px;
+  margin: auto;
+}
+
 .card-ghost {
   border-style: dashed !important;
   background: none !important;