تكبير مصغرات الصور بدون جافاسكريبت بالمعامل rsizeImage

  بلوجر الجديدة فيها الكثير من التغييرات والخصائص الجديدة، ومن بينها المعامل (resizeImage Operator) الذي يتعامل مع رابط الصور القابلة للتغيير، وطبعاً جميع الصور التي ترفع عن طريق مدونات بلوجر أو صور قوقل أو بيكاسا سابقاً هي صور قابلة للتغيير (re-sizable images)؛ لأنها تتضمن عوامل في رابط الصور تتحكم في أحجامها بحيث يتم عرض الصورة بالحجم الذي يتناسب مع مكان ظهورها، فإضافات الخلاصات كلها تستخدم العامل S72-c وعند تكبير الصورة ب CSS ستتشوه وتظهر بجودة سيئة، الطريقة السابقة كانت بالجافاسكريبت استعرضتها في هذه التدوينة: إضافة: تكبير مصغرات صور بلوقر مع الحفاظ على جودتها  وهي ناجحة ولكن الطريقة الجديدة أفضل ولا أشك في أنها أسرع لأن تأثيرها مباشر في موضع الصورة

صورة توضح تأثير معامل resizeImage

بناء المعامل resizeImage  

يتكون تركيب الإضافة للمعامل resizeImage كالتالي:

resizeImage( imageUrl, newSize, Ratio)

resizeImage ←  معامل التأثير الذي سيدخل على رابط الصورة ويغير حجمها.

imageURL ← رابط الصورة ، إما رابط مباشر في صورته الصريحة ، أو وسم بيانات التخطيط (Layout Data Tag) مثل  <data:post.thumbnail>  وهي الأكثر استخداماً ربما، لا تنس وضع علامتي التنصيص حول رابط الصورة إذا كانت رابط مباشر.

newSize ← الحجم المطلوب وهو هنا يمثل عرض الصورة بالبيكسل طبعاً !

Ratio ← اختياري، وهو يحدد نسبة العرض إلى الطول، في حال كانت نسبة صغيرة ستظهر الصورة مقصوصة ( محتصدة كما هي الترجمة العربية في فوتوشوب! ) ، يجب أن يكون بين علامتي تنصيص!

طريقة الاستعمال

هناك خيارات متعددة لإدخال هذا المعامل على الصور، في قوالب بلوجر الجديدة تستخدم بشيء من التعقيد ( ليس صعباً ) ولكن سأتعرض صورة بسيطة وهي إدخال المعامل على خاصية مصدر الصورة SRC مباشرة :

<img expr:src='resizeImage( imageUrl,  newSize,  Ratio)' />

تذكر أن كل تغيير تدخله على أي خاصية في أي  وسم في قالب بلوجر يجب أن تسبق اسم الخاصية بعلامة التعبير expr وهي تعني أن ثمة حسابات داخل هذه الخاصية قبل ترجمتها !

وهذا مثال: 

<img expr:src='resizeImage("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgd_g0llN3d8O9O1a_9LA-TFhasqkhuazjbz8j01AII95clNLS1VUPg9KSnpxOyQW-jqCi0FACoWuN9fzU-mx9rztOgcI9fjB3A_0110-8DOn4gL916a1G8X7trwsa4Hu1xDWdDrj9vP2g/s72-c/no_image_yet.jpg", 200 , "1:1")' />