Visual Composer for Backpack

, _(*1)

Improve the way you edit pages., _(*2)

Installation

composer require novius/laravel-backpack-visualcomposer

Then add this to config/app.php:, _(*3)

Novius\Backpack\VisualComposer\VisualComposerServiceProvider::class,

Finally, run:, _(*4)

php artisan migrate

Use

In the model:, _(*5)

use \Novius\Backpack\VisualComposer\Traits\VisualComposer;

In the crud controller:, _(*6)

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:, _(*7)

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

Create new row templates

Make a class and a folder for the views:, _(*8)

cd vendor/novius/laravel-backpack-visualcomposer
class=MyNewRowTemplate
touch src/app/Templates/$class.php
mkdir src/resources/views/vendor/visualcomposer/$class
touch src/resources/views/vendor/visualcomposer/$class/crud.blade.php
touch src/resources/views/vendor/visualcomposer/$class/front.blade.php

In MyNewRowTemplate.php:, _(*9)

<?php

namespace Novius\Backpack\VisualComposer\Templates;

class MyNewRowTemplate extends RowTemplateAbstract
{
    static public $name = 'my-new-row-template';
}

In crud.blade.php:, _(*10)




    
    




@push('crud_fields_scripts')





@endpush

In resources/lang/vendor/visualcomposer/en/templates.php, add:, _(*11)

<?php
...
    'my-new-row-template' => [
        'name' => 'My new row template',
        'crud' => [
            'some_field' => 'Some field for you to write something in',
        ],
    ],

Edit default config and templates

Run:, _(*12)

php artisan vendor:publish --provider="Novius\Backpack\VisualComposer\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:, _(*13)

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