Import Remote Images into WordPress and Return Image URL, Image ID, and Image Dimensions

The WordPress function below – intended to be used inside another shortcode function or WP plugin – will import a remote image into your WordPress library. WordPress has a function to handle importing remote images, but I needed more: I needed the image ID and dimensions… and our function provides for this.

Because it’s difficult to show the result of our code, I’ve written a shortcode that serves no real purpose other than to demonstrate how the primary function is used.

The Result

Consider the logo to my Flight website in the top-left of that page. The function below will import the logo into our WordPress library (inheriting our normal image structure), query the database for the image ID, and finally, query the database again for the image width and height. Once you retrieve image details it’s important that you record the result in your WP database. Calling the function again will result with the image importing again and again.

Function usage is easy:

The function returns an array containing image details.

Array
(
    [html] => http://www.internoetics.com/wp-content/uploads/2015/10/logo.png
    [imgpath] => http://www.flight.org/wp-content/themes/wt_spirit/images/logo.png
    [imgid] => 3280
    [width] => 420
    [height ] => 90
)

The WordPress Function

The Shortcode Function

To demonstrate what the function does and how it works, we’ve written a simple shortcode that you can play around with. Using the sample shortcode function of [importimagetest url="http://www.flight.org/wp-content/themes/wt_spirit/images/logo.png"] the shortcode will print an array of image details to your post (as shown above).

The sample shortcode function demonstrates how you might consider storing the image array as a post option.

Copy and paste the WordPress function into your theme's functions.php file or, if you sensibly have one installed, your custom functions plugin.

If you require shortcode to work in a sidebar widget, you'll have to enable the functionality with a filter. If you're using our custom functions plugin, you'll have that feature enabled by default.

Shortcode Attributes

url

The URL is the full image URL.

des

The description (or des) is inserted into the image title field.

source

Under almost all circumstances we return an array of image details. If you were to return just the image URL, use src="1". However, if all you ever wanted was an image URL, you wouldn’t need our function.

Considerations

As stated, the shortcode function is used only to demonstrate the primary function. However, you could use a variation of it in a qualified link. For example, <img src='[importimagetest url="http://www.flight.org/wp-content/themes/wt_spirit/images/logo.png" description="Image Imported from Flight" source="1"]'> will return the following image (note the single quotes, double quotes won’t work):

Writing a link like this isn’t overly functional so we’ll be rewriting some older code to accommodate the usage described above, in addition to a few other features (such as shor.tt integration) to effortlessly import images with basic shortcode.

media_sideload_image

The WordPress function function is at the heart of our function. In its most basic form – $image = media_sideload_image($url, $post_id, $desc, $return='src'); – it will import a remote image and return the image source or, using $return='html', return the full HTML link.

wp_get_attachment_image_src

To obtain the image dimensions, we use wp_get_attachment_image_src . If this information isn’t required in your image array you can simply comment out the relevant lines of code.

The Image ID

Neither function referenced above will return the image ID so we query the database to obtain it. It’s worth pointing out that every single image on this website is referenced by shortcode using the image ID – not the URL… and then we rewrite a timthumb URL. The next interation of our [link] shortcode will accommodate this.

Download the Code

You can download both functions here .

Shortt URL for this post:

Leave a Reply

Your email address will not be published. Required fields are marked *