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

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

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

हाल के सुधारों के हिस्से के रूप में मैं विभिन्न वेबसाइटों में कर रहा हूं, मैं गैलरी में छवियों को बनाना चाहता था जब ऊपर होवर किया गया था. बेसिक के साथ ऐसा करना सीएसएस काफी तुच्छ है, लेकिन मैं केवल मूल छवि का विस्तार नहीं करना चाहता था, मैं चाहता था कि ब्राउज़र एक नया प्राप्त करे grab (बड़ा) छवि भी…

सभी छवियां पहले से ही एक पूर्ण स्रोत-सेट प्रदान कर रही हैं, इसलिए मुझे बस इतना करना था कि मैं थोड़ा jQuery का उपयोग करूं (जो पहले से ही वर्डप्रेस द्वारा लोड किया गया है) ब्राउज़र को एक बड़ी छवि खींचने के लिए लक्ष्य प्रदर्शन आकार बदलने के लिए. अच्छी बात यह है कि सीएसएस तुरंत काम करता है ताकि आपको मूल फ़ाइल का उपयोग करके एक बड़ी छवि मिल सके, और फिर गुणवत्ता में एक सेकंड बाद में सुधार होता है क्योंकि उच्च रिज़ॉल्यूशन फ़ाइल लोड हो जाती है.

The सीएसएस

The सीएसएस मैंने इस्तेमाल किया इस प्रकार है. मैंने इसे बस अपने विषय के style.css में जोड़ा है (या बल्कि बाल-विषय – हमेशा एक का उपयोग करना एक अच्छा विचार है)

dt.gallery-icon a img.size-थंबनेल:मंडराना
{
परिवर्तन: स्केल(3.0);
}

नोट (1) – उपरोक्त सीएसएस केवल गैलरी छवियों पर लागू होता है. यह संभावना नहीं है कि कोई भी पेज पर कहीं भी प्रदर्शित सभी छवियों के लिए यह कार्यक्षमता चाहेगा, लेकिन आप इसे मुख्य सामग्री अनुभाग के लिए चाह सकते हैं. आपको यह जांचना होगा कि आपकी थीम इसे कैसे बनाती है, लेकिन मेरे मामले में मुख्य सामग्री क्षेत्र है a “अनुभाग” तो निम्नलिखित कोड काम करेगा

सेक्शन.एंट्री-कंटेंट p a img.size-थंबनेल:मंडराना
{
परिवर्तन: स्केल(3.0);
}

नोट (2) – यह कोड केवल थंबनेल छवियों पर लागू होता है. मध्यम छवियों के लिए आप प्रतिस्थापित करेंगे “आकार-थंबनेल” साथ “मध्यम आकार”, और बड़े के लिए “बड़े आकार”.

नोट (3) – क्योंकि मेरे थंबनेल 120x80px हैं, मैं उन्हें उनके मूल आकार से 3x तक बढ़ाना चाहता हूं. मेरे पास पहले से ही 360 का एक कस्टम छवि आकार है×240 वह वर्डप्रेस मेरे लिए बनाता है जो src-set . में शामिल है. हाई-डीपीआई स्क्रीन के लिए मेरे पास और भी बड़े छवि आकार हैं (उदा.. 720×480). वर्डप्रेस में अतिरिक्त इमेज साइज बनाना आसान है – यदि आपको ऐसा करने की आवश्यकता है तो ऑनलाइन बहुत सारे अच्छे मार्गदर्शक हैं.

यदि आप 1.5x या 2.0x साधारण परिवर्तन करना चाहते हैं तो 3.0 जैसी इच्छा

jQuery

निम्नलिखित को अपने में जोड़ें (बच्चा) विषय की स्क्रिप्ट फ़ाइल (यह मानते हुए कि इसमें एक है). अगर उसके पास एक नहीं है, अपना स्वयं का बनाएं, और 'एनक्यू'’ यह में एक कस्टम समारोह के साथ (बच्चा) विषय के कार्य।php

