Acquia Developer Portal Logo

Building Multimedia Sites with Drupal 8

  • 6 minute read

Drupal 8 is left with only a few critical issues before its first release candidate. Not wanting to be left behind, everyone at Acquia is scrambling to become Drupal 8 experts and helping close out the remaining bugs. At Acquia India, we are attempting to reproduce popular sites in Drupal to help learn, contribute and test the capabilities.

Pixelshare is a multimedia site inspired by Instagram that enables users to share pictures and videos amongst their network. You can find the “finished” site here: http://eeaanand.prod.acquia-sites.com/.

There are five key features that we wanted to build:

  1. User profile
  2. User connection (follow)
  3. Uploading images and applying effects
  4. Uploading videos
  5. Like / Comment on a friends’ image or video

While Drupal 8 gave a solid foundation to kick off such a site, there were certain glitches and shortcomings in the modules that were used. Some we solved, and others are being on
worked on.

The build:

Some of the features were supported out of the box in Drupal. User profiles, image uploads, and comments were no-brainers. But the real challenges were awaiting us.

Modules used:

Flag: (https://www.drupal.org/project/flag) We needed Flag for the user connections - “Follow” - and the “Like” features. But as of writing, Flag does not have a stable release for Drupal 8 and there is no activity on drupal.org. We found out development has moved to Github(https://github.com/socketwench/flag-drupal8).

Views: Oh, Views is in core! Sweet! :)

Video: (www.drupal.org/project/video) No Drupal 8 release. What do we do? Why not upgrade the video module to Drupal 8?

Image Field Crop: (www.drupal.org/project/imagefield_crop) This module also did not have a Drupal 8 release planned out when we had started working on this. We decided to look into building this and contributing it back to the community.

Filter effects: We wanted to make it cool! Super cool! It doesn’t get much cooler than giving users the ability to apply special effects while submitting images. No module for this was available for Drupal 8 and so we decided to get cracking on this as well.

So we had half of the battle won with user profiles created, the image content type set and having given users the ability to connect with each other and to “like” each others’ pictures. We moved on to setting up a new theme, which was really simple in Drupal 8. All these things were done with minimal effort.

multimedia

optimus prime

Writing the video module: Starting a new module for video, we leveraged the plugin system in Drupal.

video module

Writing a basic video module was not difficult. The main steps involved:

  1. Creation of a new field type which extended FileItem. We added a few settings such as “allowed file extensions”, “file directory”, and “maximum upload size”.
  2. Creation of a new widget extending FileWidget and adding thumbnail generation on top of it.
  3. Creation of a VideoFormatter which extended FileFormatterBase and used the HTML5
  4. Addition of a Twig file and CSS to go with it.

And that’s all! The video module was up and running!

video node page
Video Node Page

Setting up users’ wall: We had to create a feed where users could see images and videos posted by users whom they were following. Views, now in core, was definitely the way we wanted to go. While setting up views to display the image content type was easy, integrating it with our flags from earlier was not. We tried creating a Flag: User relationship, but the views support for the flag module is still under development. An issue was created for the Flag module and we should have Views support very soon.

We finally tried using hook_views_query_alter to change the query directly, as a temporary workaround. In the process of doing so, we found an issue with an API example in Views and submitted a patch.

Cropping images: Again, custom work was required for this as imagefield_crop does not have a Drupal 8 release yet. This was easier than the video module. All we needed to do was to define a new formatter for ImageFIeld, throw in some JavaScript to crop the images[JS1] and the job was done!

cropping images

Image effects: We wanted to add some image effects (applying filters to the image) to the image field. To do so, again the plugin system came into picture. We created a plugin called ImageEffects. We needed to define our effect as a class that extends ConfigurableImageEffectBase and add it to the applyEffect method.
We are working towards contributing this module as a widget for ImageField.

image effects

multimedia

Contributions:

Some of the major spin-off contribution of this project are:

While it might seem intimidating as not many contributed modules are ready for Drupal 8,with a small amount of coding, things are easily within reach. We (Kasisnu and Abhishek) did the whole task in our free time in less than two weeks.

More Like This