0

I am using the Plugin Visual Composer with in a new Theme I develop. My question is about mapping shortcodes to Visual Composer arrays.

The problem I get, when I try to make a custom element for an image. So here is what I did:

I created an php file vc_shortcodes.php for my arrays of params. The matching shortcodes are in functions.php.

For the array type textarea_html everything works fine and I can see me text as supposed at the front end.

Now I am trying to us an array with type attach_image. It is the following:

/Bild
add_action( 'vc_before_init', 'webnuts_bild' );
function webnuts_bild() {
    vc_map( array(
        "name" => __( "Bild", "my-text-domain" ),
        "base" => "image_url",
        "icon" => "icon-webnuts",
        'admin_enqueue_css' => array('/wp-content/themes/devdmbootstrap3-child/framework/css/admin-wn.css' ),
        "class" => "wn-bild",
        "category" => __( "Content", "my-text-domain"),
        "params" => array(
            array(
                "type" => "attach_image",
                "holder" => "img",
                "class" => "",
                "heading" => __( "Hintergrundbild", "my-text-domain" ),
                "param_name" => "image_url",
                "value" => __( "", "my-text-domain" ),
                "description" => __( "Bitte wähle hier ein Bild aus oder lade eins hoch", "my-text-domain" )
            )
        )
    ) );
}

It works so far, that I can chose the element in the backend an attach an image to it. But I guess I make something wrong in the functions.php

I am sure I make something wrong in functions.php... There I use the following:

add_shortcode( 'image_url', 'bild_func' );
function bild_func( $atts ) {
    extract( shortcode_atts( array(
        'image_url' => 'Bild wird nicht richtig angezeigt'
    ), $atts ) );

    return "<div class='bild-wrapper'><img src='" . "{$image_url}" . "'/></div>";
}

This is what gets returned in the browser:

<div class="bild-wrapper">
    <img src="9">
</div>

What do I have to change so the image gets shown in the browser?

2

Visual Composer adds the image ID to the generated shortcode. This gives you more flexibility with image sizes. You can use it like this:

$imageSrc = wp_get_attachment_image_src($image_url, 'thumbnail');
if( $imageSrc ) {
    echo '<img src="' . $imageSrc[0] . '" />';
}

The thumbnail param could be replaced by medium or another valid image size. The if clause is there to verify that the image is really there (not deleted).

Advice: Rename the param_name to image_id so you won't get confused when using the code later.

Source: https://developer.wordpress.org/reference/functions/wp_get_attachment_image_src/

  • 2
    Please add an explanation why this solves the issue - thanks. – Nicolai Sep 24 '15 at 12:06
  • Ok that seems to be simple! I will give it a try. – webnuts.io Sep 25 '15 at 11:51
0

Use you image url by your attachment id that already shown. So just use wp_get_attachment_image_src to get the attachment url. like:

add_shortcode( 'image_url', 'bild_func' );
function bild_func( $atts ) {
    extract( shortcode_atts( array(
        'image_url' => ''
    ), $atts ) );

    /* Let's get the URL from that image */
    if(isset($a['image_url'])) {
       $image_url = wp_get_attachment_image_src( $a['image_url'], 'full' );;
     } else {
       $image_url = ''; // default image or something if you want.
     }

    return "<div class='bild-wrapper'><img src='" . "{$image_url[0]}" . "'/></div>";
}

Hope it make sense !

0

Visual Composer does the right thing with providing the image id because you can the get the image in the best size for your needs. You could do it like that:

// Replace 'thumbnail' with any valid wordpress image size.
$imageSrc = wp_get_attachment_image_src($image_url, 'thumbnail'); 
// Check if the image is still there
if( $imageSrc ) {
    echo '<img src="' . $imageSrc[0] . '" />';
}

You could also rename the 'param_name' in 'vc_map' to 'image_id' so you understand the code later.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.