আমি কীভাবে কাস্টম ৩.৩ মিডিয়া আপলোডারে "URL থেকে সন্নিবেশ" ট্যাব যুক্ত করতে পারি?


17

আমি যখন একটি বোতাম টিপানো হয় তখন এই জাভাস্ক্রিপ্টটি চালিয়ে উইজেটে একটি WP 3.5 মিডিয়া আপলোডার প্রবেশ করিয়েছি:

var frame = wp.media( {
    title       : 'Widget Uploader',
    multiple    : false,
    library     : { type : 'image' },
    button      : { text : 'Select Image' }
} );

frame.on( 'close', function() {
    var attachments = frame.state().get( 'selection' ).toJSON();
    imageWidget.render( widget_id, widget_id_string, attachments[0] );
} );

frame.open();
return false;

এটি আমাকে এমন একটি মডেল দেয় যাতে "আপলোড ফাইলগুলি" এবং "মিডিয়া লাইব্রেরি" ট্যাব রয়েছে তবে আমি এটিও চাই যে কোনও পোস্ট সম্পাদনা করার সময় আপনি "মিডিয়া যুক্ত করুন" বোতামটি ক্লিক করার পরে পাবেন "ইউআরএল থেকে সন্নিবেশ" ট্যাবটি পাওয়া উচিত / পাতা।

এখানে চিত্র বর্ণনা লিখুন

আমি ওয়েবে চারপাশে খনন করে, সোর্স কোডটি পড়ে এবং আপলোডকারীর ব্যাকএন্ডে ড্যারিল কোপারস্মিথের উপস্থাপনাটি দেখে কয়েক ঘন্টা ব্যয় করেছি , তবে এটি বের করতে সক্ষম হয়েছি।

কেউ আমাকে সঠিক পথ নির্দেশ করতে পারবেন? এটি অন্তর্ভুক্ত করার জন্য আমি wp.media () এ যেতে পারে এমন কোনও প্যারামিটার রয়েছে কি না, বা অন্তর্নির্মিত ভিউ / মডেলগুলির মধ্যে একটির সাথে এটি অন্তর্ভুক্ত করা উচিত?


একটি হ্যাকি সমাধানে একটি সূত্র হতে পারে তবে আপনি যখন "ফাইল নির্বাচন করুন" ক্লিক করেন তখন আপনি ফাইল অবস্থানের পরিবর্তে খোলা ফাইল এক্সপ্লোরারটিতে একটি ইউআরএল পেস্ট করতে পারেন।
উইক

আপনি কি অপারেটিং সিস্টেমের ওপেন ফাইল মডেল সম্পর্কে কথা বলছেন? ফেডোরায় এটি আমার পক্ষে কাজ করে না, সুতরাং এটি ওএস-নির্ভর হতে পারে। এটি একটি বিতরণযুক্ত প্লাগইনের জন্যও তাই ইউআই স্বজ্ঞাত হওয়া দরকার।
ইয়ান ডান

হ্যাঁ সঠিক, এটি কিছু ওএসের কাজ করে।
উইক

উত্তর:


10

আমি একই কারণে উত্স কোডটি খনন করেছি; আমি ডিফল্ট "নির্বাচন" ফ্রেমে "সংযুক্তি প্রদর্শন সেটিংস" যুক্ত করতে চাই। আমি যতদূর বলতে পারি, wp.media () এ প্যারামিটারগুলি পাস করে এটি করা যায় না, যেমনটি আমরা সবাই চাই। ডাব্লুপি.মিডিয়ায় বর্তমানে দুটি ফ্রেম রয়েছে ("পোস্ট" এবং "নির্বাচন করুন") এবং তাদের সাথে দেখা ভিউগুলি প্রিসেট।

আমি এখন যে পদ্ধতির দিকে নজর দিচ্ছি তা হল মিডিয়া.ভিউ.মিডিয়াফ্রেমকে একটি নতুন ফ্রেম তৈরি করতে ("নির্বাচন করুন" ফ্রেমের উপর ভিত্তি করে) তৈরি করা যা আমার প্রয়োজনীয় দৃশ্যের অংশগুলি অন্তর্ভুক্ত করে। আমার যদি এই কাজটি হয় তবে আমি কোডটি পোস্ট করব।

সম্পাদনা করুন:

