CAKEPHP3-MEDIA

Voir la source sur GitHub

Présentation

Le principe de ce plugin CakePHP est de vous permettre de créer une gestion d'image poussée pour vos contenu avec le moins de code possible. Le système repose sur un behaviour pour gérer l'association des média aux models et un helper pour gérer la partie administration des médias.

Ce plugin peut être utilisé en backend comme en front end avec l'utilisation d'une fonction pour gérer les permissions.

Fonctionnalités

  • Association belongsTo et hasMany Media pour vos models
  • Interface d'upload drag & drop des images basée sur plupload
  • Intégration de l'uploader d'image dans tinyMCE, ckeditor et redactor

Installation

La première chose à faire est de copier le plugin Media dans le dossier Plugin de votre application. Pour cela vous pouvez télécharger le .zip ou cloner directement le dépôt 

	
		git clone git@github.com:anouarcharif/CakePHP3-Media.git Media

Ensuite il vous faut charger le plugin, pour cela dans votre fichier bootstrap.php et utiliser le syntaxe suivant: 

	
	Plugin::load('Media', ['autoload' => true, 'routes' => true]);

Voila ! le plugin est bien chargé, vous pouvez maintenant créer la table qui va permettre de gérer les différents médias. Pour cela il faut utiliser la requête suivante: 

		
			CREATE TABLE  `medias` (
			`id` INT( 11 ) NOT NULL AUTO_INCREMENT ,
			 `ref` VARCHAR( 25 ) NOT NULL ,
			 `ref_id` INT( 11 ) NOT NULL ,
			 `file` VARCHAR( 255 ) DEFAULT NULL ,
			 `position` INT( 11 ) NOT NULL DEFAULT  '0',
			PRIMARY KEY (  `id` ) ,
			KEY  `id` (  `id` ,  `ref` ,  `position` )
			) ENGINE = INNODB DEFAULT CHARSET = latin1;

Permission

Par défaut, le plugin est bloqué pour tout le monde.

Pour définir les permission vous pouvez bloquer les actions du plugin depuis votre AppController avec les méthodes par défaut. Pour des permissions plus affinées vous pouvez définir une fonction canUploadMedias($model, $id) dans votre AppController. Par exemple : 

	
public function canUploadMedias($table, $id){
	if($table == 'Users' & $id = $this->Session->read('Auth.User.id')){
		return true; // Chaque utilisateur peut modifier les médias de son profil
	}
	return $this->Session->read('Auth.User.role') == 'admin'; // seule l'administrateur peut gérer l'ensemble des médias.
}

Le Behaviour

Pour utiliser le plugin Media vous devez d'abord charger le Behaviour sur vos models. Par exemple si pour mes membres je veux pouvoir avec des images liées : 

		
//src/Model/Table/MembresTable.php

namespace App\Model\Table;

use Cake\ORM\Table;


class MembersTable extends Table
{
	public function initialize(array $config)
	{
		$this->addBehavior('Media.Media', 
				[
					'refName' => 'Member',
					'path' => '/img/uploads/%y/%m/%f',
					'extensions' => array('jpg', 'png', 'bmp', 'gif'),
					'limit' => 0,
					'max_width' => 0,
					'max_height' => 0,
					'size' => 0
				]
		);
	}
}
Le behaviour prend plusieurs options.
  • path "img/uploads/%y/%m/%f" - Permet de définir le chemin ou sera stocké l'image par rapport au dossier app/webroot
    • %y Année d'upload de l'image
    • %m Mois d'upload de l'image
    • %d Jour d'upload de l'image
    • %f Nom du fichier uploadé (sans l'extension et avec un Inflector::slug())
    • %id ID du média
    • %cid ID du média divisé par 100 et arrondit à l'entier suppérieur
    • %mid ID du média divisé par 1000 et arrondit à l'entier suppérieur
  • extensions ['jpg','png'] - Permet de définir les extensions (minuscules) autorisées pour le plugin
  • limit entier - permet de spécifier le nombre maximum de médias qu'un membre peut uploader.
  • max_width entier - permet de spécifier la largeur maximum qu'un média peut avoir.
  • max_height entier - permet de spécifier la hauteur maximum qu'un média peut avoir.
  • size entier - la taille maximum qu'un média peut avoir (0 par défaut et ce n'est pas pris en compte).

Ce behaviour rajoute 2 liaisons à votre table/model :

  • belongsTo Thumb, afin de récupérer l'image à la une de votre contenu. Ne fonctionne que si votre table à un champs media_id
  • hasMany, permet de récupérer toutes les images liées à un contenu.

Et plusieurs champs lors d'un AppModel::find() si vous ajoutez la liaison avec le model Thumb

  • Un champs "thumb" contenant l'url de l'image à la une sera ajouté aux champs de votre table/model

Helper

Maintenant que tout est en place il faut pouvoir ajouter, éditer et supprimer des images.
Pour réaliser cela le plugin apporte un helper "Media" qui vous permet de générer une interface drag & drop rapidement. Cet helper fonctionne de 2 façon :

Soit vous pouvez créer une iframe vers le gestionnaire de média : 

		
			echo $this->Media->iframe('TABLE',ID);

Ou au sain d'un formulaire ($this->Form->create()) vous pouvez créer un champs utilisant tinyMCE, CKEditor et Redactor.js, cette méthode prend les même paramètre que la méthode FormHelper::input. 

		
		// $refName est en singulier
		echo $this->Media->tinymce($fieldName, $refName, $refID, $options = array ( ));
		echo $this->Media->ckeditor($fieldName, $refName, $refID, $options = array ( ));
		echo $this->Media->redactor($fieldName, $refName, $refID, $options = array ( ));

Redimensionnement

Utilisez l'ImageHelper.

Maintenant que vous avez vos outils pour ajouter et récupérer les images il est temps de les afficher et de les redimensionner.
Cela se fait encore depuis le helper Media

Par exemple si je veux une version 200x200 de l'image webroot/img/test.jpg 

	
Media->image('/img/test.png', 200, 200, array('class' => 'avatar')); ?>

// génèrera le code suivant

Contact

Pour me contacter au sujet de ce plugin merci de me laisser un message sur ce forum