Download the PHP package distilleries/layout-manager without Composer
On this page you can find all versions of the php package distilleries/layout-manager. It is possible to download/install these versions without Composer. Possible dependencies are resolved automatically.
Download distilleries/layout-manager
More information about distilleries/layout-manager
Files in distilleries/layout-manager
Package layout-manager
Short Description Create and manage your own custom layouts with this simple widget based plugin.
License MIT
Informations about the package layout-manager
Laravel 5 Layout Manager
Requires expendable with form-builder.
Table of contents
- Installation
- Basic usage
- Configuration
- Create templates
- Template Styling
- Options
- Categories
- Filter templates
- Custom tags
- Disable add and ordering
- Special classes
- Troubleshooting
Installation
Add on your composer.json
Add on your bower.json
Add on your build.config.js
Import the sass into your application.admin.scss
run composer update
.
Add Service provider to config/app.php
:
Add the controller to your admin menu config/expendable.php
:
Add Template field type in config/form-builder.php
:
Export the configuration:
Export the views:
Basic usage
1. Configuration
To enable the layout manager in one of you models, you need to update the model first. It should implements TemplatableContract and use TemplatableTrait
You can now uses templatable in you Form:
The user will now be able to create/order/edit/remove content based on your own templates.
2. Create templates
You can create your own templates on the related form in the back-office. Here is a description of each fields that compose a unique template:
Field | Description |
---|---|
Title | The title that will be shown in the back-office "Add template" dropdown list |
Css class | A Unique Css class applied to the template, can be usefull if you want to create your custom css style |
Html | The template itself. You can put here HTML tags but also custom tags. See Custom tags |
Plugins | TinyMCE Inline plugins you want to add when editing this template. |
Toolbar | TinyMCE Inline toolbar you want to display when editing this template. |
Template Styling
Good practice is to re-use your frontend styling when using LayoutManager.
It will allow your contributors to edit content as if they were on the front-end.
To do so, create a folder in the sass
folder of your frontend.
Create one unique .sass
file for each template, and import this file on each frontend and backend application.scss
. This template needs to be independant and work in "standalone" (i.e. not related to a container).
This way your style will be displayed on the backoffice as well as on your front.
Options
1. Categories
When adding content to your model based on your own templates, you may need to categorize them. For example, you may need to show your content within tabs. Each tabs can be defined as a category in LayoutManager.
To do so, you can pass an array of categories in your model's form class like so :
The categories
's key is the unique string saved in the database to match the category and the categories
's value is the text displayed to the contributor in the backoffice.
2. Filter templates
The dropdown-list of all the templates the contributor is allowed to add displays ALL the templates by default. You can pre-filter this list to allow only a preset of the templates. Just pass an array of Templates of you own choice in your model's form class:
The above example will allow the contributor to add only Templates with css class bo-banner-image
and bo-underlined-header
.
3. Custom tags
Your frontend may use custom HTML tags (using VueJS or AngularJS).
LayoutManager can parse these custom-tags and ask to the contributor to fill some datas.
For example, you can have you own video-player
HTML tag that may need a Youtube ID, like so:
You can configure LayoutManager to parse these tags and ask the contributor to fill the youtube-id attribute himself. You just need to list all the custom tags in the model's form and their related attributes that need an input from the contributor:
This way, every video-player attributes will be clickable in the back-office, a modal will appear that will ask the user to fill youtube_id
.
The attribute's label is translated using trans(forms.template.youtube_id)
.
4. Disable add and ordering
If you want your contributors to edit a pre-defined number of templates, and you don't want them to be able to add, duplicate or reorder the templates, you can use the disableAdd
option.
It can be set either to true
, or to an array of categories (keys) to only disable it for a list of categories.
This configuration will disable the add/duplicate/order feature only for the templates under 'summary' category.
5. Special classes
Image
If you define a <div>
(or any tag you want) with the CSS class template-image
, Layout Manager will recognize it and render it as a clickable container.
MoxiManager will open on-click and allow the contributor to choose an image that will be displayed in the background-url
style of the tag.
Troubleshooting
@TODO : Handle errors and prevent model form submiting when a template error occurs.
All versions of layout-manager with dependencies
illuminate/support Version 5.3.*
illuminate/database Version 5.3.*
illuminate/translation Version 5.3.*
distilleries/datatable-builder Version 2.8.*
distilleries/form-builder Version 2.8.*