programing

인수가 지원되는 사용자 지정 wp.media

sourcejob 2023. 10. 21. 10:25
반응형

인수가 지원되는 사용자 지정 wp.media

[미디어 추가] 버튼을 설정하는 방법:

  1. 적절한 워드프레스 [미디어] UI

  2. 팝업 오른쪽에 크기 및 정렬 UI가 있습니다.

  3. can 사용자 지정 팝업 제목 및 단추

  4. size and alignments 인수를 다시 보내 사용할 수 있습니다.

대부분의 솔루션을 다루려고 노력해 보십시오.

  1. 사용하다tb_show("", "media-upload.php?type=image&TB_iframe=true");그리고.window.send_to_editor

    • 문제: 표준 wp.media UI가 없습니다.

    • js 코드:

      jQuery("#my_button").click(function() {
    tb_show("", "media-upload.php?type=image&TB_iframe=true");
    return false;
});
window.send_to_editor = function(html) {
    console.log(html);
    tb_remove();
}

  2. 사용하다wp.media({frame: 'post'})

    • 문제: 제목, 버튼과 같은 UI 요소를 사용자 지정할 수 없습니다.

    • js 코드:

      function clearField(){
    #remove file nodes
    #...
}

var frame = wp.media({frame: 'post'});

frame.on('close',function() {
    var selection = frame.state().get('selection');
    if(!selection.length){
        clearField();
    }
});

frame.on( 'select',function() {
    var state = frame.state();
    var selection = state.get('selection');
    if ( ! selection ) return;

    clearField();

    selection.each(function(attachment) {
        console.log(attachment.attributes);
    });
});

frame.open();

  3. 사용하다wp.media.editor와 함께wp.media.editor.open( editor_id )

    • 문제: 제목, 버튼과 같은 UI 요소를 사용자 지정할 수 없습니다.

    • js 코드: https://wordpress.stackexchange.com/questions/75808/using-wordpress-3-5-media-uploader-in-meta-box#75823

  4. 사용하다wp.media개서하여wp.media.controller.Library회수합니다.attachment인에select

    • 문제: 복잡해요... 하지만 일단 당신이 그것을 이해하면 모든 것이 이해가 되고, 그것이 나의 마지막 해결책입니다.

    • js 코드:

      /**
 * Please attach all the code below to a button click event
 **/

//create a new Library, base on defaults
//you can put your attributes in
var insertImage = wp.media.controller.Library.extend({
    defaults :  _.defaults({
            id:        'insert-image',
            title:      'Insert Image Url',
            allowLocalEdits: true,
            displaySettings: true,
            displayUserSettings: true,
            multiple : true,
            type : 'image'//audio, video, application/pdf, ... etc
      }, wp.media.controller.Library.prototype.defaults )
});

//Setup media frame
var frame = wp.media({
    button : { text : 'Select' },
    state : 'insert-image',
    states : [
        new insertImage()
    ]
});

//on close, if there is no select files, remove all the files already selected in your main frame
frame.on('close',function() {
    var selection = frame.state('insert-image').get('selection');
    if(!selection.length){
        #remove file nodes
        #such as: jq("#my_file_group_field").children('div.image_group_row').remove();
        #...
    }
});


frame.on( 'select',function() {
    var state = frame.state('insert-image');
    var selection = state.get('selection');
    var imageArray = [];

    if ( ! selection ) return;

    #remove file nodes
    #such as: jq("#my_file_group_field").children('div.image_group_row').remove();
    #...

    //to get right side attachment UI info, such as: size and alignments
    //org code from /wp-includes/js/media-editor.js, arround `line 603 -- send: { ... attachment: function( props, attachment ) { ... `
    selection.each(function(attachment) {
        var display = state.display( attachment ).toJSON();
        var obj_attachment = attachment.toJSON()
        var caption = obj_attachment.caption, options, html;

        // If captions are disabled, clear the caption.
        if ( ! wp.media.view.settings.captions )
            delete obj_attachment.caption;

        display = wp.media.string.props( display, obj_attachment );

        options = {
            id:        obj_attachment.id,
            post_content: obj_attachment.description,
            post_excerpt: caption
        };

        if ( display.linkUrl )
            options.url = display.linkUrl;

        if ( 'image' === obj_attachment.type ) {
            html = wp.media.string.image( display );
            _.each({
            align: 'align',
            size:  'image-size',
            alt:   'image_alt'
            }, function( option, prop ) {
            if ( display[ prop ] )
                options[ option ] = display[ prop ];
            });
        } else if ( 'video' === obj_attachment.type ) {
            html = wp.media.string.video( display, obj_attachment );
        } else if ( 'audio' === obj_attachment.type ) {
            html = wp.media.string.audio( display, obj_attachment );
        } else {
            html = wp.media.string.link( display );
            options.post_title = display.title;
        }

        //attach info to attachment.attributes object
        attachment.attributes['nonce'] = wp.media.view.settings.nonce.sendToEditor;
        attachment.attributes['attachment'] = options;
        attachment.attributes['html'] = html;
        attachment.attributes['post_id'] = wp.media.view.settings.post.id;

        //do what ever you like to use it
        console.log(attachment.attributes);
        console.log(attachment.attributes['attachment']);
        console.log(attachment.attributes['html']);
    });
});

