تقديم شبكة الصور في المشاركات

ربما أداة مؤلف يمكنك من خلالها تحديد الصور وإدراج العلامة قبلها وبعدها؟

4 إعجابات

يمكنك القيام بشيء مثل:

.d-image-grid:hover {
  img {
    -webkit-filter: brightness(60%);
    transition: 0.5s;
  }
}

.d-image-grid:not([data-disabled]) .d-image-grid-column img, .d-image-grid:not([data-disabled]) .d-image-grid-column>.lightbox-wrapper, .d-image-grid:not([data-disabled]) .d-image-grid-column>.lightbox-wrapper>.lightbox {
  &:hover {
    img {
     -webkit-filter: brightness(100%);
     transition: 0.5s;
    }
    transition: 0.5s;
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
  }
}
3 إعجابات
[grid]
![](upload://jpg9rB3SiEPxoiEDzUQEfpqdyjC.jpeg)
![](upload://8af8gZpoBRQh1Lf7j8YsQHFWnFw.jpeg)
![](upload://nx1DA9CM5uUxhkR81asxo6Zzm5x.jpeg)
[/grid]

هممم، سيكون من الجيد لو نجح هذا. أشجع المستخدمين على ربط صورهم الخارجية المستضافة في مكان آخر، وقمت بتعطيل تنزيل الصور المرتبطة لتوفير المساحة.
قد تعمل البديل التالي، لكن معظم المستخدمين لن يعرفوا كيفية تنسيقها في Markdown بهذه الطريقة (إنهم معتادون على لصق رابط URL للصورة بمفرده على سطر):

[grid]
![](upload://jpg9rB3SiEPxoiEDzUQEfpqdyjC.jpeg)
![](upload://8af8gZpoBRQh1Lf7j8YsQHFWnFw.jpeg)
![](upload://nx1DA9CM5uUxhkR81asxo6Zzm5x.jpeg)
[/grid]

إليك طريقة أكثر تعقيدًا لجعل الصور الخارجية قابلة للنقر لرؤية النسخة بالحجم الكامل:

[grid]
[![](upload://jpg9rB3SiEPxoiEDzUQEfpqdyjC.jpeg "")](https://github.com/KDE/plasma-workspace-wallpapers/blob/master/IceCold/contents/images/5120x2880.png?raw=true)
[![](upload://8af8gZpoBRQh1Lf7j8YsQHFWnFw.jpeg "")](https://getwallpapers.com/wallpaper/full/b/5/f/563687.jpg)
[![](upload://nx1DA9CM5uUxhkR81asxo6Zzm5x.jpeg "")](https://www.pixelstalk.net/wp-content/uploads/2016/06/Download-hd-nature-wallpaper.jpg)
[/grid]



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

3 إعجابات

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

7 إعجابات

لقد أنشأت للتو مكون سمة يضيف أزرار محاذاة الصور والشبكة إلى شريط أدوات المنشئ

10 إعجابات

يبدو هذا بالتأكيد وكأنه خطأ!

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

:yum: جميل. للأسف غير متوفر عبر البريد الإلكتروني ولا في الصفحات المنشورة. :cry:

إعجابَين (2)

نعم، لقد قدمت تقرير خطأ منفصل:

إعجابَين (2)

نعم، الصفحات المنشورة لها وصول مقيد جدًا إلى ميزات Discourse. حتى مربعات الضوء العادية لا تعمل عليها. سيؤدي النقر على صورة إلى فتح عنوان URL مباشرة بدلاً من عرض عارض الصور.

4 إعجابات

هذا يعمل بأناقة! لقد قمت للتو بعرض توضيحي

إذا كان الأمر يستحق أي شيء، فسأصوت للحصول على ميزات مكون سمة أزرار محاذاة الصور/.grid.
إذا كانت هناك ميزة للصور أود الحصول عليها، فستكون طريقة لإضافة تسمية توضيحية، في مجتمعنا أدعو إلى الإشارة إلى الصور، وهو ليس أفضل استخدام لوصف الصورة.

8 إعجابات

ماذا عن إضافتها على الأقل كخيار اختياري في الإعدادات الأساسية بما في ذلك تحذير صريح؟ بهذه الطريقة يمكن لمسؤولي المنتدى اتخاذ هذا القرار إذا كانوا يريدون ذلك ويعرفون أنهم ينتهكون مواصفات CommonMark.

تحياتي
جونيور

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

أتفهم رغبتك هنا (لدي نفس الرغبة، أود أن تكون الصور المتعددة التي تم تحميلها تلقائيًا في شبكة دون أن يقوم المستخدم بأي شيء)، ولكن من منظور الصيانة، فإن هذا الخيار الاختياري غير قابل للتطبيق. نحن ندير آلاف مثيلات Discourse، وجعل نفس الترميز يتصرف بشكل مختلف في بعض المثيلات وليس في البعض الآخر يمكن أن يسبب كل أنواع الصداع. للأسف، لا يمكن صيانته.

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

8 إعجابات

أقوم بتشغيل هذا الكود

posts = Post.where('raw LIKE ?', '%<div>data-theme-slick="1">%')
posts.each do |p|
    p.update!(raw: p.raw.gsub(/<div>data-theme-slick="1">(.*?)<\/div>/m, '[grid]\1[/grid]'))
    p.rebake!
end

ولكن لدي خطأ

لقد حذفت الرمز (’ وأعدت كتابته ولكن لم ينجح الأمر
هل يمكنك العثور على الخطأ؟
شكرا لك!

3 إعجابات

مرحباً سورا، تحتاج أولاً إلى الدخول إلى وحدة تحكم Rails: rails c

3 إعجابات

هل يمكننا إعداد تحميل جميع الصور افتراضيًا بحيث يتم ترتيبها تلقائيًا في شبكة جميلة؟

5 إعجابات

لا أعرف ما إذا كان هذا هو السلوك المقصود، ولكن إذا أضفت صورًا إلى شبكة تكون أقل من إعدادات الحد الأقصى لعرض/ارتفاع الصورة في Lightbox، فسيتم عرضها بحجم مخفض ولكن بدون طريقة (*) لتوسيعها إلى حجمها الأصلي.

على سبيل المثال، قمت بإنشاء شبكة تحتوي على 11 صورة تم تحميلها. كانت ثمانية منها بحجم 640 × 480، أي أقل من العرض/الارتفاع الافتراضي للصورة لـ Lightbox وهو 690 × 500، وكانت الثلاثة الأخرى بحجم 1200 × 372 و 750 × 521 و 750 × 509. تم عرض الثلاثة الأخيرة باستخدام Lightbox (class=lightbox-wrapper). كانت الثمانية الأولى من فئة class=image-wrapper، لذلك تم عرضها فقط بحجم 300 × 250 تقريبًا ولم يكن من الممكن توسيعها لرؤيتها بحجمها الأصلي الأكبر.

(*) يمكن تغيير هذا السلوك عن طريق تقليل إعدادات الحد الأقصى لعرض/ارتفاع الصورة، ولكن هذا يؤثر بعد ذلك على جميع الصور الأخرى في المنتدى.

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

3 إعجابات

هل هناك أي خطط للصور في الشبكات ليتم تكرارها في رسائل البريد الإلكتروني؟

3 إعجابات

ليس في الوقت الحالي، لا. بصراحة، لا تزال تنسيقات CSS في رسائل البريد الإلكتروني تمثل صداعًا كبيرًا. تختلف عملاء البريد الإلكتروني اختلافًا كبيرًا عن بعضها البعض، ومن الصعب جدًا الحصول على أي شيء متناسق.

5 إعجابات

تم الفهم بالكامل، شكراً على التأكيد :slight_smile:

3 إعجابات

قبيحة، ولكن قد تعمل: أرسل صورة مركبة واحدة فقط لمصفوفة.

لتحسين تجربة المستخدم، يمكن أن تكون مرتبطة بالمصفوفة المناسبة على الموقع المباشر.

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