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

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

All of the images are already provid­ing a full src-set so all I needed to do was to use a little jQuery (which is already loaded by word­press any­way) to change the tar­get dis­play size to make the browser pull a lar­ger image. সুন্দর জিনিস যে সিএসএস works instantly so you get a lar­ger image using the ori­gin­al file, and then the qual­ity improves a split second later as the high­er res file gets loaded.

দী সিএসএস

দী সিএসএস I used is as fol­lows. আমি কেবল আমার থিমের স্টাইল। CSS এ এটি যুক্ত করেছি (or rather child-theme — always a good idea to use one)

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

নোট (1) — the above সিএসএস applies to gal­lery images only. It is unlikely any­one would want this func­tion­al­ity for all images dis­played any­where on the page, but you might want it for the main con­tent sec­tion. You would need to check how your theme struc­tures this, but in my case the main con­tent area is a “sec­tion” so the fol­low­ing code would do the job

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

নোট (2) — This code applies only to thumb­nail images. For medi­um images you would replace “size-thumb­nail” with “size-medi­um”, and for large with “size-large”.

নোট (3) — Because my thumb­nails are 120x80px I want to increase them to 3x their ori­gin­al size. I already have a cus­tom image size of 360×240 that word­press cre­ates for me that is included in the src-set. For hi-dpi screens there are also even lar­ger image sizes that I have (e.g. 720×480). Cre­at­ing addi­tion­al image sizes in word­press is easy — there are lots of good guides online if you need to do this.

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

JQuery

Add the fol­low­ing to your (শিশু) থিমের স্ক্রিপ্ট ফাইল (assum­ing it has one). If it does­n’t have one, cre­ate your own, and ‘enqueue’ it with a cus­tom func­tion in the (শিশু) থিমের ফাংশন.এফপি

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

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

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

});

The above code is apply­ing to images with class thumb­nail that are found inside any dt with a gal­lery-icon class — so in oth­er­words — only to images inside the word­press built-in gal­lery struc­ture. On hov­er the max-width is increased from 120 থেকে 360 (আমার সাথে মেলে একটি 3x বৃদ্ধি সিএসএস!), and then the second part of the func­tion restores the ori­gin­al 120 width when the hov­er stops.

হিসাবে সিএসএস উপরে, you can adjust the num­bers to change how much the image enlarges, এবং আপনি পরিবর্তন করতে পারেন dt.gallery-icon a img.size-thumbnail sec­tion to tar­get a dif­fer­ent ele­ment or class depend­ing on which images you want to target.

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

If your theme did­n’t have a script file and you need to enqueue your own add the fol­low­ing to your (শিশু) থিমের ফাংশন.এফপি (assum­ing you called your script file image-zoom.js and saved it in the root folder of the theme)

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

উপরেরটি আপনার স্ক্রিপ্ট নিবন্ধন করবে, in the foot­er, mak­ing sure it is placed after jquery (so jquery should already be avail­able when it executes)

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

For com­plete­ness here’s how to add cus­tom image sizes to word­press. আবার, এটি আপনার যুক্ত করুন (শিশু) থিমের ফাংশন.এফপি

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

Above I’ve added a new image-size called “quarter-width” with a max­im­um width of 192px and a max­im­um height of 144px. চিত্রটি ক্রপ করা হবে না (অতএব শেষে মিথ্যা).

Word­Press will now cre­ate images of this size auto­mat­ic­ally when you upload images (you will need to use a thumb­nail rebuild plu­gin to recre­ate the thumb­nails for already-uploaded images).

This new image size will NOT show up for inser­tion in the edit­or though. To make it avail­able also add the fol­low­ing code to your functions.php

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

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

আর একটি জিনিস যা আপনি করতে চাইবেন (to ensure respons­ive images work well) is to cre­ate lar­ger (i.e. হাই-ডিপিআই) thumb­nail sizes that respect the গ্রাফিক্যাল ইউজার ইন্টারফেস of wheth­er to crop thumb­nails or not. To do that use the code below which as you will see is slightly mod­i­fied from the more basic one above

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

উপরের কোডটি চেক করে 2 things — firstly it checks to see if the crop option is set, এবং যদি হয়, it mir­rors it for our new respons­ive size. প্রস্থটি সেট করা আছে কিনা তাও এটি পরীক্ষা করে 0 (i.e. no max­im­um) in which case our new image will also have no max­im­um either. I called the new image size “resp-thumb-2x” as it is a ‘respons­ive’ copy of the thumb­nail that is twice as large (for hi-dpi screens with double the nor­mal pixel dens­ity). I have also cre­ated a num­ber of oth­er sizes to make a fairly com­plete set.

