DIY میڈیا ہوم علامت

اپنے گھر تھیٹر اور ہائی فائی سیٹ اپ کے ڈیزائن اور پیدا کرنے کے لئے الٹی سائٹ.

0ورڈپریس علامتورڈپریس میں ہوور پر بڑھی ہوئی تصویر دکھائیں

حالیہ بہتری کے ایک حص Asے کے طور پر ، میں مختلف ویب سائٹوں میں کر رہا ہوں ، میں گیلریوں میں تصاویر بنانا چاہتا تھا جب چھپ جاتا ہے تو. بنیادی کے ساتھ ایسا کرنا سی ایس ایس کافی چھوٹی سی ہے, لیکن میں صرف اصلی امیج کو بڑھانا نہیں چاہتا تھا, میں چاہتا تھا کہ براؤزر نیا لے لے (بڑا) تصویر بھی…

تمام تصاویر پہلے ہی ایک مکمل src-set فراہم کررہی ہیں لہذا مجھے بس تھوڑا jQuery استعمال کرنا تھا (جو پہلے ہی ویسے بھی ورڈپریس کے ذریعے بھری ہوئی ہے) براؤزر کو ایک بڑی تصویر کھینچنے کیلئے ٹارگٹ ڈسپلے سائز کو تبدیل کرنے کیلئے. اچھی بات یہ ہے کہ سی ایس ایس فوری طور پر کام کرتا ہے لہذا آپ کو اصل فائل کا استعمال کرتے ہوئے ایک بڑی تصویر مل جائے, اور پھر اعلی ریز فائل میں بوجھ پڑنے کے ساتھ ہی معیار بعد میں دوسرے حص .ے میں بہتری لاتا ہے.

The سی ایس ایس

The سی ایس ایس میں استعمال کیا جاتا ہے مندرجہ ذیل ہے. میں نے اسے اپنے تھیم کے اسٹائل سی ایس ایس میں آسانی سے شامل کیا (یا بلکہ چائلڈ تھیم – ہمیشہ استعمال کرنے کے لئے ایک اچھا خیال ہے)

dt.gallery-icon ایک img.size-thumbnail:ہوور
{
تبدیل: پیمانہ(3.0);
}

نوٹ (1) – اوپر سی ایس ایس صرف گیلری ، نگارخانہ کی تصاویر پر لاگو ہوتا ہے. اس کا امکان نہیں ہے کہ کوئی بھی اس صفحے پر کہیں بھی دکھائی جانے والی تمام تصاویر کے ل for اس فعالیت کو چاہے, لیکن آپ یہ اہم مواد والے حصے کے لئے چاہتے ہیں. آپ کو یہ دیکھنا ہوگا کہ آپ کا تھیم اس کی تشکیل کیسے کرتا ہے, لیکن میرے معاملے میں مرکزی مواد کا علاقہ ایک ہے “سیکشن” تو درج ذیل کوڈ کام کرے گا

سیکشن.ینٹری - p p ایک img.size-thumbnail:ہوور
{
تبدیل: پیمانہ(3.0);
}

نوٹ (2) – یہ کوڈ صرف تھمب نیل کی تصاویر پر لاگو ہوتا ہے. درمیانی تصاویر کے ل you آپ کی جگہ لے لے گی “سائز تھمب نیل” کے ساتھ “سائز میڈیم”, اور بڑے کے ساتھ “سائز بڑے”.

نوٹ (3) – کیونکہ میرے تھمب نیلز 120x80px ہیں میں ان کو بڑھاکر ان کے اصلی سائز میں 3x کرنا چاہتا ہوں. میرے پاس پہلے سے ہی ایک سائز کی کسٹم 360 ہے×240 وہ ورڈپریس میرے لئے تخلیق کرتی ہے جو ایس سی آر سیٹ میں شامل ہے. ہائ-ڈی پی آئی اسکرینوں کے لئے ، میرے پاس موجود حتی کہ بڑے حجم کے سائز بھی ہیں (مثلا. 720×480). ورڈپریس میں اضافی تصویری سائز کی تشکیل آسان ہے – اگر آپ کو ایسا کرنے کی ضرورت ہو تو بہت سارے اچھے رہنما موجود ہیں.

اگر آپ اسکیل کرنا چاہتے ہیں تو 1.5x یا 2.0x آسان تبدیل کریں 3.0 جیسا چاہا

jQuery

درج ذیل کو اپنے میں شامل کریں (بچہ) تھیم کی اسکرپٹ فائل (فرض کر کے اس میں ایک ہے). اگر اس کے پاس نہیں ہے, اپنا خود بناؤ, اور ‘اینکیو’ اس میں ایک کسٹم فنکشن کے ساتھ (بچہ) تھیم کے فنکشنز۔ پی پی پی

