Comments (9)
Hey there @oyeanuj. Thanks for the suggestion!
What would be the use case for using such a component (Imgix
or otherwise) for Color Palettes?
from react-imgix.
@frederickfogerty A classic case for this as placeholder for images waiting for them to load. You'll see this on Google Images, or Pinterest where a color from the image is used as the placeholder. For all of that, you'd need the color palette.
from react-imgix.
Hey @oyeanuj we're looking to implement first class support for lazysizes, which should provide support for LQIP images 👍 I'm gonna close this for now.
from react-imgix.
@frederickfogerty Sorry, I'm seeing this message after a while. I just wanted to point out that LQIP or lazy-loading isn't a substitute for color palette extraction as they are very different choices in terms of design.
I feel like this should be re-opened as at the moment, color palette extraction via imgix is cumbersome and it would be great to have first-class support for it.
Great work on the library with all the new things btw!
from react-imgix.
Thanks for following up @oyeanuj! I'll tag @sherwinski who is responsible for this library at the moment 👍
from react-imgix.
Hey @oyeanuj,
Glad to hear you’re liking the library! I agree that color palette extraction can be tedious, although I am a bit apprehensive to create first-class support for it — let me explain why. A major concern for our team when implementing new first-class features is striking a balance between general usability and utility. By that I mean, is the feature flexible enough to be used across a variety of use cases, while still saving precious engineering time. In the past we’ve been burned trying to fit in very specific features into our libraries, as it tends to lead to an unruly/difficult-to-maintain codebase.
With regards to a new Color Palette component, I wouldn’t want to constrain it past just creating a thin wrapper around the palette=json
parameter. But at the point, I would question whether it is providing much utility at all. Perhaps something like constructing URLs with imgix-core-js + palette=json would better suit your use case? If that’s the case, I’d be happy to provide a code sample to get you started.
As always, we’re happy to have these discussions with our users directly because it helps steer future development choices. But at the same time, we want to design new features with the general user in mind.
from react-imgix.
@sherwinski Sorry, I missed this message but funnily enough came back looking to check if this was an offered functionality now. My use-case now, and increasingly I see all over the web is using the image color palette to generate an ambient background for the page/section/card etc. At this point, the option is to just use palette=CSS
in which case, we can't actually access the colors for custom usage, or to have a cumbersome way to call the json per image.
In the original request, and even now, I wonder if having a standard component wrapper or a hook wrapper, would be the more React way of using the color palette feature. What do you think?
If not, I'd love a code sample suggestion to see how you suggest integrating color palette JSON in React?
from react-imgix.
Hello @oyeanuj,
Apologies for the delay in joining this conversation, but I wanted to ensure we followed up.
Regarding Sherwin's suggestion, it seems he is proposing fetching the JSON blob per image and using the colors provided in the request to render the element's background color.
Now, to address your original feature request and provide some insights into our thoughts on this matter. We are leaning towards not implementing this feature due to the necessity of making two network requests: one to fetch the palette and another to fetch the image. Our rationale behind this decision is that our library aims to offer a straightforward way to programmatically render an image with image-specific imgix parameters. How loading states are handled depends on the developer who consumes the component, as each project has its unique requirements. For instance, images can be loaded programmatically or hard-coded. However, I am open to discussing further how you envision this feature working and being implemented.
If we were to consider incorporating some form of a "placeholder" feature, I would lean towards a direction similar to how Next.js has implemented their image component, particularly their placeholder feature. For example, we could use a small base64-encoded image during the loading state. This approach would avoid the performance impact of making additional fetches to obtain the palette=json data.
from react-imgix.
@mattlaguardia Thank you for the thoughtful response. It was useful to understand how y'all are thinking about the library as well as I (probably incorrectly) assumed it was going to wrap all of imgix features.
On the placeholder feature, I think your point makes sense.
On the container background issue: @sherwinski I'd love to take you up on the offer for the code sample there to visualize what you are suggesting. That said, I think it might be one of many use-cases for color palette and why this request might come up in other instances, fwiw.
from react-imgix.
Related Issues (20)
- + symbol gets converted into it's corresponding code %2B in generated src and srcset HOT 3
- Imgix doesn’t check if the there’s a value available in the prop before trying to process the src url HOT 5
- Version 9 over-encodes file paths HOT 19
- Request for support for top-level alt prop HOT 3
- prop-types should be a direct dependency HOT 4
- Height and Weight are set to 0 HOT 2
- HTML Validation: The width/height properties get rendered to HTML <source> element HOT 3
- Version 9 over-encodes file paths for Background Images HOT 2
- React18 support HOT 5
- Version 9.5.1 is sending `react-9.5.1-beta.1` in `ixlib` param HOT 5
- image not showing in microsoft edge HOT 3
- Typesetting Endpoint ~text HOT 2
- Width and height HTML attributes with fluid image HOT 9
- [feat]: work outside of 'use client' directive HOT 6
- NextJS 13 and React Server Components Support HOT 2
- Am I assigning a ref the right way? TS errors when using `htmlAttributes={{ref: ...}}` HOT 1
- Not able to test an Imgix image with Jest
- How to allow `onLoad` callback on Background component
- Background component doesn't utilize ImgixProvider's domain parameter HOT 3
- `disablePathEncoding` in `buildUrl` does not work
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 react-imgix.