كيفية تقديم الصور على AMP Blogger

الاختلاف الأكثر وضوحًا من نماذج AMP وغير AMP هو كتابة رمز الصورة من المعتاد ، إذا بشكل عام لعرض الصور باستخدام العلامة <img ... /> ، فإن الكتابة على قالب AMP تكون على النحو التالي:

<amp-img alt='alt-image-disini' title='judul-image-disini' src='url-image-disini' width='xxx' layout='responsive' height='xxx'/>

تتضمن بعض خيارات التخطيط المتاحة ما يلي:

ملء ، ثابت ، ارتفاع ثابت ، عنصر مرن ، عرض عقدي ، سريع الاستجابة

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

استخدام علامة <noscript> (اختياري)

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

نظرًا لأن المتصفح أكثر تعقيدًا في الوقت الحالي ، لم يعد هناك حاجة إلى استخدام علامة <noscript> ، بما في ذلك كتابة الصور على نموذج مدون AMP ، على الرغم من أنه بدون هذه العلامة ، ستظل الصورة تظهر فقط على Blogger ، وقراءة الصور فقط باستخدام العلامة <img ... / > ، ونتيجة لذلك لن تظهر الصور المصغرة للمشاركات على الصفحة الرئيسية.

تم إصلاح صورة مصغرة لم تظهر في AMP في Blogger

لعرض الصور المصغرة على المدون ، تحتاج إلى علامة <noscript> ... </noscript> ، لكنك لست بحاجة إلى إضافة هذه العلامة إلى كل صورة في المقالة.

أضف هذه العلامة مرة واحدة فقط إلى الصورة التي تريد إنشاء صورة مصغرة لها بحيث يصبح الرمز بالكامل كما يلي:

<amp-img alt='alt-image-disini' title='judul-image-disini' src='url-image-disini' width='xxx' layout='responsive' height='xxx'/>
<noscript><img alt='alt-image-disini' title='judul-image-disini' src='url-image-disini'/></noscript>