jQuery(डाक्यूमेंट).तैयार(समारोह(){

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

  //उपरोक्त दोहराएं 5 प्रत्येक भिन्न छवि आकार के लिए यहाँ पंक्तियाँ जिन्हें आप संशोधित करना चाहते हैं

});

उपरोक्त कोड वर्ग थंबनेल वाली छवियों पर लागू हो रहा है जो गैलरी-आइकन वर्ग के साथ किसी भी डीटी के अंदर पाए जाते हैं – तो दूसरे शब्दों में – केवल वर्डप्रेस के अंदर की छवियों के लिए निर्मित गैलरी संरचना. होवर पर अधिकतम-चौड़ाई बढ़ जाती है 120 तक 360 (my . से मिलान करने के लिए 3x वृद्धि सीएसएस!), और फिर फ़ंक्शन का दूसरा भाग मूल को पुनर्स्थापित करता है 120 चौड़ाई जब होवर बंद हो जाता है.

के साथ के रूप में सीएसएस ऊपर, छवि को बड़ा करने के लिए आप संख्याओं को समायोजित कर सकते हैं, और आप बदल सकते हैं dt.gallery-icon a img.size-thumbnail किसी भिन्न तत्व या वर्ग को लक्षित करने के लिए अनुभाग इस पर निर्भर करता है कि आप किन छवियों को लक्षित करना चाहते हैं.

अपनी खुद की स्क्रिप्ट को कतारबद्ध करें

यदि आपकी थीम में कोई स्क्रिप्ट फ़ाइल नहीं है और आपको अपनी स्वयं की कतार में निम्नलिखित जोड़ने की आवश्यकता है (बच्चा) विषय के कार्य।php (यह मानते हुए कि आपने अपनी स्क्रिप्ट फ़ाइल को image-zoom.js कहा है और इसे थीम के रूट फ़ोल्डर में सहेजा है)

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

उपरोक्त आपकी स्क्रिप्ट पंजीकृत करेगा, पाद लेख में, सुनिश्चित करें कि इसे jquery . के बाद रखा गया है (इसलिए jQuery निष्पादित होने पर पहले से ही उपलब्ध होना चाहिए)

छवि आकार जोड़ना

पूर्णता के लिए यहां वर्डप्रेस में कस्टम छवि आकार जोड़ने का तरीका बताया गया है. फिर, इसे अपने में जोड़ें (बच्चा) विषय के कार्य।php

add_image_size( 'चौथाई-चौड़ाई', 192, 144, असत्य );

ऊपर मैंने एक नया इमेज-साइज़ जोड़ा है जिसे कहा जाता है “चौथाई-चौड़ाई” 192px की अधिकतम चौड़ाई और 144px की अधिकतम ऊंचाई के साथ. छवि को क्रॉप नहीं किया जाएगा (इसलिए अंत में असत्य).

जब आप चित्र अपलोड करेंगे तो वर्डप्रेस इस आकार की छवियों को स्वचालित रूप से बनाएगा (आपको पहले से अपलोड की गई छवियों के थंबनेल को फिर से बनाने के लिए थंबनेल पुनर्निर्माण प्लगइन का उपयोग करने की आवश्यकता होगी).

हालांकि यह नया छवि आकार संपादक में सम्मिलित करने के लिए दिखाई नहीं देगा. इसे उपलब्ध कराने के लिए अपने functions.php . में निम्नलिखित कोड भी जोड़ें

समारोह my_custom_image_sizes( $आकार ) {
    वापसी array_merge( $आकार, सरणी(
        'तिमाही-चौड़ाई' => __('तिमाही चौड़ाई'),
    ) );
}

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

