PHPackages                             bozboz/laravel-backpack-visualcomposer - PHPackages - PHPackages  [Skip to content](#main-content)[PHPackages](/)[Directory](/)[Categories](/categories)[Trending](/trending)[Leaderboard](/leaderboard)[Changelog](/changelog)[Analyze](/analyze)[Collections](/collections)[Log in](/login)[Sign up](/register)

1. [Directory](/)
2. /
3. [Admin Panels](/categories/admin)
4. /
5. bozboz/laravel-backpack-visualcomposer

ActiveLibrary[Admin Panels](/categories/admin)

bozboz/laravel-backpack-visualcomposer
======================================

This packages provides an interface to manage page content easily

v1.0.0(6y ago)1102AGPL-3.0BladePHP >=7.1

Since Jul 12Pushed 4y ago3 watchersCompare

[ Source](https://github.com/bozboz/laravel-backpack-visualcomposer)[ Packagist](https://packagist.org/packages/bozboz/laravel-backpack-visualcomposer)[ RSS](/packages/bozboz-laravel-backpack-visualcomposer/feed)WikiDiscussions master Synced 2d ago

READMEChangelogDependencies (1)Versions (3)Used By (0)

Visual Composer for Backpack
============================

[](#visual-composer-for-backpack)

[![Travis](https://camo.githubusercontent.com/5896e1ef275c1668a41c8a2f2f591ee6747455f633b492efda386b99d12d8c82/68747470733a2f2f696d672e736869656c64732e696f2f7472617669732f6e6f766975732f6c61726176656c2d6261636b7061636b2d76697375616c636f6d706f7365722e7376673f6d61784167653d31383030267374796c653d666c61742d737175617265)](https://travis-ci.org/novius/laravel-backpack-visualcomposer)[![Packagist Release](https://camo.githubusercontent.com/81743beceeec2cdc30f90fa33c06a389f853247828da80581ae2ada47a17c392/68747470733a2f2f696d672e736869656c64732e696f2f7061636b61676973742f762f6e6f766975732f6c61726176656c2d6261636b7061636b2d76697375616c636f6d706f7365722e7376673f6d61784167653d31383030267374796c653d666c61742d737175617265)](https://packagist.org/packages/novius/laravel-backpack-visualcomposer)[![Licence](https://camo.githubusercontent.com/ce355fd7290244df754d5a6bddafd3dbb9ffb43f3e3100ad4f7a9aba66d7b2cc/68747470733a2f2f696d672e736869656c64732e696f2f7061636b61676973742f6c2f6e6f766975732f6c61726176656c2d6261636b7061636b2d76697375616c636f6d706f7365722e7376673f6d61784167653d31383030267374796c653d666c61742d737175617265)](https://github.com/novius/laravel-backpack-visualcomposer#licence)

Improve the way you edit pages.

Installation
------------

[](#installation)

```
composer require bozboz/laravel-backpack-visualcomposer
```

Ensure the following is added to your composer.json

```
    "repositories": [
        {
            "type": "composer",
            "url": "http://laravel-packages.staging.bozboz.co.uk"
        }
    ]
```

Then add this to `config/app.php`:

```
Bozboz\LaravelBackpackVisualcomposer\VisualComposerServiceProvider::class,
```

Finally, run:

```
php artisan migrate
```

Use
---

[](#use)

In the model:

```
use \Bozboz\LaravelBackpackVisualcomposer\Traits\VisualComposer;
```

In the crud controller:

```
public function setup($template_name = false)
{
    parent::setup($template_name);

    $this->crud->addField([
        'name' => 'visualcomposer_main',
        'label' => 'Visual Composer',
        'type' => 'view',
        'view'   => 'visualcomposer::visualcomposer',
        // (optionnal) Only those template will be available
        'templates' => [
            MyNewRowTemplate::class,
        ],
        // (optionnal) Pre-fill the visualcomposer with rows on new models
        'default' => [
            ['template' => MyNewRowTemplate::class],
        ],
        'wrapperAttributes' => [
            'class' => 'form-group col-md-12',
        ],
    ]);
}

public function store(PageRequest $request)
{
    $r = parent::store($request);
    $this->crud->entry->visualcomposer_main = $request->visualcomposer_main;
    return $r;
}

public function update(PageRequest $request)
{
    $r = parent::update($request);
    $this->crud->entry->visualcomposer_main = $request->visualcomposer_main;
    return $r;
}
```

In the model view:

```
@foreach($page->visualcomposer_main as $row)
    {!! $row->template::renderFront($row) !!}
@endforeach
```

Edit default config and templates
---------------------------------

[](#edit-default-config-and-templates)

Run:

```
php artisan vendor:publish --provider="Bozboz\LaravelBackpackVisualcomposer\VisualComposerServiceProvider"
```

...it will output the list of copied files than can now be overwritten, including the config, the backpack field type, the language files and 11 built-in templates:

- *Article*, an wysiwyg and inputs for the title, subtitle, date, author, CTA button and user-customizable colors
- *BackgroundImageAndText*, an uploadable picture with a caption and wysiwyg description
- *ImageInBase64*, a picture stored as base64 instead of file upload
- *ImageInContainer*, an uploadable picture, and that’s it
- *LeftImageRightText*, a picture and some text fields on two columns
- *LeftTextRightImage*, some text fields and a picture on two columns
- *LeftTextRightQuote*, some text fields and customizable background color, on two columns
- *Minimal*, an empty template with the minimum code for it to work
- *Slideshow*, a slider of unlimited pictures and their captions
- *ThreecolumnsImageTextCta*, three columns with a picture, a title, a wysiwyg and a CTA button on each of them
- *TwoColumnsImageTextCta*, the same as above, but on two columns instead of three

Check out how they are made, so you can customize them and build your own.

Steps to create a new Template
------------------------------

[](#steps-to-create-a-new-template)

- Create a class for your template. This needs to extend `Bozboz\LaravelBackpackVisualcomposer\Templates\RowTemplateAbstract`

eg.

```