छवि के उदाहरण में और विकल्प जोड़ना। (अनुलग्नक प्रदर्शन सेटिंग्स)

Question

मैं Wordpress 3.9 में छवि प्रस्तुति के लिए एक सरल पुन: प्रयोज्य प्लगइन बनाने की कोशिश कर रहा हूं, और ऐसा लगता है कि मैंने एक ईंट की दीवार को मारा है।

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

किसी छवि का चयन / प्रतिस्थापन करते समय मीडिया मैनेजर में, मैं कुछ कस्टम फ़ील्ड्स का उपयोग करके जोड़ने में सक्षम रहा हूं attachment_fields_to_editऔर यह फिल्टर को सहला रहा है, हालाँकि ये फ़ील्ड छवि से स्वयं को जोड़ते हैं (या यदि आप चाहें तो छवि अनुलग्नक पोस्ट ऑब्जेक्ट), तो यदि मेरे पेज पर एक ही छवि के दो उदाहरण हैं, तो वे मेरे कस्टम फ़ील्ड के समान मूल्य साझा करेंगे।

क) मैंने जो कस्टम टेक्स्ट फ़ील्ड जोड़ा है, मैं इसे उदाहरण के लिए संलग्न करने में असमर्थ हूं, उसी छवि के सभी उदाहरण इस मूल्य को साझा करते हैं।

b) यह वह क्षेत्र है जहाँ मैं विकल्प जोड़ना चाहूँगा, क्योंकि यहाँ सब कुछ प्रत्येक उदाहरण का अनुसरण करता है।

c) यह पिछली स्क्रीन की तरह ही डिस्प्ले सेटिंग्स दिखाता है, हालाँकि यह Wordpress 3.9 में एक छवि के ऊपर "पेंसिल" पर क्लिक करते समय अलग प्रस्तुत किया जाता है। ध्यान दें कि कैसे दिए गए कस्टम विकल्प attachment_fields_to_editइस स्क्रीन पर मौजूद नहीं हैं।

भले ही मैं अपने सिर को पूरी तरह से पकड़ नहीं पाया कि कैसे रीढ़ की हड्डी काम करती है, या wp.media ऑब्जेक्ट्स को संशोधित करने के लिए सबसे अच्छा अभ्यास क्या है, मैं उत्तर के लिए php, js और googling दोनों के साथ काफी सक्षम हूं। लेकिन इसने मुझे अब कुछ दिनों के लिए रोक दिया है, इसलिए किसी भी मदद की बहुत सराहना की जाती है।

पढ़ने के लिए धन्यवाद!

Answer 1

आप मुद्दे के विश्लेषण के बारे में पूरी तरह से सही हैं, भले ही आपके द्वारा नियोजित शब्द थोड़ा भ्रमित हो। "छवि का एक उदाहरण" जैसी कोई चीज नहीं है: एक बार जब आप एक पोस्ट में एक छवि डालते हैं, तो मूल छवि शीर्षक या कैप्शन को संशोधित करना (उदाहरण के लिए मीडिया मेनू के माध्यम से) पोस्ट में डाली गई छवि को संशोधित नहीं करेगा। आपको समझाने के लिए, "टेक्स्ट" टैब पर क्लिक करें और जेनरेट किए गए HTML कोड को देखें।

जब आप "मीडिया जोड़ें" बटन के साथ एक छवि सम्मिलित करते हैं तो यह होता है:

1. जब आप "इन्सर्ट टू पोस्ट" पर क्लिक करते हैं, तो कुछ HTML कोड उत्पन्न करने के लिए मीडिया मोडल से डेटा लिया जाता है: <img>आपके द्वारा चुने गए आकार के आधार पर सही स्रोत के साथ टैग, ऑल्ट टेक्स्ट के रूप में शीर्षक और यदि कोई है तो कैप्शन। यह कोड TinyMCE संपादक में सही जगह पर डाला गया है (इसे "टेक्स्ट" टैब के माध्यम से देखें)

2. "दृश्य" टैब के भीतर दृश्य संपादक के भीतर छवि का प्रतिनिधित्व करने के लिए एक "दृश्य" बनाया जाता है। यह दृश्य छवि और दो बटन प्रदर्शित करता है: संपादित करें और हटाएं। यह दृश्य वह है जो आपको HTML कोड को छूने के बिना, छवि को आकार देने और कुछ अन्य मापदंडों को नेत्रहीन रूप से बदलने की अनुमति देता है।

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

यहाँ HTML कोड उत्पन्न किया गया था:

<img class="alignnone size-medium wp-image-10" src="http://myserver.com/wp-content/uploads/2014/08/opensource-300x259.gif" alt="opensource" width="300" height="259" />

और आप आकार ड्रॉपडाउन सूची में एक "उत्तरदायी" पसंद करना चाहेंगे जो कोड जैसा दिखाई देगा:

<img class="alignnone size-responsive wp-image-10" src="http://myserver.com/wp-content/uploads/2014/08/opensource-300x259.gif" alt="opensource" />

इसे कैसे प्राप्त किया जाए: एक प्लगइन बनाएं जो पोस्ट एडिट पेज पर एक नई स्क्रिप्ट की जानकारी देगा।

add_action( 'admin_enqueue_scripts', 'wpse16975_custom_image_view');
function wpse16975_custom_image_view($hook){
    if($hook == 'post.php'){
        wp_enqueue_script( 'custom_image_view', plugin_dir_url( __FILE__ ) . '/customView.js', array( 'media-views' ));
    }
}

फिर, customView.js को इस तरह दिखना चाहिए:

(function($, _){
    var media = wp.media;

    var origImageDetails = media.view.ImageDetails;
    media.view.ImageDetails = origImageDetails.extend({
        initialize: function() {
            origImageDetails.prototype.initialize.apply( this, arguments );
            this.on( 'post-render', this.responsiveSize );
            this.listenTo( this.model, 'change:size', this.setReponsiveSize );
            this.initSize = this.model.get('size');
        },

        responsiveSize: function(){
            // add a "Reponsive" option to the Size dropdown setting
            var $opt = $(document.createElement('option')).attr('value', 'responsive').text('Responsive');
            if(this.initSize == 'responsive') $opt.attr('selected', 'selected');
            this.$('.embed-media-settings select.size').append($opt);
        },

        setReponsiveSize: function(){
            // remove width and height
            if(this.model.get('size') == 'responsive') this.controller.image.set({width:null, height:null}, {silent:true});
        }

    });
}(jQuery, _));

और यहाँ परिणाम है:

Comments

आपका बहुत बहुत धन्यवाद! अब मैं देख रहा हूं, "छवि का उदाहरण" ज्यादातर समय संपादक में एक स्ट्रिंग के रूप में सहेजा जाता है। और जो मैं देख रहा था वह "Media.view.ImageDetails" था। धीमी प्रतिक्रिया के लिए क्षमा करें, मैंने पिछले साल जून तक यह सवाल छोड़ दिया था। :)

— isNaN