DIY وسائل الإعلام الرئيسية الشعار

الموقع النهائي لتصميم وإنشاء مسرح منزلي الخاص ومرحبا فاي الإعداد الخاصة.

0شعار ووردعرض الصورة المكبرة على التمرير في وورد

كجزء من التحسينات الأخيرة التي أجريتها على العديد من مواقع الويب ، أردت أن تجعل الصور في المعارض تُظهر نسخًا مكبرة عند تمرير مؤشر الماوس فوقها. القيام بذلك مع الأساسيات CSS تافهة إلى حد ما, لكني لم أرغب فقط في توسيع الصورة الأصلية, كنت أرغب في الحصول على متصفح جديد (أكبر) الصورة أيضا…

توفر جميع الصور بالفعل مجموعة src كاملة ، لذا كل ما احتجت إلى فعله هو استخدام القليل من jQuery (الذي تم تحميله بالفعل بواسطة وورد على أي حال) لتغيير حجم العرض المستهدف لجعل المتصفح يسحب صورة أكبر. الشيء الجميل هو أن CSS يعمل على الفور حتى تحصل على صورة أكبر باستخدام الملف الأصلي, ثم تتحسن الجودة في جزء من الثانية لاحقًا حيث يتم تحميل الملف عالي الدقة.

ال CSS

ال CSS كنت على النحو التالي. لقد أضفت هذا ببساطة إلى style.css لموضوعي (أو بالأحرى موضوع الطفل – دائما فكرة جيدة لاستخدام واحد)

dt.gallery-icon a img.size-thumbnail:يحوم
{
تحول: مقياس(3.0);
}

ملحوظة (1) – الأعلى CSS ينطبق على صور المعرض فقط. من غير المحتمل أن يرغب أي شخص في الحصول على هذه الوظيفة لجميع الصور المعروضة في أي مكان على الصفحة, ولكن قد ترغب في ذلك لقسم المحتوى الرئيسي. سوف تحتاج إلى التحقق من كيفية بناء الموضوع الخاص بك, ولكن في حالتي ، فإن مجال المحتوى الرئيسي هو ملف “الجزء” لذا فإن الكود التالي سيفي بالغرض

section.entry-content p a img.size-thumbnail:يحوم
{
تحول: مقياس(3.0);
}

ملحوظة (2) – هذا الرمز ينطبق فقط على الصور المصغرة. للصور المتوسطة سوف تحل محل “حجم الصورة المصغرة” مع “حجم متوسط”, وللحجم الكبير مع “الحجم الكبير”.

ملحوظة (3) – نظرًا لأن الصور المصغرة الخاصة بي تبلغ 120 × 80 بكسل ، فأنا أريد زيادتها إلى 3 أضعاف حجمها الأصلي. لدي بالفعل حجم صورة مخصص يبلغ 360×240 التي يخلقها ووردبرس لي والتي تم تضمينها في مجموعة src. بالنسبة للشاشات عالية الدقة ، هناك أيضًا أحجام صور أكبر لدي (e.g. 720×480). من السهل إنشاء أحجام صور إضافية في ووردبريس – هناك الكثير من الأدلة الجيدة على الإنترنت إذا كنت بحاجة إلى القيام بذلك.

إذا كنت تريد القياس إلى 1.5x أو 2.0x ، فقم بتغيير ملف 3.0 حسب الرغبة

مسج

أضف ما يلي إلى ملف (طفل) ملف البرنامج النصي للسمة (على افتراض أن لديها واحدة). إذا لم يكن لديه واحد, إنشاء الخاصة بك, و "قائمة’ مع وظيفة مخصصة في ملف (طفل) وظائف السمة .php

مسج(وثيقة).جاهز(وظيفة(){

  مسج("dt.gallery-icon a img.size-thumbnail").يحوم(وظيفة(){
    مسج(هذا).أتر("الأحجام","(ماكس العرض: 360بكسل) 100فولكس فاجن, 360بكسل");
    }, وظيفة(){
    مسج(هذا).أتر("الأحجام","(ماكس العرض: 120بكسل) 100فولكس فاجن, 120بكسل");
  });

  //كرر ما ورد أعلاه 5 خطوط هنا لكل حجم صورة مختلف تريد تعديله

});

يتم تطبيق الكود أعلاه على الصور المصغرة للفئة الموجودة داخل أي dt مع فئة رمز المعرض – هكذا بكلمات أخرى – فقط للصور داخل هيكل معرض WordPress المدمج. عند التمرير ، يتم زيادة الحد الأقصى للعرض من 120 إلى 360 (زيادة 3 أضعاف لتتناسب مع CSS!), ثم يستعيد الجزء الثاني من الوظيفة الأصل 120 العرض عند توقف التمرير.

