Are PDF's or MP4's retrieved from wordpress media items?

[ssoney200]

Hi guys,

All my jpegs and pngs etc are downloaded using Gatsby source wordpress experimental but I also want to pull mp4 videos and PDF files from the media in Wordpress.

I'm sure this was working when I used the Rest API version, but I can't locate them anywhere using this version.

Am I missing something?

Thanks,
Jamie

[philip-akerfeldt]

I also have this problem.
Images are fetched fine from WPGraphql using the WpMediaItem type. PDFs however, are missing some important fields. For me its the sourceUrl that is the biggest issue right now.

[moonmeister]

Do either of you have some code I can see or more specific logs?

Some possibilities:

1. images in WordPress have sourceUrl but pdfs do not, non-images use mediaItemUrl (images also have medaItemUrl so it's probably better to use that).
2. I believe images are only downloaded into Gatsby if they are referenced by something in WP. meaning they're in a post/page, linked in a menu, etc. If it's just free floating in the media library it's not accessible for now from Gatsby.

[philip-akerfeldt]

Sure! Here are som additional information about my case.
I am creating pages for my PDF files so my initial query that is used in gatsby-node is the following:

{
        allWpMediaItem(filter: {mimeType: {regex: "/(pdf)/"}}) {
            nodes {
                id
                slug
                mimeType
                type: nodeType
                status
            }
        }
    }

On each specific PDF page I am using the following fragment query:

fragment singleWpPDFFragment on WpMediaItem {
    id
    slug
    sourceUrl
    status
    localFile {
      prettySize
      name
      ext
      publicURL
    }
  }

The error I get right now does not seem to be connected to the mediaItem type. Ill get back to you with more information when I get the time to debug and test. Should be in a couple of hours.

Im gonna try your first suggestion @moonmeister!
This is a huge issue for my project that is highly reliant on having PDFs as their own pages 😬
I will post an update shortly 😄

[ssoney200]

Sure! Here are som additional information about my case.
I am creating pages for my PDF files so my initial query that is used in gatsby-node is the following:

{
        allWpMediaItem(filter: {mimeType: {regex: "/(pdf)/"}}) {
            nodes {
                id
                slug
                mimeType
                type: nodeType
                status
            }
        }
    }

On each specific PDF page I am using the following fragment query:

fragment singleWpPDFFragment on WpMediaItem {
    id
    slug
    sourceUrl
    status
    localFile {
      prettySize
      name
      ext
      publicURL
    }
  }

The error I get right now does not seem to be connected to the mediaItem type. Ill get back to you with more information when I get the time to debug and test. Should be in a couple of hours.

Im gonna try your first suggestion @moonmeister!
This is a huge issue for my project that is highly reliant on having PDFs as their own pages 😬
I will post an update shortly 😄

This was the issue I had Phil, I tried a whole manner of different ways to test if the PDF's were indeed included in the allWpMediaItem, but came up sort every time, I just could not find them in graphql at all.

The only way I could resolve temporarily was to pull down manually the pdf's from wordpress, and then filter the post content to serve files the local gatsby source file system if a name matched. This has helped me use local pdf's for now, but it only works if they match a file name in the local system, so obviously isn't future proof for additional pdf's uploaded.

Therefore, I'd love to hear if you do find a solution to this!

[philip-akerfeldt]

I am using a combination of gatsby-source-wordpress-experimental and and the plugin called gatsby-source-filesystem. This worked perfectly in V3 but now when I have tried to port my project to V4 the issue occurred. The PDF page uses this query:

  query($id: String!) {
    wpMediaItem(id: { eq: $id }) {
      ...singleWpPDFFragment
    }
  }

The fragment used in this query can be found in my previous comment. This is the error I get when trying to render my PDF page for a pdf called sample:

From this error it looks like the field mediaItemUrl does not exist on the media item that is of the mimetype: "mimeType": "application/pdf".

It works fine on develop but something is wrong when using SSR I guess (when using build)? 🤔
Any ideas @moonmeister

EDIT:
I looked through my code and I go it working. I was trying to fetch fields from the wrong object. So it was purely spaghetti code from my part.

If you would be interested in my config in any way, shape or form. Let me know and I'll see what I can do.
A huge thanks to @moonmeister for helping me find a way 👍 🚀

[nerdess]

2\. If it's just free floating in the media library it's not accessible for now from Gatsby

will this stay that way or is it likely to change?

related to this: how would a dev have to craft a new/custom gutenberg block in order to ensure the images that were added with that block get recognized?

[TylerBarnes]

@nerdess I'm working on shipping support for files linked to in html fields right now. I'm 99% of the way there.
As far as free floating media items that aren't referenced anywhere in a connection field or in html fields, a plugin option will need to be added to enable that. For now media items need to be attached directly to a field (as in an ACF file field) or within html (an anchor tag to download a file or a video).

Gutenberg isn't currently supported directly until WPGraphQL adds core support. If you use Gutenberg via the post content field, any images added there will become Gatsby images, any files linked there will soon become static Gatsby files.

[TylerBarnes]

Support for this was added in gatsby-source-wordpress-experimental@1.6.0

A new plugin option options.html.createStaticFiles was added. When this is true (it's true by default), any url's which are wrapped in "", '', or () and which contain /wp-content/uploads and which are within an html field will be transformed into static files and the url's will be rewritten. This adds support for , , and tags which point at WP media item uploads as well as inline-html css like background-image: url(). It will also transform any plain text like "https://yoursite.com/wp-content/uploads/image.png" as long as it's wrapped in "", '', or ().