[Week 12] Finishing the crop functionality and improving UI

Hello everyone!

You must have read about the media module on which I was working with Janez Urevc (slashrsm) and Tadej Baša (paranojik) under Google Summer of Code 2016.

According to the timeline, this is the final week of the project and I need to submit the URL to the project this week. The good news is that the module is ready! Yes, you can clone the module from this link right now and start using! All the features which I had proposed in my project statement are done.

This week I finished two important things:

1) Improved the UI and fixed the bugs: There were a number of small bugs in the UI which needed to be fixed. Here is the link to the Pull request which was recently merged to the media module codebase. Earlier the module required masonry and imagesloaded library to provide the grid effect. In the pull request, we removed the dependencies to use pure CSS to provide the grid effect.

2) Adding the cropping functionality: The module now requires to new modules, namely crop and image_widget_crop, to work. These modules provide the cropping functionality for the images. Users can now easily crop the images before publishing them on their websites. Here is a small demo video of these two features:

The one thing that is left to finish my project is documentation. I am working on the media module documentation and adding sections in the media gitbook. You can find the repository for the same here. Within next few days, the documentation for the module should be ready and should make it easier for the users to get started with the module.

Google Summer of code has been an amazing experience for me. I learnt a lot of new concepts of programming and got a chance to interact with lot of expert programmers. I’ll be finishing the documentation and writing one final blog post about my project and describing in depth about how to use it.

🙂

[Week 11] Finishing Embedding and Fixing UI

Hello All!

I mentioned in my introduction blog post about the media module for Drupal 8 on which I was working on with Janez Urevc (slashrsm) and Tadej Baša (paranojik) under Google Summer Of Code 2016.

This is the last week of GSoC and the submissions start from next week. The journey so far has been amazing and we are almost ready to release the module on Drupal.org official modules repository. The main focus this week was to polish the main features of the module to make the module easier to use. Let me go over the issues we fixed this week:

1) Last week, I wrote about how I modified the hook_install() code to automatically enable the embedding functionality when the media module is installed. It made it simpler for the users to embed content without having to modify the editor settings and filters. But we found that it didn’t work with the Drupal sites which have custom editors. So I had to modify the code to enable the embed button for all the formats which have WYSIWYG editors.

Here is how it looks now

<br />// Enable the media embed button and modify filters.
$filter_formats = \Drupal::entityTypeManager()->getStorage('filter_format')->loadByProperties(array('status' => TRUE));
foreach ($filter_formats as $filter_format) {
$editor = Editor::load($filter_format->getOriginalId());
if ($editor) {
// Make the changes to editor and filters only if editor type exists.
$editor_settings = $editor->getSettings();
$editor_settings['toolbar']['rows'][0][3]['items'][] = 'media';
$editor->setSettings($editor_settings);
$editor->save();
$format = $editor->getFilterFormat();
if ($format->filters('filter_html')->settings['allowed_html']) {
$format->filters('filter_html')->settings['allowed_html'] .= '<drupal-entity data-entity-type data-entity-uuid data-view-mode data-entity-embed-display data-entity-embed-display-settings data-align data-caption data-embed-button>';
}
$format->setFilterConfig('entity_embed', ['status' => 1]);
$format->setFilterConfig('filter_html_image_secure', ['status' => 0]);
$format->save();
}
}

2) There were a lot of UI improvements which were required in the module. I fixed most of them last week and got it merged this week. Here is the link to the Pull request. The patch removed some irrelevant fields from Entity View Display. Also the patch had fixes for few file icons.

3) Media items in the media library did not have the url to the media item in the title. I opened a pull request which enables the link to the media in the title. The fix was really simple and all that had to be done was set link_to_entity to True in media bundle view display. There are a couple of small alterations which still need to be done and should be done soon.

4) Modifying Gallery Bundle tests. Last week there were some updates to the media entity modules. It required me to modify the test code in our module to make it compatible to the latest code.

One major feature which is still needed in the media module is cropping functionality. I have started to work on the functionality and should be ready by this weekend. I am really excited about everyone using the media module starting next week!

I’ll write a detailed post about the module next week when we release the module for general public.

🙂

[Week 10] Fixing embedding issues and improving UI

Hello everyone!

I have already mentioned in my introduction blog post about the media module for Drupal 8 on which I was working on with Janez Urevc (slashrsm) and Tadej Baša (paranojik) under Google Summer Of Code 2016.

This week I worked with my mentors on two issues:

1) Enabling the embedding functionality when the module is installed.

Last week, I created the embed button and entity browser for the media module. The users had to enable the button and filters from settings. To make things easier for users, we wanted to enable the button by default.

