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.