README

MediaBundle

一个基于Symfony的媒体管理器。受SonataMediaBundle使用媒体提供者来添加不同媒体类型所启发。

注意：此包仍在开发中，因此直到第一个稳定版本发布之前，可能会出现BC-breaks。

安装

根据其文档安装FOSJsRoutingBundle

将包添加到你的composer.json

composer require opifer/media-bundle dev-master

在app/AppKernel.php中注册包及其依赖

public function registerBundles()
{
    $bundles = array(
        // ...
        new JMS\SerializerBundle\JMSSerializerBundle(),
        new Knp\Bundle\GaufretteBundle\KnpGaufretteBundle(),
        new Liip\ImagineBundle\LiipImagineBundle(),
        new Opifer\MediaBundle\OpiferMediaBundle()
    );
}

你应该创建自己的媒体实体，该实体扩展自Opifer\MediaBundle\Model\Media。

namespace AppBundle\Entity;

use Doctrine\ORM\Mapping as ORM;
use Opifer\MediaBundle\Model\Media as BaseMedia;

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

并在你的app/config/config.yml中引用它

opifer_media:
    media_class: AppBundle\Entity\Media

使用媒体管理器

此包包含一个内置的AngularJS媒体管理器。要使用它，你需要在模板中包含一些必要的javascript文件和CSS文件。

首先，确保你已安装所有资产依赖项。你可以手动下载它们，将bower.json文件复制到你的包中并运行bower install，或者将bower.json内容复制到你的Bower依赖项中。

然后，将依赖项添加到你的模板中。

{% stylesheets
    'bundles/opifermedia/css/dropzone.less'
    'bundles/opifermedia/css/main.less'
    
    filter='less,cssrewrite' %}
    <link rel="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' %}
    <script type="text/javascript" src="{{ asset_url }}"></script>
{% endjavascripts %}

然后，创建一个Angular模块，该模块需要以下模块

'use strict';

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

确保你通过将文件添加到你的{% javascripts %}列表中来在你的模板中添加angular模块。并在你的模板中初始化Angular App

<html ng-app="App">

为了在浏览器中使media manager可访问，将路由添加到你的routing.yml

opifer_media:
    resource: "@OpiferMediaBundle/Resources/config/routing.yml"
    prefix:   /admin

_liip_imagine:
    resource: "@LiipImagineBundle/Resources/config/routing.xml"
    options:
        expose: true

为了在你的布局中使用media manager，覆盖OpiferMediaBundle::base.html.twig

{# app/Resources/OpiferMediaBundle/views/base.html.twig #}
{% extends 'base.html.twig' %}

{% block body %}
	{% block opifer_media_body %}{% endblock %}
{% endblock %}

{% block javascripts %}
    {{ parent() }}

    {% block opifer_media_javascripts %}{% endblock %}
{% endblock %}

将media picker添加到表单中

在媒体实体与其他实体之间创建一个关系。例如，用户必须能够将媒体添加到内容项中。

namespace AppBundle\Entity;

use Doctrine\ORM\Mapping as ORM;
use Opifer\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
     */
    public function setImage(MediaInterface $image = null)
    {
        $this->image = $image;

        return $this;
    }

    /**
     * Get image
     *
     * @return MediaInterface
     */
    public function getImage()
    {
        return $this->image;
    }
}

在你的内容FormType中添加mediapicker表单类型

namespace AppBundle\Form\Type;

use Doctrine\ORM\EntityRepository;
use Opifer\MediaBundle\Form\Type\MediaPickerType;
use Symfony\Component\Form\AbstractType;
use Symfony\Component\Form\FormBuilderInterface;

class ContentType extends AbstractType
{
    public function buildForm(FormBuilderInterface $builder, array $options)
    {
        $builder
            // ...
            ->add('image', MediaPickerType::class, [
                'multiple' => false,
            ])
        ;
    }
}

opifer / media-bundle

维护者

详细信息

README

MediaBundle

安装

使用媒体管理器

将media picker添加到表单中

文档