আয়ান, আমি কাজ করতে চেয়েছি এমন বৈশিষ্ট্যটি পেয়েছি এবং আপনার খুঁজে বের করতে কিছুটা সময় নিয়েছি। ডাব্লুপি.মিডিয়া () এটি ঠিক তেমন মডুলার নয়। এটি কেবলমাত্র ফ্রেমটির জন্য 'নির্বাচন' এবং 'পোস্ট' মানগুলি গ্রহণ করে, 'সিলেক্ট' ডিফল্ট হিসাবে, সুতরাং আপনি কোনও নতুন ফ্রেম অবজেক্ট তৈরি করতে পারবেন না। পরিবর্তে, আপনাকে দুটি ফ্রেমের অবজেক্টগুলির মধ্যে একটি প্রসারিত করতে হবে (এটি সমস্ত /wp-includes/js/media-views.js এ রয়েছে), এটিও এক ধরণের আড়াল। ইউআই এর অংশ যুক্ত করা একাধিক-পদক্ষেপ প্রক্রিয়া। আপনি সিলেক্ট দিয়ে শুরু করতে এবং যোগ করতে পারেন, তবে আপনার জন্য আমি পোস্ট ফ্রেমে কোড দিয়ে শুরু করে গ্যালারী স্টাফটি সরিয়ে নিতে বেছে নিয়েছি। এখানে আমার কোড, কাজ করা কিন্তু ভারী পরীক্ষিত নয়। সম্ভবত স্ট্রিমলাইনের জন্য কিছু জায়গা।

wp.media.view.MediaFrame.Select = wp.media.view.MediaFrame.Select.extend({

            initialize: function() {
                wp.media.view.MediaFrame.prototype.initialize.apply( this, arguments );

                _.defaults( this.options, {
                    multiple:  true,
                    editing:   false,
                    state:    'insert'
                });

                this.createSelection();
                this.createStates();
                this.bindHandlers();
                this.createIframeStates();
            },

            createStates: function() {
                var options = this.options;

                // Add the default states.
                this.states.add([
                    // Main states.
                    new wp.media.controller.Library({
                        id:         'insert',
                        title:      'Insert Media',
                        priority:   20,
                        toolbar:    'main-insert',
                        filterable: 'image',
                        library:    wp.media.query( options.library ),
                        multiple:   options.multiple ? 'reset' : false,
                        editable:   true,

                        // If the user isn't allowed to edit fields,
                        // can they still edit it locally?
                        allowLocalEdits: true,

                        // Show the attachment display settings.
                        displaySettings: true,
                        // Update user settings when users adjust the
                        // attachment display settings.
                        displayUserSettings: true
                    }),

                    // Embed states.
                    new wp.media.controller.Embed(),
                ]);


                if ( wp.media.view.settings.post.featuredImageId ) {
                    this.states.add( new wp.media.controller.FeaturedImage() );
                }
            },

            bindHandlers: function() {
                // from Select
                this.on( 'router:create:browse', this.createRouter, this );
                this.on( 'router:render:browse', this.browseRouter, this );
                this.on( 'content:create:browse', this.browseContent, this );
                this.on( 'content:render:upload', this.uploadContent, this );
                this.on( 'toolbar:create:select', this.createSelectToolbar, this );
                //

                this.on( 'menu:create:gallery', this.createMenu, this );
                this.on( 'toolbar:create:main-insert', this.createToolbar, this );
                this.on( 'toolbar:create:main-gallery', this.createToolbar, this );
                this.on( 'toolbar:create:featured-image', this.featuredImageToolbar, this );
                this.on( 'toolbar:create:main-embed', this.mainEmbedToolbar, this );

                var handlers = {
                        menu: {
                            'default': 'mainMenu'
                        },

                        content: {
                            'embed':          'embedContent',
                            'edit-selection': 'editSelectionContent'
                        },

                        toolbar: {
                            'main-insert':      'mainInsertToolbar'
                        }
                    };

                _.each( handlers, function( regionHandlers, region ) {
                    _.each( regionHandlers, function( callback, handler ) {
                        this.on( region + ':render:' + handler, this[ callback ], this );
                    }, this );
                }, this );
            },

            // Menus
            mainMenu: function( view ) {
                view.set({
                    'library-separator': new wp.media.View({
                        className: 'separator',
                        priority: 100
                    })
                });
            },

            // Content
            embedContent: function() {
                var view = new wp.media.view.Embed({
                    controller: this,
                    model:      this.state()
                }).render();

                this.content.set( view );
                view.url.focus();
            },

            editSelectionContent: function() {
                var state = this.state(),
                    selection = state.get('selection'),
                    view;

                view = new wp.media.view.AttachmentsBrowser({
                    controller: this,
                    collection: selection,
                    selection:  selection,
                    model:      state,
                    sortable:   true,
                    search:     false,
                    dragInfo:   true,

                    AttachmentView: wp.media.view.Attachment.EditSelection
                }).render();

                view.toolbar.set( 'backToLibrary', {
                    text:     'Return to Library',
                    priority: -100,

                    click: function() {
                        this.controller.content.mode('browse');
                    }
                });

                // Browse our library of attachments.
                this.content.set( view );
            },

            // Toolbars
            selectionStatusToolbar: function( view ) {
                var editable = this.state().get('editable');

                view.set( 'selection', new wp.media.view.Selection({
                    controller: this,
                    collection: this.state().get('selection'),
                    priority:   -40,

                    // If the selection is editable, pass the callback to
                    // switch the content mode.
                    editable: editable && function() {
                        this.controller.content.mode('edit-selection');
                    }
                }).render() );
            },

            mainInsertToolbar: function( view ) {
                var controller = this;

                this.selectionStatusToolbar( view );

                view.set( 'insert', {
                    style:    'primary',
                    priority: 80,
                    text:     'Select Image',
                    requires: { selection: true },

                    click: function() {
                        var state = controller.state(),
                            selection = state.get('selection');

                        controller.close();
                        state.trigger( 'insert', selection ).reset();
                    }
                });
            },

            featuredImageToolbar: function( toolbar ) {
                this.createSelectToolbar( toolbar, {
                    text:  'Set Featured Image',
                    state: this.options.state || 'upload'
                });
            },

            mainEmbedToolbar: function( toolbar ) {
                toolbar.view = new wp.media.view.Toolbar.Embed({
                    controller: this,
                    text: 'Insert Image'
                });
            }

    });