The editor module doesn’t provide any hook to add buttons to toolbar. I tried to add the buttons using the hook_editor_js_settings_alter().

/**
* Implements hook_editor_js_settings_alter().
*/
function media_editor_js_settings_alter(array &$settings) {
$settings['editor']['formats']['basic_html']['editorSettings']['DrupalEntity_buttons']['media'] = [
'id' => 'media',
'name' => 'Media',
'label' => 'Media',
'image' => file_create_url('public://media_embed_icon.png'),
'entity_type' => 'media',
];
$settings['editor']['formats']['basic_html']['editorSettings']['drupalExternalPlugins']['drupalentity'] = base_path() . drupal_get_path('module', 'entity_embed') . '/js/plugins/drupalentity/plugin.js';
$extraPlugins = $settings['editor']['formats']['basic_html']['editorSettings']['extraPlugins'];
if (!strpos($extraPlugins, 'drupalentity')) {
$settings['editor']['formats']['basic_html']['editorSettings']['extraPlugins'] .= ',drupalentity';
}
$settings['editor']['formats']['basic_html']['editorSettings']['toolbar'][3]['items'][] = 'media';
}

This code showed the embed button, but it gave an access denied error when I tried to open the entity browser. I found a way to enable the button via the editor settings. I added the following code in the media.install file:

// Enable the media embed button and modify filters.
$editor_names = [
'basic_html',
'full_html',
];
foreach ($editor_names as $editor_name) {
$editor = Editor::load($editor_name);
if ($editor) {
// Make the changes to editor and filters only if editor type exists.
$editor_settings = $editor->getSettings();
$editor_settings['toolbar']['rows'][0][3]['items'][] = 'media';
$editor->setSettings($editor_settings);
$editor->save();
$format = $editor->getFilterFormat();
$format->filters('filter_html')->settings['allowed_html'] .= '';
$format->setFilterConfig('entity_embed', ['status' => 1]);
$format->setFilterConfig('filter_html_image_secure', ['status' => 0]);
$format->save();
}
}

This enabled the embed button as soon as the media module is installed. The pull request for this is available here.

2) Improving UI to make the module more easier and intuitive to use.

There are a lot of places where improvement is required. We made few irrelevant fields hidden in the display and improved the help texts at some places. The pull request for this is available here.

Next week, I need to work on the cropping functionality and prepare documentation for the module. If you have been following the weekly progress on this blog, you must have already got an idea that the media module is almost complete. Get ready to find the media module on drupal.org really soon! 😉

I’ll post more updates about the module next week. Stay tuned!

🙂

[Week 9] Adding the embed functionality in wysiwyg editor

Hello Drupalers!

You must have already read my introduction blog post about the media module for Drupal 8 on which I was working on with Janez Urevc (slashrsm) and Tadej Baša (paranojik) under Google Summer Of Code 2016.

Last week I wrote a blog post about the three new media bundles which were added to the media module. Those bundles provided the functionality to add documents, tweets and instagram posts to the Drupal sites.

This is how the media library looked with the new media bundle entities

This week, I worked on the embed functionality in wysiwyg editor. Let’s get into more details.

Drupal 8 comes with wysiwyg editor called the CKEditor in the core. There are two contributed modules, Embed and Entity Embed, which allow users to create embed buttons for the editor. I created an embed button for embedding different types of media entities in the editor. Here is the pull request for the embed functionality.

Once the media module is enabled, one needs to enable the embed button in the editor:
1) Go to Configuration -> Content authoring ->Text formats and editors
and drag and drop the media button to the editor toolbar.
2) Check “Display embedded entities” in the enabled filter section.
3) Uncheck “Restrict images to this site” in the same section.
4) You’re done!

Here are few screenshots of how the embedding functionality currently looks:

We are working on the embedding functionality to make it even better and easier for users to use. Hopefully we’ll make it work out of the box without any additional configuration required by the user.

This week, after finishing the embedding functionality, I’ll work on the cropping functionality for the uploaded images. That’s the final major task of this module. Once that is done, I’ll have to fix bugs and write documentation for the module. Get ready people, the media module is coming soon!
I’ll post more updates next week! 🙂

[Week 8] Adding three new bundles!

Hello everyone!

I have already mentioned in my introduction blog post about the media module for Drupal 8 on which I was working on with Janez Urevc (slashrsm) and Tadej Baša (paranojik) under Google Summer Of Code 2016.

In week 8, I finished working on three new bundles: Document, Twitter and Instagram. Yes that’s right, you can now easily embed twitter tweets and instagram posts in your Drupal site! Let’s get into more details!

