@Chaly95

Как создать в Visual Composer свой Shortcode с изображением?

Мне нужно создать элемент где будет 3 поля описания и одно изображение.
Как создавать шорткоды с текстовыми полями я разобрался, но у меня не получается добавить изображение,
а точнее вывести его на сайте. В админской части оно появляется но на сайте вместо изображения выводятся цифры.

Суть вопроса как добавить изображение в шорткод?)

Вот мой новый шорт код в коде
Сейчас он без изображения.

Подключал в Function.php

таким кодом

// Before VC Init
add_action( 'vc_before_init', 'vc_before_init_actions' );
 
function vc_before_init_actions() {
     
    //.. Code from other Tutorials ..//
 
    // Require new custom Element
    require_once( get_template_directory().'/vc-elements/my-first-custom-element.php' ); }


Это код самого шорт кода (без изображения)
<?php
/*
Element Description: VC Info Box
*/
 
// Element Class 
class vcInfoBox extends WPBakeryShortCode {
     
    // Element Init
    function __construct() {
        add_action( 'init', array( $this, 'vc_infobox_mapping' ) );
        add_shortcode( 'vc_infobox', array( $this, 'vc_infobox_html' ) );
    }
     
    // Element Mapping
    public function vc_infobox_mapping() {
         
        // Stop all if VC is not enabled
    if ( !defined( 'WPB_VC_VERSION' ) ) {
            return;
    }
         
    // Map the block with vc_map()
    vc_map( 
  
        array(
            'name' => __('VC Infobox', 'text-domain'),
            'base' => 'vc_infobox',
            'description' => __('Another simple VC box', 'text-domain'), 
            'category' => __('Stimul', 'text-domain'),   
            'icon' => get_template_directory_uri().'/inc/image/Logo.png',            
            'params' => array(   
                      
                array(
                    'type' => 'textfield',
                    'holder' => 'h3',
                    'class' => 'title-class',
                    'heading' => __( 'Title', 'text-domain' ),
                    'param_name' => 'title',
                    'value' => __( 'Default value', 'text-domain' ),
                    'description' => __( 'Box Title', 'text-domain' ),
                    'admin_label' => false,
                    'weight' => 0,
                    'group' => 'Custom Group',
                ),  
                  
                array(
                    'type' => 'textfield',
                    'holder' => 'div',
                    'class' => 'text-class',
                    'heading' => __( 'Price', 'text-domain' ),
                    'param_name' => 'price',
                    'value' => __( 'Default value', 'text-domain' ),
                    'description' => __( 'Box Text', 'text-domain' ),
                    'admin_label' => false,
                    'weight' => 0,
                    'group' => 'Custom Group',
                ), 
					array(
                    'type' => 'textfield',
                    'holder' => 'div',
                    'class' => 'text-class',
                    'heading' => __( 'Text desc', 'text-domain' ),
                    'param_name' => 'text',
                    'value' => __( 'Default value', 'text-domain' ),
                    'description' => __( 'Box Text', 'text-domain' ),
                    'admin_label' => false,
                    'weight' => 0,
                    'group' => 'Custom Group',
                ),
				
				array(
                    'type' => 'textfield',
                    'holder' => 'div',
                    'class' => 'card-button-card',
                    'heading' => __( 'text-Button', 'text-button' ),
                    'param_name' => 'button',
                    'value' => __( 'Default value', 'button-text-domain' ),
                    'description' => __( 'Box button', 'text-button' ),
                    'admin_label' => false,
                    'weight' => 0,
                    'group' => 'Custom Group',
                ) ,
				
				array(
                    'type' => 'textfield',
                    'holder' => 'div',
                    'class' => 'card-button-URL',
                    'heading' => __( 'URL', 'text-button-URL' ),
                    'param_name' => 'url',
                    'value' => __( 'Default value', 'button-text-domain' ),
                    'description' => __( 'Box button url', 'text-url' ),
                    'admin_label' => false,
                    'weight' => 0,
                    'group' => 'Custom Group',
                )
                     
            )
        )
    );                                
                                 
        
    } 
     
     
    // Element HTML
    public function vc_infobox_html( $atts ) {
         
        // Params extraction
    extract(
        shortcode_atts(
            array(
                'title'   => '',
                'text' => '',
				
				'button' => '',
				'price' => '',
				'url' => '',
            ), 
            $atts
        )
    );
     
    // Fill $html var with data
    $html = '
    <div class="vc-infobox-wrap">
     <div class="row">
	 <div class="col-md-12">
      <div class="vc-infobox-title">' . $title . '</div></div>
         
       <div class="col-md-6"> <div class="vc-infobox-price">' . $price . '</div>
		 <div class="vc-infobox-text">' . $text . '</div></div>
		
		<div class="col-md-6"><div class="vc-infobox-button"><a class="card-button-card" href="' . $url . '">' . $button . '</a></div></div>
     </div>
    </div>';      
     
    return $html;
         
    } 
     
} // End Element Class
 
// Element Class Init
new vcInfoBox();
  • Вопрос задан
  • 783 просмотра