एक और काम जो आप करना चाहेंगे (यह सुनिश्चित करने के लिए कि प्रतिक्रियाशील छवियां अच्छी तरह से काम करें) बड़ा बनाना है (अर्थात. उच्च डीपीआई) थंबनेल आकार जो सम्मान करते हैं जीयूआई थंबनेल को क्रॉप करना है या नहीं. ऐसा करने के लिए नीचे दिए गए कोड का उपयोग करें, जैसा कि आप देखेंगे, ऊपर दिए गए अधिक मूल से थोड़ा संशोधित है

add_image_size( 'प्रतिक्रिया-अंगूठे-2x', (get_option( 'थंबनेल_साइज_डब्ल्यू' ) == 0 ? 0 : '240'), 160, get_option( 'थंबनेल_क्रॉप' ) );

उपरोक्त कोड के लिए जाँच करता है 2 चीज़ें – सबसे पहले यह जांचता है कि फसल विकल्प सेट है या नहीं, और अगर यह है, यह हमारे नए उत्तरदायी आकार के लिए इसे प्रतिबिंबित करता है. यह यह देखने के लिए भी जांचता है कि क्या चौड़ाई . पर सेट है 0 (अर्थात. अधिकतम नहीं) इस मामले में हमारी नई छवि भी अधिकतम नहीं होगी. मैंने नई छवि का आकार कहा “उत्तर-अंगूठा-2x” क्योंकि यह एक 'उत्तरदायी' है’ थंबनेल की कॉपी जो दोगुनी बड़ी है (सामान्य पिक्सेल घनत्व से दोगुने हाई-डीपीआई स्क्रीन के लिए). मैंने काफी पूर्ण सेट बनाने के लिए कई अन्य आकार भी बनाए हैं.

नोट – चूँकि मेरे मूल थंबनेल 120 . थे×80 मैं चाहता हूं कि मेरे नए 240 . हों×160 तो वे आकार हैं जो मैंने निर्दिष्ट किए हैं (हार्ड कोडित). मूल थंबनेल के लिए निर्दिष्ट ऊंचाई और चौड़ाई दोनों प्राप्त करना और दोनों को गुणा करना संभव होगा 2 इस समारोह को पूरी तरह से सामान्य बनाने के लिए, लेकिन जब मैं इसे विकसित कर रहा था तो मैंने ऐसा नहीं किया था, इसलिए मैं यह पता लगाने के लिए आप पर छोड़ दूंगा!

एक अंतिम टिप

अगर, मेरे जैसा, आप नए छवि आकारों का अपना पूरा सेट बनाते हैं, हो सकता है कि आप अपने स्वयं के अतिरिक्त छिपे हुए आकार बनाने के लिए वर्डप्रेस नहीं चाहते हैं. मूल छवि के अलावा, और थंबनेल, मध्यम, और बड़ी छवि, वर्डप्रेस भी बनाता है a “पोस्ट-थंबनेल”, ए “मध्यम बड़ा”, एक १५३६×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('मध्यवर्ती_छवि_आकार', समारोह($आकार) {
    वापसी array_diff($आकार, ['मध्यम बड़ा']);
});

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

ध्यान दें कि पोस्ट-थंबनेल हटाने से कभी-कभी संपादक में छवि पुस्तकालय पर अजीब प्रभाव पड़ता है.

एक अंतिम अंतिम नोट

छवि आकार पर निर्णय लेते समय (बड़ी छवियों के लिए, इतने कम थंबनेल) आप आदर्श रूप से ऐसा आकार चाहते हैं जो सामान्य पक्षानुपात वाली छवियां हमेशा अच्छी तरह से आकार दें. इस कारण से मैं निम्नलिखित आकारों की अनुशंसा करता हूं

आकारचौड़ाईऊंचाई (4:3)ऊंचाई (16:9)ऊंचाई (3:2)
त्रिमास192144108128
तीसरा288216162192
आधा384288216256
मध्यम576432324384
विपुल768576432512
विशाल1152864648768
एक्स्ट्रा लार्ज153611528641024