Note — Since my ori­gin­al thumb­nails were 120×80 I want my new ones to be 240×160 so those are the sizes I have spe­cified (হার্ড কোডেড). It would be pos­sible to get both the height and width spe­cified for the ori­gin­al thumb­nail and mul­tiply both by 2 to make this func­tion fully gen­er­ic, but I did­n’t do so when I was devel­op­ing it so I will leave that to you to fig­ure out!

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

যদি, আমার মত, you cre­ate your own full set of new image sizes, you may not want word­press to cre­ate it’s own extra hid­den sizes. In addi­tion to the ori­gin­al image, and the thumb­nail, the medi­um, এবং বড় ইমেজ, word­press also cre­ate a “post-thumb­nail”, a “medi­um-large”, a 1536×1536 and a 2048×2048. These are dis­abled in 2 dif­fer­ent ways…

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

মুছে ফেলা_মাজে_সাইজ করুন( '1536x1536' ); //অপসারণ 1536 we dont need it
remove_image_size( '2048x2048' ); //অপসারণ 2048 আমাদের এটি দরকার নেই

The post-thumb and medi­um-large are slightly more complicated

//remove the built-in medium-large
add_filter('ইন্টারমিডিয়েট_আইমেজ_ সাইজ', ক্রিয়া($আকার) {
    ফেরত অ্যারে_ডিফ($আকার, ['মাঝারি বৃহৎ']);
});

//remove the built-in post-thumbnail
add_filter('ইন্টারমিডিয়েট_আইমেজ_ সাইজ', ক্রিয়া($আকার) {
    ফেরত অ্যারে_ডিফ($আকার, ['পোস্ট-থাম্বনেল']);
});

Note that remov­ing the post-thumb­nail seems to some­times have strange effects on the image lib­rary in the editor.

একটি চূড়ান্ত চূড়ান্ত নোট

When decid­ing on image sizes (for lar­ger images, less so thumb­nails) you ideally want a size that com­mon aspect ratio images will always res­ize nicely to. For that reas­on I recom­mend the fol­low­ing sizes

Note how the widths spe­cified pro­duce whole num­ber heights for all 3 of the most com­mon aspect ratios. আপনি এর মতো প্রস্থের সাথে তা পাবেন না 150 or 200.

Also note the pat­tern in increases. ঝাঁপ দাও 2 সারণীতে সারি এবং আকার দ্বিগুণ হয়! এমনকি সারি (288,576,1152 and 1535) are also 1.5x the pre­vi­ous size so these work well on semi-hi-dpi screens using a 50% ডিপিআই বৃদ্ধি. এই সেট ব্যবহার করে 7 sizes you have a good range of usable options for most view­ports AND a good set of respons­ive images that word­press will auto­mat­ic­ally add to the src-set since they will have con­sist­ent aspect ratios with no frac­tions that would lead to qual­ity loss or cropping.

Cur­rently for thumb­nails I tend to either have unlim­ited width allowed OR I hard crop to a fixed 3:2 ratio so I use whole num­ber sizes for thumb­nails but I may even­tu­ally tweak my theme and extend the above sys­tem back­wards by hav­ing options 48px and 96px wide (মনে রাখবেন যে এগুলির মধ্যে কোনও মূল্য নেই 2 that would work unfor­tu­nately — and since I use 60px wide mini thumb­nails I haven’t opted to extend back­wards). 72px উভয়ের জন্য কাজ করবে 4:3 and 3:2 (এবং 64px এর সাথে কাজ করবে 4:3 and 16:9). Since a major­ity of my images are taken on my dSLR these are typ­ic­ally 3:2 (the same as the aspect ratio of tra­di­tion­al 35mm film) তাই আমি এই আকারটিও ব্যবহার করতে পারি, যা তখন পুরো আকারে বড় আকারের সাথে কাজ করবে, but the lar­ger sizes are not cropped where­as my thumb­nails are — I’m happy for lar­ger images to be both land­scape and por­trait, but I want thumb­nails to typ­ic­ally be land­scape only to fit with my design, so that’s why I haven’t exten­ded back­wards. Hope­fully as more and more logos are avail­able as SVG'গুলি, এবং একবার কোন JPEG-এক্সএল নিকট ভবিষ্যতে ব্রাউজারে আসবে, এই অনেক সমাধান করা হবে.