تكبير مصغرات الصور بدون جافاسكريبت بالمعامل 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")' />




التعليقات: 16

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 م

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

Mohamed Salah EL Mohammadi يقول... 1 يناير 2018 8:10 ص

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

هذا صورة توضح لك ما اقصد بشكل اوضح
https://www.gulf-up.com/01-2018/1514783231381.jpg

اتمنى ان تكون فهمت الان ما اقصد واتمنى ان تجد لنا حل لتك المشكلة الكبيرة ، شكرا لك..

جاسر الحربي يقول... 4 فبراير 2018 10:03 ص

موجودة .. بعد إظهار الموقع من لوحة التخطيط كما في الصورة التي أرفقها، فعليك في صفحة تحرير التدوينة اختيار المكان عبر الخريطة أو البحث ليرفق الموقع تلقائياً

Mohamed Salah EL Mohammadi يقول... 8 فبراير 2018 8:38 ص

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

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

شكرا لك..

جاسر الحربي يقول... 12 فبراير 2018 1:25 م

حياك الله ..

جربت قالب رسمي SOHO وقالب emporio ولا توجد أي مشكلة !


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

[img]https://4.bp.blogspot.com/--fFwJ_BKWNA/WoFqIKDGDII/AAAAAAAAB4I/xxDdghF02WY6B6rYDE4MzLpidoI_usY0ACLcBGAs/s1600/location-enabled.png[/img]

أو جرب متصفح آخر وعند ظهور رسالة السماح للتعرف على الموقع وافق على الرسالة

أما القوالب المعدلة فلا يمكن الحكم عليها فكل مطور يحذف ويضيف ما يشاء ، تعليقي فقط على القوالب الرسمية

إرسال تعليق