How to integrate the Fork CMS MediaLibrary Module into a custom Fork CMS Module?

The example below shows you how easy it is to add a MediaGroup for images to your custom module. You can also look at the MediaGalleries module, because in that module the mediaGroup has been integrated as well.

Overview:

Integration in Backend

In your Entity

use Backend\Modules\MediaLibrary\Domain\MediaGroup\MediaGroup;
/**
 * @var MediaGroup
 *
 * @ORM\OneToOne(
 *      targetEntity="Backend\Modules\MediaLibrary\Domain\MediaGroup\MediaGroup",
 *      cascade="persist",
 *      orphanRemoval=true
 * )
 * @ORM\JoinColumn(
 *      name="mediaGroupId",
 *      referencedColumnName="id",
 *      onDelete="cascade"
 * )
 */
private $mediaGroup;

You can choose whatever variable name you like ($mediaGroup). Just remember to use that variable name all across the following code then.

public function getMediaGroup(): MediaGroup
{
    return $this->mediaGroup;
}

You will also need to add set $this->mediaGroup = $mediaGroup in your constructor (and create) and update method.

In your Form

Symfony FormType class:

use Backend\Modules\MediaLibrary\Domain\MediaGroup\MediaGroupType;
$builder->add(
    'mediaGroup',
    MediaGroupType::class,
    [
        'label' => 'lbl.MediaConnected', // Or 'Screenshots', 'Trailers', 'Preview images', ...
        'constraints' => [new Valid()],
    ]
)

As you can see, the label can be anything you want.

In your Create Command class

use Backend\Modules\MediaLibrary\Domain\MediaGroup\MediaGroup;
use Backend\Modules\MediaLibrary\Domain\MediaGroup\Type as MediaGroupType;
/**
 * @var MediaGroup
 */
public $mediaGroup;

In your __construct()

$this->mediaGroup = MediaGroup::create(MediaGroupType::fromString('image'));

Possible MediaGroupType values are; "all", "audio", "file", "image", "image-file", "image-movie", "movie". Which defines which MediaItem files are allowed in this MediaGroup.

In your Create Command Handler class

Just pass the media group entity to your custom entity constructor.

In your Add action

$this->tpl->assign('mediaGroup', $form->getData()->mediaGroup);

View example: /src/Backend/Modules/MediaGalleries/Actions/MediaGalleryAdd.php

In your Update Command class

use Backend\Modules\MediaLibrary\Domain\MediaGroup\MediaGroup;
use Backend\Modules\MediaLibrary\Domain\MediaGroup\Type as MediaGroupType;
/**
 * @var MediaGroup
 */
public $mediaGroup;

In your __construct()

$this->mediaGroup = $customEntity->getMediaGroup();

OR if you are integrating mediaGroup in an existing module, use the following:

$this->mediaGroup = $customEntity->getMediaGroup();

if (!$this->mediaGroup instanceof MediaGroup) {
    // Note: I'm using 'image' in this example, use what you want, ...
    $this->mediaGroup = MediaGroup::create(MediaGroupType::fromString('image'));
}

In your Edit action

$this->tpl->assign('mediaGroup', $form->getData()->mediaGroup);

Example: src/Backend/Modules/MediaGalleries/Actions/Edit.php

In your Add and Edit template

This will result in: Screenshow of the Backend Meda Helper

{# Only include the BackendMediaGroupsHelper once #}
{% include "MediaLibrary/Resources/views/BackendMediaGroupsHelper.html.twig" %}

{{ form_widget(form.mediaGroup, {'mediaGroup': mediaGroup}) }}

Example: src/Backend/Modules/MediaGalleries/Layout/Templates/Add.html.twig and src/Backend/Modules/MediaGalleries/Layout/Templates/Edit.html.twig

Integration in Frontend

Option 1: in your Twig template

You can use the provided media_library_widget TwigFunction.

{# Slider widget #}
{{ media_library_widget('Slider', blogArticle.mediaGroup.id) }}

Possible values in the core are: 'Slider', 'Lightbox', 'Listing', 'OneImage', 'OneRandomImage'. But you can easily create your own by just duplicating one of these files.

Option 2: in your PHP class

// Blog detail action
class Detail
{
    public function loadData()
    {
        $this->blogArticle = new BlogArticle();
    }

    public function parse()
    {
        $this->tpl->assign(
            'imagesWidget',
            // We can create widget for the MediaGroup id
            $this->get('media_library.helper.frontend')->parseWidget(
                'Slider',
                $this->blogArticle->getMediaGroup()->getId(),
                'MyCustomOptionalTitle'
            )
        );
    }
}

Note: You can optionally give in a fourth parameter $module (default $module = "Media"), so you can create a Media widget in your own Custom module.

View example: src/Frontend/Modules/MediaGalleries/Widgets/Gallery.php