DIY মিডিয়া হোম লোগো

আপনার নিজের হোম থিয়েটার এবং হাই ফাই সেটআপ নকশা ও নির্মাণের জন্য চূড়ান্ত সাইট.

0ওয়ার্ডপ্রেস লোগোওয়ার্ডপ্রেসে হোভারে বর্ধিত চিত্র দেখান

সাম্প্রতিক উন্নতিগুলির অংশ হিসাবে আমি বিভিন্ন ওয়েবসাইটগুলিতে করছি আমি যখন গ্যালারীগুলিতে চিত্রগুলি তৈরি করতে চেয়েছিলাম তখন বড় আকারের সংস্করণগুলি দেখানো হয়েছিল. বেসিক দিয়ে এটি করা সিএসএস মোটামুটি তুচ্ছ, তবে আমি কেবল মূল চিত্রটি প্রসারিত করতে চাই নি, আমি চেয়েছিলাম ব্রাউজারটি একটি নতুন দখল করুক (বৃহত্তর) চিত্রও…

সমস্ত চিত্র ইতিমধ্যে একটি সম্পূর্ণ সিআরসি-সেট সরবরাহ করছে তাই আমার যা করতে হবে তা হল সামান্য jQuery ব্যবহার করা (যা ইতিমধ্যে যাইহোক ওয়ার্ডপ্রেস দ্বারা লোড করা হয়েছে) ব্রাউজারটি আরও বড় চিত্র টানতে লক্ষ্য প্রদর্শনের আকার পরিবর্তন করতে. সুন্দর জিনিস যে সিএসএস তাত্ক্ষণিকভাবে কাজ করে যাতে আপনি মূল ফাইলটি ব্যবহার করে একটি বৃহত্তর চিত্র পান, এবং তারপরে উচ্চতর রেজ ফাইলটি লোড হওয়ার সাথে সাথে মানটি দ্বিতীয় ভাগে উন্নতি করে.

দী সিএসএস

দী সিএসএস আমি নিম্নলিখিত হিসাবে ব্যবহার করা হয়. আমি কেবল আমার থিমের স্টাইল। CSS এ এটি যুক্ত করেছি (বা বরং চাইল্ড-থিম – একটি ব্যবহার করার জন্য সর্বদা একটি ভাল ধারণা)

ডিটি.গ্যালারি-আইকন একটি img.size-thumbnail:ঘোরা
{
রূপান্তর: স্কেল(3.0);
}

নোট (1) – সর্বোপরি সিএসএস কেবল গ্যালারী চিত্রগুলিতে প্রযোজ্য. এই পৃষ্ঠার যে কোনও জায়গায় প্রদর্শিত সমস্ত চিত্রের জন্য কেউ এই কার্যকারিতাটি চান না সম্ভবত is, তবে আপনি এটি মূল বিষয়বস্তুর জন্য চাইবেন. আপনার থিমটি কীভাবে এটি গঠন করে তা পরীক্ষা করে দেখতে হবে, তবে আমার ক্ষেত্রে মূল বিষয়বস্তু এ “অধ্যায়” সুতরাং নিম্নলিখিত কোড কাজ করবে

বিভাগ.এন্ট্রি-সামগ্রী পি একটি img.size- থাম্বনেল:ঘোরা
{
রূপান্তর: স্কেল(3.0);
}

নোট (2) – এই কোডটি কেবল থাম্বনেইল চিত্রগুলিতে প্রযোজ্য. মাঝারি চিত্রগুলির জন্য আপনি প্রতিস্থাপন করবেন “আকার-থাম্বনেল” সঙ্গে “মধ্যম আকৃতি”, এবং বড় সঙ্গে “আকার-বড়”.

নোট (3) – কারণ আমার থাম্বনেইলগুলি 120x80px হয় আমি এগুলিকে তাদের মূল আকারে 3x করতে চাই. আমি ইতিমধ্যে 360 কাস্টম ইমেজ আকার আছে×240 সেই ওয়ার্ডপ্রেস আমার জন্য তৈরি করে যা এসআরসি-সেটটিতে অন্তর্ভুক্ত. হাই-ডিপিআই স্ক্রিনগুলির জন্য আমার কাছে থাকা আরও বড় আকারের চিত্রও রয়েছে (উদাঃ. 720×480). ওয়ার্ডপ্রেসে অতিরিক্ত চিত্রের আকার তৈরি করা সহজ – আপনার যদি এটি করার দরকার হয় তবে অনলাইনে প্রচুর ভাল গাইড রয়েছে.

