Improve Project Card Cover Image Handling#24
Conversation
| width={cover.width} | ||
| height={cover.height} | ||
| loading="lazy" | ||
| class="h-full w-full object-cover blur-sm" |
There was a problem hiding this comment.
On cover images that aren't the default size / aspect ratio, there's a slight border/fringe at the tile edges. Scaling the blurred background image up a bit removes that border. Just adding a scale-125 class to this line should fix it - it zooms the image in slightly so that border isn't visible
| <div class="h-full w-full"> | ||
| <Image | ||
| src={cover} | ||
| alt={`Cover image for ${title}`} |
There was a problem hiding this comment.
Since both the blurred background image and main foreground image have the alt text, screen readers would mention it twice. Remove the duplication by setting alt = "" (empty string) and also add aria-hidden="true"
| </div> | ||
| ) : ( | ||
| <div class="bg-accent flex h-full w-full items-center justify-center p-3"> | ||
| <p class="text-accent-contrast text-center text-3xl font-bold"> |
There was a problem hiding this comment.
This one's more on me since I left it open ended in the ticket description, but while playing around with the no cover image fallback card appearance, I think a simpler look with bg-canvas instead of bg-accent (line 41) and text-ink instead of text-accent-contrast (line 42) works better, since a more subtle look for projects with no cover image feels more fitting
Also, we can add an aria-hidden="true" class to the
tag since its the same text as the card's heading that has the project title, so screen readers would read the same text twice in the no cover image fallback case
There was a problem hiding this comment.
We can remove this todo comment at this point since the change has been implemented
2 participants
No description provided.