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

Jump to bottom

Issue "cover image" / "preview image" for Project Board view #22102

Closed
gnat opened this issue Dec 11, 2022 · 4 comments
Closed

Issue "cover image" / "preview image" for Project Board view #22102

gnat opened this issue Dec 11, 2022 · 4 comments
Labels
type/feature Completely new functionality. Can only be merged if feature freeze is not active. type/proposal The new feature has not been accepted yet but needs to be discussed first.

Comments

@gnat
Copy link
Contributor

gnat commented Dec 11, 2022

Feature Description

This addition would be a big benefit for design and art teams using the issue tracking.

Could be as simple as using the first image attachment, or allowing users to select one of the attachments as a cover image.

Suggestion A:

  • Keep the preview the height of a tag or avatar, to not break the layout.

Suggestion B:

  • Use background-size: cover; to make the cover image fit the background of the issue.

Also open to other layout suggestions!

Screenshots

Suggestion A:
image

Suggestion B:
image

Original photo:
image
@gnat gnat added type/feature Completely new functionality. Can only be merged if feature freeze is not active. type/proposal The new feature has not been accepted yet but needs to be discussed first. labels Dec 11, 2022
@gnat
Copy link
Contributor Author

gnat commented Dec 12, 2022 •
edited
Loading

I've got an incoming PR for this, the preview will be the latest "image type" attachment on an issue- simple, and allows for automatic updates of the cover image as issue progress is made!

@gnat
Copy link
Contributor Author

gnat commented Dec 12, 2022 •
edited
Loading

A few other variations that may be much more useful, yet take up a bit more vertical space. These would make Gitea competitive with Trello... wouldn't it be amazing to say goodbye to Atlassian products? Ha.

Suggestion C (Top), Carousel style. Good for seeing a "timeline" of multiple assets at once!
Suggestion D (Bottom), Literally could replace Trello.

Suggestion E... Could be D if one image attachment, then C if more than one.

image

@gnat
Copy link
Contributor Author

gnat commented Dec 12, 2022

This scrolling ability would be so nice, but undoubtedly, MacOS is gonna natively re-theme the scrollbar and make it look ugly as sin. 😢 Maybe something to do in the future.

scroller.mp4

@gnat
Copy link
Contributor Author

gnat commented Dec 12, 2022 •
edited
Loading

The CSS will try to center-align images until it cannot, then it will left align with overflow hidden. Single images get to be slightly larger.

First image is the most recent, the SQL will fetch up to 5 latest images (URL string).

All images supported by browsers plus upcoming formats: *.avif *.bmp *.gif *.jpg *.jpeg *.jxl *.png *.svg *.webp

Current revision with light and dark themes:

image

image

@gnat gnat mentioned this issue Dec 12, 2022
Merged
lunny added a commit that referenced this issue Feb 11, 2023
@gnat @wolfogre
@lunny @delvh
Preview images for Issue cards in Project Board view (#22112)
fb1a2a1 
Original Issue: #22102

This addition would be a big benefit for design and art teams using the
issue tracking.

The preview will be the latest "image type" attachments on an issue-
simple, and allows for automatic updates of the cover image as issue
progress is made!

This would make Gitea competitive with Trello... wouldn't it be amazing
to say goodbye to Atlassian products? Ha.

First image is the most recent, the SQL will fetch up to 5 latest images
(URL string).

All images supported by browsers plus upcoming formats: *.avif *.bmp
*.gif *.jpg *.jpeg *.jxl *.png *.svg *.webp

The CSS will try to center-align images until it cannot, then it will
left align with overflow hidden. Single images get to be slightly
larger!

Tested so far on: Chrome, Firefox, Android Chrome, Android Firefox.

Current revision with light and dark themes:

![image](https://user-images.githubusercontent.com/24665/207066878-58e6bf73-0c93-4caa-8d40-38f4432b3578.png)


![image](https://user-images.githubusercontent.com/24665/207066555-293f65c3-e706-4888-8516-de8ec632d638.png)

---------

Co-authored-by: Jason Song <i@wolfogre.com>
Co-authored-by: Lunny Xiao <xiaolunwen@gmail.com>
Co-authored-by: delvh <dev.lh@web.de>
@gnat gnat closed this as completed Apr 11, 2023
@github-actions github-actions bot locked as resolved and limited conversation to collaborators May 27, 2023
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Assignees
No one assigned
Labels
type/feature Completely new functionality. Can only be merged if feature freeze is not active. type/proposal The new feature has not been accepted yet but needs to be discussed first.
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
1 participant
@gnat