How to use the visual composer attach_images as in a shortcode

8.8k Views Asked by At

I am trying to create a custom image slider using visual composers attach_images but cant quite work out how to get the URLs from the array of image IDs. Any help would be appreciated.

var_dump($bg_images) returns string(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'
) );
2

There are 2 best solutions below

0
On

I got a neet workaround for this one on the loop, theres no need for the counter, loop over wp_get_attachment_image( $image_id, 'full' ); will get you every information u use on the wordpress panel.

I'll thank to @sushovan bhowmik was looking for this, I think this will help to avoid lots of variables calling the images :)

<?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' );
3
On

// Hi try this one this is perfectly working

//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' );

// Short code

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' )