مشكلة في عرض Markdown مع صورة محاطة بـ HTML

متعلق بـ Thumbnail generation & markdown rendering issue

عندما يقوم Discourse بتنزيل واستبدال صورة HTML ببناء جملة Markdown الخاص به — وفي سياقنا، ينتج عن ذلك:

[...]<a href="<link_here>" target="_blank">![|150x150](upload://l0iarnA6SPVAyJN5l7pnQxZnPvE.jpeg)</a>[...]

لا يستطيع Discourse عرض الصورة

صورة

image

لحل المشكلة، تحتاج إلى سطر فارغ على الأقل في الأعلى:

[...]<a href="<link_here>" target="_blank">

![|150x150](upload://l0iarnA6SPVAyJN5l7pnQxZnPvE.jpeg)</a>[...]
صورة

هل من الممكن السماح بعرض صورة Markdown محاطة بـ HTML، من فضلك؟

@david

5 إعجابات

دعنا نجرب هذا على ميتا. أنا أقوم بربط هذه الصورة مباشرة داخل رابط:

<a href="https://discourse.org"><img src="..."/></a>

دعنا نرى ما يحدث عند جلب الصورة…

3 إعجابات

@Arkshine يبدو أن ذلك قد نجح على ما يرام - فقد تم عرض <a href="https://discourse.org">![](upload://6zqK52dO23i1JsYH2oyMU12U2ro.jpeg)</a> بنجاح.

هل يمكنك مشاركة المزيد من هيكل HTML المحيط بالرابط؟

إعجابَين (2)
غير منسق
<div data-wp><a href="https://www.mooki.co.il/gaming/hbilvt-giiming-mwtlmvt/mvwb-giiming-khvl-sparkfox-wvlhn-giiming-mqcvei-lumi-whvr-2" target="_blank">![](upload://vAPxoqZB2QvWCrX4kbbzSO5BYYb.png)</a><div><div data-buy><a href="https://www.mooki.co.il/gaming/hbilvt-giiming-mwtlmvt/mvwb-giiming-khvl-sparkfox-wvlhn-giiming-mqcvei-lumi-whvr-2" target="_blank">شراء</a><span data-clipboard-text="GLA679" data-coupon>GLA679</span><i></i></div><div data-price>679 شيكل <span data-old-price>1378 شيكل</span></div></div></div><hr /><p><small>&nbsp;نُشر في:&nbsp;<a href="https://zuzu.deals/%d7%91%d7%9c%d7%a2%d7%93%d7%99-%d7%95%d7%91%d7%9e%d7%97%d7%99%d7%a8-%d7%97%d7%98%d7%99%d7%a4%d7%94-%d7%9e%d7%95%d7%a9%d7%91-%d7%92%d7%99%d7%99%d7%9e%d7%99%d7%a0%d7%92-%d7%90%d7%93%d7%95%d7%9d-spark/"></a></small></p><br><p>![](upload://npQfkOhEIdPiFymVdtVyKmwRShL.png)</p>
<p style="text-align: center;">سواء كنتم لاعبين أو مجرد موظفين تقضون يومكم جالسين والظهر يصرخ طلبًا لكرسي أفضل، إليكم عرضًا حصريًا آخر بسعر مغرٍ!
كرسي ألعاب فاخر، سماعات ألعاب، وشحن سريع مجاني مع ضمان الوكيل الرسمي – فقط بـ 679 شيكل!!!</p>
<p style="text-align: center;">استخدموا في الكاشير الكوبون الحصري – <strong>GLA679</strong></p>
<div> ![](upload://3c2tvGxZnMqoIn2fVfHA02wocm.jpeg)</div>
<div>
<h3 style="text-align: center;">كرسي ألعاب احترافي SPARKFOX GC60P</h3>
</div>
<div>كرسي ألعاب بتصميم خاص لألعاب الكمبيوتر لضمان أقصى راحة للمستخدم</div>
<div>
<ul>
<li>كرسي بظهر مرتفع</li>
<li>أقصى راحة لفترات لعب طويلة</li>
<li>وسادتان للدعم في الرقبة والظهر السفلي</li>
<li>نوع المادة: رغوة مصبوبة</li>
<li>نوع الإطار: معدن</li>
<li>المادة: جلد مع ألياف كربونية</li>
<li>مسند الذراعين: قابل للتعديل للأعلى/الأسفل</li>
<li>نوع الآلية: فراشة</li>
<li>نوع الرفع: هيدروليكي Class4</li>
<li>مدى ميل الظهر: 90°-180°</li>
<li>نوع القاعدة: نايلون</li>
<li>مادة العجلات: نايلون</li>
<li>القدرة على التحمل: حتى 150 كجم</li>
<li>الضمان: سنة</li>
</ul>
<div><strong>الأبعاد</strong></div>
<div>
<ul>
<li>العرض: 67 سم</li>
<li>العمق: 67 سم</li>
<li>الارتفاع المتغير: 124-132 سم</li>
</ul>
<h3></h3>
<p>![](upload://7t26ZtW6tL3vobWYqbpCbRftvpV.jpeg)</p>
<h3 style="text-align: center;">سماعات ألعاب SPARKFOX K1</h3>
<div>سماعات ألعاب بتصميم خاص لأقصى راحة في الصوت والتحدث مع إلغاء ضوضاء الخلفية</div>
<div>
<ul>
<li>قابلة للاستخدام مع معظم الأجهزة المتاحة في السوق</li>
<li>صوت وإدارة المكالمات على الهواتف وأجهزة الكمبيوتر المحمولة</li>
<li>مفتاح التحكم في مستوى الصوت موجود على كابل السماعة لسهولة الوصول</li>
<li>صوت ممتاز من وحدات تحكم كبيرة بحجم 50 ملم</li>
<li>أزرار التحكم في مستوى الصوت وكتم الصوت</li>
<li>كوب الأذن كبير ومبطّن لراحة قصوى</li>
<li>قوس السماعة قابل للتعديل ليتناسب تمامًا مع رأسك</li>
<li>يتصل مباشرة بمخرج سماعة 3.5 ملم</li>
</ul>
</div>
<div>يُرفق محول خاص لربط السماعات بالكمبيوتر المكتبي عبر مقسم 3.5 ملم إلى مخرجين 3.5 ملم</div>
</div>
</div>
<p>&nbsp;</p>
<div data-custom-html=""></div>
منسق
<div data-wp>
    <a href="https://www.mooki.co.il/gaming/hbilvt-giiming-mwtlmvt/mvwb-giiming-khvl-sparkfox-wvlhn-giiming-mqcvei-lumi-whvr-2" target="_blank">![](upload://vAPxoqZB2QvWCrX4kbbzSO5BYYb.png)</a>
    <div>
        <div data-buy>
            <a href="https://www.mooki.co.il/gaming/hbilvt-giiming-mwtlmvt/mvwb-giiming-khvl-sparkfox-wvlhn-giiming-mqcvei-lumi-whvr-2" target="_blank">شراء</a>
            <span data-clipboard-text="GLA679" data-coupon>GLA679</span><i></i>
        </div>
        <div data-price>679 شيكل <span data-old-price>1378 شيكل</span></div>
    </div>
</div>
<hr />
<p>
    <small>&nbsp;نُشر في:&nbsp;<a href="https://zuzu.deals/%d7%91%d7%9c%d7%a2%d7%93%d7%99-%d7%95%d7%91%d7%9e%d7%97%d7%99%d7%a8-%d7%97%d7%98%d7%99%d7%a4%d7%94-%d7%9e%d7%95%d7%a9%d7%91-%d7%92%d7%99%d7%99%d7%9e%d7%99%d7%a0%d7%92-%d7%90%d7%93%d7%95%d7%9d-spark/"></a></small>
</p>
<br />
<p>![](upload://npQfkOhEIdPiFymVdtVyKmwRShL.png)</p>
<p style="text-align: center;">
    سواء كنتم لاعبين أو مجرد موظفين تقضون يومكم جالسين والظهر يصرخ طلبًا لكرسي أفضل، إليكم عرضًا حصريًا آخر بسعر مغرٍ!
    كرسي ألعاب فاخر، سماعات ألعاب، وشحن سريع مجاني مع ضمان الوكيل الرسمي – فقط بـ 679 شيكل!!!
</p>
<p style="text-align: center;">استخدموا في الكاشير الكوبون الحصري – <strong>GLA679</strong></p>
<div>![](upload://3c2tvGxZnMqoIn2fVfHA02wocm.jpeg)</div>
<div>
    <h3 style="text-align: center;">كرسي ألعاب احترافي SPARKFOX GC60P</h3>
</div>
<div>كرسي ألعاب بتصميم خاص لألعاب الكمبيوتر لضمان أقصى راحة للمستخدم</div>
<div>
    <ul>
        <li>كرسي بظهر مرتفع</li>
        <li>أقصى راحة لفترات لعب طويلة</li>
        <li>وسادتان للدعم في الرقبة والظهر السفلي</li>
        <li>نوع المادة: رغوة مصبوبة</li>
        <li>نوع الإطار: معدن</li>
        <li>المادة: جلد مع ألياف كربونية</li>
        <li>مسند الذراعين: قابل للتعديل للأعلى/الأسفل</li>
        <li>نوع الآلية: فراشة</li>
        <li>نوع الرفع: هيدروليكي Class4</li>
        <li>مدى ميل الظهر: 90°-180°</li>
        <li>نوع القاعدة: نايلون</li>
        <li>مادة العجلات: نايلون</li>
        <li>القدرة على التحمل: حتى 150 كجم</li>
        <li>الضمان: سنة</li>
    </ul>
    <div><strong>الأبعاد</strong></div>
    <div>
        <ul>
            <li>العرض: 67 سم</li>
            <li>العمق: 67 سم</li>
            <li>الارتفاع المتغير: 124-132 سم</li>
        </ul>
        <h3></h3>
        <p>![](upload://7t26ZtW6tL3vobWYqbpCbRftvpV.jpeg)</p>
        <h3 style="text-align: center;">سماعات ألعاب SPARKFOX K1</h3>
        <div>سماعات ألعاب بتصميم خاص لأقصى راحة في الصوت والتحدث مع إلغاء ضوضاء الخلفية</div>
        <div>
            <ul>
                <li>قابلة للاستخدام مع معظم الأجهزة المتاحة في السوق</li>
                <li>صوت وإدارة المكالمات على الهواتف وأجهزة الكمبيوتر المحمولة</li>
                <li>مفتاح التحكم في مستوى الصوت موجود على كابل السماعة لسهولة الوصول</li>
                <li>صوت ممتاز من وحدات تحكم كبيرة بحجم 50 ملم</li>
                <li>أزرار التحكم في مستوى الصوت وكتم الصوت</li>
                <li>كوب الأذن كبير ومبطّن لراحة قصوى</li>
                <li>قوس السماعة قابل للتعديل ليتناسب تمامًا مع رأسك</li>
                <li>يتصل مباشرة بمخرج سماعة 3.5 ملم</li>
            </ul>
        </div>
        <div>يُرفق محول خاص لربط السماعات بالكمبيوتر المكتبي عبر مقسم 3.5 ملم إلى مخرجين 3.5 ملم</div>
    </div>
</div>
<p>&nbsp;</p>
<div data-custom-html=""></div>
لقطة شاشة للمحرر

إعجاب واحد (1)

هذه هي نفس المشكلة التي تم طرحها هنا: Images not publishing to Discourse in WP 5.3 - #6 by simon

3 إعجابات

أها! @simon هل سيؤدي ترقية إضافة ووردبريس إلى إصلاح المنشورات القديمة؟ أم فقط المنشورات الجديدة؟

3 إعجابات

ينطبق الإصلاح فقط على المنشورات التي تُنشر باستخدام محرر بلوك في ووردبريس. سيصلح المنشورات القديمة إذا تم النقر على زر “تحديث موضوع ديسكورس” في ووردبريس. سيتطلب ذلك إجراءً يدويًا لكل منشور ما لم يكتب شخص ما سكريبتًا لتمرير المنشورات القديمة.

4 إعجابات

لنجرّب هذا HTML:

<p><img src="..."/></p>

![](upload://6zqK52dO23i1JsYH2oyMU12U2ro.jpeg)

4 إعجابات

أعتقد أنه يجب إصلاح هذه المشكلة في Discourse أيضًا، وذلك في حالة نشر منشورات من خلال تكامل غير ووردبريس. للتلخيص:

  1. نشرت <p><img src="..."/></p>. هذا كود HTML صالح تمامًا.

  2. قام pull_hotlinked_images بجلب الصورة واستبدال الوسم بـ <p>![](upload://6zqK52dO23i1JsYH2oyMU12U2ro.jpeg)</p>.

  3. هذا لا يتم عرضه بشكل صحيح.

إذن هناك حلان محتملان هنا. إما:

  • نقوم بإصلاح InlineUploads بحيث يضيف سطرًا فارغًا في الوسم. وهذا يتم عرضه بشكل صحيح:
    <p>
    
    ![](upload://6zqK52dO23i1JsYH2oyMU12U2ro.jpeg)
    </p>
    

أو

@sam هل تعلم إذا كان هناك سبب مقصود لعدم عرض صور Markdown في نفس السطر مع <p>؟

3 إعجابات

هذا جزء من مواصفة CommonMark

**اختبار**

<p>**اختبار**</p>

لا نرغب مطلقًا في الانحراف عن المواصفة هنا. أعتقد أننا سنصلح مشكلة الصور التي يتم ربطها مباشرة (hotlink images) للسماح بذلك عن طريق حقن سطرين جديدين في الحالات المشابهة. أظن أن هذا نادر نسبيًا وهو نوع من المشاكل التي نخلقها بأنفسنا.

5 إعجابات

لا أعتقد أن هذا نادرًا، خاصةً عندما يكون Discourse مرتبطًا بأدوات شائعة مثل WP-Discourse أو أي أدوات تستخدم واجهة برمجة التطبيقات.

يرجى مراعاة إضافة سطر فارغ. لا يبدو أن هذا سيكون تغييرًا كاسرًا وسهل التنفيذ إلى حد كبير. :pray:

3 إعجابات

@Arkshine لقد ناقشنا هذا الأمر كثيرًا داخليًا. الأمر الأهم بالنسبة لنا هو الحفاظ على سلامة المحتوى، لذا فمن المرجح ألا يتم تطبيق حل الفواصل الأسطر.

لكننا سنقوم بالتأكيد بشيء ما - فكون وظيفة pull_hotlinked_images تقوم بتدمير الصور أمر غير مقبول. نأمل في التوصل إلى حل قريبًا :eyes:

5 إعجابات

حل بديل لهذه المشكلة هو منع Discourse من تحميل الصور عن بُعد. يمكن القيام بذلك بإضافة نطاق الصورة إلى إعداد الموقع “النطاقات المعطلة لتحميل الصور”. كما يمكن أيضًا منع Discourse من تحميل جميع الصور عن بُعد عن طريق تعطيل إعداد الموقع “تحميل الصور عن بُعد إلى المحلي”. راجع Fix broken images for posts created by the WP Discourse and RSS plugins للحصول على التفاصيل.

4 إعجابات

في حالتنا، لا يمكننا ذلك لأننا نستخدم مكون الصورة المصغرة الرسمية للموضوع، والذي يتطلب صورة محلية. حللنا المشكلة بإضافة أسطر جديدة قبل أي <img> في المحتوى قبل إنشاء الموضوع باستخدام WP-Discourse. هذا ليس حلاً مناسبًا للجميع، لكنه يعمل لدينا. من المؤسف قليلاً أن ديسكورد لا يدعم هذا الاستخدام القانوني.

لكن نعم، إذا لم تكن مقيدًا بإضافة أو مكون، أو إذا لم تتمكن من إصلاح المحتوى قبل إنشاء الموضوع، فهذا بالتأكيد حل بديل معقول.

إعجابَين (2)

ما زلنا نخطط لإصلاح المشكلة. للأسف، إنها مشكلة عميقة نسبيًا في نظام تصيير لغة المارك داون الخاص بنا، وهو أمر معقد للإصلاح. لكننا سنصل إلى ذلك - نعتذر عن تأخرنا!

5 إعجابات

أود فقط إضافة ملاحظة هنا بأن المشكلة تؤثر أيضًا على المنشورات التي تحتوي على صور تم إنشاؤها عبر إضافة Discourse RSS.

6 إعجابات

نعتذر عن تعدد المنشورات في هذا الموضوع، لكن المشكلة تؤثر أيضًا على الصور في المنشورات التي يتم إنشاؤها عبر إضافة Zendesk لدينا عند تفعيل إعداد “مزامنة التعليقات من Zendesk”. تكمن الصعوبة في هذه الحالة في أنه لا يمكن معرفة مصدر الصور مسبقًا، وبالتالي لن تعمل حيلة إضافة مصدر الصورة إلى إعداد “نطاقات تحميل الصور المعطلة”.

هل توجد طريقة لمنع تحميل الصور البعيدة إلى الجهاز المحلي إذا كانت وسم الصورة محاطة بوسوم HTML؟

إعجاب واحد (1)

أخشى أن هذا غير ممكن على الإطلاق؛ فإذا قمنا بمثل هذا الإجراء، فسنتيح لأطراف ثالثة تتبع الاستخدام في المنتدى عن طريق حقن صورة تتبع. إن ميزة تحميل الصور البعيدة هي جزء من نظام الأمان.

بدلاً من ذلك، أعتقد أننا بحاجة إلى نظام “أذكى” يعمل بطريقة مشابهة للطريقة التي بنى بها @tgxworld خرائط الصور الخاصة بنا قبل بضع سنوات، نظام يعمل بشكل عكسي من HTML ويضمن استقرار التغيير من خلال إعادة الطهي. تغيير معقد للأسف.

4 إعجابات

هذه المشكلة قد ظهرت مرة أخرى

فقط أفكر بصوت عالٍ هنا، لكنني أتساءل عما إذا كان بإمكاننا تجاوز هذه المشكلة الصعبة (أي تحويل HTML إلى Markdown). للتذكير (لمساعدة التفكير في هذا الأمر)

  1. يدعم Discourse استيراد HTML لإنشاء محتوى المنشورات (مثل HTML من WP Discourse).

  2. في بعض السياقات، يتوقع المستخدم الحفاظ على سلامة HTML الأصلي تمامًا.

  3. تشمل “السلامة” هنا جانبين على الأقل:

    1. كيفية عرض المحتوى، مثل فواصل الأسطر
    2. مكان استضافة الوسائط، مثل تنزيل الصور محليًا لتجنب الصور التالفة، أو ربما لأسباب تتعلق بالأمان
  4. قد يؤدي تحويل HTML إلى Markdown إلى مشاكل من النوع الأول من السلامة، ومع ذلك فهو ضروري حاليًا لضمان النوع الثاني من السلامة.

لذا، ربما تكون إحدى الطرق لمعالجة هذه المشكلة لبعض المنشورات المستوردة هي تخزين HTML المستورد مباشرة كمحتوى منشور مطبوخ، ودعم مهمة pull_hotlinked_images لتنزيل الصور في مثل هذا المحتوى دون تحويل img إلى Markdown.

نعم، وببساطة أكثر، ربما يدعم الكود تنزيل الصور المرتبطة مباشرة دون الحاجة إلى تحويل img إلى Markdown. بالنسبة لمثل هذه المنشورات، يمكنك استبدال عنوان الصورة المنزلة في المحتوى المطبوخ بدلاً من النص الخام.

3 إعجابات

المشكلة هي كيف ستقوم بتحرير المنشورات بهذه العلامة. سيكون المحرر في وضع HTML الخام، وستكون شريط الأدوات بأكمله معطّلًا، وما إلى ذلك.

إعجاب واحد (1)