diff --git a/playground/pages/index.vue b/playground/pages/index.vue index 0c41a66a35..8cce5de72d 100644 --- a/playground/pages/index.vue +++ b/playground/pages/index.vue @@ -49,12 +49,14 @@ const stage = { xl: '100vw', xxl: '100vw' }, - media: '(orientation: landscape)' + media: '(orientation: landscape)', + densities: ['x1', 'x2'] }, { src: '/img/stage-portrait.jpg', sizes: { default: '100vw', xxs: '100vw', xs: '100vw' }, - media: '(orientation: portrait)' + media: '(orientation: portrait)', + densities: ['x1', 'x2'] } ] } @@ -86,7 +88,8 @@ const imageTextA = { xxl: '100vw' } } - ] + ], + densities: ['x1', 'x2'] } }; @@ -117,7 +120,8 @@ const imageTextB = { xxl: '100vw' } } - ] + ], + densities: ['x1', 'x2'] } }; diff --git a/playground/pages/tests/image/components/Critical.vue b/playground/pages/tests/image/components/Critical.vue index 7e2b491dba..12e306ceaa 100644 --- a/playground/pages/tests/image/components/Critical.vue +++ b/playground/pages/tests/image/components/Critical.vue @@ -27,7 +27,8 @@ const image = { lg: '100vw', xl: '100vw', xxl: '100vw' - } + }, + densities: ['x1', 'x2'] } }; diff --git a/playground/pages/tests/image/components/Lazy.vue b/playground/pages/tests/image/components/Lazy.vue index 4f0f5e3982..3f3c448bdd 100644 --- a/playground/pages/tests/image/components/Lazy.vue +++ b/playground/pages/tests/image/components/Lazy.vue @@ -26,7 +26,8 @@ const image = { lg: '100vw', xl: '100vw', xxl: '100vw' - } + }, + densities: ['x1', 'x2'] } }; diff --git a/playground/pages/tests/picture/components/Critical.vue b/playground/pages/tests/picture/components/Critical.vue index 642fa66b24..4053faa25a 100644 --- a/playground/pages/tests/picture/components/Critical.vue +++ b/playground/pages/tests/picture/components/Critical.vue @@ -27,7 +27,8 @@ const picture = { lg: '100vw', xl: '100vw', xxl: '100vw' - } + }, + densities: ['x1', 'x2'] } ] }; diff --git a/playground/pages/tests/picture/components/Lazy.vue b/playground/pages/tests/picture/components/Lazy.vue index 211c24d126..ba9274e422 100644 --- a/playground/pages/tests/picture/components/Lazy.vue +++ b/playground/pages/tests/picture/components/Lazy.vue @@ -27,7 +27,8 @@ const picture = { lg: '100vw', xl: '100vw', xxl: '100vw' - } + }, + densities: ['x1', 'x2'] } ] }; diff --git a/src/runtime/components/SpeedkitImage/classes/Source.mjs b/src/runtime/components/SpeedkitImage/classes/Source.mjs index 477acf27df..d68d83f2cf 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() { @@ -65,7 +68,14 @@ export default class Source { } getOptions() { - return { provider: this.provider, preset: this.preset }; + return { + provider: this.provider, + preset: this.preset, + densities: [] + .concat(this.densities || 1) + .map(v => String(v).trim()) + .join(' ') + }; } getMeta(compiledSrc, $speedkit) { @@ -100,7 +110,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/SpeedkitVimeo/Base.vue b/src/runtime/components/SpeedkitVimeo/Base.vue index 9d71ca1c49..06d65e1743 100644 --- a/src/runtime/components/SpeedkitVimeo/Base.vue +++ b/src/runtime/components/SpeedkitVimeo/Base.vue @@ -85,6 +85,13 @@ export default { xxl: '100vw' }; } + }, + + posterDensities: { + type: [Array, String], + default() { + return ['x1', 'x2']; + } } }, emits: ['playing', 'ready'], @@ -183,7 +190,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..c637c0450b 100644 --- a/src/runtime/components/SpeedkitYoutube/Base.vue +++ b/src/runtime/components/SpeedkitYoutube/Base.vue @@ -85,6 +85,13 @@ export default { xxl: '100vw' }; } + }, + + posterDensities: { + type: [Array, String], + default() { + return ['x1', 'x2']; + } } }, @@ -122,7 +129,8 @@ export default { { src: `/youtube/vi/${this.videoId}/maxresdefault.jpg`, sizes: this.posterSizes, - media: 'all' + media: 'all', + densities: this.posterDensities } ] };