Afficher des images de la Media Library via des metabox

Afficher des images de la Media Library wordpress via des metabox

Après avoir fouillé sur le net, j’ai trouvé une solution pour la création d’un custom field affichant des images depuis la Media Library. Ici on va se créer un custom field ou une métabox contenant l’uploader media de wordpress.

Notre metabox contiendra le javascript nécessaire pour appeler l’uploader de média, ainsi que pour ajouter des champ d’ajout d’images supplémentaires.

image

Comme d’habitude, cela peut s’avérer bien utile,  au cas ou on aurait supprimé l’éditeur par défaut de wordpress, mais qu’on aurait tout de même besoin d’afficher des images dans le corps de nos pages ou post.

La fonction est complexe, et tirée de stackoverflow :

 add_action( 'admin_init', 'add_image_cc' );
add_action( 'admin_head-post.php', 'print_scripts_cc' );
add_action( 'admin_head-post-new.php', 'print_scripts_cc' );
add_action( 'save_post', 'update_image_cc', 10, 2 );

/**
 * Add custom Meta Box sur les post 
 */
function add_image_cc() 
{
    add_meta_box(
        'image',
        'Images additionnelles',
        'image_options_cc',
        'post',
        'normal',
        'core'
    );
}

/**
 * Affichage de la metabox
 */
function image_options_cc() 
{
    global $post;
    $gallery_data = get_post_meta( $post->ID, 'gallery_data', true );

    // Nonce pour la verif
    wp_nonce_field( plugin_basename( __FILE__ ), 'noncename_cc' );
?>

<div id="dynamic_form">

    <div id="field_wrap">
    <?php 
    if ( isset( $gallery_data['image_url'] ) ) 
    {
        for( $i = 0; $i < count( $gallery_data['image_url'] ); $i++ ) 
        {
        ?>

        <div class="field_row">

          <div class="field_left">
            <div class="form_field">
              <label>Image URL</label>
              <input type="text"
                     class="meta_image_url"
                     name="gallery[image_url][]"
                     value="<?php esc_html_e( $gallery_data['image_url'][$i] ); ?>"
              />
            </div>
            <div class="form_field">
              <label>Description</label>
              <input type="text"
                     class="meta_image_desc"
                     name="gallery[image_desc][]"
                     value="<?php esc_html_e( $gallery_data['image_desc'][$i] ); ?>"
              />
            </div>
          </div>

          <div class="field_right image_wrap">
            <img src="<?php esc_html_e( $gallery_data['image_url'][$i] ); ?>" height="48" width="48" />
          </div>

          <div class="field_right">
            <input class="button" type="button" value="Parcourir" onclick="add_image(this)" /><br />
            <input class="button" type="button" value="Suppimer" onclick="remove_field(this)" />
          </div>

          <div class="clear" /></div> 
        </div>
        <?php
        } // endif
    } // endforeach
    ?>
    </div>

    <div style="display:none" id="master-row">
    <div class="field_row">
        <div class="field_left">
            <div class="form_field">
                <label>Image URL</label>
                <input class="meta_image_url" value="" type="text" name="gallery[image_url][]" />
            </div>
            <div class="form_field">
                <label>Image Link</label>
                <input class="meta_image_desc" value="" type="text" name="gallery[image_desc][]" />
            </div>
        </div>
        <div class="field_right image_wrap">
        </div> 
        <div class="field_right"> 
            <input type="button" class="button" value="parcourir" onclick="add_image(this)" />
            <br />
            <input class="button" type="button" value="Supprimer" onclick="remove_field(this)" /> 
        </div>
        <div class="clear"></div>
    </div>
    </div>

    <div id="add_field_row">
      <input class="button" type="button" value="Add Field" onclick="add_field_row();" />
    </div>

</div>

  <?php
}

/**
 * styles scripts
 */