Решения вопроса 1
@Chaly95 Автор вопроса
Цифры это ID изображения
для их обработки использовал код
$image_url = wp_get_attachment_image_url( $image, 'full' );


<div class="vc-infobox-image"><img src="' . $image_url . '"></div>


полный код
<?php
/*
Element Description: VC image Box
*/
 
// Element Class 
class vcimageBox extends WPBakeryShortCode {
     
    // Element Init
    function __construct() {
        add_action( 'init', array( $this, 'vc_imagebox_mapping' ) );
        add_shortcode( 'vc_imagebox', array( $this, 'vc_imagebox_html' ) );
    }
     
    // Element Mapping
    public function vc_imagebox_mapping() {
         
        // Stop all if VC is not enabled
    if ( !defined( 'WPB_VC_VERSION' ) ) {
            return;
    }
         
    // Map the block with vc_map()
    vc_map( 
  
        array(
            'name' => __('VC Imagebox', 'text-domain'),
            'base' => 'vc_imagebox',
            'description' => __('Another simple VC box', 'text-domain'), 
            'category' => __('Stimul', 'text-domain'),   
            'icon' => get_template_directory_uri().'/inc/image/Logo.png',            
            'params' => array(   
                      
                array(
                    'type' => 'textfield',
                    'holder' => 'h3',
                    'class' => 'title-class',
                    'heading' => __( 'Title', 'text-domain' ),
                    'param_name' => 'title',
                    'value' => __( 'Default value', 'text-domain' ),
                    'description' => __( 'Box Title', 'text-domain' ),
                    'admin_label' => false,
                    'weight' => 0,
                    'group' => 'Custom Group',
                ),  
				
                 array(
                       'type' => 'attach_image',
                       'holder' => 'div',
                       'class' => 'image-class',
                       'heading' => __('Side Image', 'wpcentral'),
					   'param_name' => 'image',
                       'description' => __('The Image in the background', 'wpcentral')
                            ),   
							
                array(
                    'type' => 'textfield',
                    'holder' => 'div',
                    'class' => 'text-class',
                    'heading' => __( 'Price', 'text-domain' ),
                    'param_name' => 'price',
                    'value' => __( 'Default value', 'text-domain' ),
                    'description' => __( 'Box Text', 'text-domain' ),
                    'admin_label' => false,
                    'weight' => 0,
                    'group' => 'Custom Group',
                ), 
					array(
                    'type' => 'textfield',
                    'holder' => 'div',
                    'class' => 'text-class',
                    'heading' => __( 'Text desc', 'text-domain' ),
                    'param_name' => 'text',
                    'value' => __( 'Default value', 'text-domain' ),
                    'description' => __( 'Box Text', 'text-domain' ),
                    'admin_label' => false,
                    'weight' => 0,
                    'group' => 'Custom Group',
                ),
				
				array(
                    'type' => 'textfield',
                    'holder' => 'div',
                    'class' => 'card-button-card',
                    'heading' => __( 'text-Button', 'text-button' ),
                    'param_name' => 'button',
                    'value' => __( 'Default value', 'button-text-domain' ),
                    'description' => __( 'Box button', 'text-button' ),
                    'admin_label' => false,
                    'weight' => 0,
                    'group' => 'Custom Group',
                ) ,
				
				array(
                    'type' => 'textfield',
                    'holder' => 'div',
                    'class' => 'card-button-URL',
                    'heading' => __( 'URL', 'text-button-URL' ),
                    'param_name' => 'url',
                    'value' => __( 'Default value', 'button-text-domain' ),
                    'description' => __( 'Box button url', 'text-url' ),
                    'admin_label' => false,
                    'weight' => 0,
                    'group' => 'Custom Group',
                ),
				
				
                     
            )
        )
    );                                
                                 
        
    } 
     
     
    // Element HTML
    public function vc_imagebox_html( $atts ) {
         
        // Params extraction
    extract(
        shortcode_atts(
            array(
                'title'   => '',
                'text' => '',
				
				'button' => '',
				'price' => '',
				'url' => '',
				'image' => '',
            ), 
            $atts
        )
    );
     
	 
	  $image_url = wp_get_attachment_image_url( $image, 'full' );

    // Fill $html var with data
    $html = '
    <div class="vc-infobox-wrap">
     <div class="row">
	 <div class="col-md-12">
      <div class="vc-infobox-title">' . $title . '</div></div>
	  
	  <div class="image"> ' . $image . '</div>
         <div class="vc-infobox-image"><img src="' . $image_url . '"></div>
       <div class="col-md-6"> <div class="vc-infobox-price">' . $price . '</div>
		 <div class="vc-imagebox-text">' . $text . '</div></div>
		
		<div class="col-md-6"><div class="vc-infobox-button"><a class="card-button-card" href="' . $url . '">' . $button . '</a></div></div>
     </div>
    </div>';      
     
    return $html;
         
    } 
     
} // End Element Class
 
// Element Class Init
new vcimageBox();
Ответ написан
Комментировать
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Похожие вопросы