artgris/media-bundle

This package is abandoned and no longer maintained. No replacement package was suggested.
There is no license information available for the latest version (6.3.1) of this package.

Easier Symfony Form Media Management

Installs: 66 527

Dependents: 2

Suggesters: 0

Security: 0

Stars: 48

Watchers: 5

Forks: 16

Open Issues: 4

Type:symfony-bundle

6.3.1 2022-05-30 13:45 UTC

README

artgris/MediaBundle - Easier Symfony Media Management

Repository is no longer maintained. A more modern alternative of this bundle exists: Arkounay ux-media bundle - Symfony UX async document upload type using ArtgrisFileManager : https://github.com/Arkounay/ux-media

Prerequisites

demo-gif

Getting Started

  • Download the files:

      composer require artgris/media-bundle
    
  • In AppKernel.php add the bundle:

      new Artgris\Bundle\MediaBundle\ArtgrisMediaBundle()
    
  • Then, run the following command:

      php bin/console assets:install 
    
  • In your twig template, you will then need to import the required assets:

        {# Bootstrap 4 #}
        <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" integrity="sha384-GJzZqFGwb1QTTN6wy59ffF1BuGJpLSa9DkKMp0DgiMDm4iYMj70gZWKYbI706tWS" crossorigin="anonymous">
        {# or Bootstrap 5 #}
        <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css">
        {# Font Awesome #}
        <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.0/css/all.css" integrity="sha384-lZN37f5QGtY3VHgisS14W3ExzMWZxybE1SJSEsQp9S+oqd12jhcu+A56Ebc1zFSJ" crossorigin="anonymous">
        {# Artgris FileManager #}
        <link rel="stylesheet" href="{{ asset('bundles/artgrisfilemanager/libs/blueimp-file-upload/css/jquery.fileupload.css') }}">
        {# Import fengyuanchen/cropper #}
        <link rel="stylesheet" href="{{ asset('bundles/artgrismedia/libs/cropperjs-1.4.1/cropper.min.css') }}">
        {# Then the default bundle's CSS #}
        <link rel="stylesheet" href="{{ asset('bundles/artgrismedia/css/media.css') }}">
    {# jQuery #}
    <script src="https://code.jquery.com/jquery-3.3.1.min.js" integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8=" crossorigin="anonymous"></script>
    {# Bootstrap 4 #}
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.6/umd/popper.min.js" integrity="sha384-wHAiFfRlMFy6i5SRaxvfOCifBUQy1xHdJ/yoi7FRNXMRBu5WHdZYu1hA6ZOblgut" crossorigin="anonymous"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js" integrity="sha384-B0UglyR+jN6CkvvICOB2joaf5I4l3gm9GU6Hc1og6Ls7i6U/mkkaduKaBhlAXv9k" crossorigin="anonymous"></script>
    {# or Bootstrap 5 #}
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.min.js"></script>
    {# Jqueri UI #}
    <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js" integrity="sha256-VazP97ZCwtekAsvgPBSUwPFKdrwD3unUfSGVYrahUqU=" crossorigin="anonymous"></script>
    {# jquery.collection.js #}
    <script type="text/javascript" src="{{ asset('js/jquery.collection.js') }}"></script>
    {# Import fengyuanchen/cropper #}
    <script src="{{ asset('bundles/artgrismedia/libs/cropperjs-1.4.1/cropper.min.js') }}"></script>
    {# Then the default bundle's JavaScript: #}
    {% include '@ArtgrisMedia/assets/include_js.html.twig' %}
  • In routing.yml, you will need to import the Ajax route:
 artgris_media:
     resource: "@ArtgrisMediaBundle/Resources/config/routing.yml"
     prefix: /admin

Usage

In an entity, add the path attributes as string. You can also use doctrine's types such as simple_array, array, json for collections.

use Artgris\Bundle\MediaBundle\Form\Validator\Constraint as MediaAssert; // optionnal, to force image files

// ...

/**
 * @var string
 * @ORM\Column(type="string")
 * @Assert\NotNull()
 */
private $image;

/**
 * @var Collection|string[]
 * @ORM\Column(type="simple_array", nullable=true)
 * @MediaAssert\Image()
 */
private $gallery;

Then, use a form builder and assigne the MediaType class for a single file, or the MediaCollectionType for multiple files.

use Artgris\Bundle\MediaBundle\Form\Type\MediaType;
use Artgris\Bundle\MediaBundle\Form\Type\MediaCollectionType;

// ... 

$builder
    ->add('image', MediaType::class, [
        'conf' => 'default'
    ])
    ->add('gallery', MediaCollectionType::class, [
        'conf' => 'default'
    ]);

Options:

MediaType:

  • 'conf' => 'yourconf' (required) specifies a configuration defined in the FileManager. For more informations about media configurations, refer to FileManagerBundle's documentation
  • 'extra' => [] (only with FileManagerBundle Service Configuration) Extra Url parameters injections
  • 'readonly' => false prevents the user from manually changing the path (it only adds a "readonly" attribute to the corresponding HTML input)
  • 'allow_crop' => true allows the user to edit the image using fengyuanchen/cropper
  • 'crop_options' => array if allow_crop is set to true, allows to specify extra crop options. The default options:
'crop_options' => [
    'display_crop_data' => true,    // will display crop box informations (x, y, width, height, and ratio if there is one)
    'allow_flip' => true,           // allows to flip the image vertically and horizontally
    'allow_rotation' => true,       // allows to rotate the image (90 degrees)
    'ratio' => false                // force a crop ratio. E.g 16/9
],

MediaCollectionType:

Some ninsuo/symfony-collection's options are available directly:

  • 'min' => 0
  • 'max' => 100
  • 'init_with_n_elements' => 1
  • 'add_at_the_end' => true

Like regular collections, you can edit entries options, i.e to enable alts:

'entry_options' => [
    'display_file_manager' => false
]

Changing cropping path

add config/packages/artgris_media.yaml

artgris_media:
    cropped_path: "cropped/" #default value

Demo Application

MediaBundleDemo is a complete Symfony application created to showcase MediaBundle features.