كما هو الحال مع CSS فوق, يمكنك ضبط الأرقام لتغيير مقدار تكبير الصورة, ويمكنك تغيير dt.gallery-icon a img.size-thumbnail لاستهداف عنصر أو فئة مختلفة بناءً على الصور التي تريد استهدافها.

قائمة بالبرنامج النصي الخاص بك

إذا لم يكن مظهرك يحتوي على ملف نصي وتحتاج إلى إدراج ملفك في قائمة الانتظار ، فأضف ما يلي إلى ملف (طفل) وظائف السمة .php (بافتراض أنك استدعت ملف البرنامج النصي image-zoom.js وحفظته في المجلد الجذر للموضوع)

wp_register_script( "تكبير / تصغير", get_stylesheet_directory_uri() . "/image-zoom.js", مجموعة( "مسج" ), '', حقيقية);
wp_enqueue_script( "تكبير / تصغير" );

ما ورد أعلاه سوف يسجل البرنامج النصي الخاص بك, في التذييل, التأكد من وضعها بعد المسج (لذلك يجب أن يكون jquery متاحًا بالفعل عند تنفيذه)

مضيفا أحجام الصور

للتأكد من اكتمالها ، إليك كيفية إضافة أحجام صور مخصصة إلى ووردبرس. مرة أخرى, أضف هذا إلى الخاص بك (طفل) وظائف السمة .php

add_image_size( "عرض ربع", 192, 144, خاطئة );

لقد أضفت أعلاه حجم صورة جديدًا يسمى “عرض ربع” بعرض أقصى يبلغ 192 بكسل وارتفاع أقصى قدره 144 بكسل. لن يتم اقتصاص الصورة (ومن هنا الخطأ في النهاية).

سيقوم WordPress الآن بإنشاء صور بهذا الحجم تلقائيًا عند تحميل الصور (ستحتاج إلى استخدام ملحق إعادة إنشاء الصورة المصغرة لإعادة إنشاء الصور المصغرة للصور التي تم تحميلها بالفعل).

ومع ذلك ، لن يظهر حجم الصورة الجديد هذا للإدراج في المحرر. لجعله متاحًا ، أضف أيضًا الكود التالي إلى function.php الخاص بك

وظيفة my_custom_image_sizes( $الأحجام ) {
    إرجاع array_merge( $الأحجام, مجموعة(
        "ربع العرض" => __("عرض الربع"),
    ) );
}

احترام الإعدادات الموجودة

شيء آخر قد ترغب في القيام به (لضمان استجابة الصور تعمل بشكل جيد) هو خلق أكبر (بمعنى آخر. مرحبا نقطة في البوصة) أحجام الصور المصغرة التي تحترم واجهة المستخدم الرسومية حول اقتصاص الصور المصغرة أم لا. للقيام بذلك ، استخدم الكود أدناه الذي تم تعديله قليلاً كما سترى من الرمز الأساسي أعلاه

add_image_size( "Resp-thumb-2x", (get_option( "thumbnail_size_w" ) == 0 ? 0 : "240"), 160, get_option( "thumbnail_crop" ) );

يتحقق الرمز أعلاه من 2 أشياء – أولاً ، يتحقق لمعرفة ما إذا تم تعيين خيار الاقتصاص, وإذا كان كذلك, إنها تعكسها لحجمنا الجديد المتجاوب. يتحقق أيضًا لمعرفة ما إذا كان العرض مضبوطًا على 0 (بمعنى آخر. لا يوجد حد أقصى) في هذه الحالة ، لن يكون لصورتنا الجديدة أيضًا حد أقصى. اتصلت بحجم الصورة الجديد “Resp-thumb-2x” لأنها "متجاوبة’ نسخة من الصورة المصغرة بحجم ضعفها (للشاشات عالية الدقة مع ضعف كثافة البكسل العادية). لقد قمت أيضًا بإنشاء عدد من الأحجام الأخرى لعمل مجموعة كاملة إلى حد ما.

ملحوظة – نظرًا لأن الصور المصغرة الأصلية كانت 120×80 أريد أن يصبح أعمالي الجديدة 240×160 هذه هي الأحجام التي حددتها (الثابت). سيكون من الممكن الحصول على الطول والعرض المحددين للصورة المصغرة الأصلية وضربهما في كلاهما 2 لجعل هذه الوظيفة عامة بالكامل, لكنني لم أفعل ذلك عندما كنت أطوره ، لذا سأترك ذلك لك لمعرفة ذلك!

نصيحة أخيرة

