web-dev-qa-db-fra.com

Étendre WP Customizer pour rendre possible la sélection de plusieurs images

Existe-t-il un moyen d’étendre Wordpress Customizer pour permettre plusieurs sélections?

Cela ressemble à ce que je veux: https://github.com/lucatume/multi-image-control . Je ne le fais pas fonctionner. Il ne montre que les boutons add et remove mais ils ne font rien.

Existe-t-il un autre script d'extension que je peux utiliser?

custom-fieldimagesuploads
1
Tom Groot

Ce que j'ai finalement fait était étendre le WP_Customize_Control comme suit:

<?php

if (!class_exists('WP_Customize_Image_Control')) {
    return null;
}

class Multi_Image_Custom_Control extends WP_Customize_Control
{
    public function enqueue()
    {
      wp_enqueue_style('multi-image-style', get_template_directory_uri().'/css/multi-image.css');
      wp_enqueue_script('multi-image-script', get_template_directory_uri().'/js/multi-image.js', array( 'jquery' ), Rand(), true);
    }

    public function render_content()
    { ?>
          <label>
            <span class='customize-control-title'>Image</span>
          </label>
          <div>
            <ul class='images'></ul>
          </div>
          <div class='actions'>
            <a class="button-secondary upload">Add</a>
          </div>

          <input class="wp-editor-area" id="images-input" type="hidden" <?php $this->link(); ?>>
      <?php
    }
}
?>

J'utilise javascript pour ouvrir le sélecteur de média WP lorsque l'utilisateur clique sur "Ajouter". Lorsqu'une image est sélectionnée, elle doit apparaître dans <ul class='images'></ul>. De plus, l'utilisateur doit pouvoir supprimer une image en cliquant sur une image. J'ai créé le fichier javascript suivant:

( function( $ ) {

        $(window).load(function(){
            var begin_attachment_string = $("#images-input").val();
            var begin_attachment_array = begin_attachment_string.split(",");
            for(var i = 0; i < begin_attachment_array.length; i++){
                if(begin_attachment_array[i] != ""){
                    $(".images").append( "<li class='image-list'><img src='"+begin_attachment_array[i]+"'></li>" );
                }
            }
            $(".button-secondary.upload").click(function(){
                var custom_uploader = wp.media.frames.file_frame = wp.media({
                    multiple: true
                });

                custom_uploader.on('select', function() {
                    var selection = custom_uploader.state().get('selection');
                    var attachments = [];
                    selection.map( function( attachment ) {
                        attachment = attachment.toJSON();
                        $(".images").append( "<li class='image-list'><img src='"+attachment.url+"'></li>" );
                        attachments.Push(attachment.url);
                        //
                     });
                     var attachment_string = attachments.join() + "," + $('#images-input').val();
                     $('#images-input').val(attachment_string).trigger('change');
                 });
                 custom_uploader.open();
             });

             $(".images").click(function(){
                 var img_src = $(event.target).find("img").attr('src');
                 $(event.target).closest("li").remove();
                 var attachment_string = $('#images-input').val();
                 attachment_string = attachment_string.replace(img_src+",", "");
                 $('#images-input').val(attachment_string).trigger('change');
             });
         });

} )( jQuery );

Enfin, j'ai ajouté un peu de CSS:

.image-list{
  width: 100%;
  height: 150px;
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
  -webkit-box-shadow: inset 0 0 15px rgba(0,0,0,.1), inset 0 0 0 1px rgba(0,0,0,.05);
  box-shadow: inset 0 0 15px rgba(0,0,0,.1), inset 0 0 0 1px rgba(0,0,0,.05);
  background: #eee;
  cursor: pointer;
  vertical-align: middle;
  display:flex;
  justify-content:center;
  align-items:center;
  overflow: hidden;
  position: relative;
}
.image-list:before{
  content: '';
  position: absolute;
  display: none;
  top: 0px;
  right: 0px;
  left: 0px;
  bottom: 0px;
  box-shadow: inset 0 0 0 1px #fff, inset 0 0 0 5px #c60c31;
}
.image-list:hover:before{
  display: block;
}
3
Tom Groot