//reset selection in popup, when open the popup
frame.on('open',function() {
    var selection = frame.state('insert-image').get('selection');

    //remove all the selection first
    selection.each(function(image) {
        var attachment = wp.media.attachment( image.attributes.id );
        attachment.fetch();
        selection.remove( attachment ? [ attachment ] : [] );
    });

    //add back current selection, in here let us assume you attach all the [id] to <div id="my_file_group_field">...<input type="hidden" id="file_1" .../>...<input type="hidden" id="file_2" .../>
    jq("#my_file_group_field").find('input[type="hidden"]').each(function(){
         var input_id = jq(this);
        if( input_id.val() ){
            attachment = wp.media.attachment( input_id.val() );
            attachment.fetch();
            selection.add( attachment ? [ attachment ] : [] );
        }
    });
});

//now open the popup
frame.open();

그의 코드를 사용했을 때 이미지 src=""가 누락되었기 때문에 ZAC의 옵션 4에 추가하고 싶습니다.

이것이 해결책입니다.

                if ( 'image' === obj_attachment.type ) {
                html = wp.media.string.image( display );
                _.each({
                align: 'align',
                size:  'image-size',
                alt:   'image_alt'
                }, function( option, prop ) {
                if ( display[ prop ] )
                    options[ option ] = display[ prop ];
                });
                html = wp.media.string.image( display, obj_attachment );
            }

이렇게 하면 새 미디어 업로더를 사용자 지정 제목과 버튼 및 오른쪽 사이드바로 호출할 수 있습니다.

var custom_uploader;
jQuery('#fileform').on('click','.select-files', function(e) {
    var button = jQuery(this);
    custom_uploader = wp.media.frames.file_frame = wp.media({
        title: 'Choose File',
        library: {
            author: userSettings.uid // specific user-posted attachment
        },
        button: {
            text: 'Choose File'
        },
        multiple: false
    });

    //When a file is selected, grab the URL and set it as the text field's value
    custom_uploader.on('select', function() {
        attachment = custom_uploader.state().get('selection').first().toJSON();
        console.log(attachment.url);
        console.log(attachment.id); // use them the way you want
    });

    //Open the uploader dialog
    // Set post id
    wp.media.model.settings.post.id = jQuery('#post_ID').val();
    custom_uploader.open();
});

이 링크를 확인하세요 -> https://github.com/phpcodingmaster/WordPress-Media-Modal-Image-Uploads

다음을 수행하는 방법을 보여 줍니다.

  • 관리 미디어 모드 열기
  • 단일 이미지 정보 가져오기
  • 여러 이미지 정보 가져오기

WordPress 버전 6.0으로 테스트됨

언급URL : https://stackoverflow.com/questions/21540951/custom-wp-media-with-arguments-support

반응형

'programing' 카테고리의 다른 글

mysql의 기본 'mysql' 데이터베이스를 복구/재생성하는 방법  (0) 2023.10.26
엑셀 라이브러리로 엑셀 파일의 셀 스타일을 변경하려면 어떻게 해야 합니까?  (0) 2023.10.21
MySQL에서 지정된 행 번호로 시작하는 행을 선택하려면 어떻게 해야 합니까?  (0) 2023.10.21
열을 추가하는 동안 영향을 받는 행 0개  (0) 2023.10.21
Fancybox: Android 전화기에서 스크롤할 수 없습니다.  (0) 2023.10.21

'programing'의 다른글

  • 현재글인수가 지원되는 사용자 지정 wp.media

관련글

댓글

티스토리툴바