jQuery(دستاویز).تیار(تقریب(){

  jQuery("dt.gallery-icon ایک img.size-thumbnail").ہوور(تقریب(){
    jQuery(اس).اٹار("سائز","(زیادہ سے زیادہ چوڑائی: 360پکسلز) 100vw, 360پکسلز");
    }, تقریب(){
    jQuery(اس).اٹار("سائز","(زیادہ سے زیادہ چوڑائی: 120پکسلز) 100vw, 120پکسلز");
  });

  //اوپر دہرائیں 5 یہاں ہر ایک مختلف امیج سائز کے ل lines آپ ترمیم کرنا چاہتے ہیں

});

مذکورہ کوڈ کلاس تھمب نیل کے ساتھ ایسی تصاویر پر لاگو ہو رہا ہے جو گیلری ، آئکن کلاس کے ساتھ کسی بھی ڈی ٹی کے اندر پائے جاتے ہیں – تو دوسرے الفاظ میں – صرف ورڈپریس بلٹ میں گیلری کے ڈھانچے کے اندر کی تصاویر کے لئے. ہوور پر زیادہ سے زیادہ چوڑائی سے بڑھا دیا جاتا ہے 120 کرنے کے لئے 360 (ایک 3x اضافہ میرے سے ملنے کے لئے سی ایس ایس!), اور پھر تقریب کا دوسرا حصہ اصل کو بحال کرتا ہے 120 جب ہوور رک جاتا ہے تو چوڑائی.

جیسا کہ سی ایس ایس مندرجہ بالا, آپ تصویر کو کتنا بڑا کرتا ہے اسے تبدیل کرنے کے لئے نمبروں کو ایڈجسٹ کرسکتے ہیں, اور آپ اس کو تبدیل کرسکتے ہیں dt.gallery-icon a img.size-thumbnail ایک مختلف عنصر یا کلاس کو نشانہ بنانے کے لئے سیکشن جس پر منحصر ہے کہ آپ کس تصویروں کو نشانہ بنانا چاہتے ہیں.

اپنی اسکرپٹ کو قطار میں لائیں

اگر آپ کے تھیم کے پاس اسکرپٹ فائل موجود نہیں ہے اور آپ کو اپنی ہی چیز کو اپنی قطار میں شامل کرنے کی ضرورت ہے (بچہ) تھیم کے فنکشنز۔ پی پی پی (یہ فرض کرتے ہوئے کہ آپ نے اپنی اسکرپٹ فائل کو تصویری زوم.js کہا اور اسے تھیم کے جڑ فولڈر میں محفوظ کرلیا)

wp_register_script( 'img-zoom', get_st शैली شیٹ_ڈائرکٹری_وری() . '/image-zoom.js', سرنی( 'jquery' ), '', true);
wp_enqueue_script( 'img-zoom' );

مذکورہ بالا آپ کا اسکرپٹ رجسٹر کرے گا, فوٹر میں, اس بات کو یقینی بنانا کہ یہ jquery کے بعد رکھا گیا ہے (لہذا jquery کو پہلے ہی دستیاب ہونا چاہئے جب یہ عمل درآمد ہوتا ہے)

تصویر کے سائز کو شامل کرنا

مکمل ہونے کے لئے یہاں کس طرح ورڈپریس میں کسٹم تصویری سائز شامل کرنے کا طریقہ ہے. ایک بار پھر, اس کو اپنے میں شامل کریں (بچہ) تھیم کے فنکشنز۔ پی پی پی

add_image_size( 'چوتھائی چوڑائی', 192, 144, جھوٹے );

اوپر میں نے ایک نئی امیج سائز کا اضافہ کیا ہے “چوتھائی چوڑائی” زیادہ سے زیادہ 192px چوڑائی اور زیادہ سے زیادہ 144px اونچائی کے ساتھ. شبیہہ فصل نہیں لگے گی (لہذا آخر میں غلط).

جب آپ تصاویر اپ لوڈ کریں گے تو ورڈپریس اب خود بخود اس سائز کی تصاویر تشکیل دے گا (پہلے سے اپ لوڈ کردہ تصاویر کیلئے تمبنےل کو دوبارہ بنانے کے لئے آپ کو تھمب نیل دوبارہ تعمیر پلگ ان کا استعمال کرنے کی ضرورت ہوگی).

اس تصویر کا یہ نیا سائز اگرچہ ایڈیٹر میں داخل کرنے کے ل. نہیں دکھایا جائے گا. اسے دستیاب بنانے کے ل your اپنے فنکشنس پی پی پی میں درج ذیل کوڈ کو بھی شامل کریں

