从媒体上传器Java脚本对象检索自定义图像大小

时间：2013-08-14 作者：Norcross

我正在尝试获取使用创建的自定义图像大小add_image_size 返回javascript对象。我知道如何将它们包括在下拉列表中，但我不想/不需要。

当前对象返回数组中的默认值（完整、大、中和缩略图），但不返回任何自定义大小。

下面是我用来设置uploader实例的代码

jQuery(\'input.guide-logo-upload\').on(\'click\', function( event ){

    event.preventDefault();

    // If the media frame already exists, reopen it.
    if ( file_frame ) {
        file_frame.open();
        return;
    }

    // Create the media frame.
    file_frame = wp.media.frames.file_frame = wp.media({
        title: jQuery( this ).data( \'uploader_title\' ),
        button: {
            text: jQuery( this ).data( \'uploader_button_text\' )
        },
        multiple: false // force single file
    });

    // run the callback when selected
    file_frame.on( \'select\', function() {

        // make sure to only deal with the first item
        attachment = file_frame.state().get(\'selection\').first().toJSON();

        // WHERE ARE MY CUSTOM SIZES
        console.log(attachment);

        // Populate the field with the URL and show a preview below it
        jQuery(\'input#g-logo\').val( attachment.url );
        jQuery(\'input#g-logo-id\').val( attachment.id );

        jQuery(\'p.logo-description\').after( \'<img class="logo-display logo-140" src="\' + attachment.sizes.thumbnail.url + \'">\' );
        jQuery(\'p.logo-description\').after( \'<img class="logo-display logo-350" src="\' + attachment.sizes.medium.url + \'">\' );

    });

    // Finally, open the modal
    file_frame.open();
});

1 个回复
最合适的回答,由SO网友:Norcross 整理而成

多亏了推特上的一位朋友，我才得以实现这一目标。下面是代码。

function wpse_110060_image_sizes_js( $response, $attachment, $meta ){

        $size_array = array( \'custom_size_one\', \'custom_size_two\') ;

        foreach ( $size_array as $size ):

            if ( isset( $meta[\'sizes\'][ $size ] ) ) {
                $attachment_url = wp_get_attachment_url( $attachment->ID );
                $base_url = str_replace( wp_basename( $attachment_url ), \'\', $attachment_url );
                $size_meta = $meta[\'sizes\'][ $size ];

                $response[\'sizes\'][ $size ] = array(
                    \'height\'        => $size_meta[\'height\'],
                    \'width\'         => $size_meta[\'width\'],
                    \'url\'           => $base_url . $size_meta[\'file\'],
                    \'orientation\'   => $size_meta[\'height\'] > $size_meta[\'width\'] ? \'portrait\' : \'landscape\',
                );
            }

        endforeach;

        return $response;
}
add_filter ( \'wp_prepare_attachment_for_js\',  \'wpse_110060_image_sizes_js\' , 10, 3  );
注意：数组和foreach是必需的，因为我需要包含两个单独的数组。如果只有1个要包含，则可以删除。

结束
标签： uploads   javascript   小码农  

相关推荐

屏幕选项JavaScript代码

我想知道，是什么脚本驱动WordPress中的“屏幕选项”动画切换。我指的是当管理员单击帖子、页面或类别等窗口右上角附近的“屏幕选项”链接时滑出的选项菜单，当再次单击同一链接时滑回。如果有知识的人能告诉我JavaScript代码片段的确切位置，我将不胜感激。