1) Document Bundle: The document bundle will allow users to upload documents of various types such as PDF, PPTX, DOCX, XLSX etc on Drupal websites. The bundle also ships with 12 file icon types for most used document types. And moreover, its easy as ABC to add new icons in the bundle. All you need to do is rename your icon file with its mimetype and then copy to the right directory.

For example: A new icon for text file should be named text-plain.png because the mimetype for text files is text/plain. Then you need to move this file to the icon-base directory defined in media entity. By default this directory is /sites/default/files/media-icons/generic/

You can find the pull request for the bundle here.

2) Twitter Bundle: The twitter bundle allows users to embed tweets in the drupal site using the Tweet URL. You just need to copy the URL of the tweet and create a new Tweet type media item to embed the tweet. Here is the pull request for twitter bundle.

3) Instagram Bundle: Just like the Twitter bundle, the instagram bundle allows the users to embed instagram posts in the drupal website. One just needs to copy the url of the image and create a new Instagram Type media item to embed the post. Here is the pull request for the same.

Here is how the media library looks with the three new bundles:

And yes, one can easily add these bundle items to a gallery as well.

The GSoC project submission deadlines (15Aug – 23Aug) are approaching closer and three major tasks are still left:

1) Implement the embedding of media items in WYSIWYG editor.
2) Implement cropping functionality for uploaded images.
3) Create documentation and tutorial videos for the media module.

This week I’ll be working on the entity embed functionality and would post the updates next week! Stay tuned!

🙂

[Week 7] Adding more functionality to media views and EB

Hello Drupalers!

You must have already read my introduction blog post about the media module for Drupal 8 on which I was working on with Janez Urevc (slashrsm) and Tadej Baša (paranojik) under Google Summer Of Code 2016.

Last week I wrote a blog post about the changes I made to the Media library views and entity browser.

Let me give you a brief introduction about what are entity browsers. Entity browser is a drupal module which provides a generic entity browser/picker/selector. One can easily add widgets such as views, entity forms or DropzoneJS file upload forms to an entity browser. You can see the demo of a entity browser in my GSoC mid term post.

The media module currently has two Entity browsers. One is for selecting and attaching media to various content types and the other one is for creating gallery. Entity browser for gallery is a super simple way to create gallery by choosing the media items. This week I did the following things:

1) Adding a bundle filter on media library views: The entity browser for gallery comes with two views. One for Global media library and the other one for User media library. I added bundle filters in both those views.

2) Adding a patch to remove Gallery option from bundle filters: A gallery can contain all kinds of media entities except Gallery type items. This is why I wrote a patch to remove the gallery option from the bundle filters in the views. Here is the URL to the PR.

3) Adding constraints for Gallery items: Applying the gallery filters in the views restricts the user to selecting media items except gallery type items. But one could still programmatically add gallery types of items in a gallery. I wrote constraints for Gallery bundle makes sure that there is not gallery type of item in a gallery. This is how the constraint validator looks like:

<br />public function validate($value, Constraint $constraint) {
if (!isset($value)) {
return;
}
if ($value->hasField($constraint->sourceFieldName)) {
$slideshowItems = $value->get($constraint->sourceFieldName);
foreach ($slideshowItems as $item) {
if ($item->entity->getType()->getPluginId() == "slideshow") {
$this->context->addViolation($constraint->message);
}
}
}
}

You can find this code in the src/Plugin/Validation/Constraint directory of the media module.

This week we’ll be adding more media bundles to the media module. I’ll post more updates next week. Stay tuned!

🙂

[Week 6] Fixing media library Entity Browser

Hello Drupalers!

You must have already read my introduction blog post about the media module for Drupal 8 on which I was working on with Janez Urevc (slashrsm) and Tadej Baša (paranojik) under Google Summer Of Code 2016.

Last week I wrote a blog post about the media library which we had finished. I also posted a video showing a demo of the module.

This week I fixed a couple of issues we found in our Entity Browser and Library Views. You can see this week’s pull request here. I’ll briefly discuss the issues which I fixed:

1) Fixing permissions: There were few problems with the permissions required to access the view. This is now fixed.
2) Adding widgets to EB: Earlier the entity browser only had two widgets. I added two more widgets for “My Media” and “Add Video” this week.
3) Gallery uses EB: To create slideshows, one can just select media from the Entity browser widgets. It is simpler to create slideshows now.
4) Updated Gallery tests: Since the way gallery is being created was changed, I had to update the tests to support entity browser.
5) Media bundle machine name: I updated the patch for the media_entity module bug where it showed an option to edit the machine name of existing bundles.

The next task to finish on the list is to add a media bundle for Document. We want the users to easily upload and manage their document files. We’ll be using the media_entity_document module for that. The document PR is available here. I still need to write suitable tests for it. I’ll be finishing the tests this week.

I’ll be posting more updates next week! Stay tuned!