আপনি 1.5x বা 2.0x এ স্কেল করতে চাইলে সাধারণ পরিবর্তন করুন 3.0 পছন্দসই হিসাবে

JQuery

নিম্নলিখিতটি আপনারটিতে যুক্ত করুন (শিশু) থিমের স্ক্রিপ্ট ফাইল (অনুমান করে এটি একটি আছে). যদি এটি না থাকে, তৈরী কর তোমার নিজের, এবং ‘এনকুই’ এটিতে একটি কাস্টম ফাংশন সহ (শিশু) থিমের ফাংশন.এফপি

jQuery(দলিল).প্রস্তুত(ক্রিয়া(){

  jQuery("ডিটি.গ্যালারি-আইকন একটি img.size-thumbnail").ঘোরা(ক্রিয়া(){
    jQuery(এই).অ্যাট্রি("আকার","(সর্বোচ্চ প্রস্থ: 360px আকারে) 100vw, 360px আকারে");
    }, ক্রিয়া(){
    jQuery(এই).অ্যাট্রি("আকার","(সর্বোচ্চ প্রস্থ: 120px আকারে) 100vw, 120px আকারে");
  });

  //উপরের পুনরাবৃত্তি 5 আপনি সংশোধন করতে চান প্রতিটি আলাদা চিত্র আকারের জন্য এখানে লাইন

});

উপরের কোডটি ক্লাস থাম্বনেইলযুক্ত চিত্রগুলিতে প্রয়োগ করছে যা কোনও ডিটি-র ভিতরে একটি গ্যালারী-আইকন শ্রেণীর সাথে পাওয়া যায় – অন্য শব্দগুলিতে তাই – কেবল ওয়ার্ডপ্রেস অন্তর্নির্মিত গ্যালারী কাঠামোর অভ্যন্তরের চিত্রগুলিতে. হোভারে সর্বাধিক প্রস্থ থেকে বৃদ্ধি করা হয় 120 থেকে 360 (আমার সাথে মেলে একটি 3x বৃদ্ধি সিএসএস!), এবং তারপরে ফাংশনের দ্বিতীয় অংশটি মূলটি পুনরুদ্ধার করে 120 হোভার থামলে প্রস্থ.

হিসাবে সিএসএস উপরে, চিত্রটি কত বড় করে তা পরিবর্তন করতে আপনি সংখ্যাগুলি সামঞ্জস্য করতে পারেন, এবং আপনি পরিবর্তন করতে পারেন dt.gallery-icon a img.size-thumbnail আপনি যে চিত্রগুলি লক্ষ্যবস্তু করতে চান তার উপর নির্ভর করে কোনও ভিন্ন উপাদান বা শ্রেণিকে লক্ষ্যবস্তুতে বিভাগ.

আপনার নিজস্ব স্ক্রিপ্ট সজ্জিত করুন

যদি আপনার থিমের কোনও স্ক্রিপ্ট ফাইল না থাকে এবং আপনার নিজের নিজস্বতে নিম্নলিখিতটি যুক্ত করতে হবে (শিশু) থিমের ফাংশন.এফপি (ধরে নিচ্ছি যে আপনি আপনার স্ক্রিপ্ট ফাইলটিকে চিত্র-জুম.জেএস বলেছিলেন এবং এটি থিমের মূল ফোল্ডারে সংরক্ষণ করেছেন)

wp_register_script( 'img-zoom', get_stylesheet_directory_uri() . '/image-zoom.js', শ্রেণীবিন্যাস( 'jquery' ), '', true);
wp_enqueue_script( 'img-zoom' );

উপরেরটি আপনার স্ক্রিপ্ট নিবন্ধন করবে, পাদচরণ মধ্যে, এটি jquery পরে স্থাপন করা হয়েছে তা নিশ্চিত করে (সুতরাং jquery ইতিমধ্যে উপলব্ধ হওয়া উচিত যখন এটি কার্যকর হয়)

চিত্রের আকার যুক্ত করা হচ্ছে

সম্পূর্ণতার জন্য এখানে কীভাবে ওয়ার্ডপ্রেসে কাস্টম চিত্রের মাপ যুক্ত করা যায়. আবার, এটি আপনার যুক্ত করুন (শিশু) থিমের ফাংশন.এফপি