ध्यान दें कि निर्दिष्ट चौड़ाई सभी के लिए पूर्ण संख्या ऊंचाई कैसे उत्पन्न करती है 3 सबसे आम पहलू अनुपातों में से. आपको वह चौड़ाई के साथ नहीं मिलेगा जैसे 150 या 200.

पैटर्न में वृद्धि पर भी ध्यान दें. कूद 2 तालिका में पंक्तियाँ और आकार दोगुना हो जाता है! सम पंक्तियाँ (288,576,1152 तथा 1535) पिछले आकार के 1.5x भी हैं इसलिए ये a- का उपयोग करके सेमी-हाई-डीपीआई स्क्रीन पर अच्छी तरह से काम करते हैं 50% डीपीआई वृद्धि. के इस सेट का उपयोग करके 7 आकार आपके पास अधिकांश व्यूपोर्ट के लिए उपयोग करने योग्य विकल्पों की एक अच्छी श्रृंखला है और उत्तरदायी छवियों का एक अच्छा सेट है जो वर्डप्रेस स्वचालित रूप से स्रोत-सेट में जोड़ देगा क्योंकि उनके पास बिना किसी अंश के लगातार पहलू अनुपात होंगे जो गुणवत्ता हानि या फसल का कारण बनेंगे.

वर्तमान में थंबनेल के लिए मेरे पास या तो असीमित चौड़ाई की अनुमति है या मैं निश्चित रूप से कड़ी मेहनत करता हूं 3:2 अनुपात इसलिए मैं थंबनेल के लिए पूर्ण संख्या के आकार का उपयोग करता हूं, लेकिन मैं अंततः अपने विषय को बदल सकता हूं और उपरोक्त सिस्टम को 48px और 96px चौड़ा विकल्प देकर पीछे की ओर बढ़ा सकता हूं (ध्यान दें कि इनके बीच कोई मूल्य नहीं है 2 यह दुर्भाग्य से काम करेगा – और चूंकि मैं 60px चौड़े मिनी थंबनेल का उपयोग करता हूं, इसलिए मैंने पीछे की ओर विस्तार करने का विकल्प नहीं चुना है). 72px दोनों के लिए काम करेगा 4:3 तथा 3:2 (और 64px के साथ काम करेगा 4:3 तथा 16:9). चूंकि मेरी अधिकांश छवियां मेरे डीएसएलआर पर ली गई हैं, ये आम तौर पर हैं 3:2 (पारंपरिक 35 मिमी फिल्म के पहलू अनुपात के समान) इसलिए मैं इस आकार का भी उपयोग कर सकता हूं, जो तब बड़े आकार के साथ सभी तरह से काम करेगा, लेकिन बड़े आकार काटे नहीं गए हैं जबकि मेरे थंबनेल हैं – मैं बड़ी छवियों के लिए लैंडस्केप और पोर्ट्रेट दोनों के लिए खुश हूं, लेकिन मैं चाहता हूं कि थंबनेल आमतौर पर केवल मेरे डिजाइन के साथ फिट होने के लिए लैंडस्केप हों, इसलिए मैंने पीछे की ओर नहीं बढ़ाया. उम्मीद है कि जैसे-जैसे अधिक से अधिक लोगो उपलब्ध होंगे एसवीजीके, और एक बार जेपीईजी-XL निकट भविष्य में ब्राउज़र में आएगा, इसमें से बहुत कुछ हल हो जाएगा.

अपना खुद का कुछ विचारों को समझे? खुद टिप्पणी से नीचे लिप्त! आप सदस्यता के लिए चाहते हैं, तो ऊपर दाईं ओर मेनू पर लिंक का उपयोग करें सदस्यता लें. आप नीचे दिए गए सामाजिक लिंक का उपयोग करके अपने दोस्तों के साथ इस साझा कर सकते हैं. चियर्स.

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