Visual Composer Archives | portalZINE NMN | Development meets Creativity

17. November 2016

WP REST API rendered output & Visual Composer

Visual Composer shortcodes are normally not converted within the WordPress REST API rendered output.

This can be accomplished by calling WPBMap::addAllMappedShortcodes();

add_action( 'rest_api_init', function ()
{
   register_rest_field(
          'page',
          'content',
          array(
                 'get_callback'    => 'convert_do_shortcodes',
                 'update_callback' => null,
                 'schema'          => null,
          )
       );
});

function convert_do_shortcodes( $object, $field_name, $request )
{
   WPBMap::addAllMappedShortcodes(); // This does all the work

   global $post;
   $post = get_post ($object['id']);
   $output['rendered'] = apply_filters( 'the_content', $post->post_content );

   return $output;
}

add_action( 'rest_api_init', function ()

{

register_rest_field(

'page',

'content',

array(

'get_callback' => 'convert_do_shortcodes',

'update_callback' => null,

'schema' => null,

)

);

});

function convert_do_shortcodes( $object, $field_name, $request )

{

WPBMap::addAllMappedShortcodes(); // This does all the work

global $post;

$post = get_post ($object['id']);

$output['rendered'] = apply_filters( 'the_content', $post->post_content );

return $output;

}

24. February 2016

Visual Composer to Bootstrap Grid Cleanup

Simple way to do some Visual Composer Grid cleanup, when you are using Bootstrap within your theme. This removes and cleans up classes.

add_filter('vc_shortcodes_css_class', function ($class_string, $tag) {
  $tags_to_clean = [
	  'vc_row',
	  'vc_column',
	  'vc_row_inner',
	  'vc_column_inner'
  ];
  if (in_array($tag, $tags_to_clean)) {
	
	  $class_string = str_replace(' wpb_row', '', $class_string);
	  $class_string = str_replace(' vc_row-fluid', '', $class_string);
	  $class_string = str_replace(' vc_column_container', '', $class_string);
	  $class_string = str_replace('wpb_column', '', $class_string);
	  
          // replace vc_, but exclude any custom css 
          // attached via vc_custom_XXX (negative lookahead)
	  $class_string = preg_replace('/vc_(?!custom)/i', '', $class_string);
          
          // replace all vc_
          // $class_string = preg_replace('/vc_/i', '', $class_string);
  }
  $class_string = preg_replace('|col-sm|', 'col-sm', $class_string);
  return $class_string;
}, 10, 2);

add_filter('vc_shortcodes_css_class', function ($class_string, $tag) {

$tags_to_clean = [

'vc_row',

'vc_column',

'vc_row_inner',

'vc_column_inner'

];

if (in_array($tag, $tags_to_clean)) {

$class_string = str_replace(' wpb_row', '', $class_string);

$class_string = str_replace(' vc_row-fluid', '', $class_string);

$class_string = str_replace(' vc_column_container', '', $class_string);

$class_string = str_replace('wpb_column', '', $class_string);

// replace vc_, but exclude any custom css

// attached via vc_custom_XXX (negative lookahead)

$class_string = preg_replace('/vc_(?!custom)/i', '', $class_string);

// replace all vc_

// $class_string = preg_replace('/vc_/i', '', $class_string);

}

$class_string = preg_replace('|col-sm|', 'col-sm', $class_string);

return $class_string;

}, 10, 2);

Visual Composer for WordPress
Bootstrap / Bootstrap Sass

Enjoy coding …

11. November 2015

vUnit – microlib that allows you to size elements based on the viewport dimensions

Really neat solution, that allows you to build a quick viewport based layout, without relying on the still buggy CSS units.

<head>
    <!-- Add vUnit.js to the head to avoid FOUC -->
    <script src="path/to/vunit.js"></script>

    <!-- Instantiate vUnit.js passing a CSSMap with properties you want to play with -->
    <script>
        new vUnit({
            CSSMap: {
                // The selector (VUnit will create rules ranging from .selector1 to .selector100)
                '.vh_height': {
                    // The CSS property (any CSS property that accepts px as units)
                    property: 'height',
                    // What to base the value on (vh, vw, vmin or vmax)
                    reference: 'vh'
                },
                // Wanted to have a font-size based on the viewport width? You got it.
                '.vw_font-size': {
                    property: 'font-size',
                    reference: 'vw'
                },
                // vmin and vmax can be used as well.
                '.vmin_margin-top': {
                    property: 'margin-top',
                    reference: 'vmin'
                }
            },
            onResize: function() {
                console.log('A screen resize just happened, yo.');
            }
        }).init(); // call the public init() method
    </script>