my_custom_image_sizes فنکشن کریں( $سائز ) {
    واپس سرنی_ ڈرم( $سائز, سرنی(
        'چوتھائی چوڑائی' => __('کوارٹر چوڑائی'),
    ) );
}

موجودہ ترتیبات کا احترام کرنا

ایک اور چیز جو آپ کرنا چاہتے ہو (ذمہ دار تصاویر اچھی طرح سے کام کو یقینی بنانے کے ل.) بڑا پیدا کرنا ہے (یعنی. ہیلو dpi) تھمب نیل سائز جس کا احترام کرتے ہیں GUI تھمب نیل کاٹنا ہے یا نہیں. اس کے ل below نیچے کوڈ استعمال کریں جس طرح آپ دیکھیں گے کہ اوپر والے بنیادی سے تھوڑا سا ترمیم کیا گیا ہے

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

مندرجہ بالا کوڈ چیک کرتا ہے 2 چیزیں – سب سے پہلے یہ چیک کرتا ہے کہ آیا فصل کا آپشن ترتیب دیا گیا ہے یا نہیں, اور اگر یہ ہے, یہ ہمارے نئے ذمہ دار سائز کے لئے اس کا آئینہ دار ہے. یہ بھی چیک کرتا ہے کہ آیا چوڑائی سیٹ کی گئی ہے 0 (یعنی. زیادہ سے زیادہ نہیں) ایسی صورت میں ہماری نئی شبیہہ کی بھی زیادہ حد نہیں ہوگی. میں نے نیا امیج سائز کہا “resp-thumb-2x” کیونکہ یہ ایک ‘جواب دہ ہے’ تھمب نیل کی کاپی جو دوگنی بڑی ہے (عام پکسل کثافت ڈبل کے ساتھ ہیلو dpi سکرین کے لئے). کافی حد تک مکمل سیٹ کرنے کے لئے میں نے متعدد دوسرے سائز بھی بنائے ہیں.

نوٹ – چونکہ میرے اصلی تھمب نیلس 120 تھے×80 میں چاہتا ہوں کہ میرے نئے افراد 240 ہوں×160 لہذا وہ سائز ہیں جن کی میں نے وضاحت کی ہے (سخت کوڈت). ممکن ہے کہ اصل تھمب نیل کے ل specified اونچائی اور چوڑائی دونوں کو حاصل کیا جا and اور دونوں کو ضرب دے 2 اس فنکشن کو مکمل طور پر عام بنانے کے لئے, لیکن جب میں اس کی ترقی کر رہا تھا تو میں نے ایسا نہیں کیا لہذا میں آپ کو اس کا پتہ لگانے کے لئے چھوڑ دوں گا!

ایک آخری نوک

تو, میری طرح, آپ نئے امیج سائز کا اپنا ایک مکمل سیٹ بناتے ہیں, ہوسکتا ہے کہ آپ ورڈپریس کو اپنے اضافی پوشیدہ سائز کی تخلیق نہیں کرنا چاہتے ہیں. اصل تصویر کے علاوہ, اور تھمب نیل, میڈیم, اور بڑی شبیہہ, ورڈپریس بھی تخلیق a “پوسٹ تھمب نیل”, ایک “درمیانے بڑے”, ایک 1536×1536 اور ایک 2048×2048. یہ غیر فعال ہیں 2 مختلف طریقے…

کو دور کرنے کے لئے 1536 اور 2048 تصاویر براہ راست آگے ہے

#_image_size( '1536x1536' ); //ہٹا دیں 1536 we dont need it
remove_image_size( '2048x2048' ); //ہٹا دیں 2048 ہمیں اس کی ضرورت نہیں ہے

انگوٹھے کے بعد والا اور درمیانے درجے کا حصہ قدرے زیادہ پیچیدہ ہے

//remove the built-in medium-large
add_filter('انٹرمیڈیٹ_میج_ سائز', تقریب($سائز) {
    واپس سرنی_ڈف($سائز, ['میڈیم_لیج']);
});

//remove the built-in post-thumbnail
add_filter('انٹرمیڈیٹ_میج_ سائز', تقریب($سائز) {
    واپس سرنی_ڈف($سائز, ['پوسٹ تھمب نیل']);
});

نوٹ کریں کہ تھمب نیل کے بعد پوسٹ کو ہٹانے سے کبھی کبھی ایڈیٹر میں تصویری لائبریری پر عجیب اثر پڑتا ہے.

ایک آخری حتمی نوٹ

