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]

La tabla se analiza a nivel de bloque. No puede pasar al modo en línea antes de detectar el diseño de las celdas. Por lo tanto, solo procesa las comillas invertidas y los escapes.

Dado que las tablas no forman parte de la especificación de CommonMark, seguimos la especificación de GFM. Puedes comprobar que GitHub se comporta de la misma manera.

En resumen: actualmente, todas las comillas invertidas y los caracteres de barra vertical dentro de las tablas DEBEN escaparse.

Si deseas un comportamiento diferente, debes pedir a los chicos de GitHub que actualicen la especificación. Pero, personalmente, no estoy seguro de si son posibles buenas resoluciones a nivel de especificación. En mi opinión, este caso es muy específico, tiene una solución alternativa y no vale la pena el esfuerzo que se gastaría en la reelaboración de la especificación/analizadores.