Joomla - Customizing Media Manager

Image Resizer and Uploader

This page documents using the plg_system_mcm plugin, protostar com_media template overrides discussed on page 1 and the com_media_mcm component from page 2 to customize the image modal user interface for front end article editors.

Image Manager – com_media_mcm
updated image modal – com_media_mcm

The articles image modal included in this code allows for drag and drop of the source image, resizes the image client side, uploads the resized image to the controller and has a checkbox to set the uploaded image as an intro image for the article.

Protostar Template Overrides

Download the protostar/html/com_media template overrides that have been modified to include all the necessary code changes for the new image modal user interface.

  • Instead of individually downloading the various files from the Joomla GitHub repository, Download or clone the entire Joomla repository in one step.

Copy the template overrides into the Protostar Template at /templates/protostar/html/com_media.

Custom Media Manager System Plugin

Download and install the plg_system_mcm plugin that contains the code from page 1 to use the template overrides. Additionally, this plugin contains configuration settings for the image resizer. After installation, navigate to the Custom Media Manager plugin in the Extension Manager and save the settings.

MCM Media Component

Download and install the com_media_mcm component.

Browserify is used to build and bundle the modular JavaScript, node modules will also be used to process the SASS files into CSS. These are the modern day tools for UI development. Download and install these requirements in order to build the user interface assets.

Install Browserify

After installing Node.js, using a Command shell, install Browserify globally. *

# global browserify install
npm install -g browserify

* If you have an older version of global Browserify, run npm rm --global browserify to remove the old version before installing the newer one.

Install Gulp

Install gulp globally with the npm install -g command as follows: *

# global gulp install
npm install -g gulp

* If you have an older version of global Gulp, run npm rm –global gulp to remove the old version before installing the newer one.

Install Node Modules

Using a command shell, navigate to the components media folder, /media/com_media_mcm/. Then enter the npm install command which will read the enclosed package.json folder and install all of the dependencies from NPM.

npm install

Run the these two gulp commands to browserify the javascript modules into the /media/com_media_mcm/js folder.

# browserify javascript

gulp js --src=./src/js/images.js --dest=./js

gulp js --src=./src/js/imageslist.js --dest=./js

Run the this gulp command to process the .scss file(s) into the /media/com_media_mcm/css folder.

# build sass

gulp css

Now that the JavaScript modules are converted and bundled with Browserify, the updated image modal user interface is ready for testing.