MediaBundle

A Symfony Media Manager. Inspired by SonataMediaBundle's use of Media Providers to add different Media types.

Note: This bundle is still very much a work in progress, so BC-breaks will happen until the first stable release.

Installation

Install FOSJsRoutingBundle according to it's documentation

Add the bundle to your composer.json

composer require opifer/media-bundle dev-master

Register the bundle and its dependencies in app/AppKernel.php

publicfunctionregisterBundles()
{
$bundles = array(
// ...newJMS\SerializerBundle\JMSSerializerBundle(),
newKnp\Bundle\GaufretteBundle\KnpGaufretteBundle(),
newLiip\ImagineBundle\LiipImagineBundle(),
newOpifer\MediaBundle\OpiferMediaBundle()
);
}

You should create your own Media entity that extends Opifer\MediaBundle\Model\Media.

namespaceAppBundle\Entity;
useDoctrine\ORM\MappingasORM;
useOpifer\MediaBundle\Model\MediaasBaseMedia;
/** * @ORM\Table(name="media") * @ORM\Entity(repositoryClass="Opifer\MediaBundle\Model\MediaRepository") */class Media extends BaseMedia
{
// Add custom functionality...
}

And reference to it in your app/config/config.yml

opifer_media:
media_class: AppBundle\Entity\Media

Using the media manager

This bundle comes with an AngularJS media manager included. To use it, you'll need to include some necessary javascript files and CSS files into your templates.

First, make sure you installed all asset dependencies. You can download them manually, copy the bower.json file to your own bundle and run bower install or copy the bower.json content to your own bower dependencies.

Then, add the dependencies to your templates.

{% stylesheets'bundles/opifermedia/css/dropzone.less''bundles/opifermedia/css/main.less'
filter='less,cssrewrite' %}
<linkrel="stylesheet"href="{{ asset_url }}" />
{% endstylesheets %}
...
{% javascripts'@AppBundle/Resources/public/components/ng-file-upload/angular-file-upload-shim.min.js''@AppBundle/Resources/public/components/angular/angular.js''@AppBundle/Resources/public/components/angular-route/angular-route.js''@AppBundle/Resources/public/components/angular-resource/angular-resource.js''@AppBundle/Resources/public/components/ngInfiniteScroll/build/ng-infinite-scroll.js''@AppBundle/Resources/public/components/ng-file-upload/angular-file-upload.min.js''@OpiferMediaBundle/Resources/public/js/dropzone.js''@OpiferMediaBundle/Resources/public/app/modal/modal.js''@OpiferMediaBundle/Resources/public/app/medialibrary/medialibrary.js''bundles/fosjsrouting/js/router.js' %}
 <scripttype="text/javascript"src="{{ asset_url }}"></script>
{% endjavascripts %}

Then, create an Angular module that requires the following modules:

'use strict';angular.module('App',['ngRoute','ngResource','mediaLibrary','angularFileUpload',]);

Make sure you add the angular module in your template by adding the the file to your {% javascripts %} list. And initialize the Angular App in your template:

<htmlng-app="App">

To make the mediamanager accessible in the browser, add the routes to your routing.yml:

opifer_media:
resource: "@OpiferMediaBundle/Resources/config/routing.yml"prefix: /admin_liip_imagine:
resource: "@LiipImagineBundle/Resources/config/routing.xml"options:
expose: true

To use the mediamanager in your own layout, override OpiferMediaBundle::base.html.twig:

{# app/Resources/OpiferMediaBundle/views/base.html.twig #}
{% extends'base.html.twig' %}
{% blockbody %}
{% blockopifer_media_body %}{% endblock %}
{% endblock %}
{% blockjavascripts %}
{{ parent() }}
{% blockopifer_media_javascripts %}{% endblock %}
{% endblock %}

Adding a mediapicker to a form

Create a relationship between the media entity and any other entity. For example, Users must be able to add media to a Content item.

namespaceAppBundle\Entity;
useDoctrine\ORM\MappingasORM;
useOpifer\MediaBundle\Model\MediaInterface;
class Content
{
/** * @var Media * * @ORM\ManyToOne(targetEntity="Opifer\MediaBundle\Model\MediaInterface") * @ORM\JoinColumn(name="media_id", referencedColumnName="id", onDelete="SET NULL") */protected$image;
/** * Set image * * @param string $image * * @return Content */publicfunctionsetImage(MediaInterface$image = null)
{
$this->image = $image;
return$this;
}
/** * Get image * * @return MediaInterface */publicfunctiongetImage()
{
return$this->image;
}
}

In your content FormType, add the mediapicker form type:

namespaceAppBundle\Form\Type;
useDoctrine\ORM\EntityRepository;
useOpifer\MediaBundle\Form\Type\MediaPickerType;
useSymfony\Component\Form\AbstractType;
useSymfony\Component\Form\FormBuilderInterface;
class ContentType extends AbstractType
{
publicfunctionbuildForm(FormBuilderInterface$builder, array$options)
{
$builder// ...
->add('image', MediaPickerType::class, [
'multiple' => false,
])
;
}
}

Documentation

• Configuration reference
• Media providers