Sidebar elements are different from the elements in the modal window because they are less complicated. They can be manipulated in the editor but they don't have their own settings. It's easy to add sidebar elements to Glazed Builder, you can just take any snippet of HTML and make them editable using the special classes mentioned at the end of the documentation. 

Option 1: Add to a subtheme

You can download the example elements folder we create in these steps and add it your subtheme as boilerplate code: sidebar-elements-example.zip. For more information on how to create a subtheme redirect to this documentation.  

  1. Open your website's directory 
  2. Go to the subthemes folder 
  3. Create an folder named elements inside your subtheme
  4. In the elements folder ceate a new folder and name it to your element
  5. Add the HTML file in the new folder with a unique name. For example: clientstory-1.html 
  6. Add the image of the element's thumbnail with the same file name as your HTML file, this has to be a .jpg or .png extension
  7. Optionally,  you can add any CSS and JS separate .css and .js files inside the same folder as your .html file
    • You can reference them using link and script tags. The files should be referenced using relative paths. These tags will be automatically recognised by Glazed Builder and handed over to Drupal for processing when a page is viewed by visitors.
  8. Optionally, images can also be included in the same folder as your .html file and must be referenced using a relative path. Images tags will be editable in each indivisual instance of your sidebar element, but they do need some image as placeholder for initial rendering
  9. Remember to clear caches; this is required every time you make a change to your sidebar element because the elements are cached

Here is an example of the directory structure, only the highlighted directories are relevant: 

Option 2: Add to a custom module

Glazed Builder provides a hook hook_glazed_builder_elements_folders_alter that allows you to modify the array of elements folder information. If you need information on how to create a custom module you can refer to this documentation, which can also be used for Drupal 8. 

  1. Go to your website's directory
  2. Go to the custom module folder 
  3. Create a folder named elements inside your module
  4. In the elements folder create a new folder and name it to your element
  5. Add the HTML file to the folder with the name of your element. For example: hello_world.html
  6. Add the image of the element's thumbnail with the same file name as your HTML file, this has to be a jpg or png externsion (lowercase)
  7. Go to your custom module folder and open the .module file of your module 
  8. Add the following code to your custom module and replace mymodule with the name of your module, note the different lines for Drupal 7 and 8:    
    <?php
    
    /**
     * Implements hook_glazed_builder_elements_folders_alter().
     */
    function mymodule_glazed_builder_elements_folders_alter(&$glazed_elements_folders) {
      D8: $base_url = \Drupal::service('glazed_builder.service')->getBaseUrl();
      D7: global $base_url;
      $glazed_elements_folders[] = array(
        'folder' => dirname(__FILE__) . DIRECTORY_SEPARATOR . 'elements',
        'folder_url' => $base_url . '/' . drupal_get_path('module', 'mymodule') . '/' . 'elements',
      );
    }
    

      9. Once you've saved the changes; flush all caches on your website and the sidebar element will be visible! 

CSS Classes Description

CSS Class What it does
az-editable Makes content of elements editable in Glazed Builder text edit modal. Editor will also have style panel.
az-styleable Allows you to style element in Glazed Builder modal style panel. 
az-sortable Makes direct child elements of elements sortable using drag and drop. Also allows cloning of elements within the sortable set. 

If you use the az-editable class this also makes an element styleable, so you never add both classes to 1 element. The az-styleable element is typically used to container elements, when you want the elements inside the container to be editable on their own. The az-sortable class is what we use to make parts of the timeline manageable in the builder. 

Certain elements in your HTML snippet are recognised without needing classes:

Element Behavior
Icons Classnames of icons in the Glazed Builder Icon element are recognised and the icon will be editable using the icon Glazed Builder icon selector.
Images  Image tags are automatically editable using the Glazed Builder modal and Drupal media library integration
Links

Link tags are automatically editable in a Glazed Builder modal where you can configure link text and link url 

Create a folder named elements in your theme folder. Glazed Builder automatically discovers elements in the elements folder in any active themes.

Attachments