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

images within markdown? #24

Open
waywardm opened this issue Nov 8, 2018 · 13 comments
Open

images within markdown? #24

waywardm opened this issue Nov 8, 2018 · 13 comments
Labels
ongoing issue Prevents the issue from being closed for being stale.

Comments

@waywardm
Copy link

waywardm commented Nov 8, 2018

is it possible to render images from within markdown

ie.

![Live Nativity](/images/livenativity.jpg)

so that these could be processed by gatsby like it does with general markdown files

using gatsby-transformer-remark with the files being hosted with the codebase

@jbolda
Copy link
Owner

jbolda commented Nov 10, 2018

It should be possible, but I think most of the markdown plugins assume these are files on a filesystem so I suspect it won't work perfectly as it stands. Have you tried anything yet? @brendanmc6 has been experimenting with markdown as of late.

@waywardm
Copy link
Author

I have successfully pulled in markdown @jbolda but having issues with image url's in markdown

@waywardm
Copy link
Author

https://www.insowerbybridge.co.uk/news/ is pulling from airtable as well as events

@waywardm
Copy link
Author

Apologies, it does actually transform images through the markdown as shown at https://www.insowerbybridge.co.uk/events/live-nativity-2017, another error was causing these not to work.
Because gatsby creates a node for the mardown elements in your airtable as well as markdown files stored in your codebase in your gatsbynode file you can't just use if internal type is MarkdownRemark on the createnodeField as it will try to create a slug on the airtable markdown nodes as well which in my case was throwing an error causing it not to build in production.

@brendanmc6
Copy link
Collaborator

@waywardm I gave up on this for the time being, and ended up using airtable to host my images by directly pasting the url into my markdown. I couldn't figure out a reliable way to reference local images in my markdown...

If I remember correctly, querying the images resulted in files with randomly generated filenames. Did you manage to figure it out?

@waywardm
Copy link
Author

@brendanmc6 i did think it was working however I forgot it was just referencing images i had previously placed in a static folder, I cannot get it to process the images within the markdown itself. Instead i have created an attachment field in airtable and processed the images using child image sharp an example at the url https://www.insowerbybridge.co.uk/events/rushbearing-festival-sowerby-bridge-2018 to harness the speed of gatsby i always prefer for gatsby to transform the images if possible.

@github-actions
Copy link

This issue has been automatically marked as stale because it has not had any recent activity for 30 days. It will be closed if no further activity occurs within 7 days. Remove stale label, comment, and/or apply "ongoing issue" label to prevent this from being closed. Thank you for your contributions.

@github-actions github-actions bot added the stale Issue is stale. Closes automatically without activity. Apply "ongoing issue" label to prevent close. label Sep 11, 2019
@jbolda jbolda removed the stale Issue is stale. Closes automatically without activity. Apply "ongoing issue" label to prevent close. label Sep 17, 2019
@jbolda
Copy link
Owner

jbolda commented Sep 17, 2019

We had a quick discussion in regards to this topic here (see thread above):
https://twitter.com/jacobbolda/status/1171998973592264704

@github-actions
Copy link

This issue has been automatically marked as stale because it has not had any recent activity for 30 days. It will be closed if no further activity occurs within 7 days. Remove stale label, comment, and/or apply "ongoing issue" label to prevent this from being closed. Thank you for your contributions.

@github-actions github-actions bot added the stale Issue is stale. Closes automatically without activity. Apply "ongoing issue" label to prevent close. label Oct 18, 2019
@jbolda jbolda added ongoing issue Prevents the issue from being closed for being stale. and removed stale Issue is stale. Closes automatically without activity. Apply "ongoing issue" label to prevent close. labels Oct 21, 2019
@github-actions
Copy link

This issue has been automatically marked as stale because it has not had any recent activity for 30 days. It will be closed if no further activity occurs within 7 days. Remove stale label, comment, and/or apply "ongoing issue" label to prevent this from being closed. Thank you for your contributions.

@github-actions github-actions bot added the stale Issue is stale. Closes automatically without activity. Apply "ongoing issue" label to prevent close. label May 18, 2021
@jbolda jbolda removed the stale Issue is stale. Closes automatically without activity. Apply "ongoing issue" label to prevent close. label May 26, 2021
@jbolda jbolda reopened this May 26, 2021
@github-actions
Copy link

This issue has been automatically marked as stale because it has not had any recent activity for 30 days. It will be closed if no further activity occurs within 7 days. Remove stale label, comment, and/or apply "ongoing issue" label to prevent this from being closed. Thank you for your contributions.

@github-actions github-actions bot added the stale Issue is stale. Closes automatically without activity. Apply "ongoing issue" label to prevent close. label Jun 26, 2021
@jbolda jbolda removed the stale Issue is stale. Closes automatically without activity. Apply "ongoing issue" label to prevent close. label Jul 2, 2021
@wahidshafique
Copy link

wahidshafique commented Aug 4, 2021

I tried using this plugin but could not get it to work with source-airtable. It seemed as if it already had transformed my airtable flavoured markdown to an href, turning

![hello](https://upload.wikimedia.org/wikipedia/commons/5/56/Tiger.50.jpg)

into

![tiger](
<a href="https://upload.wikimedia.org/wikipedia/commons/5/56/Tiger.50.jpg">https://upload.wikimedia.org/wikipedia/commons/5/56/Tiger.50.jpg</a>
)

@wahidshafique
Copy link

Leaving a comment here for posterity. After wrestling with this for a brief time I figured it out. I was using the wrong tool.

So I ended up changing over from remark to MDX by following this migration guide. After doing it all, I was able to injest all markdown images from airtable, however I needed to flavour them as html, so in airtable like

A Torus is a shape from geometry that is obtained by rotating a circle in 3D space <img width="400px" src="https://blenderartists.org/uploads/default/original/4X/b/6/f/b6f608dd5a39c6f4950da84fb8284564de4d3c2c.gif"/>

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
ongoing issue Prevents the issue from being closed for being stale.
Projects
None yet
Development

No branches or pull requests

4 participants