How to display custom shortcode single image in visual composer in wordpress?

Question

I am trying to display custom fileds created by me in visual composer by using custom short codes. This custom short codes run fine when i am working with heading and text area_html ,but now i want to add single image in this sort code,but in result i am not getting image,it displays alt attribute and in back-end side i am showing my single image that stores in custom shortcode field. here i am including my code.

1) code for creating custom shortcode

vc_map( array(
    'name' => __( 'trionn_header' ),
    'base' => 'trionn_header',
    'category' => ( 'trionn code' ),
    'params' => array(
                "type" => "attach_image",
            "holder" => "img",
            "class" => "",
            "heading" => __( "Hintergrundbild", "my-text-domain" ),
            "param_name" => "image_url",
            "value" => __( "", "my-text-domain" ),
            "description" => __( lade eins hoch", "my-text-domain" )
        )
) );

2) code in separate function-name file

<?php
/* Ordered List shortcode */
if (!function_exists('trionn_header')) {
    function trionn_header($atts, $content) {
           $atts = shortcode_atts(
            array(
                'image_url' => ''
            ), $atts, 'trionn_header'
        );

        $imageSrc = wp_get_attachment_image_src($image_url, 'thumbnail'); 

        $html = '<img src="' . $imageSrc[0] .'" alt="' . $atts['title'] . '"/>';
        return $html;
        }

    add_shortcode('trionn_header', 'trionn_header');
}

give more details about your question – Avi Aug 10 '17 at 09:27 — Avi, Aug 10 '17 at 09:27
All details are provided in question with code. – Aug 10 '17 at 13:35 — , Aug 10 '17 at 13:35

score 2 · Accepted Answer · answered Aug 10 '17 at 10:48

I found solution for your question,try this in your code

In param tag write this array after main param attribute:

array(
                "type" => "attach_image",
                "heading" => "Image",
                "param_name" => "image",
                'admin_label' => true
            )

paste below code in your function_name file:

<?php
// Trionn header custom code // 
if (!function_exists('trionn_header')) {

    function trionn_header($atts, $content = null) {
        $args = array(
            'title' => __( 'This is the custom shortcode' ),
            'title_color' => '#000000',
            'content' => 'your discrption here',
            "image"             => "",
        );

        extract(shortcode_atts($args, $atts));

        //init variables
        $html               = "";
        $image_classes      = "";
        $image_src          = $image;

        if (is_numeric($image)) {
            $image_src = wp_get_attachment_url($image);
        }


        // generate output for heading and discription
        $html = '<h1 class="trionn header ' . $atts['style']. '" style="color: ' . $atts['title_color'] . '">'. $atts['title'] . '</h1>'.   "<div class=content>" . $content . "</div>";

        // generate output for single image
        $html .= "<img itemprop='image' class='{$image_classes}' src='{$image_src}' alt='' style='{$images_styles}' />";

        return $html;
    }
    add_shortcode('trionn_header', 'trionn_header');
}

Enjoy, thank me later

How to display custom shortcode single image in visual composer in wordpress?

1 Answers1