How to call an image by WordPress shortcode attribute?

Question

I am developing a WordPress plugin for wordpress.org, it's my very first plugin. There is a issue what I can't fix myself (I did google a lot but still couldn't find any solution). But maybe the solution of this problem is very simple for some of you. So please answer if you know a direct solution; I will be very grateful.

My plugin allows user to make Tables with a Banner image for each column. Please check this demo link.

For each column's head section there are two parts. One is subject and another is image. And the shortcode is look like

[head subject="Standard" image="http://shahriarblog.com/wp-content/uploads/2014/03/hello-5.jpg"][/head]

And the source code is like below for the above shortcode:

function head($atts, $content = null) {
    extract( shortcode_atts( array(
        'color' => '#333',
        'banner' => 'visible',
        'subject' => 'Subject',
        'image' => 'http://shahriarblog.com/wp-content/uploads/2014/03/hello-5.jpg',
    ), $atts ) );
    return "<div class='gridacc'><h2 style='background:{$color}'>{$subject}</h2><div class='photo' style='display: {$banner}ne'><img src='{$image}' alt=''></div><dl>".do_shortcode($content)."</dl></div>";
}
add_shortcode ("head", "head");

As you see the user has to know the url of the image to use them in shortcode. But instead of using image url I want to use just image name. For example I want to use image="hello-5.jpg" instead of using image="http://shahriarblog.com/wp-content/uploads/2014/03/hello-5.jpg"

Another thing: Right now to get the url of an image, every user need to upload the image by WordPress Media and then from the Media Library they can get each image's url. But is it possible to upload the image directly in my plugin folder instead of default WordPress Uploads folder?

Here is a link of a documentation of this plugin and source code if you are interested. Thanks a lot.

Answer 1

I think the most straight forward is querying the database directly, looking for the attachment hello-5.jpg inside wp_postmeta table to get its ID. And from there, use a regular WP function to pull the URL:

function head($atts, $content = null) {
    extract( shortcode_atts( array(
        'color' => '#333',
        'banner' => 'visible',
        'subject' => 'Subject',
        'image' => 'http://example.com/default_image.jpg',
    ), $atts ) );

    // The attribute image was passed in the shortcode [head image="hello-5.jpg"]
    if( $image != 'http://example.com/default_image.jpg' ) {
        global $wpdb;
        $attachment_id = $wpdb->get_var(
                    $wpdb->prepare( "
                        SELECT post_id
                        FROM $wpdb->postmeta
                        WHERE meta_value LIKE %s
                        AND meta_key = '_wp_attached_file'
                    ", "%{$image}%" 
                    )
                );
        // Found it, change the $image URL
        if( $attachment_id )
            $image = wp_get_attachment_image_src( $attachment_id, 'full' );
    }

    return "<div class='gridacc'>
        <h2 style='background:{$color}'>{$subject}</h2>
    <div class='photo' style='display: {$banner}ne'>
        <img src='{$image}' alt=''>
    </div>
    <dl>".do_shortcode($content)."</dl>
    </div>";
}

_{The following Q&A shows how to use Ajax to improve the interface of Shortcode TinyMCE buttons:
Call PHP function inside TinyMCE modal window on the WordPress backend}