Adding Polaroid Style Images to Beaver Builder Photo Module

Hi all - I just wanted to post a tutorial to show you how to add a polaroid style to your Beaver Builder photos.

I'm not sure polaroid style photos are 'cool', but the main purpose of this video is to show you how easy it is to hook into Beaver Builder modules, edit their settings forms, and then apply new CSS styles.

What we'll learn

  • How to extend the default photo module's settings form using the fl_builder_register_settings_form filter
  • How to add a class to the module, depending on the value of the new settings we add, using the fl_builder_module_attributes filter

Example

Here's an example of a regular Beaver Builder photo module with the polaroid setting enabled. It's using the image caption for the text below it.

Snoozing coding companion
Snoozing coding companion

And here is what the Photo module settings form looks like with the new additional field:

Beaver Builder settings form additional field

Why it's useful to learn

While we're adding a fairly simple setting to a module, once you know how to do it, you can later start to think creatively about how to modify others too. Using this method you can only really add new CSS classes, but this in itself is fairly powerful.

As we're using Beaver Builder hooks, there's no 'hacking' - it should work well during future upgrades - plus there's no need to create and maintain another module.

Let's get started!

Preparing your files

The first thing I'd recommend you do is not to simply copy and paste all code into your functions file, but rather add a separate file for each new feature or change, and then reference this in your functions file. This makes it very easy to maintain.

So in this instance, I am simply going to create a new file inside my theme. As you'll see below, I already have a bb-custom directory with a few files inside.

As we are creating a "polaroid" setting for the photo module, I will create a file called bb-photo-polaroid.php

Beaver Builder Polaroid Photo - theme setup

Now, in my functions file, I will simply reference the new bb-photo-polaroid.php file to include it in the theme:

Beaver Builder Module extension - polaroid photo functions.php

And now we can start writing code!

Adding a new field to a Beaver Builder module settings form

First, we need to add a new field to the Photo module's settings form, which will be a select field that has two options: regular, the default; and polaroid.

As we discussed before, we need to use the fl_builder_register_settings_form filter to achieve this.

WordPress Filters

I could create a much longer tutorial to describe WordPress filters in more detail, but they sound much scarier than they actually are!

If I could sum this up in one sentence it would be: WordPress filters allow us to intercept data as it's being loaded, and modify it before passing it on to the next step in the process.

The best analogy I can think of is an automatic car wash. Your car is taken IN one side, and appears out of the other with a modification (ie. it has been cleaned).

Each form that you see in Beaver Builder is being generated with some code, and we have the ability with the filter, to "intercept" and modify it, before passing it back to the page loading process - just like the car being cleaned in the analogy above.

So, let's see what that looks like. In bb-photo-polaroid.php we'll add:

                            
add_filter( 'fl_builder_register_settings_form', function ( $form, $slug ) {

    if ( 'photo' === $slug ) {

        $form[ 'general' ][ 'sections' ][ 'style' ] = [
            'title' => __( 'Style', 'fuelled' ),
            'fields' => [
                'photo_style' => [
                    'type' => 'select',
                    'label' => __( 'Photo Style', 'fuelled' ),
                    'default' => 'regular',
                    'options' => [
                        'regular' => __( 'Regular', 'fuelled' ),
                        'polaroid' => __( 'Polaroid', 'fuelled' ),
                    ],
                ],
            ],
        ];
    }

    return $form;

}, 10, 2 );
            
        

A point to note:

The 2 variables, $form and $slug, that are passed through the function are the bits of data we can intercept. We can use $slug to check the type of module (in this case we need to find the $slug, or type, of 'photo'), and we can modify $form to add the additional field.

To see what exists inside the module's $form before we modify it, we can use:

                            
var_dump($form);
            
        

