Comments (7)
Sooo, I thought this was gonna come up at some point ;)
The way imagetools works is it first parses the url and generates an object from that. It then generates what I call targets, one for each image that is gonna be produced.
The issue is that in your case the defaultDirectives get applied after the last step above. That's why it's not working.
I am however very unhappy with the way the API works right now so I'm doing (yet another sigh) rewrite and I'll make sure to address this issue too!
from imagetools.
@JonasKruckenberg, I don't know if my requirement is exactly the same as @QElix, but definitely in the same general area.
I would like to be able to generate multiple images with a single preset, eg:
import info from "./img.png?mypreset"
It seems at the moment looking at the code that it's one param --> one transformed image, and this seems a bit limited when we want to standardise the breakpoints for srcset.
Ultimately I want an author to be able to write:
import meta from "./img.png?default&meta"
...
<ImageSrcsetAndOtherSmarts meta={meta} blurrup/>
If there is a way to do this today or get close to it that would be amazing, and thanks for what is already a great lib.
from imagetools.
I think if there was a way to intercept/override the call to resolveConfigs
that might provide what we need.
from imagetools.
Alright let's think about this again, back in June I promised an API redesign that sadly went nowhere (for different reason but mostly time 😕) so lets move this forward and think of a way we can approach this without a redesign.
My first idea was to change defaultDorectives
from
type defaultDirectives = Record<string, string> | ((id: string) => Record<string, string>)
to this
type defaultDirectives = URLSearchParams | ((id: string) => URLSearchParams)
and merge them with the URLSearchParams
from the actual Url. This would resolve #216 since configs would be applied before resolving and allow for multiple values for the same key.
wdyt @Porges @QElix @jugglingcats would that solve you use case?
from imagetools.
My use-case is I want to set one config for every single image to resize it to a set of standard sizes, which I then use in srcset
to pick a different one depending on window size. I think what you’re describing will solve it.
(Another ability I need for this is to only resize downwards and never up-scale, but that’s another topic.)
from imagetools.
@JonasKruckenberg, I think default directives are nice and having them able to generate multiple images would be a common requirement. Our requirement is to be able to have multiple custom presets that might generate a single image or multiple. The pull request I made achieves this reasonably cleanly 🤞.
One change you might (also) consider is to default to returning metadata rather than just url when there are multiple images being generated. I can't really see a scenario where you'd generate multiple images but not need the metadata? At the moment I am using the following as well as our custom resolveConfigs
:
export function glowsiteOutputFormats(builtinOutputFormats) {
// all this does is ensure that when we write image.png?glowsite we get the metadata back not the urls
// (it means we don't have to write image.png?glowsite&meta all the time)
//
// we also filter out a lot of the redundant metadata from the json as it ends up in the bundle
return {
...builtinOutputFormats, glowsite: () => {
const defaultFormat = metadataFormat()
return (metadatas) => {
// just return the metadata we need
return defaultFormat(metadatas).map(({format, width, height, src}) => ({format, width, height, src}))
}
}
}
}
from imagetools.
Alright, the custom resolveConfig hook got released in [email protected]
and [email protected]
respectively.
The direct fix for this issue will also be released soon!
from imagetools.
Related Issues (20)
- Upgrading Vite-imagetools 5.0.8 throws an error from 4.x version HOT 2
- generateImageID causes tests to fail on CI HOT 3
- Vite example has a typo HOT 1
- Renaming picture fallback to img is not reflected in the document HOT 1
- Waste less effort transforming images
- Dependency on sharp not declared correctly for yarn’s PnP loader HOT 9
- Vite plugin crash HOT 2
- Loading attribute HOT 1
- v6 broken due to missing sharp 0.33 binariers HOT 3
- Some images get rotated for some reason HOT 14
- crop from / "gravity" HOT 1
- Error: Unable to parse color from string: ##ffaa22
- Pre-transform error: Failed to parse source for import analysis because the content contains invalid JS syntax
- How to receive access to original image in `extendOutputFormats` after v7.0.0? HOT 3
- Resize image to fit in box
- Querying for GIF's metadata removes animation
- How to use with SSR
- Use the <Image> component HOT 2
- Plugin output is not reproducible HOT 1
- Wrong output path when building in Laravel project HOT 9
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from imagetools.