صور متحركة على Discourse

:discourse2: الملخص يضيف Discourse Gifs زرًا إلى المحرر يتيح لك البحث عن صور متحركة (GIFs) وإضافة الأنسب منها بسهولة إلى منشورك.
:hammer_and_wrench: رابط المستودع https://github.com/discourse/discourse-gifs
:open_book: جديد في سمات Discourse؟ دليل المبتدئين لاستخدام سمات Discourse

تثبيت مكون السمة هذا

الميزات

بعد البحث، ستحصل على جدار لا نهائي من الصور المتحركة ذات الصلة:

recording

النقر على واحدة منها يقوم بإدراجها في المحرر الحالي، والذي يبدو كالتالي:

shut up and take my money GIF by Product Hunt

يعتمد هذا بشكل كبير على نسخة مشتقة قديمة من ReplyGif: إضافة صور ردود فعل متحركة بسهولة، لذا شكرًا لـ @cpradio.

الاختلافات الكبيرة هي:

  • يمكنه استخدام ملفات WebP متحركة بدلاً من ملفات GIF، مما يجعله أكثر كفاءة من حيث استهلاك النطاق الترددي.
  • إنه مكون سمة، مما يجعل تثبيته وتحديثه أسهل بكثير.
  • يوفر خيار استخدام واجهة برمجة تطبيقات Giphy أو واجهة برمجة تطبيقات Tenor.
  • التمرير اللانهائي للنتائج.
  • يتم تنزيل الصور المتحركة الناتجة إلى Discourse باستخدام حماية Bitrot الأصلية لدينا. يمكنك تعطيل هذا السلوك باستخدام الإعدادات الحالية إذا كانت مساحة التخزين مصدر قلق.
  • لا حاجة للعبث بـ nginx لإعداد وكيل لبروتوكول HTTPS.

الحصول على مفتاح واجهة برمجة تطبيقات Giphy

لكي يعمل المكون، تحتاج إلى زيارة Dashboard | GIPHY Developers والنقر كما يلي:

املأ النموذج وسيتم عرض مفتاح واجهة برمجة التطبيقات كما يلي:

الحصول على مفتاح واجهة برمجة تطبيقات Tenor

احصل على هذا المفتاح من الموقع الرسمي لـ Tenor: GIF API - أفضل، أسرع ومجاني | احصل على صورك المتحركة مع Tenor

بعد ذلك، قم بزيارة صفحة مكون السمة في Discourse واملأ الإعدادات، على سبيل المثال:

الإعدادات

الاسم الوصف
api provider أي مقدم خدمة GIF نستخدم؟
giphy api key GIPHY: مفتاح واجهة برمجة التطبيقات
giphy file format GIPHY: تنسيق الصورة المراد استخدامه. تتميز ملفات WEBP بحجم أصغر وتحميل أسرع بينما توفر ملفات GIF التوافق مع المتصفحات القديمة.
giphy content rating GIPHY: تصنيف المحتوى لنتائج البحث. اعثر على مزيد من المعلومات في https://developers.giphy.com/docs/optional-settings#rating .
giphy locale GIPHY: اللغة المستخدمة في البحث. تُستخدم لتكييف البحث مع المحتوى الإقليمي. اضبطها على لغة المنتدى الافتراضية لديك.
limit infinite search results حد عدد نتائج GIF المعادة أثناء التمرير اللانهائي للمستخدم لمنع تجاوز حدود معدل الـ API.
max results limit Tenor & GIPHY: عند تمكين “limit infinite search results”، سنبحث حتى نحصل على هذا العدد الأقصى من نتائج GIF. يسترجع كل استدعاء لواجهة برمجة التطبيقات 24 نتيجة، على سبيل المثال: الحد الأقصى 240: 240 / 24 = 10 استدعاءات لواجهة برمجة التطبيقات .
tenor api key Tenor: مفتاح واجهة برمجة التطبيقات V2. يمكن العثور على تعليمات الحصول عليه في Discourse Meta - Discourse Gifs .
tenor client key Tenor: (اختياري) سلسلة يحددها العميل تمثل التكامل
tenor file detail Tenor: تنسيق الصورة المراد استخدامه
tenor content filter Tenor: مستوى أمان المحتوى لنتائج Tenor. اعثر على مزيد من المعلومات في Tenor API Guides .
tenor country Tenor: رمز البلد المكون من حرفين لمنشأ الطلب. اعثر على رمز بلدك في Wikipedia - ISO_3166-1 .
tenor locale Tenor: اللغة المستخدمة في البحث. يمكن توفير رمز البلد (اختياري) للتمييز بين اللهجات.
الترجمة الافتراضي
gif.modal_title البحث عن صور GIF
gif.query المصطلح
gif.insert إدراج الصور المحددة
gif.composer_title البحث عن صور GIF
gif.no_results أدخل كلمة مفتاحية في مربع الإدخال أعلاه للبحث عن صور GIF.
gif.bad_api_key مفتاح واجهة برمجة التطبيقات $api_provider غير صالح. أيها المسؤولون عن الموقع، يرجى التحقق من مفتاحك و/أو حسابك على $api_provider.
gif.error_rate_limit لقد وصلنا إلى حدود معدل واجهة برمجة التطبيقات $api_provider. يرجى الانتظار والمحاولة مرة أخرى لاحقًا. إذا استمرت هذه المشكلة، اتصل بمسؤول الموقع.
gif.error_search_too_long يرجى تقصير استعلام البحث الخاص بك ليصبح أقل من 50 حرفًا والمحاولة مرة أخرى.