</head>
<body>
    <h1 class="vw_font-size15">This title font-size is 15% of the viewport width.</h1>
    <p class="vh_height50">This p's height is 50% of the viewport height.</p>
    <p class="vmin_margin-top5">This p has some margin-top<p>
</body>

<head>

new vUnit({

CSSMap: {

// The selector (VUnit will create rules ranging from .selector1 to .selector100)

'.vh_height': {

// The CSS property (any CSS property that accepts px as units)

property: 'height',

// What to base the value on (vh, vw, vmin or vmax)

reference: 'vh'

// Wanted to have a font-size based on the viewport width? You got it.

'.vw_font-size': {

property: 'font-size',

reference: 'vw'

// vmin and vmax can be used as well.

'.vmin_margin-top': {

property: 'margin-top',

reference: 'vmin'

}

onResize: function() {

console.log('A screen resize just happened, yo.');

}

}).init(); // call the public init() method

</script>

</head>

<body>

<h1 class="vw_font-size15">This title font-size is 15% of the viewport width.</h1>

<p class="vh_height50">This p's height is 50% of the viewport height.</p>

<p class="vmin_margin-top5">This p has some margin-top<p>

</body>

Also works nicely in combination with Visual Composer for WordPress :)

vUnit @ Github

Enjoy coding …

20. July 2015

Fullpage.js / enhance SlimScroll to detect visible content for animations

When using Fullpage.js, overflowing section / slide content will be made scrollable with Slimscroll. If you want to use addons that rely on the natural scroll event, these will fail with Slimscroll. One of the candidates breaking is Scrollreveal.js for example.

I decided to work around that, to allow animations to be triggered when elements become visible or invisible to the viewport.

ADDITIONAL PLUGINS

You could code the viewport visibility check yourself or use the “visible” jquery plugin.

“This is a jQuery plugin which allows us to quickly check if an element is within the browsers visual viewport, regardless of the scroll position. If a user can see this element, the function will return true.” jquery-visible on Github

EXTENDING SLIMSCROLL WITHIN FULLPAGE.JS

The idea was to extend or hook into slimscroll without touching the fullpage.js codebase. Fullpage.js wraps overflowing content within a fp-scrollable container. Slimscroll itself provides events to track your position within the scrollable area in pixels or when top / bottom have been reached.

TRACK TOP / BOTTOM

$(selector).slimScroll().bind('slimscroll', function(e, pos){
    console.log("Reached " + pos");
});

$(selector).slimScroll().bind('slimscroll', function(e, pos){

console.log("Reached " + pos");

});

TRACK POSITION

$(selector).slimScroll().bind('slimscrolling', function(e, pos){
    console.log("Reached " + pos");
});

$(selector).slimScroll().bind('slimscrolling', function(e, pos){

console.log("Reached " + pos");

});

MAIN GOAL

Hook into fullpage.js
Track viewport & visible elements (jquery-visible)
Track direction of scroll
Get current position
Assign classes to elements to trigger animations

MY SOLUTION

This is just a crude and simple starting point, but should give you the basic idea. This still needs some throttling, so that its not called on every scroll position.

var currentScrollDirection = "down";
var currentScrollPosition  = 0;
$("body").delegate(".fp-scrollable", "slimscrolling", function(e, pos){
 
 // Top has been reached						
 if(cPos == 0){
  currentScrollDirection = "down";
 }
 
 // Scrolling up or down?
 if(currentScrollPosition > pos){
   currentScrollDirection = "up"
 }else{
   currentScrollDirection = "down"
 }
 
 // Store current position to compare on next check
  currentScrollPosition = pos;
 
 // Our scroll element
 var element = $(this);
 
 // Using the class "reveal" for all elements to track within 
 // Loop over elements on scroll
 
 element.find(".reveal").each(function(){
 
 // using the visible plugin						
 if ($(this).visible(true) ) {
  // add inView and direction classes
  $(this).addClass("inView")
  .removeClass("outView")
  .removeClass("up")
  .removeClass("down")
  .addClass(direction);
 }else{
  // add outView class and handle other classes
  $(this).addClass("outView")
  .removeClass("up")
  .removeClass("down")
  .removeClass("inView");
									
 }
})

var currentScrollDirection = "down";

var currentScrollPosition = 0;

$("body").delegate(".fp-scrollable", "slimscrolling", function(e, pos){

// Top has been reached

if(cPos == 0){

currentScrollDirection = "down";

}

// Scrolling up or down?

if(currentScrollPosition > pos){

currentScrollDirection = "up"

}else{

currentScrollDirection = "down"

}

// Store current position to compare on next check

currentScrollPosition = pos;

// Our scroll element

var element = $(this);

// Using the class "reveal" for all elements to track within

// Loop over elements on scroll

element.find(".reveal").each(function(){

// using the visible plugin

if ($(this).visible(true) ) {

// add inView and direction classes

$(this).addClass("inView")

.removeClass("outView")

.removeClass("up")

.removeClass("down")

.addClass(direction);

}else{

// add outView class and handle other classes

$(this).addClass("outView")

.removeClass("up")

.removeClass("down")

.removeClass("inView");

}

})

HTML EXAMPLE

<div class="scrollArea">
 <div id="elOne" class="reveal">
 </div>
 <div id="elTwo" class="reveal">
 </div>
 <div id="elThree" class="reveal">
 </div>
</div>

</div>

</div>

</div>

CSS EXAMPLE

Very basic idea to get some transitions working.

.inView.down{
border-left:4px solid red;
opacity: 1;
animation: scaleUpDown 1.5s ease both;
}
.inView.up{
border-left:4px solid blue;
opacity: 1;
}

.outView{
opacity: .6;
-webkit-transition:opacity 1500ms ease-out;
-moz-transition:opacity 1500ms ease-out;
-o-transition:opacity 1500ms ease-out;
transition:opacity 1500ms ease-out;
}

@keyframes scaleUpDown {
 from{ opacity: 0; transform: scale(0.2) rotate(30deg) translate(50%)}; 
 to { opacity: 1; transform: scale(1.0) rotate(0deg) translate(50%)};
}

.inView.down{

border-left:4px solid red;

opacity: 1;

animation: scaleUpDown 1.5s ease both;

}

.inView.up{

border-left:4px solid blue;

opacity: 1;

}

.outView{

opacity: .6;

-webkit-transition:opacity 1500ms ease-out;

-moz-transition:opacity 1500ms ease-out;

-o-transition:opacity 1500ms ease-out;

transition:opacity 1500ms ease-out;

}

@keyframes scaleUpDown {

from{ opacity: 0; transform: scale(0.2) rotate(30deg) translate(50%)};

to { opacity: 1; transform: scale(1.0) rotate(0deg) translate(50%)};

}

Hopefully Fullpage.js will be switching to iScroll natively in the future, as it provides far more options to handle scrollable areas. You can use iScroll now, but you have to disable the scrolling feature within Fullpage.js and call iScroll yourself. Not that difficult to do :)

There is also a WordPress Plugin that wraps Fullpage.js natively with a nice interface (WP_Fullpage) and my upcoming Visual Composer integration, which already uses iScroll :)

Enjoy coding ….

4. June 2015

Visual Composer – Fixing icon bleeding to child elements in admin

When mapping shortcodes using vc_map, you can assign icons to your new Visual Composer element.

If you created a container element, that wraps around other elements, the child element icon will currently be overwritten with the parent icon. A fix is apparently on its way :)

Currently the only way is to skip the icon option completely and use pure CSS for that.

You can enqueue a CSSs file for the admin through a vc_map option “admin_enqueue_css“.

.wpb_vc_your_element > .wpb_element_wrapper > .wpb_element_title i, 
#vc_your_element i.vc_element-icon {
	background-position: 0 0;
	background-image: url(/path_to_images/vc_your_element.png)!important;
	-webkit-background-size: contain;
	-moz-background-size: contain;
	-ms-background-size: contain;
	-o-background-size: contain;
	background-size: contain;
}

.wpb_vc_your_element > .wpb_element_wrapper > .wpb_element_title i,

#vc_your_element i.vc_element-icon {

background-position: 0 0;

background-image: url(/path_to_images/vc_your_element.png)!important;

-webkit-background-size: contain;

-moz-background-size: contain;

-ms-background-size: contain;

-o-background-size: contain;

background-size: contain;

}

The CSS targets the icon of the displayed element in the editor and the icon when adding new elements to the layout.

Enjoy coding …

3. June 2015

Fullpage.js Addon for Visual Composer – Video Preview (Update 07.03.2016)

This video should give you a good idea what the addon can actually do.

In my last article I gave you a rough overview of the features & requirements. Here some more details and additions:

Added the fixed header & footer container to the admin interface. You can add special padding, to the top and bottom, through the fullpage settings and make room for them. These are standard content containers, that can hold any Visual Composer content or row setup.
Added automatic menu, which adds links to each section as they are created. Link title matches the section title.
Define section and slide anchors, which are reflected in the browser history.
Sections and Slides can have different backgrounds, providing nice effect options. I added an image background to Section 1 and semi-transparent background colors to the Slides.
Fullpage.js configuration is fully integrated and working. The system sets defaults for a quick start.
Fullpage.js CSS override has been added, but is not complete yet. Added code editor.
Fullpage.js Events have been added and are fully functional. These events are triggered after load, after slide load, after leaving a slide and other events.
iScroll can be seen in Section 2. Added resize handling and configuration options. Still need to do some minor tweaks.
iScroll custom scrollbars are on my list, but not sure I will add these yet.
Prebuild Templates will be added, so that you can quickstart your design. Visual Composer 4.5+ provides some nice new options.
Visual Composer requirement will be 4.5+.
The admin provides a nice color separation for all components and count for slides & sections.

The addon is mostly done. I am finalizing the main admin area this week and will do a final cleanup next week, for the first beta release.

Many people have asked me for a release date. I currently plan to have a fully working Beta in the next 2-3 weeks. Will offer the Addon to a small closed group of customers first, before I think about other release options. I think I will offer between 20-30 slots for the beta run. If you are interested let me know.

Regards
Alexander

Updates

Quickly choose which section / slide to load, when the page is opened.
The addon is injecting its own page template, to make sure that the main container is clear of any theme related margins or padding. As soon as the Fullpage container is added to the layout, the template gets selected dynamically.
21.06.2015 – updating to latest fullPage.js version (2.6.6) and adding new options and changes
13.08.2015
– beta has been delayed due to my vacation & an accident I am recovering from. This is still just a side project ;)
– updating to latest fullPage.js version and adding new options to admin
– updating to latest Visual Composer version
03.09.2015
– moving to Visual Composer 4.7
– finalizing the admin area
14.01.2016
– moving to Visual Composer 4.9x
– fullpage.js version update
– iScroll update
– admin /front-end cleanup … getting close :)
17.02.2016
– works pretty flawless by now
– plugins are updated
– admin complete, working on some minor cosmetics
– not sure yet about distribution :) … my current projects come first!
07.03.2016
– adding version / requirement checks for all linked libs
– moved to VisualComposer 4.10
– fullPage.js version bumped to 2.7.8
– final cleanup of all areas on the way

28. May 2015

Fullpage.js Addon for Visual Composer – Admin Preview

Update: Video Preview

I am still busy finalizing the Fullpage.js Addon for Visual Composer. Hope to have some more images or even a video next week :)

Some requirements for the Visual Composer Addon:

PHP 5.4+, as I am using traits and advanced autoloading.
Timber (TWIG for WordPress), for current and future templating. Currently mostly used for the main administration of the core module handler.
iScroller for overflowing content (will be part of the package)
Otherwise the default Fullpage.js restrictions apply

The Addon will ease Fullpage.js integration immensely, but for a more advanced integration some CSS / JavaScript knowledge will always be needed. Do checkout the main Fullpage.js documentation for more information.

: Arrange sections & slides, numbering updates

: Configuration (almost there)

: Custom CSS (override default). I will also add an option for all JS events

: Sections (basic options)

: Slides (basic options)

11. March 2015

Fullpage.js / iScroller Visual Composer Addon for WordPress

I have been working on a full integration of fullpage.js into Visual Composer for WordPress. This allows to easily build fullpage layouts, with different pages and full slide capabilities. Also added iScroller functionality, to allow overflow content to work nicely on certain pages. All of this is working with simple drag & drop :) and can be used by any unexperienced user.

