Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/danielmahon/gatsby-remark-relative-images
Convert markdown image src(s) to be relative for gatsby-remark-images.
https://github.com/danielmahon/gatsby-remark-relative-images
gatsby gatsby-plugin gatsby-remark-images netlify-cms relative remark-plugin
Last synced: 3 days ago
JSON representation
Convert markdown image src(s) to be relative for gatsby-remark-images.
- Host: GitHub
- URL: https://github.com/danielmahon/gatsby-remark-relative-images
- Owner: danielmahon
- License: 0bsd
- Created: 2018-04-10T12:59:59.000Z (almost 7 years ago)
- Default Branch: master
- Last Pushed: 2024-07-20T13:59:19.000Z (6 months ago)
- Last Synced: 2025-01-21T03:06:09.650Z (10 days ago)
- Topics: gatsby, gatsby-plugin, gatsby-remark-images, netlify-cms, relative, remark-plugin
- Language: TypeScript
- Homepage: https://www.npmjs.com/package/gatsby-remark-relative-images
- Size: 4.28 MB
- Stars: 79
- Watchers: 4
- Forks: 28
- Open Issues: 15
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
- awesome-list - gatsby-remark-relative-images - remark-images. | danielmahon | 74 | (TypeScript)
README
# đź› Hello, I need a maintainer 👩‍💻 🧑‍💻 đź›
As you can probably see, I have not maintained, or used this package (or Gatsby for that matter) in a number of years. Frankly, I'm surprised this package still needs to exist. I have no plans to continue working on this so if you would like to take over this repo please let me know.
# gatsby-remark-relative-images
Convert image src(s) in markdown/html/frontmatter to be relative to their node's parent directory. This will help [gatsby-remark-images](https://github.com/gatsbyjs/gatsby/tree/master/packages/gatsby-remark-images) match images outside the node folder. This was built for use with NetlifyCMS and should be considered a temporary solution until relative paths are supported. If it works for other use cases then great!
### Features
- [x] Converts markdown/mdx images
- [x] Converts `src` in markdown/mdx html `![]()
` tags
- [x] Converts frontmatter fields, supports nested fields
- [x] Suports Unicode characters
- [x] Frontmatter field filters (include/exclude)
## v2 Breaking Changes:
The `fmImagesToRelative()` function has been removed, it is no longer needed.
NOTE: v2 greatly simplifies things and seems to work well for my use-case (NetlifyCMS), if you were previously using this plugin for something else that no longer works with v2, please open an issue and let me know and I will try to accomodate your use-case. Thanks.
## Install
```bash
# Install v2 (Recommended)
yarn add gatsby-remark-relative-images
# Install v1 (TS refactor, but quickly found more things to simplfy, skip)
npm i [email protected]
# Install original (a bit hacky but have previously worked for most)
npm i [email protected]
npm i [email protected]
```
## Usage Example
This usage example is for v2 of this plugin.
/gatsby-config.js
```javascript
module.exports = {
plugins: [
// Add static assets before markdown files
{
resolve: 'gatsby-source-filesystem',
options: {
path: `${__dirname}/static/uploads`,
name: 'uploads',
},
},
{
resolve: 'gatsby-source-filesystem',
options: {
path: `${__dirname}/src/pages`,
name: 'pages',
},
},
{
resolve: `gatsby-transformer-remark`,
options: {
plugins: [
// gatsby-remark-relative-images must go before gatsby-remark-images
{
resolve: `gatsby-remark-relative-images`,
options: {
// [Optional] The root of "media_folder" in your config.yml
// Defaults to "static"
staticFolderName: 'static',
// [Optional] Include the following fields, use dot notation for nested fields
// All fields are included by default
include: ['featured'],
// [Optional] Exclude the following fields, use dot notation for nested fields
// No fields are excluded by default
exclude: ['featured.skip'],
},
},
{
resolve: `gatsby-remark-images`,
options: { maxWidth: 1024 },
},
],
},
},
],
};
```
/static/admin/config.yml
```yml
# ...
media_folder: static/img
public_folder: /img
# ...
```
/src/pages/blog-post.md
```md
---
templateKey: blog-post
title: A beginners’ guide to brewing with Chemex
date: 2017-01-04T15:04:10.000Z
featured: { image: /img/chémex.jpg, skip: /img/chémex.jpg }
description: Brewing with a Chemex probably seems like a complicated, time-consuming ordeal, but once you get used to the process, it becomes a soothing ritual that's worth the effort every time.
---
This week we’ll **take** a look at all the steps required to make astonishing coffee with a Chemex at home. The Chemex Coffeemaker is a manual, pour-over style glass-container coffeemaker that Peter Schlumbohm invented in 1941, and which continues to be manufactured by the Chemex Corporation in Chicopee, Massachusetts.
In 1958, designers at the [Illinois Institute of Technology](https://www.spacefarm.digital) said that the Chemex Coffeemaker is _"one of the best-designed products of modern times"_, and so is included in the collection of the Museum of Modern Art in New York City.
## The little secrets of Chemex brewing
The Chemex Coffeemaker consists of an hourglass-shaped glass flask with a conical funnel-like neck (rather than the cylindrical neck of an Erlenmeyer flask) and uses proprietary filters, made of bonded paper (thicker-gauge paper than the standard paper filters for a drip-method coffeemaker) that removes most of the coffee oils, brewing coffee with a taste that is different than coffee brewed in other coffee-making systems; also, the thicker paper of the Chemex coffee filters may assist in removing cafestol, a cholesterol-containing compound found in coffee oils.
```
## FAQs
### I'm getting the error: Field "image" must not have a selection since type "String" has no subfields
This is a common error when working with Netlify CMS (see issue [gatsby/gatsby#5990](https://github.com/gatsbyjs/gatsby/issues/5990)).
The application must include the `media` with `gatsby-source-filesystem` to include all the uploaded media and to make it available on build time. **Note:** The media folder must be included **before** the other content.
For example, an application that is using NetlifyCMS and this plugin, and has a content folder with markdown that comes from Netlify. Here's how the `gatsby-config.js` should look like:
```js
module.exports = {
plugins: [
{
resolve: `gatsby-source-filesystem`,
options: {
path: `${__dirname}/static/assets`,
name: 'assets',
},
},
{
resolve: `gatsby-source-filesystem`,
options: {
path: `${__dirname}/src/content`,
name: 'content',
},
},
`gatsby-transformer-sharp`,
`gatsby-plugin-sharp`,
{
resolve: `gatsby-transformer-remark`,
options: {
plugins: [
`gatsby-remark-relative-images`,
{
resolve: `gatsby-remark-images`,
options: {},
},
],
},
},
`gatsby-plugin-netlify-cms`,
],
};
```