如何在短代码中使用可视化合成器attach_images

时间:2017-01-05 16:00:03

标签: wordpress visual-composer

我正在尝试使用可视化作曲家attach_images创建一个自定义图像滑块,但是无法弄清楚如何从图像ID数组中获取URL。 任何帮助将不胜感激。

var_dump($ bg_images)返回 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 个答案:

答案 0 :(得分:5)

//嗨试试这个,这是完美的工作

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

//短代码

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

答案 1 :(得分:0)

我在循环中获得了一个不错的解决方法,不需要计数器,在wp_get_attachment_image( $image_id, 'full' );上循环将为您提供您在wordpress面板上使用的所有信息。

我要感谢@sushovan bhowmik在寻找这个,我认为这将有助于避免调用图像的许多变量:)

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