diff --git a/docs/src/components/speedkit-image.md b/docs/src/components/speedkit-image.md index 1a0c3e610e..fda14ea5b2 100644 --- a/docs/src/components/speedkit-image.md +++ b/docs/src/components/speedkit-image.md @@ -100,7 +100,8 @@ If `true` the `SpeedkitImage` is initialized. sizes: { … }, modifiers: { … }, preset: { … }, - provider: '' + provider: '', + densities: '' } ```` @@ -148,31 +149,42 @@ This overwrites the global ones of the preset if available. Learn more about `modifiers`: -- +- #### `preset` - Type: `Object` -If a preset is set on a source, the globally defined one is ignored. +If a `preset` is set on a source, the globally defined one is ignored. This means that a separate preset can be specified for each source. Learn more about `preset`: -- +- #### `provider` - Type: `String` -If a provider is set on a source, the globally defined one is ignored. +If a `provider` is set on a source, the globally defined one is ignored. This means that a separate provider can be specified for each source. Learn more about `provider`: -- +- + +#### `densities` + +- Type: `String` + - Default: 'x1 x2' + +If a `densities` is set on a source, the globally defined one is ignored. + +Learn more about `densities`: + +- ### `alt` diff --git a/playground/nuxt.config.mjs b/playground/nuxt.config.mjs index 2b811fc795..80867e4386 100644 --- a/playground/nuxt.config.mjs +++ b/playground/nuxt.config.mjs @@ -118,6 +118,7 @@ export default defineNuxtConfig(async () => { speedkit: { // targetFormats: ['jpg|jpeg|png|gif'], + // densities: 'x1 x2', detection: { performance: true, browserSupport: true diff --git a/src/module.mjs b/src/module.mjs index ad21d6b32b..82dbe4d217 100644 --- a/src/module.mjs +++ b/src/module.mjs @@ -120,6 +120,7 @@ async function addBuildTemplates(nuxt, options) { mode, options: { mode, + densities: options.densities, targetFormats: options.targetFormats, crossorigin: getCrossorigin(options.crossorigin), supportedBrowserDetector, diff --git a/src/runtime/components/SpeedkitImage/Base.vue b/src/runtime/components/SpeedkitImage/Base.vue index a1193d3bb4..e9cb530774 100644 --- a/src/runtime/components/SpeedkitImage/Base.vue +++ b/src/runtime/components/SpeedkitImage/Base.vue @@ -69,7 +69,7 @@ export default { const config = $img.getSizes(source.src, { sizes: source.sizes, modifiers: source.getModifiers(), - ...source.getOptions() + ...source.getOptions($speedkit) }); const meta = ref(null); diff --git a/src/runtime/components/SpeedkitImage/classes/Source.mjs b/src/runtime/components/SpeedkitImage/classes/Source.mjs index 477acf27df..cefd2d4374 100644 --- a/src/runtime/components/SpeedkitImage/classes/Source.mjs +++ b/src/runtime/components/SpeedkitImage/classes/Source.mjs @@ -10,9 +10,10 @@ export default class Source { format = null; quality = null; preload = false; - modifiers = {}; - provider = undefined; // https://image.nuxtjs.org/api/optionsproviders - preset = undefined; // https://image.nuxtjs.org/api/optionspresets + modifiers = {}; // https://image.nuxt.com/usage/nuxt-img#modifiers + provider = undefined; // https://image.nuxt.com/usage/nuxt-img#provider + preset = undefined; // https://image.nuxt.com/usage/nuxt-img#preset + densities = undefined; // https://image.nuxt.com/usage/nuxt-img#densities constructor({ src, @@ -25,7 +26,8 @@ export default class Source { preload = false, modifiers = {}, provider = undefined, - preset = undefined + preset = undefined, + densities = undefined }) { this.src = src; this.sizes = sizes; @@ -38,6 +40,7 @@ export default class Source { this.modifiers = modifiers; this.provider = provider; this.preset = preset; + this.densities = densities; } get key() { @@ -64,8 +67,12 @@ export default class Source { return { ...this.modifiers, format: this.format, quality: this.quality }; } - getOptions() { - return { provider: this.provider, preset: this.preset }; + getOptions($speedkit) { + return { + provider: this.provider, + preset: this.preset, + densities: this.densities || $speedkit.densities + }; } getMeta(compiledSrc, $speedkit) { @@ -100,7 +107,8 @@ export default class Source { preload: this.preload, modifiers: this.modifiers, provider: this.provider, - preset: this.preset + preset: this.preset, + densities: this.densities }; } diff --git a/src/runtime/components/SpeedkitPicture/Source.vue b/src/runtime/components/SpeedkitPicture/Source.vue index 4b9985ef62..21b3a4aad6 100644 --- a/src/runtime/components/SpeedkitPicture/Source.vue +++ b/src/runtime/components/SpeedkitPicture/Source.vue @@ -39,7 +39,7 @@ export default { const config = $img.getSizes(props.source.src, { sizes: props.source.sizes, modifiers: props.source.getModifiers(), - ...props.source.getOptions() + ...props.source.getOptions($speedkit) }); const resolvedCrossorigin = computed(() => { diff --git a/src/runtime/components/SpeedkitPicture/classes/SourceList.mjs b/src/runtime/components/SpeedkitPicture/classes/SourceList.mjs index 948c1175ec..a1ff586568 100644 --- a/src/runtime/components/SpeedkitPicture/classes/SourceList.mjs +++ b/src/runtime/components/SpeedkitPicture/classes/SourceList.mjs @@ -84,7 +84,7 @@ export default class SourceList { const config = $img.getSizes(source.src, { sizes: source.sizes, modifiers: source.getModifiers(), - ...source.getOptions() + ...source.getOptions($speedkit) }); return source.getMeta(config.src, $speedkit); }) diff --git a/src/runtime/components/SpeedkitVimeo/Base.vue b/src/runtime/components/SpeedkitVimeo/Base.vue index 9d71ca1c49..b00b5df27e 100644 --- a/src/runtime/components/SpeedkitVimeo/Base.vue +++ b/src/runtime/components/SpeedkitVimeo/Base.vue @@ -85,6 +85,11 @@ export default { xxl: '100vw' }; } + }, + + posterDensities: { + type: [String, Number], + default: undefined } }, emits: ['playing', 'ready'], @@ -183,7 +188,8 @@ export default { 'vimeo' ), sizes: this.posterSizes, - media: 'all' + media: 'all', + densities: this.posterDensities } ] }; diff --git a/src/runtime/components/SpeedkitYoutube/Base.vue b/src/runtime/components/SpeedkitYoutube/Base.vue index 40a10a5db9..efdefdfdbe 100644 --- a/src/runtime/components/SpeedkitYoutube/Base.vue +++ b/src/runtime/components/SpeedkitYoutube/Base.vue @@ -85,6 +85,11 @@ export default { xxl: '100vw' }; } + }, + + posterDensities: { + type: [String, Number], + default: undefined } }, @@ -122,7 +127,8 @@ export default { { src: `/youtube/vi/${this.videoId}/maxresdefault.jpg`, sizes: this.posterSizes, - media: 'all' + media: 'all', + densities: this.posterDensities } ] }; diff --git a/src/runtime/tmpl/plugin.mjs b/src/runtime/tmpl/plugin.mjs index aead275c6f..324adc28b8 100644 --- a/src/runtime/tmpl/plugin.mjs +++ b/src/runtime/tmpl/plugin.mjs @@ -20,7 +20,8 @@ export default defineNuxtPlugin({ getFont: fontList.getFont.bind(fontList), crossorigin: <%= options.crossorigin ? `'${options.crossorigin}'` : null %>, isBrowserSupported: () => isSupportedBrowser(<%= options.supportedBrowserDetector %>), - targetFormats: <%= JSON.stringify(options.targetFormats) %> + targetFormats: <%= JSON.stringify(options.targetFormats) %>, + densities: <%= JSON.stringify(options.densities) %> }); }, diff --git a/src/utils/options.mjs b/src/utils/options.mjs index 5ce50fbaff..63582422ab 100644 --- a/src/utils/options.mjs +++ b/src/utils/options.mjs @@ -27,6 +27,7 @@ export function getDefaultOptions() { fonts: [], targetFormats: undefined, + densities: 'x1 x2', /** * IntersectionObserver rootMargin for Compoennts and Assets