Visual Content Layout is a Drupal 8 Module developed to manage text filters HTML content layout and visual elements like iconography, accordions, tabs, non-table columns, images, list, CTA’s, etc.
This module provides a visual help that enable you to create HTML and bootstrap elements via forms and sort those element dragging and dropping them. You can even insert one or more elements inside another if it's enable to do it.
You can download the module at https://www.drupal.org/project/vcl
Once Visual Content Layout and Swaps are already installed as any other Drupa 8 Module, you need to add a new text format in “admin/config/content/formats”.
Or you can simply enable the filter in other format already created.
IMPORTANT: Make sure you select "None" on the Text editor select box.
If you do all this step correctly, when you are creating a content and you select the format you create for the VCL, you will see a button to enable the visual help.
To use the module you can manually write the structure of every swap in the textarea by including the id of the swap and all attributes (use the examples in the tips section if you want to do this) or can enable the visual help in by clicking on the button on the top of the text area for an easy control of the elements.
Here is a visual help for every button you will see in the editor:
Create a new swap element
Update the attributes of the swap.
Duplicate the swap
Delete the swap (If you delete an element that contain other elements, it will be deleted too.)
Move the visual elements to organize them.
If you experience problems with HTML or bootstrap elements output when the content is saved, you can go the Visual Content Layout module settings located in “admin/config/vcl/vclSettings” and disable the bootstrap library provide by the module. That way you can use your own styles inside your custom theme or module. Although it is important for you to knwo that this module output is based on boostrap visual elements.
The module Visual Content Layout works with the Swaps submodule that contains all the functionality to process all attributes and generete the output.
This submodule is divided in two important parts: the swap plugin and the form. You can create a custom module that use this two parts (swap plugin & form) to create your own specifics swaps elements
The plugin contain all the functionality to specify the attributes for he output.
The next section will explain all the elements of the plugin and all its characteristics.
Annotations have specifics elements that represent the functionality of every swap.
To create a swap plugin, the module have a swap base with default methods that make all the job easier, the plugin class of the swap that you like to create needs to extend it:
The form contains all controls that you should use to enable the user to insert the respective values for the attributes of the swap. In this form you can use the controls textfield, radio button, checkbox, textarea, select and colorpicker.
The controls of the form are divided in two parts own and default attributes.
For this type of controls, is IMPORTANT to use the name convention (swap_”swapID”_”controlName”) for the correct function of the visual help.
The form are designed for enclose some controls in tabs, for this reason you need to create a unique tab container (vertical_tabs control) to contain all controls and we recommend to create a specific tab (details control) to wrap the "own attributes".
The attributes of the default controls are managed by the SwapDefaultAttributes class, be sure to include this on the form class. The class has some methods that help you to manage controls:
There are two methods that returns information to the site:
* Those method are required in the form.
PD: if need more information use the swaps_example module to guide you.
Copyright © 2015 - 2017 - ParallelDevs