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

237
17 февраля 2018, 23:32

Мне нужно создать элемент, где будет 3 поля описания и одно изображение.

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

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

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

Подключал в functions.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();
Answer 1

Цифры, которые выводятся - это id изображения, насколько я понимаю. Из вопроса этого понять нельзя, но Visual Composer оперирует с ними.

Как из id получить изображение?

$image_url = wp_get_attachment_image_url( $image, 'full' );
echo '<div class="vc-infobox-image"><img src="' . $image_url . '"></div>';
READ ALSO
База данных для VK бота

База данных для VK бота

У меня есть ВК бот и он работает на herokuБот написан на PHP

226
Аналогия rez = num1 || num2 в php

Аналогия rez = num1 || num2 в php

В js можно записать так:

204
Проблема кодировки PHP

Проблема кодировки PHP

Добрый деньЕсть одно слово ქართულად

193
Peer certificate cannot be authenticated with known CA certificates PHP cURL

Peer certificate cannot be authenticated with known CA certificates PHP cURL

При помощи cURL пытаюсь отправить xml запрос на определенный сервер партнерской компании, находящийся на защищенном сервере, но с ненадежной...

226