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

تكبير مصغرات الصور بدون جافاسكريبت بالمعامل 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("http://lh4.googleusercontent.com/-G9M2DTCTUwM/Tlh-2pwtc5I/AAAAAAAABKM/kCJg-Kf3W2M/s72-c/no_image_yet.jpg", 200 , "1:1")' />




التعليقات: 12

Chafik Ouadine يقول... 21 أكتوبر، 2017 5:23 م

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

Dr R.O يقول... 21 أكتوبر، 2017 6:11 م

شكرًا جزيلًا على هذه التدوينة المفيدة

جاسر الحربي يقول... 21 أكتوبر، 2017 11:17 م

حياكم الله ، شاكر لكم تسجيل المرور ج6

Mohamed Salah EL Mohammadi يقول... 15 نوفمبر، 2017 4:15 م

استاذ كبير نتعلم منك كل يوم شئ جديد
ولكن استاذى الفاضل لقد شرحت طريقة التطبيق على رابط الصور
ولكن لم تشرح طريقة تطبيقها على وسم بيانات التخطيط مثل

ايضا اذا امكن ان تشرح لنا اضافة هذا الكود المستخدم فى هذا الزر لانى بحثت عنه كثيرا ولم اجده الى فى اضافة بلوجر الرسيمة المدموجه فى القالب وانا ارغب فى اضافتة فى امكان اخرى او تغير شكله التقليدى مثلما يوجد فى مدونتك استاذى.
[img]https://lh4.googleusercontent.com/_7QkA1GqKTpo/TZGlC_nryBI/AAAAAAAAAWw/ipmUIw3keEs/s128/email.png[/img]

اعزرنى على كثرة الاسئلة ولكنى مازلت تلميذ اتعلم منك استاذى
شكرا جزيلا مقدما وبارك الله فيك..

جاسر الحربي يقول... 15 نوفمبر، 2017 9:53 م

أهلاً بك

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

أما ايقونات المشاركة فتفضل هذا هو الكود الذي استخدمه في مدونتي كاملاً :

https://jsbin.com/behuwuc/edit?html,output


تحياتي العاطرة ع5

Mohamed Salah EL Mohammadi يقول... 16 نوفمبر، 2017 12:31 ص

نعم استاذى الفاضل ما اقصدة هو كيفية
وضع كود وسم بيانات التخطيط التالى [code] [/code]
بدلا من رابط الصورة فى الكود التالى ؟
[code]

[/code]

لقد ذكرت ان هذا الطريقة أسرع لأن تأثيرها مباشر في موضع الصورة


وشكرا جزيلا على كود المشاركة وسرعة الرد والاستجابة لك كل التقدير والاحترام استاذى

جاسر الحربي يقول... 16 نوفمبر، 2017 12:59 ص

استخدم زر [color="blue"]" ترميز HTML"[/color] ليظهر نافذة لترميز الكود ثم انشره في التعليق حتى يمكن رؤية الكود

Mohamed Salah EL Mohammadi يقول... 16 نوفمبر، 2017 1:36 ص

هذا هو الكود استاذى

[img]https://c.top4top.net/p_684ql1ou1.jpg[/img]

اريد تطبيقه على صور المشاركات الشائعة الخاصة ببلوجر
فقد ذكرت ان هذا الطريقة أسرع لأن تأثيرها مباشر في موضع الصورة

مثل ما تفضلت شاكرا وشرحت سابقا فى هذا الموضوع الطريقة بالتفصيل

[url="http://www.alblogger.com/2013/12/blogger-thumbnail.html
"]إضافة: تكبير مصغرات صور بلوقر مع الحفاظ على جودتها ![/url]

جاسر الحربي يقول... 16 نوفمبر، 2017 3:09 م

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

[url="http://jsbin.com/sewojin/edit?html,output"]كود إضافة تنسيق المشاركات الشائعة .. كاملاً[/url]



تحياتي ت1


جاسر الحربي يقول... 16 نوفمبر، 2017 3:13 م

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

Mohamed Salah EL Mohammadi يقول... 17 نوفمبر، 2017 11:26 ص

بارك الله فيك استاذى ، شكرا جزيلا..

جاسر الحربي يقول... 17 نوفمبر، 2017 8:53 م

وفيك بارك الله ... أهلاً بك

إرسال تعليق