DIY मीडिया होम लोगो

अपनी खुद की होम थिएटर और हाय-Fi सेटअप डिजाइन और बनाने के लिए परम साइट.

0Wordpress लोगोवर्डप्रेस में होवर पर बढ़े हुए चित्र दिखाएं

As part of the recent improve­ments I’ve been mak­ing to vari­ous web­sites I wanted to make images in gal­ler­ies show enlarged ver­sions when hovered over. बेसिक के साथ ऐसा करना सीएसएस is fairly trivi­al, but I did­n’t just want to expand the ori­gin­al image, मैं चाहता था कि ब्राउज़र एक नया प्राप्त करे grab (lar­ger) image too…

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.

The सीएसएस

The सीएसएस I used is as fol­lows. मैंने इसे बस अपने विषय के style.css में जोड़ा है (or rather child-theme — always a good idea to use one) a img.size-थंबनेल:मंडराना
परिवर्तन: स्केल(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

सेक्शन.एंट्री-कंटेंट p a 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 (उदा.. 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 जैसी इच्छा


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 (बच्चा) विषय के कार्य।php


  jQuery(" a img.size-थंबनेल").मंडराना(समारोह(){
    jQuery(यह).attr("आकार","(अधिकतम चौड़ाई: 360पिक्सल) 100वीडब्ल्यू, 360पिक्सल");
    }, समारोह(){
    jQuery(यह).attr("आकार","(अधिकतम चौड़ाई: 120पिक्सल) 100वीडब्ल्यू, 120पिक्सल");

  //उपरोक्त दोहराएं 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 (my . से मिलान करने के लिए 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, और आप बदल सकते हैं 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 (बच्चा) विषय के कार्य।php (assum­ing you called your script file image-zoom.js and saved it in the root folder of the theme)

wp_register_script( 'आईएमजी-ज़ूम', get_stylesheet_directory_uri() . '/image-zoom.js', सरणी( 'jquery' ), '', true);
wp_enqueue_script( 'आईएमजी-ज़ूम' );

उपरोक्त आपकी स्क्रिप्ट पंजीकृत करेगा, 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. फिर, इसे अपने में जोड़ें (बच्चा) विषय के कार्य।php

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_sizes( $आकार ) {
    वापसी array_merge( $आकार, सरणी(
        'quarter-width' => __('तिमाही चौड़ाई'),
    ) );

मौजूदा सेटिंग्स का सम्मान करना

एक और काम जो आप करना चाहेंगे (to ensure respons­ive images work well) is to cre­ate lar­ger (अर्थात. उच्च डीपीआई) 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( 'प्रतिक्रिया-अंगूठे-2x', (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 (अर्थात. 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 तथा 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('मध्यवर्ती_छवि_आकार', समारोह($आकार) {
    वापसी array_diff($आकार, ['मध्यम बड़ा']);

//remove the built-in post-thumbnail
add_filter('मध्यवर्ती_छवि_आकार', समारोह($आकार) {
    वापसी array_diff($आकार, ['पोस्ट-थंबनेल']);

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

आकारचौड़ाईऊंचाई (4:3)ऊंचाई (16:9)ऊंचाई (3:2)
एक्स्ट्रा लार्ज153611528641024

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 तथा 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 तथा 3:2 (और 64px के साथ काम करेगा 4:3 तथा 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 एसवीजीके, और एक बार जेपीईजी-XL निकट भविष्य में ब्राउज़र में आएगा, इसमें से बहुत कुछ हल हो जाएगा.

उत्तर छोड़ दें