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

[biminiroad (Mark Boyd)]

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


vs.

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

Meter	Displays
	Pattern

Thanks!

[Falco]

Looks like the standard escape character (\) works:

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

Meter	Displays
	Pattern

[biminiroad (Mark Boyd)]

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!

[Falco]

@biminiroad

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.

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

Meter	Displays
	Pattern

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

note the escape in \|22x22

[biminiroad (Mark Boyd)]

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

[biminiroad (Mark Boyd)]

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.

[codinghorror (Jeff Atwood)]

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.

[sam (Sam Saffron)]

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)

[Vitaly]

A tabela é analisada no nível do bloco. Ela não pode pular para o modo inline antes de detectar o layout das células. Portanto, ela só processa acentos graves e caracteres de escape.

Como as tabelas não fazem parte da especificação CommonMark, seguimos a especificação GFM. Você pode verificar que o GitHub se comporta da mesma maneira.

Em resumo: atualmente, todos os acentos graves e caracteres de barra vertical dentro de tabelas DEVEM ser escapados.

Se você desejar um comportamento diferente, precisará pedir aos caras do GitHub para atualizarem a especificação. Mas, pessoalmente, não tenho certeza se boas resoluções são possíveis no nível da especificação. Na minha opinião, este caso é muito específico, tem uma solução alternativa e não vale o esforço para ser gasto na reformulação da especificação/parsers.