إذا, مثلي, تقوم بإنشاء مجموعتك الكاملة من أحجام الصور الجديدة, قد لا ترغب في ووردبرس لإنشاء أحجام مخفية إضافية خاصة به. بالإضافة إلى الصورة الأصلية, والصورة المصغرة, المتوسط, والصورة الكبيرة, وورد أيضا إنشاء ملف “بعد الصورة المصغرة”, ا “متوسط ​​كبير”, أ 1536×1536 و 2048×2048. تم تعطيل هذه في 2 طرق مختلفة…

لإزالة ملف 1536 و 2048 الصور مباشرة إلى الأمام

remove_image_size( "1536 × 1536" ); //مسح ال 1536 we dont need it
remove_image_size( "2048 × 2048" ); //مسح ال 2048 نحن لسنا في حاجة إليها

يعد ما بعد الإبهام والمتوسط ​​الكبير أكثر تعقيدًا بعض الشيء

//remove the built-in medium-large
add_filter("أحجام_صورة_متوسطة", وظيفة($الأحجام) {
    إرجاع array_diff($الأحجام, ["متوسط_كبير"]);
});

//remove the built-in post-thumbnail
add_filter("أحجام_صورة_متوسطة", وظيفة($الأحجام) {
    إرجاع array_diff($الأحجام, ["ما بعد الصورة المصغرة"]);
});

لاحظ أن إزالة الصورة المصغرة اللاحقة تبدو أحيانًا لها تأثيرات غريبة على مكتبة الصور في المحرر.

ملاحظة أخيرة واحدة

عند اتخاذ قرار بشأن أحجام الصور (للصور الأكبر حجمًا, أقل من الصور المصغرة) تريد بشكل مثالي حجمًا يتم تغيير حجم صور نسبة العرض إلى الارتفاع الشائعة إليه دائمًا. لهذا السبب أوصي بالمقاسات التالية

بحجمعرضارتفاع (4:3)ارتفاع (16:9)ارتفاع (3:2)
ربع192144108128
ثالث288216162192
نصف384288216256
متوسط576432324384
ممتلىء768576432512
كبير1152864648768
XL153611528641024

لاحظ كيف تنتج العروض المحددة ارتفاعات عدد صحيح للجميع 3 من أكثر نسب العرض إلى الارتفاع شيوعًا. لن تحصل على ذلك بعروض مثل 150 أو 200.

لاحظ أيضًا النمط في الزيادات. القفز 2 صفوف في الجدول ويتضاعف الحجم! الصفوف الزوجية (288,576,1152 و 1535) هي أيضًا 1.5x الحجم السابق ، لذا فهي تعمل جيدًا على الشاشات شبه عالية الدقة باستخدام ملف 50% زيادة نقطة في البوصة. باستخدام هذه المجموعة من 7 الأحجام لديك مجموعة جيدة من الخيارات القابلة للاستخدام لمعظم منافذ العرض ومجموعة جيدة من الصور المتجاوبة التي ستضيفها Wordpress تلقائيًا إلى مجموعة src نظرًا لأنها ستحتوي على نسب عرض إلى ارتفاع متسقة مع عدم وجود كسور قد تؤدي إلى فقدان الجودة أو اقتصاصها.

حاليًا بالنسبة للصور المصغرة ، أميل إلى السماح بعرض غير محدود أو من الصعب اقتصاصها 3:2 النسبة لذلك أستخدم أحجام الأرقام الكاملة للصور المصغرة ، لكنني قد أقوم في النهاية بتعديل السمة الخاصة بي وتوسيع النظام أعلاه للخلف من خلال الحصول على الخيارين 48 بكسل و 96 بكسل (لاحظ أنه لا توجد قيمة بين هذه 2 هذا من شأنه أن يعمل للأسف – وبما أنني أستخدم صورًا مصغرة صغيرة بعرض 60 بكسل ، لم أختر تمديدها للخلف). 72سوف تعمل بكسل لكليهما 4:3 و 3:2 (و 64 بكسل مع 4:3 و 16:9). نظرًا لأن غالبية صوري يتم التقاطها على كاميرا DSLR الخاصة بي ، فهذه عادةً 3:2 (نفس نسبة العرض إلى الارتفاع للفيلم التقليدي 35 ملم) حتى أتمكن من استخدام هذا الحجم أيضًا, والتي ستعمل بعد ذلك مع الأحجام الكبيرة على طول الطريق, ولكن لا يتم اقتصاص الأحجام الأكبر بينما الصور المصغرة الخاصة بي – يسعدني أن تكون الصور الأكبر حجمًا أفقيًا وعموديًا, لكني أريد أن تكون الصور المصغرة أفقية فقط لتناسب تصميمي, لهذا السبب لم أتراجع إلى الوراء. نأمل أن يتوفر المزيد والمزيد من الشعارات مثل SVG'ق, و لمرة واحدة JPEG-XL يصل في المتصفح في المستقبل القريب, سيتم حل الكثير من هذا.

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

اترك رد