web-dev-qa-db-fra.com

Définition de plusieurs URL d'images à l'aide de Wordpress 'Media Uploader

J'ai configuré une méta-boîte pour contenir des informations supplémentaires que mon client peut insérer, et celles-ci apparaîtront dans une autre section de la page.

La page apparaît à http://96.125.170.106/~prestonp/?project=360

Les données apparaissent dans la partie droite de la page, mais également dans ces données, j'aimerais inclure des photos qui seraient affichées en haut et en haut à droite de la page, comme dans l'image ci-dessous.

enter image description here

Jusqu’à présent, j’ai ajouté le système d’image sélectionnée, et cela fonctionne ... en quelque sorte ... Si je n’en ai qu’un seul, celui-ci fonctionne parfaitement, si j’en ai deux, le second fonctionne comme prévu, mais le premier Lorsque je clique sur "Télécharger une image" et que je sélectionne mon image, l'URL de l'image est placée dans le Thumb 1 au lieu de Main Image.

enter image description here

enter image description here

Je suis à peu près sûr que mon problème est dans jQuery, mais je ne suis pas très au courant dans jQuery. Quelqu'un peut-il m'aider à comprendre où est mon problème? Mon code est ci-dessous.

<?php

function wp_gear_manager_admin_scripts() {
wp_enqueue_script('media-upload');
wp_enqueue_script('thickbox');
wp_enqueue_script('jquery');
}

function wp_gear_manager_admin_styles() {
wp_enqueue_style('thickbox');
}

add_action('admin_print_scripts', 'wp_gear_manager_admin_scripts');
add_action('admin_print_styles', 'wp_gear_manager_admin_styles');

?>

<script language="JavaScript">
jQuery(document).ready(function() {
jQuery('#upload_image_button_main').click(function() {
formfield = jQuery('#_my_meta_upload_image_main').attr('name');
tb_show('', 'media-upload.php?type=image&TB_iframe=true');
return false;
});

window.send_to_editor = function(html) {
imgurl = jQuery('img',html).attr('src');
jQuery('#_my_meta_upload_image_main').val(imgurl);
tb_remove();
}

});
</script>
<script language="JavaScript">
jQuery(document).ready(function() {
jQuery('#upload_image_button_1').click(function() {
formfield = jQuery('#_my_meta_upload_image_1').attr('name');
tb_show('', 'media-upload.php?type=image&TB_iframe=true');
return false;
});

window.send_to_editor = function(html) {
imgurl = jQuery('img',html).attr('src');
jQuery('#_my_meta_upload_image_1').val(imgurl);
tb_remove();
}

});
</script>


<div class="my_meta_control">
    <p>Fill out this box to complete the project data section of the project page.</p>
    <label>Project Name</label>
    <p><input type="text" name="_my_meta[name]" value="<?php if(!empty($meta['name'])) echo $meta['name']; ?>"/></p>
    <label>Project Location</label>
    <p><input type="text" name="_my_meta[location]" value="<?php if(!empty($meta['location'])) echo $meta['location']; ?>"/></p>
    <label>Project Client</label>
    <p><input type="text" name="_my_meta[client]" value="<?php if(!empty($meta['client'])) echo $meta['client']; ?>"/></p>
    <label>Project Data</label>
    <p><input type="text" name="_my_meta[stories]" value="<?php if(!empty($meta['stories'])) echo $meta['stories']; ?>"/> <span>Stories</span><br />
    <input type="text" name="_my_meta[units]" value="<?php if(!empty($meta['units'])) echo $meta['units']; ?>"/> <span>Units</span><br />
    <input type="text" name="_my_meta[acres]" value="<?php if(!empty($meta['acres'])) echo $meta['acres']; ?>"/> <span>Acres</span><br />
    <input type="text" name="_my_meta[unitsPerAcres]" value="<?php if(!empty($meta['unitsPerAcres'])) echo $meta['unitsPerAcres']; ?>"/> <span>Units/Acres</span><br />
    <input type="text" name="_my_meta[website]" value="<?php if(!empty($meta['website'])) echo $meta['website']; ?>"/> <span>Website</span><br /><br /><br /><br />
    <input id="_my_meta_upload_image_main" type="text" size="36" name="_my_meta[upload_image_main]" value="<?php if(!empty($meta['upload_image_main'])) echo $meta['upload_image_main']; ?>" /><input id="upload_image_button_main" type="button" value="Upload Image" /> <span>Main Image</span><br />

    <input id="_my_meta_upload_image_1" type="text" size="36" name="_my_meta[upload_image_1]" value="<?php if(!empty($meta['upload_image_1'])) echo $meta['upload_image_1']; ?>" /><input id="upload_image_button_1" type="button" value="Upload Image" /> <span>Thumb 1</span><br />
    <input id="_my_meta_upload_image_2" type="text" size="36" name="_my_meta[upload_image_2]" value="<?php if(!empty($meta['upload_image_2'])) echo $meta['upload_image_2']; ?>" /><input id="upload_image_button_2" type="button" value="Upload Image" /> <span>Thumb 2</span><br />
    <input id="_my_meta_upload_image_3" type="text" size="36" name="_my_meta[upload_image_3]" value="<?php if(!empty($meta['upload_image_3'])) echo $meta['upload_image_3']; ?>" /><input id="upload_image_button_3" type="button" value="Upload Image" /> <span>Thumb 3</span><br />
    <input id="_my_meta_upload_image_4" type="text" size="36" name="_my_meta[upload_image_4]" value="<?php if(!empty($meta['upload_image_4'])) echo $meta['upload_image_4']; ?>" /><input id="upload_image_button_4" type="button" value="Upload Image" /> <span>Thumb 4</span><br />
    <input id="_my_meta_upload_image_5" type="text" size="36" name="_my_meta[upload_image_5]" value="<?php if(!empty($meta['upload_image_5'])) echo $meta['upload_image_5']; ?>" /><input id="upload_image_button_5" type="button" value="Upload Image" /> <span>Thumb 5</span><br />
    <input id="_my_meta_upload_image_6" type="text" size="36" name="_my_meta[upload_image_6]" value="<?php if(!empty($meta['upload_image_6'])) echo $meta['upload_image_6']; ?>" /><input id="upload_image_button_6" type="button" value="Upload Image" /> <span>Thumb 6</span><br />
    <input id="_my_meta_upload_image_7" type="text" size="36" name="_my_meta[upload_image_7]" value="<?php if(!empty($meta['upload_image_7'])) echo $meta['upload_image_7']; ?>" /><input id="upload_image_button_7" type="button" value="Upload Image" /> <span>Thumb 7</span><br />
    <input id="_my_meta_upload_image_8" type="text" size="36" name="_my_meta[upload_image_8]" value="<?php if(!empty($meta['upload_image_8'])) echo $meta['upload_image_8']; ?>" /><input id="upload_image_button_8" type="button" value="Upload Image" /> <span>Thumb 8</span><br />
    <input id="_my_meta_upload_image_9" type="text" size="36" name="_my_meta[upload_image_9]" value="<?php if(!empty($meta['upload_image_9'])) echo $meta['upload_image_9']; ?>" /><input id="upload_image_button_9" type="button" value="Upload Image" /> <span>Thumb 9</span></p>
</div>
metaboxuploads
1
BrettAdamsGA

Il y a 2 choses que vous devriez considérer:

  1. change le send_to_editor dans le __ rappelclick. Cela ne changera cette fonction que lorsque cela sera nécessaire, par ex. quand le téléchargeur est affiché. Cela empêche également les choses indésirables avec les variables globales.

  2. Vous devriez toujours sauvegarder le send_to_editor.

Voici mon exemple de code (non testé ):

jQuery(document).ready(function($) {
    $('#upload_image_button_main').click(function() {
        var backup = window.send_to_editor;

        window.send_to_editor = function(html) {
            imgurl = $('img', html).attr('src');
            jQuery('#_my_meta_upload_image_main').val(imgurl);
            tb_remove();
        };

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

        window.send_to_editor = backup;
        return false;
    });
});
1
Anh Tran

Ceci est un peu vieux mais je devais poster ma solution quelque part. Partout où j'ai regardé indiqué l'utilisation du modal Thickbox et le iframe media-upload.php. Ceci est faux si vous souhaitez que les images insérées apparaissent comme le modal de sélection d'image en vedette. Ce que vous avez réellement besoin d’utiliser, c’est la classe intégrée js wp.media. Voici une solution de travail que j'ai mise en œuvre. De toute évidence, vous devez répondre à vos propres besoins.

Cela permet de sélectionner plusieurs images, puis chaque fonction traite les résultats. Voir ce lien pour référence: https://codex.wordpress.org/Javascript_Reference/wp.media

Le javascript:

jQuery(function($){

  var frame;
  // ADD IMAGE LINK
  $('#gmls_add_images').on( 'click', function( event ){
    event.preventDefault();
    // If the media frame already exists, reopen it.
    if ( frame ) {
      frame.open();
      return;
    }
    // Create a new media frame
    frame = wp.media({
      title: 'Select or Upload Property Images',
      button: {
        text: 'Add Images to property'
      },
      multiple: true  // Set to true to allow multiple files to be selected
    });
    // When an image is selected in the media frame...
    frame.on( 'select', function() {
        // Get media attachment details from the frame state
        var attachments = frame.state().get('selection').toJSON();
        $(attachments).each(function(key,attachment){
            jQuery('#image_list').append('<div class="image_box">'+
                '<input type="hidden" name="images[]" value="'+attachment.url+'" />'+
                '<img src="'+attachment.url+'" height="100px;" /><br>'+
                '<a title="Remove Image" onclick="jQuery(this).parent().remove();">Remove Image</a>'+
                '</div>');
        });
        $('#TB_overlay').trigger('click');
    });

    // Finally, open the modal on click
    frame.open();
  });
});

Le html:

<input type="button" id="gmls_add_images" value="Add Images">
<div class="sortable" id="image_list"></div>
0
gliffen

Ce qui suit est une adaptation du code trouvé ici .

Remarques:

  • La suggestion du mod associe @Rilwis au code original (tests et recherches nécessaires).
  • Les boutons de téléchargement sont référencés par classe et non par id.
  • La cible de jQuery('#'+formfield).val(fileurl); doit être adaptée à votre code.
  • Pas testé.
jQuery(document).ready(function() {
    var formfield;
    window.original_send_to_editor = window.send_to_editor;
    jQuery('.upload_image_button').click(function() {
        jQuery('html').addClass('Image');
        formfield = jQuery(this).prev().attr('name');

        window.send_to_editor = function(html){
            if (formfield) {
                fileurl = jQuery('img',html).attr('src');
                jQuery('#'+formfield).val(fileurl);
                tb_remove();
            } else {
                window.original_send_to_editor(html);
            }
        };

        tb_show('', 'media-upload.php?type=image&amp;TB_iframe=true');

        return false;
    });
});
0
screeneyes