如何从插件的媒体库中选择图像?


15

我编写了一个插件,在该插件的右下角有一个小聊天图标,但是我希望用户能够从中选择一个图像作为图标Media Library。如何使用Wordpress API做到这一点?图像是插件中的设置(只能由管理员更改)


2
您应该包括wp.media允许自定义上传,并为此选择媒体文件。WPSE有很多的例子,但也许这帖子可以帮助你jeroensormani.com/...另外你在github上找到的例子,尤其是ocean90 - github.com/ocean90/media-modal-demo
bueltge

Answers:


19

您应该使用wp.mediaWordPress媒体管理器对话框。

首先,您需要排队脚本:

// As you are dealing with plugin settings,
// I assume you are in admin side
add_action( 'admin_enqueue_scripts', 'load_wp_media_files' );
function load_wp_media_files( $page ) {
  // change to the $page where you want to enqueue the script
  if( $page == 'options-general.php' ) {
    // Enqueue WordPress media scripts
    wp_enqueue_media();
    // Enqueue custom script that will interact with wp.media
    wp_enqueue_script( 'myprefix_script', plugins_url( '/js/myscript.js' , __FILE__ ), array('jquery'), '0.1' );
  }
}

您的HTML可能是这样的(请注意,我的代码在插件设置中使用附件ID代替了您在回答中所做的图像url,我认为它会好得多。例如,使用ID可以在您获得不同的图像大小时需要他们):

$image_id = get_option( 'myprefix_image_id' );
if( intval( $image_id ) > 0 ) {
    // Change with the image size you want to use
    $image = wp_get_attachment_image( $image_id, 'medium', false, array( 'id' => 'myprefix-preview-image' ) );
} else {
    // Some default image
    $image = '<img id="myprefix-preview-image" src="https://some.default.image.jpg" />';
}

 <?php echo $image; ?>
 <input type="hidden" name="myprefix_image_id" id="myprefix_image_id" value="<?php echo esc_attr( $image_id ); ?>" class="regular-text" />
 <input type='button' class="button-primary" value="<?php esc_attr_e( 'Select a image', 'mytextdomain' ); ?>" id="myprefix_media_manager"/>ç

myscript.js

jQuery(document).ready( function($) {

      jQuery('input#myprefix_media_manager').click(function(e) {

             e.preventDefault();
             var image_frame;
             if(image_frame){
                 image_frame.open();
             }
             // Define image_frame as wp.media object
             image_frame = wp.media({
                           title: 'Select Media',
                           multiple : false,
                           library : {
                                type : 'image',
                            }
                       });

                       image_frame.on('close',function() {
                          // On close, get selections and save to the hidden input
                          // plus other AJAX stuff to refresh the image preview
                          var selection =  image_frame.state().get('selection');
                          var gallery_ids = new Array();
                          var my_index = 0;
                          selection.each(function(attachment) {
                             gallery_ids[my_index] = attachment['id'];
                             my_index++;
                          });
                          var ids = gallery_ids.join(",");
                          jQuery('input#myprefix_image_id').val(ids);
                          Refresh_Image(ids);
                       });

                      image_frame.on('open',function() {
                        // On open, get the id from the hidden input
                        // and select the appropiate images in the media manager
                        var selection =  image_frame.state().get('selection');
                        var ids = jQuery('input#myprefix_image_id').val().split(',');
                        ids.forEach(function(id) {
                          var attachment = wp.media.attachment(id);
                          attachment.fetch();
                          selection.add( attachment ? [ attachment ] : [] );
                        });

                      });

                    image_frame.open();
     });

});

// Ajax request to refresh the image preview
function Refresh_Image(the_id){
        var data = {
            action: 'myprefix_get_image',
            id: the_id
        };

        jQuery.get(ajaxurl, data, function(response) {

            if(response.success === true) {
                jQuery('#myprefix-preview-image').replaceWith( response.data.image );
            }
        });
}

然后使用Ajax操作刷新图像预览:

// Ajax action to refresh the user image
add_action( 'wp_ajax_myprefix_get_image', 'myprefix_get_image'   );
function myprefix_get_image() {
    if(isset($_GET['id']) ){
        $image = wp_get_attachment_image( filter_input( INPUT_GET, 'id', FILTER_VALIDATE_INT ), 'medium', false, array( 'id' => 'myprefix-preview-image' ) );
        $data = array(
            'image'    => $image,
        );
        wp_send_json_success( $data );
    } else {
        wp_send_json_error();
    }
}

PD:这是根据其他答案在此处编写的快速示例。未测试,因为您没有提供有关将使用代码的确切上下文或存在的确切问题的足够信息。


2

wordpress-settings-api-class由网址的Tareq Hasan 使用:https//github.com/tareq1988/wordpress-settings-api-class


2
我认为没有其他库的解决方案会更好,更可靠;喜欢wp.media控制
bueltge '16

1

由于您希望每个用户的图标都不同,因此必须将图像存储在用户配置文件中。这意味着您需要添加一个额外的用户字段:

