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.

Sign up for GitHub

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

Jump to bottom

Allow passing imagetools parameters when dynamically importing images for enhanced:img #12608

Open
Extarys opened this issue Aug 24, 2024 · 3 comments · May be fixed by #12650
Open

Allow passing imagetools parameters when dynamically importing images for enhanced:img #12608

Extarys opened this issue Aug 24, 2024 · 3 comments · May be fixed by #12650
Labels
documentation Improvements or additions to documentation pkg:enhanced-img types / typescript

Comments

@Extarys
Copy link

Extarys commented Aug 24, 2024 •
edited
Loading

Describe the problem

Technically it is a bug, because it should work, but seeing the source code it was not implemented at all.

I'm looking for a way to set the quality of all images by default, and then crop and tint a dynamically some imported image. Obviously, this issue is geared toward having imagetools work for dynamic import first :).

To add to @flippbit list of things that doesn't work:
(#11535 (comment))

import MyImage from './path/to/your/image.jpg?enhanced&quality=80&tint=#ffaa22';

Throw an error:

Cannot find module './path/to/your/image.jpg?enhanced&quality=80' or its corresponding type declarations.ts(2307)

Sidenote:
Nuxt Img can have a global configuration to set default quality, etc: https://image.nuxt.com/get-started/configuration

*EDIT Thanks to a discord mod:
It should be implemented and is a type error:
JonasKruckenberg/imagetools#160 (comment)

sveltejs/enhanced-img type:
https://github.com/sveltejs/kit/blob/6056ba30e29ac5747c356fbf1a42dd71f2c4aa1f/packages/enhanced-img/types/ambient.d.ts

Describe the proposed solution

Implement

import MyImage from './path/to/your/image.jpg?enhanced&quality=80&tint=#ffaa22';

Alternatives considered

Make enhanced:img accept a variable as src for loops.

Importance

i cannot use SvelteKit without it

Additional Information

Not having this is kind of a nightmare IMO when trying to optimize images as much as possible and when using components for almost everything (Hero banner, Section's background, Image loop, galleries, etc all must use dynamic import of the images if using enhanced:img.

I didn't find a way yet on how to use it with user uploaded content since it change the image at build time.
@vvnsrzn
Copy link

vvnsrzn commented Sep 2, 2024 •
edited
Loading

What you can do it's to:

import MyImage from '../assets/01.jpg?w=1280;640;400&enhanced';

and update your ambient.d.ts

declare module '*?enhanced' {
	import type { Picture } from 'vite-imagetools';

	const value: Picture;
	export default value;
}

declare module '*&enhanced' {
	import type { Picture } from 'vite-imagetools';

	const value: Picture;
	export default value;
}

It works for me.

However, I agree with you that we should be able to dynamically import images more easily.

This is how I achieved this :

	const imageModules = Object.entries(
		import.meta.glob(`$lib/assets/portfolio/*.jpg`, {
			eager: true,
			query: { enhanced: true, w: '1280;640;400' } // you can pass some options here!
		})
	).filter(([k]) => data.portfolio && k.includes(data.portfolio.id));

Not sure if it helps, I'm a Svelte newbie, but feel free to forward a minimal reproduction example, I will get a look!

@Extarys
Copy link
Author

Extarys commented Sep 2, 2024

Thanks for chiming in.

Yes, someone on discord pointed out that it should work, and it's only a TS issue, so I simply add //@ts-ignore every time I use that haha and now it works.
Thanks for the ambient template, that is a big quality of life improvement... Where is that file? Directly in the node_module for enhanced image ?

I never used the meta.blob, I find it polute the code and reduce readability by a lot, but if need be I guess I'll have no choice. I'll keep that snippet somewhere :D

@vvnsrzn
Copy link

vvnsrzn commented Sep 2, 2024

You're welcome!

Where is that file? Directly in the node_module for enhanced image ?

Yes! https://github.com/sveltejs/kit/blob/main/packages/enhanced-img/types/ambient.d.ts

@Extarys Extarys linked a pull request Sep 4, 2024 that will close this issue
Open
6 tasks
@eltigerchino eltigerchino added types / typescript documentation Improvements or additions to documentation labels Oct 7, 2024
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
documentation Improvements or additions to documentation pkg:enhanced-img types / typescript
Projects
None yet
Milestone
No milestone
Development

Successfully merging a pull request may close this issue.

fix: allow enhanced to be first query parameter Extarys/kit
3 participants
@vvnsrzn @Extarys @eltigerchino