Wordpress Question posted in
The official Wordpress documentation can be found here.

WordPress – How to get the thumbnail image from a GraphQL WP headless query

How do you get the thumbnail not the feature image from the posts query using WPGraphQL Headless?

I can see that you can quite easily get the featured image and then it has srcSets for different imagery of a smaller size but there is no option that is clear that would give me the posts thumbnail image.

The reason I want to get a thumbnail instead of a featured image is because of performance.

Tags:

2

Answers


  1. 0

    Just had the very same question and hacked it with a one-liner that returns the thumbnail URL from the image’s original sourceUrl:

     const thumbnailUrl = (srcUrl) => {
    if (!srcUrl) return;
    return srcUrl.split('.').slice(0,-1).join('.') + "-150x150." + srcUrl.split('.').pop();
  }

    Since it adds a fixed string for the size variant it only works for fixed/cropped image sizes such as thumbnail.

    Login or Signup to reply.
  2. 0

    if it can help someone, my srcset is empty in the GQL answer so it doesn’t work as expected.

    I get the wp thumbnails using "mediaDetails" like so :

    featuredImage {
            node {
                altText
                mediaDetails {
                    sizes {
                        name
                        sourceUrl
                    }
                }
            }
        }
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search