এটি wp.media.view.MediaFrame.Post থেকে কোডটি একত্রিত করে মিডিয়া.ভিউ থেকে edia পাঠ্যের মানগুলি হ'ল বিভিন্ন বোতাম এবং আপনি যদি চান তবে আপনার নিজের স্থানীয়করণের বিষয়টিকে উল্লেখ করতে পারেন। লাইব্রেরি কনস্ট্রাক্টর (ক্রিয়েস্টেটস () এ 'ফিল্টারযোগ্য' মানটি নির্ধারণ করে যে কোন মিডিয়া প্রকারকে সমর্থন করা হবে।

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

আশা করি এইটি কাজ করবে-


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

@ ইয়ানডুন এই প্রশ্নটি বেশ কয়েক বছর পুরনো, তবে আমি খুঁজে পেয়েছি যে আমারও একই সমাধান দরকার। পরীক্ষিত এবং পরিপক্ক যে কয়েক বছর ধরে আপনি কোনও সমাধান বজায় রেখেছেন? বা আপনার প্রয়োজনীয়তা পূরণ করে এমন প্লাগইন বা অন্য কোনও সমাধান খুঁজে পান? আপনার যদি বর্তমান কোড বা সমাধান থাকে তবে আপনি কি এটি একটি উত্তর হিসাবে পোস্ট করতে পারেন? ধন্যবাদ!
ব্যবহারকারী 658182

1

উত্স কোডটি পরীক্ষা করে দেখে মনে হচ্ছে জেনেরিক মিডিয়া মডেল "URL থেকে সন্নিবেশ" সমর্থন করে না। সেই ট্যাবটি আমি যেভাবে পেতে সক্ষম হয়েছি তা হ'ল "পোস্ট" ফ্রেমের ধরণটি নির্দিষ্ট করা:

var frame = wp.media( {
                            title       : 'Widget Uploader',
                            multiple    : false,
                            library     : { type : 'image' },
                            button      : { text : 'Select Image' },
                            frame      : 'post'
                        } );

ডাউনসাইড হ'ল নির্দিষ্ট মডেলের শিরোনাম উপেক্ষা করা হয়।


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

0

মুল বক্তব্যটি হ'ল সেই ট্যাবটি কোনও পোস্টে সরাসরি toোকানোর জন্য একটি বাহ্যিক ইউআরএল ফিরিয়ে দেয়, যখন উইজেটের কোনও মিডিয়া আইডি ফেরত দেওয়ার কথা। মূলত বাহ্যিক চিত্রটি সার্ভারে ট্রান্সলোড করা দরকার।

দেখুন / কীভাবে প্লাগইন গ্র্যাব ও সেভ আপনার যা করতে চায় তা করে does ( মাধ্যমে )


প্লাগইনটি যতই ভাল হয় বা না, আমি এটি কীভাবে এটি দেখায় আগ্রহী হব , আপনি কী বর্ণনা করতে পারবেন?
টম জে নোয়েল

আপনার জন্য স্থানীয় সার্ভারে বাহ্যিক চিত্র ডাউনলোড করা মিডিয়া লাইব্রেরি হ্যান্ডেল করে না? তা না হলেও, মূল প্রশ্নটি: আপনি এমনকি প্রথম স্থানে দেখানোর জন্য ট্যাবটি কীভাবে পাবেন?
ইয়ান ডান

আমি পরীক্ষা করে দেখেছি, এবং মিডিয়া লাইব্রেরি ইউআরএল থেকে সন্নিবেশিত চিত্রগুলি ডাউনলোড / সংযুক্ত করে না; এটি কেবল তাদের সাথে সরাসরি লিঙ্ক করে। এটি প্রশ্নের সাথে সত্যই প্রাসঙ্গিক নয়, যদিও আমি কেবল মডেলটিতে সন্নিবেশ থেকে ইউআরএল ট্যাব যুক্ত করতে পারি তা নিয়েই আমি উদ্বিগ্ন।
আয়ান ডান
আমাদের সাইট ব্যবহার করে, আপনি স্বীকার করেছেন যে আপনি আমাদের কুকি নীতি এবং গোপনীয়তা নীতিটি পড়েছেন এবং বুঝতে পেরেছেন ।
Licensed under cc by-sa 3.0 with attribution required.