after

                            
if ( 'photo' === $slug ) {
            
        

I've taken a screenshot of the output, along with the corresponding form so you can compare what's in code, and what the user actually sees:

So to reinforce what we've done:

  1. Intercepted the $form for the module with the 'slug' of photo
  2. Added a new section called Style
  3. Added a field within the Style section called photo_style
  4. Set the field to be a select (dropdown) field, with 2 options: regular or polaroid

And if you've got this far, you should now see a new field on your photo module, like so:

New photo style field on Beaver Builder photo module

Perfect!

So in it's current state, the new field in your settings form is pretty much useless. Next we need to add a CSS class to the module, depending on the value of this field.

Adding a CSS class to a Beaver Builder module programmatically

In exactly the same way as the previous filter works, this time we will intercept the attributes assigned to a module.

"Attributes" include the CSS class that's assigned to a module, the ID and also some HTML5 data-attributes which are used to trigger animations.

So as I mentioned before, we need the fl_builder_module_attributes to make this happen. Again, this can be in bb-photo-polaroid.php:

                            
add_filter( 'fl_builder_module_attributes', function( $attrs, $module ) {

    if ( 'photo' == $module->slug ) {
        if ( 'polaroid' == $module->settings->photo_style ) {
            $attrs[ 'class' ][] = 'photo--polaroid';
        }
    }

    return $attrs;

}, 10, 2 );
            
        

Again, we have 2 parameters passed from this filter.

The $module parameter allows us to determine which module to apply the new attributes to, and the $attrs parameter contains the existing attributes, which we'll modify and hand back.

In this case, we're first checking the module is a 'photo' module, as we did before (using the 'slug'), but then because we now have access to the settings object ($module->settings), we can read the value of the fields set by the user in the form.

As you'll remember, the name of the field we set before was photo_style. Therefore, we're simply checking whether photo_style  has the value polaroid.

If it does, then we're adding the CSS class photo--polaroid to your module's attributes, before finally returning $attrs back to the module loading process.

If you've followed this so far, you should now be able to add a photo module into your page, set the style to 'polaroid' and then the CSS class should be added, like so:

css class added to beaver builder module

So, to recap:

  • We've added a field to the Photo module settings form, called photo_style using the fl_builder_register_settings_form filter
  • We've then checked the value of that field, and if it's polaroid, we then use the fl_builder_module_attributes to add a CSS class of photo--polaroid to the module.

Adding custom CSS to target the Beaver Builder module class

Now we just need to sprinkle some CSS on top, targeting the photo--polaroid class, and we should see the results we need.

This CSS could be improved, but you can tweak and tune as you see fit. I'd also recommend you use a preprocessor, such as SCSS, but that's another topic.

For now, you can simply add this to your Beaver Builder global CSS (Tools > Global Settings > CSS).

                            
.photo--polaroid {
    text-align: center;
}
.photo--polaroid .fl-photo {
    display: inline-block;
    padding: 15px;
    background: white;
    -webkit-box-shadow: 0 4px 8px rgba(0,0,0,.25);
    -moz-box-shadow: 0 4px 8px rgba(0,0,0,.25);
    -webkit-transform: rotate(-4deg);
    -moz-transform: rotate(-4deg);
    -webkit-transition: -webkit-transform .15s linear;
}
.photo--polaroid .fl-photo:hover {
    -webkit-transform: rotate(0);
    -moz-transform: rotate(0);
}
.photo--polaroid .fl-photo-caption-below {
    padding-top: 15px;
    padding-bottom: 0;
}
            
        

And that's the fundamentals in place. Assuming you're not seeing a cached version of your CSS, you should see your new polaroid styled images.

Hooray!

So as a final recap, you should have in your bb-photo-polaroid.php file (inside <?php tags, of course)

                            
add_filter( 'fl_builder_register_settings_form', function ( $form, $slug ) {

    if ( 'photo' === $slug ) {

        $form[ 'general' ][ 'sections' ][ 'style' ] = [
            'title' => __( 'Style', 'fuelled' ),
            'fields' => [
                'photo_style' => [
                    'type' => 'select',
                    'label' => __( 'Photo Style', 'fuelled' ),
                    'default' => 'regular',
                    'options' => [
                        'regular' => __( 'Regular', 'fuelled' ),
                        'polaroid' => __( 'Polaroid', 'fuelled' ),
                    ],
                ],
            ],
        ];
    }

    return $form;

}, 10, 2 );

add_filter( 'fl_builder_module_attributes', function( $attrs, $module ) {

    if ( 'photo' == $module->slug ) {
        if ( 'polaroid' == $module->settings->photo_style ) {
            $attrs[ 'class' ][] = 'photo--polaroid';
        }
    }

    return $attrs;

}, 10, 2 );

            
        

And that's it!

The link to GitHub

To keep things structured, and anticipating a few further 'enhancements' (if you can call this that), I've merged this with the existing WPD Beaver Builder Modules plugin, which is now renamed to WPD BB Additions (generic enough?!).

You can download it here and study the code, or simply install and activate it on your site to see the polaroid option within the Beaver Builder Photo module.

There might be some fine-tuning required on the CSS front but I've included some options in the code for you to easily overwrite this from your theme. You can find more about this in the (new) knowledge base, here.

I've not yet got an updater function in the plugin, so if I push any updates in the future, you'll need to overwrite this via FTP - so just bear that in mind. It's on my list to add very soon 🙂

Please leave your feedback in the comments below!

7 Comments

  1. Nancy Hildebrandt on 9th January 2017 at 8:14 pm

    Hey Doug, I’ve got the pieces assembled and it’s working, but I’m getting an error I can’t figure out at the top of the page:
    Warning: call_user_func_array() expects parameter 1 to be a valid callback,
    class ‘FLChildTheme’ does not have a method ‘stylesheet’ in
    /home/simples3/public_html/staged/bb19alpha/wp-includes/class-wp-hook.php on line 298

    Any idea?

    • Doug on 9th January 2017 at 8:23 pm

      Hey Nancy – cool!

      So first, I notice you might have the Beaver Builder alpha version. I don’t know what will work/not work on there – so if it is alpha, I’d suggest updating to the stable version.

      Secondly – could you put all of your photo code in here? https://codeshare.io/new and send me the link? I’ll see if I can spot something! The Codeshare URL will change to a unique URL once you open https://codeshare.io/new, so send me the changed URL, and then I will be able to see your code.

      • Nancy Hildebrandt on 10th January 2017 at 5:27 am

        Hi Doug,
        It’s not really the alpha version, it’s 1.9.2 –the URL is just a holdover from alpha testing.

        I figured it out, though I can’t explain it, but maybe you know. I couldn’t understand how that error message had anything to do with the PHP in the new file, and it didn’t. It turns out that some of my child theme’s functions.php have a different add_action from what’s in the current child theme, and somehow adding the require_once ‘bb-custom/bb-photo-polaroid.php’; line broke it.
        My older child theme function.php files have:
        add_action( ‘fl_head’, ‘FLChildTheme::stylesheet’ );
        and the newer ones have
        add_action( ‘wp_enqueue_scripts’, ‘FLChildTheme::enqueue_scripts’, 1000 );
        So once I looked at that line the error made sense and I checked the latest child theme’s functions.php file and overwrote the old add_action statement with the new one.

        Anyway, t’s all working fine now. This is a lovely tutorial, thanks so much and keep ’em coming!

  2. Nancy Hildebrandt on 10th January 2017 at 5:50 am

    And, now that I’ve got that sorted out I was able to add it to the production site I originally had it in mind for: https://www.woolbusters.com. Perfect!

    • Doug on 10th January 2017 at 8:37 am

      That is so cool! Thanks for letting me know.

      Glad the issue was solved too. I’m not so clued up on the BB theme, actually, but just out of interest – did you add code from the tutorial, or copy it from https://github.com/smarterdigitalltd/wpd-bb-additions ?

      The reason I ask is that the code from the link above has a small extra enhancement that merges the polaroid CSS with the main Beaver Builder CSS… as the error was related to loading styles, I’m just wondering if it was that.

      Anyway, the wp_enqueue_scripts action is the ‘correct’ way of enqueuing scripts and styles, so regardless of the polaroid stuff, it’s good that that’s in place now 🙂

      Cheers Nancy!

  3. Nancy Hildebrandt on 10th January 2017 at 7:41 pm

    Hi Doug, I used the code from the tutorial. I bet you’re right, since my older child theme was missing wp_enqueue_scripts, and I used the version of your code without it, so maybe that’s what was causing the error. I always appreciate the tutorials where I learn something, and troubleshooting really pushes your nose into the code, so this one was a winner!

    My only other suggestion would be to add the <?php tag at the top of your first code snippet. You have a reminder lower down but I had to get all the way to that point before I had my "Oh duh" moment.

    • Doug on 10th January 2017 at 7:58 pm

      Hey Nancy!

      Yeah… I find the same thing… the more you have to dig, the more you learn.

      And I did try to add a php tag at the top… but I’ve not quite figured out the code snippet thing on this blog yet, and it strips them out!! 🙂

      Keep in touch!

Leave a Comment