function print_scripts_cc()
{
    // Verification du post type
    global $post;
    if( 'post' != $post->post_type )
        return;
    ?>  
    <style type="text/css">
      .field_left {
        float:left;
      }

      .field_right {
        float:left;
        margin-left:10px;
      }

      .clear {
        clear:both;
      }

      #dynamic_form {
        width:580px;
      }

      #dynamic_form input[type=text] {
        width:300px;
      }

      #dynamic_form .field_row {
        border:1px solid #999;
        margin-bottom:10px;
        padding:10px;
      }

      #dynamic_form label {
        padding:0 6px;
      }
    </style>

    <script type="text/javascript">
        function add_image(obj) {
            var parent=jQuery(obj).parent().parent('div.field_row');
            var inputField = jQuery(parent).find("input.meta_image_url");

            tb_show('', 'media-upload.php?TB_iframe=true');

            window.send_to_editor = function(html) {
                var url = jQuery(html).find('img').attr('src');
                inputField.val(url);
                jQuery(parent)
                .find("div.image_wrap")
                .html('<img src="'+url+'" height="48" width="48" />');

                // inputField.closest('p').prev('.awdMetaImage').html('<img height=120 width=120 src="'+url+'"/><p>URL: '+ url + '</p>'); 

                tb_remove();
            };

            return false;  
        }

        function remove_field(obj) {
            var parent=jQuery(obj).parent().parent();
            //console.log(parent)
            parent.remove();
        }

        function add_field_row() {
            var row = jQuery('#master-row').html();
            jQuery(row).appendTo('#field_wrap');
        }
    </script>
    <?php
}

/**
 * Save post action, process fields
 */
function update_image_cc( $post_id, $post_object ) 
{
    // Enregistrement
    if ( defined( 'DOING_AUTOSAVE' ) && DOING_AUTOSAVE )  
        return;

    // verification des revisions
    if ( 'revision' == $post_object->post_type )
        return;

    // verification d'authenticité
    if ( !wp_verify_nonce( $_POST['noncename_cc'], plugin_basename( __FILE__ ) ) )
        return;

    // le bon post type
    if ( 'post' != $_POST['post_type'] ) 
        return;

    if ( $_POST['gallery'] ) 
    {
        // construction du tableau pour la sauvegarde des données
        $gallery_data = array();
        for ($i = 0; $i < count( $_POST['gallery']['image_url'] ); $i++ ) 
        {
            if ( '' != $_POST['gallery']['image_url'][ $i ] ) 
            {
                $gallery_data['image_url'][]  = $_POST['gallery']['image_url'][ $i ];
                $gallery_data['image_desc'][] = $_POST['gallery']['image_desc'][ $i ];
            }
        }

        if ( $gallery_data ) 
            update_post_meta( $post_id, 'gallery_data', $gallery_data );
        else 
            delete_post_meta( $post_id, 'gallery_data' );
    } 
    // si rien, supprimer les options
    else 
    {
        delete_post_meta( $post_id, 'gallery_data' );
    }
}

Ce code est à placer dans le fichier functions.php.
Ensuite pour afficher ces images, il va falloir créer une boucle et des conditions pour afficher un titre général au bloc d’image qu’on veut créer, afficher les images uniquement s’il y en a etc.

Dans mon fichier single.php, je récupère les valeurs de ma metabox, que j’insère dans un tableau. Je parcours celui ci pour afficher, s’il y en a, mes images dans des blocs contenant la classe bootstrap col-sm-4.

<div class='row'>  
        <div class='col-lg-12'>
                           
                            <p><?php                            
                       $gallery_data = get_post_meta( $post->ID, 'gallery_data', true );?></p>
                        <?php if ($gallery_data!= '') {;?>
                           <h3>Plus d'images...</h3>
                        <?php };?>
                       <?php for( $i = 0; $i < count( $gallery_data['image_url'] ); $i++ ) {?>
                    
                        
                          <?php
                        
                        if ($gallery_data== '') {
                            echo '';
                        } else {
                          echo  '<div class="col-sm-4 col-md-4"><img src="'.$gallery_data["image_url"][$i].'"></div>';
                        }
                       };
                        ?>
                      
                    </div>
                  </div>

Voici un rendu basique en front :

plusimage

j’ai mon thumbnail en haut, des custom field pour les données, puis dans les lignes d’en dessous, les images enregistrées depuis mes metabox.

Dans une page où l’on n’a mis aucune image additionnelle, nos conditions nous permettent ici de ne rien afficher :

titre

Même si le code peut sans doute être largement optimisé, je suis parvenu à adapter puis compléter la fonction pour un affichage parfaitement intégré au site.

Mis à jour le Par Copier coller | Dans wordpress