`gatsby-plugin-sharp` / `gatsby-remark-images`: Set destination directory with destinationDir option

Summary

For the plugins gatsby-plugin-sharp and/or gatsby-remark-images (whichever makes sense and is necessary), an option destinationDir (string or function) that works similarly to the option in gatsby-remark-copy-linked-files…

// save `my-awesome-pdf.pdf` to `public/downloads/2a0039f3a61f4510f41678438e4c863a/my-awesome-pdf.pdf`
destinationDir: f => `downloads/${f.hash}/${f.name}`

// save `my-awesome-pdf.pdf` to `public/downloads/2a0039f3a61f4510f41678438e4c863a-my-awesome-pdf.pdf`
destinationDir: f => `downloads/${f.hash}-${f.name}`

// save `my-awesome-pdf.pdf` to `public/my-awesome-pdf/2a0039f3a61f4510f41678438e4c863a.pdf`
destinationDir: f => `${f.name}/${f.hash}`

…also with the new relativeDirectory property in the returned file object:

// save `my-awesome-pdf.pdf` to `public/original-path-in-src-pages/my-awesome-pdf.pdf`
destinationDir: f => `${f.relativeDirectory}/${f.name}`,

Basic example

See examples above.

Motivation

The structure of the files in the output public folder is more configurable and using the relativeDirectory option, can also match 1 to 1 the folder structure of the input src/pages directory. This makes the output easier to reason about and also easier to build tooling upon.

[sidharthachatterjee]

This makes a lot of sense. Happy to receive a PR adding this!

[karlhorky]

The project that I’m using it in is this Gatsby Server-side Authentication here: https://github.com/upleveled/gatsby-serverside-auth0