Add support for densities #634
Conversation
|
ref #618 |
| variants.sort((v1, v2) => v1.screenMaxWidth - v2.screenMaxWidth) | ||
| sizeVariants.sort((v1, v2) => v1.screenMaxWidth - v2.screenMaxWidth) | ||
|
|
||
| // Remove duplicate size variants, |
There was a problem hiding this comment.
how about using Set ?
const sizeVariantsUnique = [...new Set(sizeVariants)]| @@ -161,8 +161,10 @@ function getPreset (ctx: ImageCTX, name?: string): ImageOptions { | |||
| function getSizes (ctx: ImageCTX, input: string, opts: ImageSizesOptions) { | |||
| const width = parseSize(opts.modifiers?.width) | |||
| const height = parseSize(opts.modifiers?.height) | |||
| const densities = opts.densities ? parseDensities(opts.densities) : [1, 2] | |||
There was a problem hiding this comment.
this would mean a default of 1x 2x ?
Not sure if 2x should be added by default. This could lead to confusion for many users. 🤔
Further, it would change the behaviour on upgrade.
Suggested improvement: allow to configure the default globally via nuxt.config.
| } | ||
|
|
||
| srcVariants.sort((v1, v2) => v1.width - v2.width) |
There was a problem hiding this comment.
Q: shouldn't srcVariants also be de-duplicated?
| @@ -91,3 +91,10 @@ export function parseSize (input: string | number | undefined = '') { | |||
| } | |||
| } | |||
| } | |||
|
|
|||
| export function parseDensities (input: string | undefined = '') { | |||
There was a problem hiding this comment.
should be more strictly typed to return number[]
How to deal with invalid input format, maybe it should throw/print some WARN messages and return [] if unable to parse...
|
I've been waiting for "retina" support since i've first heard about nuxt image. Can you please please release this sometime |
|
Seems to have been implemented in #769 with tests a slightly different API. I think it is safe to close this now. //cc @danielroe |
This PR is based on #459 and enables using a new
densitiesattribute to generate larger images for displays with higher resolutions.Factors must be separated by spaces and followed by the
xsymbol.If the attribute is not specified, the default would be
1x 2xThis would generate the following sizes : 100px, 300px, 800px:
This would generate the following sizes : 100px, 200px, 300px, 600px, 800px, 1600px: