छवि अनुकूलन के लिए $ content_width का उपयोग करने का एक अच्छा विकल्प क्या है?

Question

$content_widthग्लोबल वर्डप्रेस में प्रभाव कई विषयों और छवियों और पदों में एम्बेड के आकार को सीमित द्वारा भी कुछ प्लग, यह wordpress.org को प्रस्तुत विषयों के लिए एक आवश्यकता है।

इसका उपयोग करके सेट किया गया है:

$content_width = 584; // Twenty Twelve example

यदि आप एक बड़ी छवि (डिफ़ॉल्ट 1024x1024) एक पोस्ट में डालते हैं तो इसका परिणाम होता है:

src="../wp-content/uploads/2013/02/IMG_1390-1024x682.jpg" width="584" height="328"

यदि इसके बजाय आप इस वैश्विक सेटिंग को हटाते हैं और वास्तविक छवि आकार सम्मिलित करते हैं, तो add_image_sizeइसके साथ सेट करें :

src="../wp-content/uploads/2013/02/IMG_13901-584x328.jpg" width="584" height="328" 

वैश्विक हटाना और बड़ी छवियां सम्मिलित करना, जो बहुत आम है , अक्सर 2x से अधिक की बचत होती है, कई छवियों वाले पृष्ठों में मुझे सैकड़ों केबी पृष्ठ लोड पर सहेजे हुए दिखाई देते हैं ।

क्या add_image_sizeपूर्ण आकार की छवियों को सम्मिलित करने की क्षमता का उपयोग करना और हटाना बेहतर विकल्प नहीं है?

ps। मैंने इसके बारे में यहां अधिक सटीक आंकड़ों के साथ लिखा है

Comments

यह कुछ ऐसा लगता है जैसे wp-hackers मेलिंग लिस्ट में लाने के लिए।

— eddiemoya

Answer 1

ध्यान रखें कि $content_widthवैश्विक न केवल छवियों के लिए उपयोग किया जाता है, बल्कि वीडियो जैसे एम्बेडेड ऑब्जेक्ट्स के लिए भी उपयोग किया जाता है। इसलिए, कोई भी समाधान केवल $content_widthस्वयं के उपयोग / समर्थन को छोड़ने का मामला नहीं होगा ।

आमतौर पर एक थीम कुछ तरीकों से सामग्री-क्षेत्र छवियों को विवश करेगी:

1. बड़ी छवि का आकार: $content_widthथीम डिज़ाइन के लिए कुछ उपयुक्त परिभाषित करना
2. मूल / पूर्ण छवि का आकार: #content img { max-width: XXX; height: auto; }यह सुनिश्चित करने के लिए कि पूर्ण आकार की छवियां सम्मिलित करने के लिए CSS नियम को परिभाषित करना लेआउट को नहीं तोड़ता है
3. थंबनेल छवि का आकार: set_post_thumbnail_size()फीचर्ड इमेज / पोस्ट थंबनेल डिफ़ॉल्ट thumbnailआकार को परिभाषित करने के लिए कॉल करना । (नोट: मैं व्यक्तिगत रूप से इस पद्धति का उपयोग करने की अनुशंसा नहीं करता हूं। किसी चित्रित छवि के लिए दिए गए स्थान के लिए विशिष्ट विशिष्ट छवि आकार निर्धारित करें, और फिर उस विशिष्ट आकार को विशिष्ट टेम्पलेट स्थान में, के माध्यम से कॉल करें the_post_thumbnail( $size )।)

जैसा कि आपने खोजा है, क्योंकि जिस तरह से वर्डप्रेस मध्यवर्ती छवि आकार के साथ किसी भी दिए गए छवि अनुरोध का उपयोग करने के लिए चयन करता है, उस अनुरोध के परिणामस्वरूप ब्राउज़र-स्केल की गई छवि हो सकती है।

बड़ी छवि के लिए थीम-परिभाषित मूल्य

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

बड़ी छवि आयाम सेटिंग्स इस प्रकार संग्रहीत की जाती हैं:

$large_image_width = get_option( 'large_size_w' );
$large_image_height = get_option( 'large_size_h' );

तो, आप अपने मूल्य के अनुसार उन मूल्यों को निर्धारित कर सकते हैं $content_width:

global $content_width;
update_option( 'large_size_w', $content_width );
update_option( 'large_size_h', $content_width );

(निश्चित रूप से, आप उचित रूप में, इसके आसपास कुछ विफल / त्रुटि-जाँच करना चाहते हैं।)

