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

지원
1

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
Meter-Pattern108x108108×108 6.2 KB
 Pattern

Thanks!

2

Looks like the standard escape character (\) works:

Meter | Displays
---|---
![Meter-Pattern\|108x108](upload://9DAOKRFuJI7XfTYXxm9fsalRgbM.png) | `Pattern`
Meter Displays
Meter-Pattern
Meter-Pattern108×108 6.2 KB
 Pattern
3

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!

4

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

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

note the escape in \|22x22

5

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 |?

6

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.

7

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)

10

테이블은 블록 레벨에서 파싱됩니다. 셀 레이아웃을 감지하기 전에 인라인 모드로 전환할 수 없기 때문에, 백틱과 이스케이프만 처리합니다.

테이블은 CommonMark 사양의 일부가 아니므로, GFM 사양을 따릅니다. GitHub도 동일한 방식으로 동작하는 것을 확인해 볼 수 있습니다.

요약하자면: 현재 테이블 내부의 모든 백틱과 파이프 문자는 이스케이프 처리해야 합니다.

다른 동작을 원하신다면, GitHub 측에 사양 업데이트를 요청해야 합니다. 다만, 개인적으로는 사양 레벨에서 좋은 해결책이 가능할지 확신이 없습니다. 제 생각에는 이 경우 매우 특수한 상황이며, 우회 방법이 존재하므로 사양/파서를 재구성하는 데 노력을 기울일 가치가 없다고 생각합니다.