크기를 선택한 WordPress 미디어 업로더

크기를 선택한 WordPress 미디어 업로더

내 WordPress 플러그인에 이미지 입력을 추가하고 싶다.이를 위해 표준 WordPress 미디어 업로더를 다음과 같이 사용합니다.

var custom_uploader;

$('.upload_image_button').click(function(e) {
    input = $(this);
    e.preventDefault();

    custom_uploader = wp.media.frames.file_frame = wp.media({
        title: 'Choose Collage Image',
        library: {
            type: 'image'
        },
        button: {
            text: 'Choose Collage Image'
        },
        multiple: false,

        displaySettings: true,

        displayUserSettings: false
    });

    custom_uploader.on('select', function() {
        attachment = custom_uploader.state().get('selection').first().toJSON();
        input.prev('input').val(attachment.url);
    });

    custom_uploader.open();

});

이건 완벽하게 작동한다.플러그인에 맞는 이미지 크기를 두 개 더 추가합니다.

if ( function_exists( 'add_image_size' ) ) {
    add_image_size( 'collage-large', 460, 660, true );
    add_image_size( 'collage-small', 460, 325, true );
}

문제:이미지 크기 이상의 섬네일 셀렉터는 미디어 업로드 폼에 표시되지 않습니다.그걸 어떻게 하는 거죠?

미디어 삽입 대화 상자는 "편집 페이지" 사이트에 표시된 대로 사용할 수 있습니다. 이 대화 상자는 정렬, 링크 대상 및 크기 입력 필드를 추가합니다.그렇게 하려면 추가frame: 'post'옵션 어레이:

file_frame = wp.media.frames.file_frame = wp.media({
    title: 'Select a image to upload',
    button: {
        text: 'Use this image',
    },
    multiple: false,
    frame:    'post',    // <-- this is the important part
    state:    'insert',
});

"선택" 이벤트를 듣는 대신 "삽입" 이벤트를 듣는 것이 좋습니다.이 코드는 크기를 포함한 추가 속성을 검색하는 방법을 보여줍니다.

// When an image is inserted, run a callback.
file_frame.on( 'insert', function(selection) {
    var state = file_frame.state();
    selection = selection || state.get('selection');
    if (! selection) return;
    // We set multiple to false so only get one image from the uploader
    var attachment = selection.first();
    var display = state.display(attachment).toJSON();  // <-- additional properties
    attachment = attachment.toJSON();
    // Do something with attachment.id and/or attachment.url here
    var imgurl = attachment.sizes[display.size].url;
    jQuery( '#filenameFromURL' ).val( imgurl );
});

인터넷 어디선가 찾아요.유용할 수도 있다.

attachment = custom_uploader.state().get('selection').first().toJSON();

첨부파일을 사용하면 다음 작업을 수행할 수 있습니다.

1. 알트
2. 작가.
3. 표제
4. compat (<-- 이것은 오브젝트입니다)
   • 아이템
   • 메타
5. 날짜.
6. 날짜 포맷 완료
7. 묘사
8. 편집 링크
9. 파일명
10. 높이
11. 아이콘
12. 아이디
13. 링크
14. 메뉴 순서
15. 마임
16. 수정된
17. 이름.
18. nonces(<--는 오브젝트)
    • 삭제하다
    • 갱신하다
    • 원형의
19. 오리엔테이션
20. sizes (<--이것은 오브젝트입니다)
    • full (<--이것은 오브젝트입니다)
      • 높이
      • 오리엔테이션
      • url
      • 폭
      • 원형의
    • medium (<-- 이것은 오브젝트입니다)
      • 높이
      • 오리엔테이션
      • url
      • 폭
      • 원형의
    • 썸네일(<--이것은 오브젝트입니다)
      • 높이
      • 오리엔테이션
      • url
      • 폭
      • 원형의
    • proto (<--이것은 오브젝트입니다)
21. 상황
22. 서브타입
23. 직함
24. 유형
25. 업로드했다로.
26. url
27. 폭

문제를 해결하려면 위의 사례 20과 함께 사용할 것을 권장합니다.

input.prev('input').val(attchment.sizes.collage-large.url);

잘 됐으면 좋겠다!

거의 다 왔어.관리 패널 내에서 크기를 선택할 수 있도록 하려면 add_image_size Codex Entry를 확인합니다.

add_filter( 'image_size_names_choose', 'my_custom_sizes' );
function my_custom_sizes( $sizes ) {
    return array_merge( $sizes, array(
        'your-custom-size' => __('Your Custom Size Name'),
    ) );
}

따라서 고객님의 경우 필요한 작업을 수행할 수 있습니다.

add_filter( 'image_size_names_choose', 'my_custom_sizes' );
function my_custom_sizes( $sizes ) {
    return array_merge( $sizes, array(
        'collage-large' => __('Collage Large'),
        'collage-small' => __('Collage Small'),
    ) );
}

언급URL : https://stackoverflow.com/questions/20101909/wordpress-media-uploader-with-size-select