You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
Hello, I am using gatsby-image to display images from a WordPress source. I am trying to manipulate the base64 placeholder to display an 'average' color of the source image.
Relevant information
My first idea was to request a base64 with a width and height of 1px, so that the image library reduces it to 1px of the average color. I think, at this time, there is no way to specify the size of the base64 generated when calling a fluid or fixed image fragment. It looks like it is set to a hardcoded 20px.
I found a workaround by requesting a image of 1px separate from my fluid/fixed image query.
And when I call gatsby-image<Img/> element, I add the src image of my 'placeholder' as the 'base64' key of my fluid image, like this :
// Short for the fluid image
const fluid = node.image.localFile.childImageSharp.fluid
// If placeholder object exist, add its src to fluid's base64 key
if (node.image.localFile.childImageSharp.placeholder) {
fluid.base64 = node.image.localFile.childImageSharp.placeholder.src
// will look like : fluid.base64 = '/static/hash__.jpg'
}
// gatsby-image use the 1px src as the placeholder
return (
<Img fluid={fluid}/>
)
It works fine, but I would much prefer to have the option to specify parameters for the base64 to my fluid or fixed image fragemnt.
I am writing here in case I might be wrong and the option is already there. If not, and if the idea of having 'average color' placeholder sounds interesting or simply have the option of custom width or height, I would love to try and submit a PR.
Thanks!
The text was updated successfully, but these errors were encountered:
Old issues will be closed after 30 days of inactivity. This issue has been quiet for 20 days and is being marked as stale. Reply here or add the label "not stale" to keep this issue open!
It’s been 30 days since anything happened on this issue, so our friendly neighborhood robot (that’s me!) is going to close it.
Please keep in mind that I’m only a robot, so if I’ve closed this issue in error, I’m HUMAN_EMOTION_SORRY. Please feel free to reopen this issue or create a new one if you need anything else.
Thanks again for being part of the Gatsby community!
Summary
Hello, I am using
gatsby-image
to display images from a WordPress source. I am trying to manipulate the base64 placeholder to display an 'average' color of the source image.Relevant information
My first idea was to request a base64 with a width and height of 1px, so that the image library reduces it to 1px of the average color. I think, at this time, there is no way to specify the size of the base64 generated when calling a fluid or fixed image fragment. It looks like it is set to a hardcoded 20px.
I found a workaround by requesting a image of 1px separate from my fluid/fixed image query.
My graphql query looks like this :
And when I call
gatsby-image
<Img/>
element, I add the src image of my 'placeholder' as the 'base64' key of my fluid image, like this :It works fine, but I would much prefer to have the option to specify parameters for the base64 to my fluid or fixed image fragemnt.
I am writing here in case I might be wrong and the option is already there. If not, and if the idea of having 'average color' placeholder sounds interesting or simply have the option of custom width or height, I would love to try and submit a PR.
Thanks!
The text was updated successfully, but these errors were encountered: