Visual Composer attach media file needed

1 comment

1. I have just had the same issue as you and the is what I came up with.

   This allows for adding a visual composer content element in which you can select any file from the WordPress media manager (and remove the file selection).

   Separate this from the rest of your functions (use a modular approach).

   In your templates functions.php add

   /**
    * Visual Composer Functions
    */
   require get_template_directory() . '/functions/vc-functions.php';
   

   Add your new shortcode param

   In your_template/functions/vc-functions.php add

   /**
    * Add file picker shartcode param.
    *
    * @param array $settings   Array of param seetings.
    * @param int   $value      Param value.
    */
   function file_picker_settings_field( $settings, $value ) {
     $output = '';
     $select_file_class = '';
     $remove_file_class = ' hidden';
     $attachment_url = wp_get_attachment_url( $value );
     if ( $attachment_url ) {
       $select_file_class = ' hidden';
       $remove_file_class = '';
     }
     $output .= '<div class="file_picker_block">
                   <div class="' . esc_attr( $settings['type'] ) . '_display">' .
                     $attachment_url .
                   '</div>
                   <input type="hidden" name="' . esc_attr( $settings['param_name'] ) . '" class="wpb_vc_param_value wpb-textinput ' .
                    esc_attr( $settings['param_name'] ) . ' ' .
                    esc_attr( $settings['type'] ) . '_field" value="' . esc_attr( $value ) . '" />
                   <button class="button file-picker-button' . $select_file_class . '">Select File</button>
                   <button class="button file-remover-button' . $remove_file_class . '">Remove File</button>
                 </div>
                 ';
     return $output;
   }
   vc_add_shortcode_param( 'file_picker', 'file_picker_settings_field', get_template_directory_uri() . '/vc_extend/file_picker.js' );
   

   @ojrask was right – note the 3rd param of vc_add_shortcode_param. This is where we add the script for the media manager.

   Note that this saves the attachment id but shows the url. Using the attachment id is better for use in other WP functions (handy when you want to do things for the front end output).

   Add your js

   In your_template/vc_extend/file_picker.js add

   !function($) {
   
     var _custom_media = true,
         _orig_send_attachment = wp.media.editor.send.attachment
   
     $( '#vc_ui-panel-edit-element .file-picker-button' ).click( function( e ) {
       var send_attachment_bkp = wp.media.editor.send.attachment,
           file_picker_button = $( this ),
           file_remover_button = $( this ).parent().find( '.file-remover-button' ),
           input = $( this ).parent().find( '.file_picker_field' ),
           display = $( this ).parent().find( '.file_picker_display' );
   
       _custom_media = true;
       wp.media.editor.send.attachment = function( props, attachment ) {
         if ( _custom_media ) {
           display.html( attachment.url );
           input.val( attachment.id );
           file_picker_button.addClass( 'hidden' );
           file_remover_button.removeClass( 'hidden' );
         } else {
           return _orig_send_attachment.apply( this, [props, attachment] );
         };
       }
   
       wp.media.editor.open( file_picker_button );
       return false;
     });
   
     $( '#vc_ui-panel-edit-element .file-remover-button' ).click( function( e ) {
       var file_picker_button = $( this ).parent().find( '.file-picker-button' ),
           file_remover_button = $( this ),
           input = $( this ).parent().find( '.file_picker_field' ),
           display = $( this ).parent().find( '.file_picker_display' );
   
       display.html( '' );
       input.val( '' );
       file_picker_button.removeClass( 'hidden' );
       file_remover_button.addClass( 'hidden' );
     });
   
     $( '.add_media' ).on( 'click', function() {
       _custom_media = false;
     } );
   
   }(window.jQuery);
   

   Use your newly created param type

   The param can now be used in you vc_map(). This should also go in your_template/functions/vc-functions.php and should be something like

   vc_map( array(
     'name' => __( 'your_element_name', 'js_composer' ),
     'base' => 'your_element_base',
     'content_element' => true,
     'class' => '',
     'icon' => 'icon-wpb-images-stack',
     'params' => array(
       array(
         'type' => 'file_picker',
         'class' => '',
         'heading' => __( 'Attach Media', 'js_composer' ),
         'param_name' => 'file_picker',
         'value' => '',
       ),
     ),
   ) );
   

   Output

   To show the output on the front end create the file your_template/vc_templates/your_element_base.php and add something like

   echo wp_get_attachment_url( $atts['file_picker'] );
   

   This will output just the url to whatever file was selected.

   The following resources were useful in making this:

   vc_map docs https://wpbakery.atlassian.net/wiki/pages/viewpage.action?pageId=524332

   creating new param types https://wpbakery.atlassian.net/wiki/display/VC/Create+New+Param+Type

   adding the media manager script https://wordpress.stackexchange.com/a/82874/99164

Comments are closed.