Cómo usar el compositor visual added_images como en un shortcode

3 minutos de lectura

Avatar de usuario de Pam
pam

Estoy tratando de crear un control deslizante de imagen personalizado usando los compositores visuales added_images, pero no puedo entender cómo obtener las URL de la matriz de ID de imagen. Cualquier ayuda sería apreciada.

var_dump($bg_images) devuelve cadena(9) “19,6,1692”

vc_map( array(
     "name" => __( "Fading Background Block", "farrat_vc" ),
     "base" => "block_background",
     "class" => "",
     "category" => __( "Farrat Shortcodes", "farrat_vc"),
     "as_parent" => array('except' => 'farrat_panel'), // Use only|except attributes to limit child shortcodes (separate multiple values with comma)
     "content_element" => true,
     "show_settings_on_create" => true,
     "is_container" => true,
     'admin_enqueue_css' => array(get_template_directory_uri().'/wp-content/themes/unite/inc/css/gallery.css'),
     "params" => array(
            array(
                 "type" => "attach_images",
                 "heading" => __( "Backgroud Images", "farrat_vc" ),
                 "param_name" => "bg_images",
            ),
        ),
  "js_view" => 'VcColumnView'
) );

  • Sería bueno si incluyera un poco de código que muestre lo que ha intentado o qué datos está obteniendo. Eso puede ayudar a obtener una respuesta más útil para su situación.

    – cjbarth

    5 de enero de 2017 a las 16:20

  • @cjbarth He agregado el VC_map, aún no he terminado de construir el shortcode

    – pam

    5 de enero de 2017 a las 16:32

// Hola, prueba este, funciona perfectamente

//Param Registration

  function designas_partners() {
    // Title
    vc_map(
        array(
            'name' => __( 'Clients' ),
            'base' => 'designas_partners_content',
            'category' => __( 'Easy Component' ),
            'params' => array(


                array(
                "type"        => "attach_images",
                "heading"     => esc_html__( "Add Clients Images", "appcastle-core" ),
                "description" => esc_html__( "Add Clients Images", "appcastle-core" ),
                "param_name"  => "screenshots",
                "value"       => "",
                ),

            )
        )
    );
    }

add_action( 'vc_before_init', 'designas_partners' );

// Código corto

function designas_partners_content_function( $atts, $content ) {
$gallery = shortcode_atts(
    array(
        'screenshots'      =>  'screenshots',
    ), $atts );

 $image_ids = explode(',',$gallery['screenshots']);
 $return = '
    <div class="clients">';
    foreach( $image_ids as $image_id ){
    $images = wp_get_attachment_image_src( $image_id, 'company_logo' );
    $return .='<div class="images"><img src="'.$images[0].'" alt="'.$atts['title'].'"></div>';
    $images++;
    }
    $return .='</div>';
return $return;
}   
add_shortcode( 'designas_partners_content', 'designas_partners_content_function' ) 

  • Quiero este tipo de solución para mi código abreviado personalizado y compositor visual, y funciona bien, gracias por compartir conocimientos.

    – Avi

    10 de agosto de 2017 a las 12:44


  • Muchas gracias.

    – sushovan bhowmik

    11 de agosto de 2017 a las 13:24

  • Gracias por esto, me ayudó mucho, reduje su ciclo por menos código que hace lo mismo, eche un vistazo;)

    –Rodrigo Zuluaga

    31 de enero de 2019 a las 16:38


Obtuve una solución alternativa para este en el bucle, no hay necesidad de contador, bucle wp_get_attachment_image( $image_id, 'full' ); obtendrá toda la información que use en el panel de wordpress.

Le agradeceré a @sushovan que bhowmik estaba buscando esto, creo que esto ayudará a evitar muchas variables llamando a las imágenes 🙂

<?php

function vc_gallery_carrousel($atts, $content) {
  // Attributes
  $gallery = shortcode_atts(
    array(
    'carrousel_images'  =>  'carrousel_images',
  ),
    $atts );
  // Attributes in var
  $image_ids=explode(',',$gallery['carrousel_images']);


  // Output Code
  $output .= '<section class="loopclientsimg">';
  $output .= '<article>';
  $output .= '<div>';
  $output .= '<ul>';

  foreach( $image_ids as $image_id ){
    $output .='<li>';
    $output .= wp_get_attachment_image( $image_id, 'full' );
    $output .='</li>';
  }

  $output .= '</ul>';
  $output .= '</div>';
  $output .= '</article>';
  $output .= '</section>';

  return $output;
}

add_shortcode( 'vc_img_carrousel', 'vc_gallery_carrousel' );

¿Ha sido útil esta solución?