Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Cannot modify frontmatter image path #285

Closed
kendallroth opened this issue Mar 16, 2019 · 3 comments

Comments

@kendallroth
Copy link

commented Mar 16, 2019

Description

I'm running a Gridsome project and using Netlify CMS to manage my content. I've noticed that Netlify CMS stores images in the frontmatter of my markdown as a "relative" url. For example, a markdown file may look like this (several examples included with their states):

---
title: Initial Blog Post
# BROKEN: Error because of GraphQL "width" argument
cover_image: 2019-03-11-sample-image.png

# MISSING: Image is listed as "null"
cover_image: ./2019-03-11-sample-image.png

# WORKS
cover_image: /2019-03-11-sample-image.png
---

However, this (the first one) does not get parsed properly by Gridsome and will actually break the build, due to a GraphQL error when attempting to resize the image with the width argument. It seems that the frontmatter parser isn't handling the relative image path? I do not believe that Netlify CMS path can be changed to be "absolute", so is there a way to "hook into" the parsing and change the path for the frontmatter (and still have it interpreted by Gridsome)?

Steps to reproduce

  • Setup a basic Gridsome project (Gridsome Starter Blog works well)
  • Move the content/posts/images to static/images
  • Delete all blog posts except the one with a cover image
  • Change the remaining blog post cover image frontmatter path to an absolute path
    • Should be cover_image: /images/alexandr-podvalny-220262-unsplash.jpg
  • Build should work successfully
  • Remove the /images from the cover image path and update the Blog page and template image paths
    • src should be :src="/images/${$page.post.coverImage}"`
    • Frontmatter should be cover_image: /alexandr-podvalny-220262-unsplash.jpg
  • Build should work successfully
  • Update the cover image frontmatter path to start with ./
    • Frontmatter should be cover_image: ./alexandr-podvalny-220262-unsplash.jpg
  • Build should succeed but image is no longer there
  • Update the cover image frontmatter path to remove preceding path
    • Frontmatter should be cover_image: alexandr-podvalny-220262-unsplash.jpg
  • Build should fail

Expected result

I should be able to hook into the frontmatter parsing and change the image URL accordingly

Actual result

No way to make the relative image path work

Environment


Libs:
- gridsome version: 0.5.5
- @gridsome/cli version: 0.0.8


Browser:
- [x ] Chrome (desktop) version 72
- [ ] Chrome (Android) version XX
- [ ] Chrome (iOS) version XX
- [ ] Firefox version XX
- [ ] Safari (desktop) version XX
- [ ] Safari (iOS) version XX
- [ ] IE version XX
- [ ] Edge version XX
 
For Tooling issues:
- Node version: 10.14.0
- Platform:  Windows

Others:

Something similar has been discussed for Gatsby [here](https://github.com/gatsbyjs/gatsby/issues/4753)
@kendallroth

This comment has been minimized.

Copy link
Author

commented Mar 16, 2019

The error when using a frontmatter path starting without / or ./ is mentioned here: GitHub - Gridsome Starter Blog - #8

@hjvedvik

This comment has been minimized.

Copy link
Member

commented Mar 18, 2019

Gridsome will only process image paths which are relative to the file (eg. starts with ./ or ../). But you can try to set resolveAbsolutePaths: true as an option for the source to process absolute paths too. It's not documented yet, but should be pretty stable. Move your images from /static/images/* to /images/* and have /images/alexandr-podvalny-220262-unsplash.jpg as the field value. The images should be processed with this setup.

We might include hooks for modifying fields in 0.6.

@kendallroth

This comment has been minimized.

Copy link
Author

commented Mar 19, 2019

Hm, it is already working with the absolute paths, without the option deliberately set anywhere. The problem I'm having is when using with another provider that does not use relative paths (ie. ./ or ../) or absolute paths. However, I'm not using them for images anymore as I couldn't get this working. Looking forward to 0.6!

@robaxelsen robaxelsen closed this Mar 23, 2019

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
3 participants
You can’t perform that action at this time.