I am currently cleaning up the addon, but I am not sure yet if I will offer it as a commercial addon or keep it for my internal projects only :)

Will post a video later this week.

Cheers
Alex

Visual Composer for WordPress
fullpage.js
iScroller

7. November 2014

Extending the Visual Composer Row element with a new property

Visual Composer for WordPress provides many ways to extend its functionality. There are already many add-ons available for this dynamic page builder, but its easy to do the extending yourself, by following the hints in the documentation ;)

In this small tutorial we are adding a “type” field to allow a special css class to be added to each of our row containers.

New Visual Composer element properties can be easily added by using the vc_add_param function. See documentation for more information. In our case we are adding a property to the vc_row element.
Continue reading Extending the Visual Composer Row element with a new property

30. October 2014

WordPress, WPLMS, Visual Composer and full width content

wplms

I am working on a new website for a customer and we are using the WPLMS (WordPress Learning Management System) as a foundation. The packaged theme is based on Bootstrap.

The theme provides its own page-builder, but we prefer to use Visual Composer, as we built some custom VC-Addons to ease future page updates for our customer and custom content integration. Visual Composer provides some nice full-width addons, which are not working with the current theme layout. I decided to use a custom page template to allow Visual Composer to take over, where needed :) Continue reading WordPress, WPLMS, Visual Composer and full width content