Add images to recipe steps

[paulcalabro]

I really like this app! Is it possible to add support for Markdown? I'd like to format the recipe a bit as well as reference multiple image files within the recipe itself.

---

Depends on #1133
Depends on #340

[mrzapp]

I don't think it would be of much benefit, since Markdown just generates HTML, and that would just be noise in the JSON format that we're following: http://uischema.org/Recipe.

However, we could still add support for images on a per-step basis, since the "recipeInstructions" field can take an ItemList of ListItem, which is based on Thing, which has an "image" field.

TL;DR: No markdown, yes images.

[sir-indy]

I've been thinking about this too, I think markdown would be useful, personally I like to mark recipe ingredients in bold (because I have a habit of skipping over them and not adding them).

[paulcalabro]

@mrzapp That makes sense. Adding support for images in the steps would be a nice improvement!

[christianlupus]

I don't think it would be of much benefit, since Markdown just generates HTML, and that would just be noise in the JSON format that we're following: http://uischema.org/Recipe.

@mrzapp: Just out of cuiosity: Whouldn't it be benefical to store the Markdown in the DB/JSON instead of the parsed HTML and do the Markdown->HTML conversion on the fly or in a separate cache? Then the JSON is comparably clean.

[mrzapp]

@christianlupus I see your point, that might work. That also makes markdown optional, which is nice. In most cases though, the recipes are fetched from a remote resource presenting HTML, which is stripped, so markdown is only really supported when entered manually.

I think we can just render the markdown client side, it's super quick.

[christianlupus]

I do not know how the stripping is done exactly. However I assume this is done in the regexes in this file. Maybe one could tweak them to keep some basic formatting (like <b>...</b>) by simply replacing them with their markdown syntax before stripping.

[mrzapp]

@christianlupus yeah, it's this line, which uses this method.

If we want to preserve the formatting from fetched HTML, we might as well use this library to convert it to markdown and this one to convert it back when presenting it.

You want to take a swing at this? Otherwise I'll get to it eventually.

[christianlupus]

@mrzapp I am a bit short in time at the moment as I just returned from holidays and I have some pressing things at hands. So I will unfortunately not find much time in the next few weeks to code much, sorry.

The libraries look really good. Put them as a submodule and much of the issue should be gone within a short period of time.

[mrzapp]

@christianlupus just to summarise the solution for this issue:

1. We store recipeInstructions as an array of arrays, making sure that at least the text field is present in each array.
2. When saving the recipe, we download images referenced by the image field (if any) to the recipe folder and delete any old ones.
   2.1 When saving the images, we should rename them to step_$i.jpg for ease of discovery.
3. In the UI, we include image upload/picker buttons for each step input.

How does that sound to you? Please feel free to challenge any of the points, they're not set in stone :)

[Bugsbane]

Not sure if this should be a separate feature request, but multiple images wouldn't only be useful for the steps, but for the main image itself. For example, before I make a recipe, I'll use the image from the website I got it from. After I've made a recipe, I'd love to add one or more photos of how it actually turned out. If a family member makes it, they might do the same.

[seyfeb]

Not sure if this should be a separate feature request

Yes, it should be - and it is ;)

[ShuiHuo]

Any progress?

[christianlupus]

Unfortunately no.

[github-actions]

This PR/issue depends on:

• Support object-based API calls to objain a recipe #1133
• Meta: Future file structure #340
  By Dependent Issues (🤖). Happy coding!

[herrselent]

I would also love to see the feature of being able to add images to each of the steps within a recipe as we're using cookbook as a technical manual in which we miss the opportunity to add screenshots as a means of giving visual instruction for each step in the recipe. Like in this comment box I am able to format my text but also attach files, but for the recipe-steps the images should be inline similar to what the header image for the recipe is at the top.

[sergeng]

this feature will make this app perfect!

[christianlupus]

We need a way to store the images, thus the dependency on #340.

[impeira]

The Markdown feature would be greatly appreciated! 😇