images within markdown?

waywardm commented 6 years ago

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 commented 6 years ago

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 commented 6 years ago

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

waywardm commented 6 years ago

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

waywardm commented 6 years ago

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 commented 6 years ago

@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 commented 6 years ago

@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[bot] commented 5 years ago

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.

jbolda commented 5 years ago

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

github-actions[bot] commented 5 years ago

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[bot] commented 3 years ago

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[bot] commented 3 years ago

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.

wahidshafique commented 3 years ago

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 commented 3 years ago

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"/>

jbolda / gatsby-source-airtable

images within markdown? #24