Pictures don't upload well into tables because of the straight bar symbol

Our forum uses tables to describe the function of digital synthesizer modules. In the first column, we use a picture. Because Discourse inserts a | between the file name and resolution, it breaks the link to the picture when using it in a column.

The solution is you have to delete the | symbol. Not a big deal, but also not intuitive for beginners.

Meter | Displays
---|---
![Meter-Pattern|108x108](upload://9DAOKRFuJI7XfTYXxm9fsalRgbM.png) | `Pattern`
Meter Displays
![Meter-Pattern 108x108](upload://9DAOKRFuJI7XfTYXxm9fsalRgbM.png)

vs.

Meter | Displays
---|---
![Meter-Pattern108x108](upload://9DAOKRFuJI7XfTYXxm9fsalRgbM.png) | `Pattern`
Meter Displays
Meter-Pattern108x108 Pattern

Thanks!

9 个赞

Looks like the standard escape character (\) works:

Meter | Displays
---|---
![Meter-Pattern\|108x108](upload://9DAOKRFuJI7XfTYXxm9fsalRgbM.png) | `Pattern`
Meter Displays
Meter-Pattern Pattern
14 个赞

Sure, but you can also just delete the | as well. I’m personally not super versed in code so I had to puzzle through this at first.

Perhaps it’s not worth changing, I just thought maybe no one was really using pictures in tables and no one had come across this before. Not a big deal, I made a note of it on a tutorial about tables on our forum.

Thanks!

2 个赞

But if you escape, you can actually resize the image:

Meter Displays
Meter-Pattern Pattern
Meter | Displays
---|---
![Meter-Pattern\|22x22](upload://9DAOKRFuJI7XfTYXxm9fsalRgbM.png) | `Pattern`

note the escape in \|22x22

8 个赞

Maybe if I get this right, if the picture doesn’t load, it would say “Meter-Pattern” with your \ solution and “Meter-Pattern108x108” if you did it by deleting the |?

1 个赞

Oooh, ok that’s great to know!

I will amend the advice on the forum to reflect this. Thanks a lot! I’m so psyched about the powers of this new forum. We were struggling on an old version of Vanilla that didn’t even have bold text. Yeesh.

5 个赞

Very interesting edge case. Also note that part specifying the image dimensions is not strictly required

![Meter-Pattern](upload://9DAOKRFuJI7XfTYXxm9fsalRgbM.png)
![Meter-Pattern|108x108](upload://9DAOKRFuJI7XfTYXxm9fsalRgbM.png)

… though if omitted, it will cause some bouncing around in the topic as the browser has to manually verify the image dimensions.

8 个赞

Agree, very interesting edge case. If we give up allowing , in title for images we can work around it but I wonder if this is a bug @Vitaly in the ordering of the table processing in the pipeline (maybe we should process images prior to tables)? (see OP)

5 个赞

表格在块级别进行解析。在检测到单元格布局之前,它无法跳转到内联模式。因此,它只处理反引号和转义符。

由于表格不是 CommonMark 规范的一部分,我们遵循 GFM 规范。您可以检查,GitHub 的行为方式相同。

总之:目前表格内的所有反引号和管道字符都必须转义。

如果您希望有不同的行为,您需要要求 GitHub 的人更新规范。但就个人而言,我不确定在规范层面是否有可能获得好的解决方案。在我看来,这种情况非常特殊,有解决方法,不值得花费精力来重新设计规范/解析器。

3 个赞

This topic was automatically closed 30 days after the last reply. New replies are no longer allowed.