কোনও চিত্রের উদাহরণে আরও বিকল্প যুক্ত করা। (সংযুক্তি প্রদর্শন সেটিংস)

Question

আমি ওয়ার্ডপ্রেস ৩.৯-তে চিত্র উপস্থাপনার জন্য একটি সাধারণ পুনরায় ব্যবহারযোগ্য প্লাগইন তৈরির চেষ্টা করছি এবং মনে হচ্ছে আমি একটি ইটের প্রাচীর আঘাত করেছি।

আমি চিত্রটির উদাহরণে কয়েকটি বিকল্প যোগ করতে সক্ষম হতে চাই। ("সংযুক্তি প্রদর্শন সেটিংস" এর অধীনে বিশদগুলি)। চেকবাক্সের মতো যা "প্রতিক্রিয়াশীল" বলে যা চিত্রের আকার ড্রপডাউন অক্ষম করে (ধূসর করে) বা নির্দিষ্ট পৃষ্ঠাগুলির জন্য বিকল্প ইত্যাদি etc.

কোনও চিত্র নির্বাচন / প্রতিস্থাপন করার সময় মিডিয়া ম্যানেজারে, আমি কিছু কাস্টম ক্ষেত্রগুলি ব্যবহার করে attachment_fields_to_editএটির ভাইবাল ফিল্টার যুক্ত করতে সক্ষম হয়েছি , তবে এই ক্ষেত্রগুলি চিত্রটি নিজেই সংযুক্ত হয় (বা চিত্র সংযুক্তি পোস্ট অবজেক্টটি যদি আপনি করেন), তাই যদি আমার কোনও পৃষ্ঠায় একই চিত্রের দুটি উদাহরণ থাকে তবে তারা আমার কাস্টম ফিল্ডের একই মান ভাগ করে নেবে।

ক) আমি যে কাস্টম পাঠ্য ক্ষেত্রটি যুক্ত করেছি, আমি এটি উদাহরণটি সংযুক্ত করতে অক্ষম, একই চিত্রের সমস্ত দৃষ্টান্ত এই মানটি ভাগ করে দেয়।

খ) এটি সেই অঞ্চল যেখানে আমি বিকল্পগুলি যুক্ত করতে চাই, কারণ এখানে সমস্ত কিছু প্রতিটি উদাহরণ অনুসরণ করে।

গ) এটি পূর্ববর্তী স্ক্রিনের মতো একই ডিসপ্লে সেটিংস দেখায়, তবে ওয়ার্ডপ্রেস ৩.৯-এ কোনও চিত্রের শীর্ষে "পেন্সিল" ক্লিক করার সময় এটি ভিন্ন উপস্থাপন করা হয়েছে। লক্ষ্য করুন যে কীভাবে দেওয়া কাস্টম বিকল্পগুলি attachment_fields_to_editএই স্ক্রিনে একেবারেই উপস্থিত নেই।

যদিও ব্যাকবোন কীভাবে কাজ করে, বা ডাব্লুপি.মিডিয়া বিষয়বস্তুগুলি সংশোধন করার জন্য সর্বোত্তম অনুশীলনগুলি কী তা সম্পর্কে আমি আমার মাথা পুরোপুরি অর্জন করতে পারি নি, তবে আমি উত্তরগুলির জন্য পিএইচপি, জেএস এবং গুগলিং উভয়ের সাথে মোটামুটি সক্ষম। তবে এই একজন আমাকে কয়েক দিনের জন্য স্টম্প্প করেছে, তাই কোনও সাহায্যের প্রশংসা করা হয়েছে।

পড়ার জন্য ধন্যবাদ!

Answer 1