// create the field
add_action( 'show_user_profile', 'wpse_235406_chaticon' );
add_action( 'edit_user_profile', 'wpse_235406_chaticon' );

function wpse_235406_chaticon ($user) { 
    echo '
    <h3>Chat Icon</h3>
    <table class="form-table">
        <tr>
            <th><label for="chaticon">Chat Icon</label></th>
            <td>
                <input type="file" name="chaticon" id="chaticon" value="' . esc_attr (get_the_author_meta ('chaticon', $user->ID)) . '" class="file-upload" /><br />
                <span class="description">Please select your chat icon.</span>
            </td>
        </tr>
    </table>';
}

// save the field
add_action( 'personal_options_update', 'wpse_235406_chaticon_save' );
add_action( 'edit_user_profile_update', 'wpse_235406_chaticon_save' );

function wpse_235406_chaticon_save ($user_id) {
    if (current_user_can ('edit_user', $user_id)) 
        update_usermeta ($user_id, 'chaticon', $_POST['chaticon']);
}

现在,这使您可以从用户的计算机上载文件。如果您希望用户从现有图像中选择文件,事情会变得更加复杂,因为这时您需要调用媒体库来代替默认的文件上传。史蒂文·斯拉克(Steven Slack)写了一篇很棒的文章,介绍了如何做到这一点,我不想在这里复制粘贴他的代码来赞扬他。

在您的模板中,您必须区分三种可能性:用户未登录,用户登录但没有图标,用户登录并有图标。大致包括以下内容:

$current_user = wp_get_current_user();
if ( 0 == $current_user->ID ) {
  ... do what you want to do for not logged in users ...
  }
else {
  $icon = get_user_meta ($current_user->ID, 'chaticon');
  if (empty($icon)) {
    ... default icon with link to upload possibility ...
    }
  else {
     ... display $icon ...
     }

不,我希望它成为一个插件设置
Thomas

您的意思是只有网站管理员才能更改图标,并且每个访问者/用户都一样吗?
cjbj

1
那将是微不足道的。这是针对该问题的教程:mikejolley.com/2012/12/21/…–
cjbj

是的,它自定义按钮的外观(图像)
Thomas

我尝试了本教程,但是对我来说不起作用(已过时?),因为框架不是js对象的一部分
Thomas


0

我使用了此解决方案(不使用媒体库本身):

在模态中使用image-picker-lib来设置隐藏输入的值,该值将发布到选项中。通过获取所有媒体并将其作为选项进行回显,我可以让用户选择一个img。

的HTML

<input id="image" name="image" class="validate" type="image" src="<?php echo esc_attr(get_option('image_url')); ?>" id="image_url" width="48" height="48" />
<br>
<a href="#imageModal" class="waves-effect waves-light btn modal-trigger">
    change
</a>
<input id="image_url" name="image_url" type="text" value="" hidden />

PHP / HTML

<div id="imageModal" class="modal">
    <div class="modal-content">
        <select class="image-picker show-html">
            <option data-img-src="<?php echo CM_PATH . "/img/chat_general.png" ?>"  value="0"></option>
            <?php
            $query_images_args = array(
                'post_type'   => 'attachment',
                'post_mime_type' => 'image',
                'post_status' => 'inherit',
                'posts_per_page' => - 1,
            );

            $query_images = new WP_Query( $query_images_args );
            $i = 1;
            foreach ( $query_images->posts as $image ) {
                ?>
                <option data-img-src="<?php echo wp_get_attachment_url($image->ID); ?>"  value="<?php echo $i; ?>"></option>
                <?php
                $i  ;
            }
            ?>
        </select>
    </div>
    <div class="modal-footer">
        <a class="waves-effect waves-light btn change">Choose</a>
    </div>
</div>
</div>
</div>

JS

 $(".change").on("click", function() {
 +            var url = $(".image-picker > option:selected").attr("data-img-src");
 +            $("#image").attr("src", url);
 +            $("#image_url").attr("value", url);
 +            $("#imageModal").closeModal();
 +        });

我认为没有其他库的解决方案会更好,更可靠;喜欢wp.media控制
bueltge '16

@bueltge我同意,但是没有人给出一个直接的答案,我需要时间。因此,如果有人给出了很好的答案,他们就会得到赏金!
托马斯

我也将您的答案视为解决方案,但不是最佳方法。现在,它是问题作者的一部分;您;)来做决定。
bueltge '16

随着图像数量的增加,该解决方案很快就会成为问题。“没有人给出直接的答案”不是借口;您的问题很差,因此您得到的答案很差。您没有向我们展示您尝试过的任何努力,研究或代码,只是“我想这样做,提供现成的解决方案”,这与“为我完成工作”相同。按照bueltge的建议搜索wp.media;WPSE中有数百个示例。如果您在使用时遇到问题,请发布有关此问题的新问题。
cybmeta

我尝试过@cybmeta,这是我最好的尝试,所以请不要那么做。如果您不喜欢它,请提出一个更好的解决方案。
托马斯
By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.