AttLii / image-blur

Wordpress plugin that generates blurred versions of uploaded images
21 stars 1 forks source link

Register meta in WPGraphQL #20

Closed kayosdesign closed 2 years ago

kayosdesign commented 2 years ago

Howdy,

It'd be nice if the plugin registered the metadata against WPGraphQL

something along the line of

      register_graphql_field( 'mediaItem', 'image_blur_full', [
          'type' => 'string',
          'resolve' => function( $post ) use( 'image_blur_full' ) {
            return get_post_meta( $post->ID, 'image_blur_full', true );
          }
      ]);

Can then pull out the blurred code using

query AllPosts($count: Int!) {
    posts(first: $count, where: { orderby: { field: DATE, order: DESC } }) {
        edges {
            node {
                title
                excerpt
                slug
                date
                featuredImage {
                    node {
                      sourceUrl
                      altText
                      mediaDetails {
                          height
                          width
                      }
                      imageBlurFull
                      imageBlurLarge
                      imageBlurMedium
                      imageBlurMediumLarge
                      imageBlurThumbnail
                    }
                }
            }
        }
    }
}

I'm then using it in a NextJS app like

    <Image
      width={featuredImage.node.mediaDetails.width}
      height={featuredImage.node.mediaDetails.height}
      objectFit="cover"
      alt={`Article cover image for ${title}`}
      src={featuredImage.node.sourceUrl}
      className="shadow-small rounded-lg hover:shadow-medium transition-shadow duration-200"
      blurDataURL={"data:image/png;base64," + featuredImage.imageBlurFull}
      placeholder="blur"
    />

Cheers, D.

AttLii commented 2 years ago

Hey,

Thanks for the suggestion. I haven't used WPGraphQL plugin before, but I guess example script could be created on how blur data can be included to queries.

br Atte

AttLii commented 2 years ago

Hey,

I played around with this little bit and added a short snippet here. I wanted to make more restricted approach, so client can't query non-existing image sizes, but unfortunately WPGraphQL doesn't include the original size in their media size enum. Maybe it can be added later though.

Anyway, I don't think this is a good feature to add to this plugin. If this gets more attraction, we can make a separate extension plugin out of it.

Hopefully the snippet is enough for now.