Widgets

From Snapp CMS Developer Documentation

Jump to: navigation, search

Widgets are small snippets of code that you can be used in both your master and module templates as well as many of your content pages.

SnappCMS comes supplied with a lot of built in widgets for displaying everything from navigation breadcrumbs and menus to embedded videos to HTML content snippets. See below for a list of widgets, or take a look at Creating Widgets for simple instructions on how to build your own widget.

For more information on using a particular widget, look at Built-in Widgets.

Using Widgets

Here we'll demonstrate how to use widgets within your site, in either your templates or your content.

In your templates

You insert widgets into your templates using the PHP method $cms->loadWidget().

The method takes two parameters: the widget name, and an optional key/value array of parameters for the widget.

Let's say you want to add a the Google Analytics widget to your website footer.

Open /templates/default/index.php and find the point in the HTML where you want to insert your widget, preferably right at the end of the document in this case, then enter the following code:

....
    </div>
    <?php
      echo $cms->loadWidget('GoogleAnalytics');
    ?>
  </body>
</html>

Or perhaps you'd like an image to display your logo at the top of your page?

....
    </head>
    <body>
    <?php
      echo $cms->loadWidget('GalleryImages',
                            array (
                                    'file' => 'logo.jpg'
                                  )
                           );
    ?>
  </body>
</html>


In your content

You can embed widgets into most HTML content within your pages.

To embed a widget, use the following string format when editing the HTML content for a given page:

 {WidgetName:{"parameter1":"value", "parameter2":"value"}}

Alternatively, the administration system gives you an easy way to select and embed images. If you open the page you want to add a widget to, you will see an "Insert Widget" button in the toolbar above the HTML editor. Clicking this gives you a list of widgets to choose from and the set of parameters for each widget. When you click "Insert Widget" it will embed the code required for your widget to display.

Personal tools
Core Components
Standalone Installs