Providers could use more control
Nobody has claimed this yet.
- Dominant language
- TypeScript
- Stars
- 1.5k
- Forks
- 331
- Avg merge
- 19h 52m
- Merged PRs (30d)
- 9
Description
Hi there !
For now, providers only generate URLs but it may prove problematic for some providers and transformations. For instance, TwicPics does not (and probably never will) pad images when doing a contain transformation. It could be nice if a provider was able to specify the object-fit that should be applied to the underlying img element. Letting a provider return an Object with a url and fit property as an alternative to a bare string would suffice. If a provider returns a bare string just use the default object-fit.
Another area that could be buffed up too is regarding placeholders. At TwicPics, we're currently working on implementing different kinds of placeholders. It would be nice if a provider could expose a method that would be separate from generateURL (say generatePlaceholderURL). If a Provider does not provide a generatePlaceholderURL method, just call generateURL using the default transformation currently computed by nuxt-image.
Finally, but it may be out of scope for nuxt-image, we have a script at TwicPics that takes care of API calls generation based on the context of the page (users put the URL of the master image in data-src and size their image using CSS, we generate the src attribute on the fly and dynamically, plus we handle lazy loading to boot). To support such a feature would require a lot more control over the generated HTML but, as I said, it may be out of scope here.
Please let me know if this all makes sense.
Contributor guide
First steps
- Read the whole issue, then the project's contributing guide.
- Comment on the issue to say you are picking it up — it saves two people doing the same work.
- Fork the repository and make your change on a branch.
- Open a pull request that references the issue number.
Research direction
Start by tracing the provider generateURL entry point and how its result is applied to the underlying img element. Review the provider interface and placeholder generation flow, then define tests for object results with url and fit, generatePlaceholderURL support, and the fallback to generateURL with the default transformation.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- nuxt, typescript
- Domain
- frontend, web-dev
- Issue type
- Feature
- Difficulty
- 4/5
- Estimated time
- 3-5 days
- Activity status
- Stale
- Clarity
- Mostly clear
- Newbie friendliness
- 35/100