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) - هذا الرمز ينطبق فقط على الصور المصغرة. بالنسبة للصور المتوسطة ، يمكنك استبدال "size-thumbnail" بـ "size-medium", وللحجم الكبير مع "الحجم الكبير".

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

إذا كنت تريد القياس إلى 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( $الأحجام, مجموعة(
        'quarter-width' => __("عرض الربع"),
    ) );
}

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

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

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 لجعل هذه الوظيفة عامة بالكامل, لكنني لم أفعل ذلك عندما كنت أطوره ، لذا سأترك ذلك لك لمعرفة ذلك!

نصيحة أخيرة

إذا, مثلي, تقوم بإنشاء مجموعتك الكاملة من أحجام الصور الجديدة, قد لا ترغب في ووردبرس لإنشاء أحجام مخفية إضافية خاصة به. بالإضافة إلى الصورة الأصلية, والصورة المصغرة, الوسيط, والصورة الكبيرة, وورد أيضا إنشاء "الصورة المصغرة اللاحقة", "متوسط ​​كبير", a 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($الأحجام, ["ما بعد الصورة المصغرة"]);
});

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

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

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

لاحظ كيف تنتج العروض المحددة ارتفاعات عدد صحيح للجميع 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 يصل في المتصفح في المستقبل القريب, سيتم حل الكثير من هذا.