Show video ads using SimpleAds for Drupal

Problem/Motivation

Sometimes your ads are mp4. There's currently no easy or well documented way to upload them.

Proposed resolution

In config (/admin/config/simpleads/advertisement/fields)
Create a new field, a file upload, called SimpleAds Video. It'll get the machine name field_simpleads_video.

Make sure you can use it to upload mp4, webm or whatever you need.

In your .theme-file (something like /themes/custom/vertikal_theme/vertikal_theme.theme)
Add a correctly named preprocess function. The code below will also fit in well in a custom module.

use Drupal\file\Entity\File;
use Drupal\Core\Url;
[...]
/**
 * Implements hook_preprocess_HOOK() for simpleads-image.html.twig.
 */
function vertikal_theme_preprocess_simpleads_image(&$variables) {
    if (!empty($variables['entity']->field_simpleads_video->target_id) && is_numeric($variables['entity']->field_simpleads_video->target_id)) {
        $file = File::load($variables['entity']->field_simpleads_video->target_id);
        $variables['options']['video'] = \Drupal::service('file_url_generator')->generateString($file->getFileUri());
    }
}

Add a correctly named twig-file
Something like /themes/custom/vertikal_theme/templates/simpleads-image.html.twig.

It should look like this:

{#
/**
 * @file
 * SimpleAds image advertisement template.
 */
#}
{% if options.type == 'image' %}
  {% if options.image is not null and options.image is not empty %}
    <img src="{{ options.image }}" border="0"{% if options.image_prop.alt is not empty %} alt="{{ options.image_prop.alt }}"{% endif %}{% if options.image_prop.title is not empty %} title="{{ options.image_prop.title }}"{% endif %} />
  {% endif %}
  {% if options.video is not null and options.video is not empty %}
    <video src="{{ options.video }}" border="0" autoplay></video>
  {% endif %}
{% endif %}

Now, when you add an add at /admin/content/simpleads/add, simply upload a video to the video field and proceed as usual.

Remaining tasks

Make it part of the official documentation. Or make an Advertisement Type called Video.

User interface changes

None.

API changes

None.

Data model changes

None.