add_image_size( 'প্রান্তিক প্রস্থ', 192, 144, মিথ্যা );

উপরে আমি একটি নতুন চিত্র-আকার যুক্ত করেছি “চতুর্থাংশ প্রস্থ” সর্বাধিক প্রস্থের 192px এবং সর্বোচ্চ উচ্চতা 144px. চিত্রটি ক্রপ করা হবে না (অতএব শেষে মিথ্যা).

আপনি যখন চিত্রগুলি আপলোড করবেন তখন ওয়ার্ডপ্রেস স্বয়ংক্রিয়ভাবে এই আকারের চিত্র তৈরি করবে (ইতিমধ্যে আপলোড হওয়া চিত্রগুলির জন্য আপনার থাম্বনেইল পুনর্নির্মাণ প্লাগইন ব্যবহার করতে হবে).

এই নতুন চিত্রের আকারটি যদিও সম্পাদকে সন্নিবেশের জন্য প্রদর্শিত হবে না. এটি উপলভ্য করতে আপনার ফাংশন.এফপি-তে নিম্নলিখিত কোডটি যুক্ত করুন

my_custom_image_s आकार ফাংশন( $আকার ) {
    ফিরুন অ্যারে_সজ্জা( $আকার, শ্রেণীবিন্যাস(
        'ত্রৈমাসিক প্রস্থ' => __('কোয়ার্টার প্রস্থ'),
    ) );
}

বিদ্যমান সেটিংস সম্মান

আর একটি জিনিস যা আপনি করতে চাইবেন (প্রতিক্রিয়াশীল চিত্রগুলি ভাল কাজ করে তা নিশ্চিত করতে ensure) বৃহত্তর তৈরি করা হয় (i.e. হাই-ডিপিআই) থাম্বনেইল মাপগুলি যে সম্মান করে গ্রাফিক্যাল ইউজার ইন্টারফেস থাম্বনেইলগুলি ক্রপ করা হবে কিনা of. এটি করতে নীচের কোডটি ব্যবহার করুন যা আপনি দেখতে পাবেন উপরের আরও বেসিক থেকে কিছুটা সংশোধিত হয়েছে

add_image_size( 'রেস-থাম্ব -2 এক্স', (get_option( 'থাম্বনেইল_সাইজ_উ' ) == 0 ? 0 : '240'), 160, get_option( 'থাম্বনেইল_ক্রপ' ) );

উপরের কোডটি চেক করে 2 জিনিস – প্রথমত এটি ক্রপ বিকল্প সেট করা আছে কিনা তা পরীক্ষা করে দেখুন, এবং যদি হয়, এটি আমাদের নতুন প্রতিক্রিয়াশীল আকারের জন্য এটি আয়না করে. প্রস্থটি সেট করা আছে কিনা তাও এটি পরীক্ষা করে 0 (i.e. সর্বাধিক) এক্ষেত্রে আমাদের নতুন চিত্রটিরও সর্বোচ্চ কোনও হবে না. আমি নতুন চিত্রের আকার বলেছি “resp-thumb-2x” এটি একটি 'প্রতিক্রিয়াশীল’ থাম্বনেইলের অনুলিপি যা দ্বিগুণ পরিমাণে বড় (দ্বিগুণ সাধারণ পিক্সেল ঘনত্ব সহ হাই-ডিপিআই স্ক্রিনগুলির জন্য). মোটামুটি সম্পূর্ণ সেট তৈরি করতে আমি আরও অনেকগুলি আকার তৈরি করেছি.

নোট – যেহেতু আমার আসল থাম্বনেলগুলি 120 ছিল×80 আমি চাই আমার নতুনগুলি 240 হোক×160 সুতরাং সেগুলি আমি নির্দিষ্ট করে দিয়েছি (হার্ড কোডেড). মূল থাম্বনেইলের জন্য নির্দিষ্ট করা উচ্চতা এবং প্রস্থ উভয়ই পাওয়া সম্ভব এবং উভয় দ্বারা গুন করা সম্ভব 2 এই ফাংশন সম্পূর্ণ জেনারিক করতে, আমি যখন এটি বিকাশ করছিলাম তখন আমি তা করি নি তাই আমি এটি আপনার কাছে রেখে দেব!

একটি চূড়ান্ত পরামর্শ

