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.

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

Create nuxtPicture element that can handle multiple aspectratios #4

Open
tfjordside opened this issue Sep 25, 2024 · 0 comments
Open
Assignees

Comments

@tfjordside
Copy link
Member

Problem
Currently we have a problem where multiple nuxt pictures are needed, if you want a portrait image on mobile and a landscape image on desktop. It is nicely described here: nuxt/image#309

Cowboy solution:
Creating a NuxtSource element that spits out source that then gets wrapped in a picture element.
https://github.com/limbo-works/danish-crown-external-websites/commit/913d6cce1f0d18d5680f02529d639e8d8b7ce08e#diff-66a9c6da5f0908f8b0a7eb47ad02682783673e66689d3bf8ce97b129c89fd134R103

Wanted solution:
A solution where we can add a prop to NuxtPictureExt
and the sources are then created from using useImage() from nuxt/image and then wrapped in a default picture tag instead of NuxtPicture
Fallback without the string is just sending the solution to NuxtPicture as now.

Questions:
Should we allow for art direction (changing images to another source based on screensize)

Suggested syntax:

:versions="

{ 
    '600': { aspectRatio: 1/1, size: '100w', src: ''},
    '>=1024': { aspectRatio: 16/9, size: '60w', src: ''},
    '>=1920': { aspectRatio: 21/9, size: '80w', src: ''},
}

"

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

2 participants