पूर्ण-आकार वाली छवियाँ सम्मिलित करने का विकल्प निकालें

यदि आप उपयोगकर्ताओं को पूर्ण-आकार की छवियां सम्मिलित करने से रोकना चाहते हैं (फिर से: सावधानी से आगे बढ़ें; यह प्लगइन क्षेत्र हो सकता है), आप फ़िल्टर कर सकते हैं 'image_size_names_choose':

function wpse86950_filter_image_size_names_choose( $possible_sizes ) {
    unset( $possible_sizes['full'] );
    return $possible_sizes;
}
add_filter( 'image_size_names_choose', 'wpse86950_filter_image_size_names_choose' );

फिर से: आप यहां कुछ साने फेलफेस जोड़ना चाह सकते हैं, क्योंकि यह फिल्टर एक से अधिक स्थानों पर उपयोग किया जाता है।

पूर्ण-पोस्ट-चौड़ाई छवियों के लिए एक कस्टम छवि आकार को परिभाषित करें

पिछले विकल्प से संबंधित, आप एक 'full-post-width'छवि आकार को परिभाषित कर सकते हैं :

global $content_width;
add_image_size( 'full-post-width', $content_width, $content_width, false );

फिर, इसे उपलब्ध विकल्पों की सूची में जोड़ें:

function wpse86950_filter_image_size_names_choose( $possible_sizes ) {
    // Unset full image size
    unset( $possible_sizes['full'] );
    // Add full-post-width image size
    $possible_sizes['full-post-width'] = 'Full Post Width';
    // Return array
    return $possible_sizes;
}
add_filter( 'image_size_names_choose', 'wpse86950_filter_image_size_names_choose' );

Comments

व्यापक जवाब के लिए धन्यवाद चिप, मैंने get_optionमूल्यों को स्थापित करने के बारे में नहीं सोचा था । बाकी मैं जीस्ट का उपयोग कर रहा हूं जैसा कि मैं gist.github.com/wycks/4949242 का उपयोग कर रहा हूं जो मेरे लिंक में जुड़ा हुआ था। यह भी विषय को बदल दिया जाता है, तो इसे वास्तव में पैमाने बनाने के लिए एक ग्रे क्षेत्र प्रतीत होता है।

— व्येक

इसके अलावा, मैं $content_widthइसे हटाने या इसे स्थापित नहीं करने का उल्लेख करना भूल गया , यह अभी भी डिफ़ॉल्ट रूप से उन एम्बेडेड वस्तुओं पर लागू होता है जो मुझे लगता है।

— व्येक

image_size_names_chooseअब तक उस फ़िल्टर को कभी नहीं देखा ! मैं उस पूरे क्षेत्र को बदलने की कोशिश कर रहा हूं ताकि अब मैं अपने कस्टम आकार को प्राप्त कर सकूं। क्या यह 3.5 चिप में नया है?

— sanchothefat

मुझे लगता है कि यह 3.3 के बाद से है, मैं इसे add_image_sizeबहुभाषी के लेबल बनाने के लिए उपयोग कर रहा हूं , और फिर मुझे लगा कि इस छवि के आकार के मुद्दे के लिए उपयोग करना भी अच्छा होगा। यदि आपको स्थानीयकरण की आवश्यकता नहीं है, तो आप इसे हार्डकोड करने के बजाय इसे केवल सरणी में तोड़ सकते हैं।

— व्यिक

@sanchothefat मुझे यकीन नहीं है कि जब इसे जोड़ा गया था। लगता है कि व्याक कहता है कि यह 3.3 था? मुझे हमेशा स्रोत के माध्यम से देखना पसंद है, जब मुझे किसी चीज़ को बढ़ाने / संशोधित करने की आवश्यकता होती है, और यह पता लगाना कि उस विशिष्ट चीज़ में एक फ़िल्टर जोड़ा गया है। :)

— चिप बेनेट

Answer 2

हां मुझे ऐसा लगता है। $content_widthरेपो को प्रस्तुत किए गए विषयों के लिए समस्या को हल करने के लिए, मैं उन डिज़ाइनों को बाध्य करने के लिए विकल्प फ़िल्टर का उपयोग करता हूं, जिन्हें मैंने डिज़ाइन के लिए चुना है।

add_filter( 'option_large_size_w', function( $opt ) { return 1024; } );
add_filter( 'option_large_size_h', function( $opt ) { return 0; } );
add_filter( 'option_embed_size_w', function( $opt ) { return 1024; } );
add_filter( 'option_embed_size_h', function( $opt ) { return 0; } );
// ...etc...