:discourse2: مُستضاف لدينا؟ تتوفر مكونات السمات للاستخدام في خططنا القياسية، والأعمال، والمؤسسات.

84 إعجابًا

مرحبًا @Heather_Dudley،

لقد أضفت إعداد موقع جديد يتيح لك إجبار المكوّن على استخدام تنسيق GIF بدلاً من WebP.

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

هذه الصورة المتحركة GIF:

GIF: 3.5 ميجابايت
giphy

WEBP: 1.4 ميجابايت
Detective Pikachu Reaction GIF

MP4: 1 ميجابايت

AVIF: 276.8 كيلوبايت

بالنسبة لباقي الجميع، أضفت التركيز التلقائي على نافذة البحث!

17 إعجابًا

رائع، شكرًا جزيلاً لك! كنت أبحث عن ميزة مثل هذه :slight_smile:

3 إعجابات

أين الإعداد، @Falco؟ لم أستطع العثور عليه لتفعيله.

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

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

حسنًا، إذن أنا لست أعمى، فليس لدي هذا الخيار. لدي فقط مفتاح API:

المستودع المرتبط بي: https://github.com/discourse/discourse-gifs/tree/giphy

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

أوه، لقد تم تثبيتك في الفرع القديم، أعد التثبيت باستخدام الفرع الرئيسي من GitHub - discourse/discourse-gifs · GitHub

3 إعجابات

آه، هذا سيُحل المشكلة. شكرًا لك. لا أتوقع وجود مشاكل، لكن سأخبرك إذا واجهت أيًا منها!

4 إعجابات

أليس من الممكن استخدام منصة Tenor التابعة لـ Google؟ بعد أن استحوذت فيسبوك على Giphy، توقفت عن استخدامها وانتقلت إلى Tenor.

3 إعجابات

استخدم هذا المكون Tenor في الإصدار الأول، لكنني انتقلت إلى Giphy لأن استخدام صور GIF بصيغة WEBP أفضل بكثير من حيث سهولة الاستخدام مقارنة بالFormats الأخرى. كما أن Tenor لا يدعم صور GIF بصيغة WEBP.

4 إعجابات

سخرية من الواقع، خاصةً إذا أخذنا في الاعتبار من أنشأ صيغة WebP، ومن يملك Tenor الآن.

8 إعجابات

ربما يتجهون مباشرة إلى صيغة AVIF المتحركة؟ فهي متاحة بالفعل في Chrome، وستصبح قريبًا في جميع المتصفحات الحديثة.

أضفتها إلى هذا المنشور أعلاه، وحجم الملف مذهل:

5 إعجابات

كيف تسير عملية تطوير هذا التنسيق؟ كم من الوقت تعتقد أن الأمر سيستغرق حتى تتبناه الشركات الأخرى (بما في ذلك discourse :wink:

إعجابَين (2)

يمكن لـ Discourse دعم ذلك بسهولة بمجرد توفر دعم المتصفح: AVIF image format | Can I use... Support tables for HTML5, CSS3, etc

4 إعجابات

شكرًا لـ @eviltrout، نقوم الآن بعرض زر GIF في مكان أفضل على الجوّال، لذا لن يحدث هذا الأمر بعد الآن!

10 إعجابات

شكرًا لك يا @Falco، هل من الممكن إخفاء زر GIF أثناء معاينة الرسالة؟


شكرًا لك

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

لست على دراية كافية بمكونات السمات، هل من الممكن تمكين هذا في فئة واحدة فقط؟

لدينا فئة عشوائية / غير رسمية / ممتعة حيث سيكون هذا إضافة رائعة، ولكن إذا أضفتها إلى جميع الفئات، فسوف يتحول الأمر إلى فوضى :rofl:

4 إعجابات

يمكنك تجربة استخدام CSS، ولكن نظرًا لأن المصنف يظل مفتوحًا عند التنقل في المنتدى، فلا أعتقد أن ذلك سيعمل بنسبة 100٪.

سيكون الأمر شبيهًا بهذا:

:not(.category-your_category_id) .d-icon-discourse-gifs-gif-icon {
    display: none
}
4 إعجابات

فكرة رائعة. تم إضافتها في الإصدار الأخير، يرجى التحديث!

8 إعجابات

هذا رائع! عمل رائع، لقد أضفت للتو هذا إلى منتداي!

4 إعجابات