🙂

[Week 5] Media library and midterm results

Hello everyone!

I had previously written a blog post about the media module for Drupal 8 on which I was working on with Janez Urevc (slashrsm) and Tadej Baša (paranojik) under Google Summer Of Code 2016.

This week we finished the media library for the module and pushed it to the main repository. I had given a brief introduction about media library in my last week’s post. As promised, here is a demo video of the media module:

So the media library currently uses masonry for displaying the media items. There are few things which we still have to fix, but a basic module is ready to be used. You can find the stable code for the module here.

This week was the midterm review week and everyone is done with at least half of their project. Here is an overall analysis for media module.

Done:

1) Investigating Lightening distribution and understanding they way they solve the problem.
2) Adding image type media items.
3) Adding video type media items.
4) Adding slideshow type media items.
5) Views for the global and user specific media library. An entity browser used for selecting media.

To be done:
1) Fixing issues with the media library.
2) Create a new formatter for the media gallery with an integrated slideshow library.
3) Embedding media using WYSIWYG.
4) Improving tests.
5) Creating help content for the module.
6) Create a demo module providing demo content and a tour of the module functionality.

I’ll keep on posting more updates on this blog. And I would again like to thank slashrsm and paranojik and their continuous support and help throughout the project.

🙂

[Week 4] Media library and fixing slideshow

Hello fellow Drupalers!

Four weeks ago I had written a blog post about the media module for Drupal 8 on which I was working on with Janez Urevc (slashrsm) and Tadej Baša (paranojik) under Google Summer Of Code 2016.

I am really excited to inform you all that we merged the gallery bundle today with the main repository. It uses the Slick media module which provides integration between the Slick Carousel and the media entity modules. Now using the media module everyone can easily publish media content of slideshow type consisting of images and/or videos as slides. The media module comes with its own image styles and view modes for the gallery items.

Before moving on to an even more exciting part, the media library, let me discuss the issues we faced with the gallery bundle. When I first opened the pull request, Travis CI tests failed with some schema errors. The error said

<br />The test did not complete due to a fatal error.
Exception Uncaught e ConfigSchemaCheck 93 Drupal\Core\Config\Testing\ConfigSc
Drupal\Core\Config\Schema\SchemaIncompleteException: Schema errors for
views.view.media_library with the following errors:
views.view.media_library:display.entity_browser_1.display_options missing
schema in Drupal\Core\Config\Testing\ConfigSchemaChecker-&gt;onConfigSave()

This error can be resolved in two ways.

1) Fixing the schema files. This is what we did with the entity browser module. You can see the patch here.

2) Ignoring schema errors. To temporarily pass the tests you can just ignore the schema errors. Add the following code in your test classes.

<br />/**
* Exempt from strict schema checking.
*
* @see \Drupal\Core\Config\Testing\ConfigSchemaChecker
*
* @var bool
*/
protected $strictConfigSchema = FALSE;

This error existed with the slick module too and we have opened an issue here.

Let’s talk about the media library now. We are working on media library with nice interface for Drupal which would make working with Media items a lot easier. You would be able to drag and drop to upload and embed media items or just choose from existing media items to embed with your content. Here is a sneak peak of what is about to be released soon.

The file listing tab displays media items in a grid layout using masonry 😉

I know you must be really excited to read more about the upcoming media library but I’ll just end the post here and share more details about the library next week! In the mean time you can follow the Pull Request for the media library here.

Okay see you all next week! Enjoy!

🙂

[Week 3] Adding Slideshow bundle and fixing video bundle

Hello All!

As you would have already read on this blog that I was working on the media module for Drupal 8. Here is the introduction blog post just in case you missed it.

Last week I worked on the video media bundle and its default configuration to be included in the media module. This week I worked on fixing the video media bundle as well as creating a basic slideshow media bundle.

Last week, I wrote about how I wrote a custom script in before_script section of the travis configuration file to install video_embed_media module. This week I modified the .info.yml file to include the name of the project as well as the module. You can see the commit here. Here is a relevant change record on d.o.

The pull request for the entire video bundle can be found here.

This week I worked on the slideshow bundle too. I first created a basic slideshow media bundle with an entity reference type of field for the media content such as images and videos. I modified the form display to be of Rendered Entity type so that the videos and images are displayed and not just their titles. We discussed about how to improve the slideshow experience for the user by using some slider module such as Slick Media. We aren’t planning to include it in the media module but in the README file with instructions for users to implement this on their own. I will provide with updates on this thing soon enough.

GSoC midterm evaluations start from 20th June. We are planning to finish a basic usable media bundle till then. We have a lot of things still left to do and I’ll keep on posting updates on this blog.

See you guys next week!

🙂