Se necesita un archivo multimedia adjunto de Visual Composer

5 minutos de lectura

¿Necesito crear un nuevo tipo de parámetro ya que no hay un tipo “adjuntar_archivo” en https://wpbakery.atlassian.net/wiki/pages/viewpage.action?pageId=524332#vc_map()-Valores de tipo disponibles

¿Cómo es que falta este tipo de elemento?

Lo que necesito es el botón “Adjuntar archivo” al backend.

  • Estoy tratando de lograr esto también. ¿Encontraste algo útil? Supongo que se puede manejar a través de la pantalla de medios básicos de WP adjuntando un script correcto como tercer parámetro al vc_add_shortcode_param llamar.

    – ojrask

    5 de septiembre de 2016 a las 10:14

avatar de usuario
timos

Acabo de tener el mismo problema que tú y eso es lo que se me ocurrió.

Esto permite agregar un elemento de contenido de compositor visual en el que puede seleccionar cualquier archivo del administrador de medios de WordPress (y eliminar la selección de archivos).

Separe esto del resto de sus funciones (utilice un enfoque modular).

En tus plantillas functions.php agregar

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

Agregue su nuevo parámetro de shortcode

En your_template/functions/vc-functions.php agregar

/**
 * 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 tenía razón: tenga en cuenta el tercer parámetro de vc_add_shortcode_param. Aquí es donde agregamos el script para el administrador de medios.

Tenga en cuenta que esto ahorra la identificación del archivo adjunto pero espectáculos la URL Usar la identificación del archivo adjunto es mejor para usar en otras funciones de WP (útil cuando desea hacer cosas para la salida frontal).

Agrega tu js

En your_template/vc_extend/file_picker.js agregar

!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 su tipo de parámetro recién creado

El parámetro ahora se puede usar en su vc_map(). Esto también debe entrar your_template/functions/vc-functions.php y debería ser algo como

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' => '',
    ),
  ),
) );

Producción

Para mostrar la salida en la parte delantera, cree el archivo your_template/vc_templates/your_element_base.php y agrega algo como

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

Esto generará solo la URL del archivo seleccionado.

Los siguientes recursos fueron útiles para hacer esto:

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

creando nuevos tipos de parámetros https://wpbakery.atlassian.net/wiki/display/VC/Create+New+Param+Type

agregando el script del administrador de medios https://wordpress.stackexchange.com/a/82874/99164

  • Gracias, hombre, esto funciona de maravilla :). ¿Tiene alguna idea de cómo hacer que funcione con param groupd? En este momento funciona bien en un solo parámetro, pero en el grupo de parámetros solo el primero funciona bien 🙂

    – css-caramelos

    11 de diciembre de 2016 a las 16:05

  • Un poco tarde 🙂 pero lo acabo de encontrar. Para que funcione para varios elementos, simplemente actualice la acción de clic en file_picker.js. El uso de ‘ $( ‘#vc_ui-panel-edit-element .file-picker-button’ ).click( function( e ) { ‘ apunta solo a los elementos reconstruidos en la carga de la página. Para admitir múltiples elementos agregados en el widget personalizado después de cargar la página necesita cambiar la acción de clic a on(‘click’) ‘ $(document).on(‘click’, ‘#vc_ui-panel-edit-element .file-picker-button’, function ( e ) ‘ lo mismo que necesita que hacer para .file-remover-button.

    – Kaziko

    19 de diciembre de 2017 a las 19:43


¿Ha sido útil esta solución?

Se necesita un archivo multimedia adjunto de Visual Composer

5 minutos de lectura

¿Necesito crear un nuevo tipo de parámetro ya que no hay un tipo “adjuntar_archivo” en https://wpbakery.atlassian.net/wiki/pages/viewpage.action?pageId=524332#vc_map()-Valores de tipo disponibles

¿Cómo es que falta este tipo de elemento?

Lo que necesito es el botón “Adjuntar archivo” al backend.

  • Estoy tratando de lograr esto también. ¿Encontraste algo útil? Supongo que se puede manejar a través de la pantalla de medios básicos de WP adjuntando un script correcto como tercer parámetro al vc_add_shortcode_param llamar.

    – ojrask

    5 de septiembre de 2016 a las 10:14

avatar de usuario
timos

Acabo de tener el mismo problema que tú y eso es lo que se me ocurrió.

Esto permite agregar un elemento de contenido de compositor visual en el que puede seleccionar cualquier archivo del administrador de medios de WordPress (y eliminar la selección de archivos).

Separe esto del resto de sus funciones (utilice un enfoque modular).

En tus plantillas functions.php agregar

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

Agregue su nuevo parámetro de shortcode

En your_template/functions/vc-functions.php agregar

/**
 * 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 tenía razón: tenga en cuenta el tercer parámetro de vc_add_shortcode_param. Aquí es donde agregamos el script para el administrador de medios.

Tenga en cuenta que esto ahorra la identificación del archivo adjunto pero espectáculos la URL Usar la identificación del archivo adjunto es mejor para usar en otras funciones de WP (útil cuando desea hacer cosas para la salida frontal).

Agrega tu js

En your_template/vc_extend/file_picker.js agregar

!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 su tipo de parámetro recién creado

El parámetro ahora se puede usar en su vc_map(). Esto también debe entrar your_template/functions/vc-functions.php y debería ser algo como

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' => '',
    ),
  ),
) );

Producción

Para mostrar la salida en la parte delantera, cree el archivo your_template/vc_templates/your_element_base.php y agrega algo como

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

Esto generará solo la URL del archivo seleccionado.

Los siguientes recursos fueron útiles para hacer esto:

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

creando nuevos tipos de parámetros https://wpbakery.atlassian.net/wiki/display/VC/Create+New+Param+Type

agregando el script del administrador de medios https://wordpress.stackexchange.com/a/82874/99164

  • Gracias, hombre, esto funciona de maravilla :). ¿Tiene alguna idea de cómo hacer que funcione con param groupd? En este momento funciona bien en un solo parámetro, pero en el grupo de parámetros solo el primero funciona bien 🙂

    – css-caramelos

    11 de diciembre de 2016 a las 16:05

  • Un poco tarde 🙂 pero lo acabo de encontrar. Para que funcione para varios elementos, simplemente actualice la acción de clic en file_picker.js. El uso de ‘ $( ‘#vc_ui-panel-edit-element .file-picker-button’ ).click( function( e ) { ‘ apunta solo a los elementos reconstruidos en la carga de la página. Para admitir múltiples elementos agregados en el widget personalizado después de cargar la página necesita cambiar la acción de clic a on(‘click’) ‘ $(document).on(‘click’, ‘#vc_ui-panel-edit-element .file-picker-button’, function ( e ) ‘ lo mismo que necesita que hacer para .file-remover-button.

    – Kaziko

    19 de diciembre de 2017 a las 19:43


¿Ha sido útil esta solución?