جب تصویر کے سائز کا فیصلہ کرتے ہو (بڑی تصاویر کے لئے, تھمب نیلز کم ہیں) آپ مثالی طور پر ایک ایسا سائز چاہتے ہیں جس میں عام پہلو تناسب کی تصاویر کا ہمیشہ سائز اچھی طرح سے رہتا ہے. اس وجہ سے میں مندرجہ ذیل سائز کی سفارش کرتا ہوں

سائزچوڑائیاونچائی (4:3)اونچائی (16:9)اونچائی (3:2)
کوارٹر192144108128
تیسرے288216162192
نصف384288216256
میڈیم576432324384
بھرا ہوا768576432512
بڑے1152864648768
ایکس ایل153611528641024

نوٹ کریں کہ کس طرح کی چوڑائی سب کے لئے پوری نمبر کی اونچائی تیار کرتی ہے 3 سب سے عام پہلو کا تناسب. آپ کو ایسی چوڑائی جیسے نہیں ملے گی 150 یا 200.

اضافے میں پیٹرن کو بھی نوٹ کریں. چھلانگ لگائیں 2 ٹیبل میں قطاریں اور سائز ڈبل ہوجاتے ہیں! یہاں تک کہ قطاریں (288,576,1152 اور 1535) یہ پچھلے سائز کے 1.5x بھی ہیں لہذا یہ سیمی ہائی ہائی ڈی پی آئی اسکرین پر اچھی طرح سے کام کرتے ہیں 50% dpi اضافہ. اس سیٹ کو استعمال کرکے 7 سائز آپ کے پاس زیادہ تر ویوپورٹس کے لئے استعمال کے قابل اختیارات کی ایک اچھی حد ہے اور جوابی امیجز کا ایک اچھا مجموعہ ہے جو ورڈپریس خود بخود ایس آر سی سیٹ میں شامل ہوجائے گا کیونکہ ان کے پاس مستقل پہلو کا تناسب ہوگا جس میں کوئی کسر نہیں ہے جس کی وجہ سے معیار کو نقصان پہنچتا ہے یا فصلوں کا خاتمہ ہوتا ہے۔.

فی الحال تھمب نیلوں کے ل I میں یا تو لامحدود چوڑائی کی اجازت دیتا ہوں یا پھر میں سخت فصل کاٹتا ہوں 3:2 تناسب لہذا میں تھمب نیلوں کے لئے پورے نمبر کے سائز کا استعمال کرتا ہوں لیکن آخر کار میں اپنے تھیم کو موافقت کرسکتا ہوں اور اوپر والے سسٹم کو پیچھے کی طرف بڑھا سکتا ہوں۔ (نوٹ کریں کہ ان میں کوئی قدر نہیں ہے 2 یہ بدقسمتی سے کام کرے گا – اور چونکہ میں 60px وسیع منی تھمب نیلز کا استعمال کرتا ہوں اس لئے میں نے پیچھے کی طرف بڑھنے کا انتخاب نہیں کیا ہے). 72px دونوں کے لئے کام کریں گے 4:3 اور 3:2 (اور 64px ساتھ کام کریں گے 4:3 اور 16:9). چونکہ میری تصویری اکثریت میرے ڈی ایس ایل آر پر لی جاتی ہے 3:2 (روایتی 35 ملی میٹر فلم کے پہلو تناسب جیسا ہی ہے) تو میں بھی اس سائز کو استعمال کرسکتا ہوں, جو اس کے بعد پورے سائز میں کام کرے گا, لیکن میرے سائز کے تھمب نیلز بڑے پیمانے پر نہیں لگے ہیں – میں بڑی تصویروں کو زمین کی تزئین کی اور تصویر دونوں بننے پر خوش ہوں, لیکن میں چاہتا ہوں کہ تھمب نیلز عام طور پر زمین کی تزئین کی ہوں صرف میرے ڈیزائن کے مطابق ہوں, لہذا اسی وجہ سے میں نے پیچھے کی طرف توسیع نہیں کی. امید ہے جتنا زیادہ سے زیادہ لوگو دستیاب ہوں گے SVGکے, اور ایک بار JPEG-XL مستقبل قریب میں براؤزر میں پہنچے گا, اس کا بہت کچھ حل ہو جائے گا.

اپنے آپ سے کچھ خیالات کو مل گیا? تبصرہ کی طرف سے ذیل میں اپنے آپ کو ملوث! آپ کے سبسکرائب کرنا چاہتے ہیں تو سب سے اوپر دائیں مینو پر لنک سبسکرائب استعمال کریں. آپ بھی ذیل سماجی روابط کا استعمال کرتے ہوئے کی طرف سے اپنے دوستوں کے ساتھ اس کا اشتراک کر سکتے ہیں. چیرس.

جواب چھوڑیں