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

Add support for densities #634

Open
wants to merge 1 commit into
base: v0
Choose a base branch
from

Conversation

marcbelletre
Copy link

This PR is based on #459 and enables using a new densities attribute to generate larger images for displays with higher resolutions.

Factors must be separated by spaces and followed by the x symbol.

If the attribute is not specified, the default would be 1x 2x

This would generate the following sizes : 100px, 300px, 800px:

<nuxt-img
  src="..."
  sizes="sm:100px md:300px lg:800px"
  densities="1x"
/>

This would generate the following sizes : 100px, 200px, 300px, 600px, 800px, 1600px:

<nuxt-img
  src="..."
  sizes="sm:100px md:300px lg:800px"
  densities="1x 2x"
/>

@hartmut-co-uk
Copy link
Collaborator

ref #618

Copy link
Collaborator

@hartmut-co-uk hartmut-co-uk left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Added some notes & suggestions.

Missing:

  • docs

variants.sort((v1, v2) => v1.screenMaxWidth - v2.screenMaxWidth)
sizeVariants.sort((v1, v2) => v1.screenMaxWidth - v2.screenMaxWidth)

// Remove duplicate size variants,
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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]
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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)
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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 = '') {
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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...

@pi0 pi0 added the v0 label Nov 24, 2022
@Krillko
Copy link

Krillko commented May 24, 2023

I've been waiting for "retina" support since i've first heard about nuxt image.

Can you please please release this sometime

@hacknug
Copy link
Contributor

hacknug commented Sep 18, 2023

Seems to have been implemented in #769 with tests a slightly different API. I think it is safe to close this now. //cc @danielroe

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

Successfully merging this pull request may close these issues.

5 participants