Getting started with Remote Images in Drupal

In a previous article I touched on the oEmbed standard and a little about the use of remote media including remote images.

Of course embedding images into to page whether hosted remotely or locally is not a new thing. Embedding remote images from the Drupal UI is not supported out of the box. Of course you can manually edit the html using your wysiwyg editor, but that is not very user friendly and is not a great user experience. Furthermore doing so increases that the risk your markup may be malformed etc

Remote Steam Wrapper

This contributed module provides the ability to use external files with file fields without saving the files to your local files directory. Also provides a 'Remote URL' browser plugin for Media.

So what is a Stream Wrapper?

Streams are the way of generalizing file, network, data compression, and other operations which share a common set of functions and uses. In its simplest definition, a stream is a resource object which exhibits streamable behavior. That is, it can be read from or written to in a linear fashion, and may be able to fseek() to an arbitrary location within the stream.

A wrapper is additional code which tells the stream how to handle specific protocols/encodings. For example, the http wrapper knows how to translate a URL into an HTTP/1.0 request for a file on a remote server. There are many wrappers built into PHP by default (See Supported Protocols and Wrappers), and additional, custom wrappers may be added either within a PHP script using stream_wrapper_register(), or directly from an extension using the API Reference in Working with streams. Because any variety of wrapper may be added to PHP, there is no set limit on what can be done with them. To access the list of currently registered wrappers, use stream_get_wrappers().

https://www.php.net/manual/en/intro.stream.php

Remote URL Browser

Here we can what the see the Remote URL Browser plugin looks like. Here we can see the a thumbnail list view of the remote images. These images are saved as thumbnails locally and can be configured from the Media Library Display options.

To add a remote image using the remote stream wrapper plugin, we can create a new Media Type and then create a new remote image field that we will use store our remote images.  

Rendering a Remote Image using remote stream wrapper and image styles

Here's how it is rendered on the front end:

<div class="field--item">  
    <a href="https://live.staticflickr.com/65535/50617412076_0ca2847075_b.jpg" target="_blank" rel="noopener">
           <img  src="https://live.staticflickr.com/65535/50617412076_0ca2847075_b.jpg" width="709" height="1024" typeof="foaf:Image" class="img-responsive">
    </a>
</div>
 

Furthermore it gives you the option to add image styles, which is useful for controlling how a view looks and behaves. As far as I can tell this does make a copy of the remote image and keep a copy in the local files directory along with other image styles, but also allows you to display the original source image and even link to it if required.

Here's what the markup looks like

<div class="field--item">  
      <img src="/sites/default/files/styles/large/https/live.staticflickr.com/65535/50617412076_0ca2847075_b.jpg?itok=VAUiE2tm" width="332" height="480" typeof="foaf:Image" class="img-responsive">
</div>
  

Notice how this works somewhat differently to Drupal core that would probably strip out or reject any query string attached to an image by default

Remote Steam Wrapper Widget

If you use the Remote Steam Wrapper Module, chances are you will also need the Remote Steam Wrapper Widget. This provides a field formatter when editing your remote steam wrapper image file field! Once enabled you should be able to change the form display.

This project provides a file/image widget implementation of the API provided by remote stream wrapper.

It currently only supports entering the URL (similar to entering a path to an image) but will in time gain feature parity with core's file and image widgets.

Notice how we can have attach multiple fields to media types. Here is an example that shows how we configure the widget on the form display of our media entity, on the image field!

Here we can see what the widget formatter looks like. We can see the option to add a path to the url rather than the typical file upload button

Importing remote images as part of a Migration

It is also worth mentioning that if you want to import remote images as part of you migration, you can also use the contributed migrate_file (extended) module that provides a few different ways to handle remote images including the file_remote_image migrate process plugin. As remote stream wrapper is designed to use the same table schema as locally stored files, this can also be used with remote_stream_wrapper.

Summary

Ok thats it. You now know how you can embed remote images on your site in a secure way that also allows you to take advantage of the benefits of the media module UI. it should be possible to embed images in a secure way that also plays nicely with the Drupal ecosystem. It is also possible to insert dynamically generated images or in other words images do not have to have an appropriate mime/style extension in order to be displayed.

For more info on getting started with remote stream wrapper visit https://www.drupal.org/docs/contributed-modules/how-to-use-remote-strea…