Shortcode: Images not being returned after explode()

Question

I've created a custom element which extends the WPBakery plugin. This custom element will be an image slider. Users choose how many images they want from the single backend option, and the images will then be exploded (explode()), returning and showing the images - That's the idea anyway.

However, I cannot figure out why my images are not being returned? The surrounding content is being rendered in the front end, but the li, in which the src of these images sit, they're empty. Also, I have three images in chosen in the backend, but on one li is being rendered.

Here is the complete markup:

<?php 
if ( ! defined( 'ABSPATH' ) ) {
    die( '-1' );
}

class vcImageCarousel extends WPBakeryShortCode {

    function __construct() {
        add_action( 'init', array( $this, 'vc_imageCarousel_mapping' ) );
        add_shortcode( 'vc_imageCarousel', array( $this, 'vc_imageCarousel_html' ) );
    }

    vc_map( 
        array(
            'name' => __('Image Carousel', 'text-domain'),
            'base' => 'vc_imageCarousel',
            'description' => __('Image Carousel', 'text-domain'), 
            'params' => array(
                array(
                    'type' => 'attach_images',
                    'heading' => esc_html__("Images"),
                    'param_name' => 'image',
                    'value' => esc_html__(''),
                    'admin_label' => false,
                    'weight' => 0,
                    'group' => __( 'Content', 'my-text-domain' ),
                )  
            )
        )
    );

    public function vc_imageCarousel_html( $atts ) {

        extract(
            shortcode_atts(
                array(
                    'id'                    => '',
                    'class'                 => '',
                ), 
                $atts
            )
        );

        // map background image attributes
        $image = shortcode_atts(
            array(
                'image' => 'image',
            ), 
            $atts 
        );

        $image_ids=explode(',',$image['image']);


        $result = "<div class='imageCarousel'>";
        $result .= "<div class='imageCarousel__container justify-content-center'>";
        $result .= "<ul>";

        foreach( $image_ids as $image_id ){
            $result .='<li>';
            $result .= var_dump($image_id);
            $result .= wp_get_attachment_image_src( $image_id, 'full' );
            $result .='</li>';
        }

        $result .= "</ul>";
        $result .= "</div>";
        $result .= "</div>";

        return $result;


    }

}

new vcImageCarousel(); ?>

A var_dump($image_id) returns string(5) "image".

`$result .= var_dump($image_id);` The `var_dump` function does not return anything, but rather writes its output directly to the screen. — bishop, Jul 29 '19 at 12:25
I would suggesting using `$result .= print_r($image_id, true);` — Tarun Lalwani, Jul 30 '19 at 05:35

score 0 · Accepted Answer · answered Jul 29 '19 at 13:33

The var_dump function doesn't return anything but it outputs its result directly to the browser, so the statement $result .= var_dump($image_id); doesn't do anything.

Also there is another problem: the wp_get_attachment_image_src return the boolean value false or an array. So if an array is returned, you would have an array to string implicit conversion, that at least will result in a notice.

As a starter I would suggest to refactor your foreach loop like this:

foreach( $image_ids as $image_id ){
        $result .='<li>';
        $result .= $image_id;
        $attachmentImage = wp_get_attachment_image_src( $image_id, 'full' );
        $result .= $attachmentImage ? $attachmentImage['url'] : '';
        $result .='</li>';
    }

Had to modify it to the following: `$result .= $attachmentImage ? $attachmentImage['0'] : '';` but your approach worked for me. Cheers :) — Freddy, Aug 05 '19 at 12:14

score 0 · Answer 2 · answered Jul 30 '19 at 08:08

If you absolutely want to assign the result of var_dump to your $result variable, you could use output buffering as follows:

ob_start();
var_dump($image_id);
$result .= ob_get_clean();

The ob_start function starts buffering output, while ob_get_clean gets the output buffer's content and then deletes it.

score 0 · Answer 3 · answered Aug 02 '19 at 18:12

I used this in one of my projects for logging purposes. This function returns the var_dump content into a string:

function varDumpToString($stuff = null) {
  ob_start();
  var_dump($stuff);
  $ret = ob_get_contents();
  ob_end_clean();
  return $ret;
}

So just replace this:

$result .= var_dump($image_id);

with this

$result .= varDumpToString($image_id);

Shortcode: Images not being returned after explode()

3 Answers3