যদি, আমার মত, আপনি নতুন চিত্র আকারের নিজস্ব সম্পূর্ণ সেট তৈরি করুন, আপনি নিজের অতিরিক্ত লুকানো মাপের ওয়ার্ডপ্রেসটি তৈরি করতে চাইবেন না. মূল চিত্র ছাড়াও, এবং থাম্বনেইল, মাধ্যম, এবং বড় ইমেজ, ওয়ার্ডপ্রেস একটি তৈরি “পোস্ট-থাম্বনেল”, একটি “মাঝারি বৃহৎ”, একটি 1536×1536 এবং একটি 2048×2048. এগুলি অক্ষম 2 ভিন্ন পথ…

অপসারণ করতে 1536 এবং 2048 চিত্রগুলি সরাসরি-ফরোয়ার্ড

মুছে ফেলা_মাজে_সাইজ করুন( '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% ডিপিআই বৃদ্ধি. এই সেট ব্যবহার করে 7 মাপের বেশিরভাগ ভিউপোর্টের জন্য আপনার ব্যবহারযোগ্য বিকল্পের একটি ভাল পরিসীমা এবং প্রতিক্রিয়াশীল চিত্রগুলির একটি ভাল সেট যা ওয়ার্ডপ্রেস স্বয়ংক্রিয়ভাবে এসআরসি-সেট-এ যুক্ত হবে কারণ তাদের কোনও ভগ্নাংশের সাথে ধারাবাহিক দিক অনুপাত থাকবে যা গুণগত ক্ষতি বা ক্রপিংয়ের কারণ হতে পারে না.

বর্তমানে থাম্বনেইলগুলির জন্য আমার হয় সীমাহীন প্রস্থের অনুমতি দেওয়া হয় অথবা আমি স্থির হয়ে থাকি crop 3:2 অনুপাত তাই আমি থাম্বনেইলগুলির জন্য পুরো সংখ্যা মাপ ব্যবহার করি তবে শেষ পর্যন্ত আমি আমার থিমটি সামঞ্জস্য করতে পারি এবং উপরের সিস্টেমটি 48px এবং 96px প্রশস্ত বিকল্প রেখে পিছনে প্রসারিত করতে পারি (মনে রাখবেন যে এগুলির মধ্যে কোনও মূল্য নেই 2 দুর্ভাগ্যক্রমে এটি কাজ করবে – এবং যেহেতু আমি 60px প্রশস্ত মিনি থাম্বনেইস ব্যবহার করি আমি পিছনের দিকে প্রসারিত করতে পছন্দ করি নি). 72px উভয়ের জন্য কাজ করবে 4:3 এবং 3:2 (এবং 64px এর সাথে কাজ করবে 4:3 এবং 16:9). যেহেতু আমার ছবিগুলির বেশিরভাগই আমার ডিএসএলআরে নেওয়া হয় এটি সাধারণত 3:2 (traditionalতিহ্যবাহী 35 মিমি ফিল্মের দিক অনুপাতের সমান) তাই আমি এই আকারটিও ব্যবহার করতে পারি, যা তখন পুরো আকারে বড় আকারের সাথে কাজ করবে, তবে আমার থাম্বনেইলগুলি থাকা অবস্থায় বৃহত্তর আকারগুলি ক্রপ করা হয়নি – বড় চিত্রগুলি ল্যান্ডস্কেপ এবং প্রতিকৃতি উভয়ই হওয়ায় আমি খুশি, তবে আমি চাই আমার থাম্বনেইলগুলি সাধারণত আমার ডিজাইনের সাথে মানানসই ল্যান্ডস্কেপ হতে পারে, সুতরাং আমি পিছনে প্রসারিত হয়নি. আশা করি যত বেশি সংখ্যক লোগো পাওয়া যায় তেমন SVG'গুলি, এবং একবার কোন JPEG-এক্সএল নিকট ভবিষ্যতে ব্রাউজারে আসবে, এই অনেক সমাধান করা হবে.

দয়া করে নীচে মন্তব্য করে আমাদের আপনার চিন্তা পাঠাতে! আপনি সদস্যতা করতে চান তাহলে উপরের ডানদিকের মেনু এর লিঙ্কে সাবস্ক্রাইব ব্যবহার করুন. এছাড়াও আপনি নীচের সামাজিক লিঙ্ক ব্যবহার করে আপনার বন্ধুদের সাথে ভাগ করতে পারেন. চিয়ার্স.

উত্তর দিন