Wordpress; Convert array of image ids to urls

Question

I'm building a theme from scratch and am utilizing the Visual Composer plugin.

I've made a custom element using VC to allow a user to upload a set of images.

When a users selects a set of images, they get returned as an array of image ids.

I'm trying to create a shortcode that will convert that array of ids to an array of src elements.

I know I have to use a foreach loop, but after hours of looking online I can't seem to figure out how to write it correctly. Obviously just learning here, so be gentle ;)

My code that makes the custom VC element looks like this (edited down):

vc_map( 
    array(
        'base' => 'foo',
        'params' => array( 
            array(
                'type' => 'attach_images',
                'param_name' => 'images',
            ),
        );
    );
);

My shortcode (so far) looks like this:

function foo_shortcode($atts){

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

    $images = $unkonwn_foreach_loop;

    $output = '<div class="gallery">' . $missing_list_of_src_elements . '</div>' . "\n";

    return $output;

}
add_shortcode( 'foo', 'foo_shortcode' );

I've looked at several tutorials, I've read a bunch of articles, I've gotten closer and further away, but haven't got it cracked yet. I didn't think there was much point in adding all my failed attempts as examples, so I stripped down the code above to only the lines that I know are fine.

Any help understanding how to put this together is, as always, greatly appreciated.

thanks!

Rentringer · Accepted Answer · 2017-05-06T13:19:48.733

1

You can use the function wp_get_attachment_image_src inside your loop to get the src elements.

function foo_shortcode($atts){

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

        $output = '<div class="gallery">';

        // temp debug for check if $images is array
        //var_dump($images);

        // string to array
        $array_images_ids = explode(',', $images);

        foreach($array_images_ids as $id){
            $img = wp_get_attachment_image_src($id, 'thumbnail');
            $output .= '<img src="' . esc_url($img[0]) . '" />';
        }

        $output .= '</div>' . "\n";

        return $output;

    }
    add_shortcode( 'foo', 'foo_shortcode' );

For more info about the function wp_get_attachment_image_src() : https://developer.wordpress.org/reference/functions/wp_get_attachment_image_src/

edited May 06 '17 at 13:19

answered May 06 '17 at 02:02

Rentringer

61
2
6

Thanks Roberto, I changed `esc_url(img[0])` to `esc_url($img[0])` and `$output =. '' . "\n";` to `$output .= '' . "\n";`, but am still getting an error: Warning: Invalid argument supplied for foreach(). – Eric Brockman May 06 '17 at 02:12
@EricBrockman, I have corrected the code errors in my answer. About the error Warning: Invalid argument supplied for foreach() you should make sure that when a users selects a set of images, they get returned as an array of image ids. – Rentringer May 06 '17 at 02:27
Thanks @Roberto, that is how it works. It does return an array of image IDs. If I were to remove the `foreach` loop, the out put would be 1,2,3, etc... – Eric Brockman May 06 '17 at 11:08
Still getting the warning though – Eric Brockman May 06 '17 at 12:29
@EricBrockman Your output should be something like: array(3) { [0]=> int(1) [1]=> int(2) [2]=> int(3) } not this: array(1) { [0]=> string(5) "1,2,3" } – Rentringer May 06 '17 at 12:43
1

when I add the temp debug you put in `var_dump($images);` it does return the array like this: string(23) "301,300,299,298,297,296" – Eric Brockman May 06 '17 at 13:04
@EricBrockman You will need to convert the string to array. I'll edit the answer with a new solution that should do the job. – Rentringer May 06 '17 at 13:11

score 0 · Answer 2 · answered May 06 '17 at 02:22

In your shortcode, you have a variable images who has a value of unkonwn_foreach_loop that I can't find his value in your code. Thus, I will assume that you already have an array with all the IDs of the image. Also, you should check out for this wonderful function : wp_get_attachment_image_src

function foo_shortcode($atts){

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

$images = $array_with_id; // I presume $array_with_id contains a single array with all of your images id
$images_src = array(); // Initializing this array

foreach($images as $image_id) { // get the src of the IDs image and put it in the array images_src
    $images_src[] = wp_get_attachment_image_src( $image_id, 'full' );
}

$output = '<div class="gallery">';
// I added another foreach here to output not only the src, but also the img element. Here, you can do whatever modification you want to.
foreach($images_src as $image_src) {
    $output .= '<img src="'.$image_src[0].'" alt="" title="">';
}
$output .= '</div>' . "\n";

return $output;

}
add_shortcode( 'foo', 'foo_shortcode' );

Hope this helps you

Thanks Matthieu, yes the `$images` holds the IDs, for instance if I just did `return $images;` My output would be 1,2, 3, 4, etc.. When I use the code you provided I'm getting an error. Warning: Invalid argument supplied for foreach() — Eric Brockman, May 06 '17 at 12:09

Wordpress; Convert array of image ids to urls

2 Answers2