আপনি নিযুক্ত শর্তাদি কিছুটা বিভ্রান্তিকর হলেও, সমস্যার বিশ্লেষণ সম্পর্কে আপনি পুরোপুরি সঠিক। "চিত্রের উদাহরণ" বলে কোনও জিনিস নেই: আপনি একবার কোনও পোস্টে একটি চিত্র প্রবেশ করিয়ে দিলে, মূল চিত্রের শিরোনাম বা ক্যাপশন (উদাহরণস্বরূপ মিডিয়া মেনু দিয়ে) পরিবর্তন করে পোস্টটিতে imageোকানো চিত্রটি পরিবর্তন করা যাবে না। আপনাকে বোঝাতে, "পাঠ্য" ট্যাবে ক্লিক করুন এবং উত্পন্ন এইচটিএমএল কোডটি পরীক্ষা করে দেখুন।

আপনি "মিডিয়া যুক্ত করুন" বোতামের সাহায্যে কোনও চিত্র সন্নিবেশ করলে কী হয় তা এখানে:

1. আপনি যখন "পোস্টে সন্নিবেশ করুন" এ ক্লিক করেন, তখন কিছু এইচটিএমএল কোড উত্পন্ন করার জন্য মিডিয়া মডেল থেকে ডেটা নেওয়া হয়: <img>আপনি যে আকার চয়ন করেন তার উপর নির্ভর করে সঠিক উত্সের সাথে ট্যাগ করুন, Alt টেক্সট হিসাবে শিরোনাম এবং যদি কোনও থাকে তবে ক্যাপশন দিন। এই কোডটি TinyMCE সম্পাদকটিতে সঠিক জায়গায় isোকানো হয়েছে ("পাঠ্য" ট্যাবটির মাধ্যমে এটি পরীক্ষা করে দেখুন)

2. "ভিজ্যুয়াল" ট্যাবটির মধ্যে ভিজ্যুয়াল সম্পাদকের মধ্যে চিত্রটি উপস্থাপন করার জন্য একটি "ভিউ" তৈরি করা হয়। এই দৃশ্যটি চিত্র এবং দুটি বোতাম প্রদর্শন করে: সম্পাদনা করুন এবং মুছুন। এই ভিউটি হ'ল এইচটিএমএল কোডটি স্পর্শ না করেই আপনাকে চিত্রটির আকার পরিবর্তন করতে এবং কিছু অন্যান্য পরামিতি দৃশ্যত পরিবর্তন করতে দেয়।

সুতরাং, আপনি যদি কিছু কাস্টম ডেটা যুক্ত করতে চান (এটি কোনও সংযুক্তি পোস্টের সাথে সংযুক্ত না হওয়ায় এটি কাস্টম ফিল্ড হিসাবে কল করবেন না), আপনাকে এই এইচটিএমএল কোডটিতে সন্নিবেশ করতে হবে এবং তারপরে এই ডেটাটি চাক্ষুষভাবে পরিবর্তনের অনুমতি দেওয়ার জন্য ভিউটি পরিবর্তন করতে হবে । যদি আমি আপনার প্রশ্নটি ভালভাবে বুঝতে পারি তবে আপনি এমন ডেটা যুক্ত করতে চান যা পৃষ্ঠায় একটি নির্দিষ্ট উপায়ে চিত্রটি অবস্থান করবে। আপনি এটির জন্য একটি কাস্টম ক্লাস ব্যবহার করতে পারেন।

এইচটিএমএল কোডটি এখানে তৈরি করা হয়েছে:

<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' ));
    }
}

তারপরে, কাস্টমভিউ.জেসগুলি দেখতে এইরকম হওয়া উচিত:

(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

আপনাকে অনেক ধন্যবাদ! আমি এখন দেখছি, "চিত্রের উদাহরণ" বেশিরভাগ সময় সম্পাদকটিতে কেবল একটি স্ট্রিং হিসাবে সংরক্ষণ করা হয়। এবং আমি যা খুঁজছিলাম তা হ'ল "মিডিয়া.ভিউ.আমেজডেটেলস"। ধীর সাড়া দেওয়ার জন্য দুঃখিত, আমি গত বছরের জুনের মধ্যে এই প্রশ্নটি ছেড়ে দিয়েছিলাম। :)

— isNaN