Widgets

Built-in widgets

Diem comes with a set of built-in widgets. They allow to generate valid HTML and require no technical knowledge.

To add a widget on a page, click the "Add" button on the front application lower tool bar.

Content

These widgets add content on the page.

Title

Add a title on the page.

• Text the text to display in the title tag.
• Tag select a title tag between H1, H2, H3, H4, H5, H6, P and DIV.
• CSS class add a CSS class to the widget.

Link

Add a link on the page.

• Href link's target.
• To one of your site's pages: open the PAGES left panel and drag & drop a page to the field. This way, if the page's url change later, your link href will be changed accordingly.
  
  • To one of your site's medias: open the MEDIA right panel and drag & drop a media to the field.
  • To an external resource: write a full url in the field.
• Text the text to display in the link tag. If let empty, the targeted page's name will be used.
• Title the link title attribute. If left empty, the targeted page's title will be used.
• CSS class add a CSS class to the widget.

Text

Add a text on the page. A text may be composed with a title, a body and a media.

• Title if set, the title will be displayed in a H2
• Body the body uses markdown syntax. Body's title hierarchy start with H3.
• Media
  
  • File
    
    • Use an existing media : open the MEDIA right panel and drag & drop a media to the field.
    • Upload a new media
  • Alt the media alt attribute. Useful for image medias.
  • Dimensions the width and height of the media. If one of them is omitted, it will be calculated based on the original media size.
  • method method used when creating the thumbnail. Can be fit, center, scale or inflate. The default method can be changed in the admin configuration panel
  • JPG quality quality of the resized thumbnail. Only works with JPG images.
• Links
  
  • Title add a link to the text title.
    
    • To one of your site's pages: open the PAGES left panel and drag & drop a page to the field. This way, if the page's url change later, your link href will be changed accordingly.
    • To one of your site's medias: open the MEDIA right panel and drag & drop a media to the field.
    • To an external resource: write a full url in the field.
  • Media add a link to the text media.
    
    • To one of your site's pages: open the PAGES left panel and drag & drop a page to the field. This way, if the page's url change later, your link href will be changed accordingly.
    • To one of your site's medias: open the MEDIA right panel and drag & drop a media to the field.
    • To an external resource: write a full url in the field.
• Presentation
  
  • Css class add a CSS class to the widget.
  • Title position whether the text title should be inside or outside the text content.

Media

Add a media on the page. Can bee an image, flash, video or sound.

• File
  
  • Use an existing media : open the MEDIA right panel and drag & drop a media to the field.
  • Upload a new media
• Alt the media alt attribute. Useful for image medias.
• Dimensions the width and height of the media. If one of them is omitted, it will be calculated based on the original media size.
• method method used when creating the thumbnail. Can be fit, center, scale or inflate. The default method can be changed in the admin configuration panel
• JPG quality quality of the resized thumbnail. Only works with JPG images.
• Css class add a CSS class to the widget.

Navigation

These widgets add navigation elements on the page.

Bread crumb

Add an automatic breadcrumb on the page.

• Separator string to insert between two links/
• Include current page if checked, the current page is added at the end of the bread crumb.
• Css class add a CSS class to the widget.

Advanced

Advanced widgets to enhance the site.

Search form

Add an internal search engine form to allow users to performs searches on the site.

• Css class add a CSS class to the widget.

Customize the search form template
Copy dmFrontPlugin/modules/dmWidget/templates/_dmWidgetAdvancedSearchForm.php
to apps/front/modules/dmWidget/templates/_dmWidgetAdvancedSearchForm.php
then modify it to match your needs.

Search results

Displays the search results for the current search. Should be added on the main.search page.

• Css class add a CSS class to the widget.

Customize the search results template
Copy dmFrontPlugin/modules/dmWidget/templates/_dmWidgetAdvancedSearchResults.php
to apps/front/modules/dmWidget/templates/_dmWidgetAdvancedSearchResults.php
then modify it to match your needs.

Create project-specific widgets

It's as simple as adding an action in the config/dm/modules.yml file.

In this example, we will create the diem-project.org widget that shows the latest gougle group entries.

config/dm/modules.yml:

Project:  

  Global:  

    ...                # our existing modules  

    community:         # declare a new community module  

      actions:  

        ggFeed:        # declare a new action for the community module  

Then we go back to the front application and click the "Update Project" button. It will generate the community/ggFeed component and template in apps/front/modules/ggFeed.

Troubleshooting
If the files are not created, see the Troubleshooting

Now we can click the front lower tool bar "Add" button, and drag & drop the new community/ggFeed widget somewhere on the page.
Of course, it does nothing yet. Display an external feed require a controller and a template.
To write the controller, edit the file
apps/front/modules/community/actions/components.class.php:

class communityComponents extends myFrontModuleComponents  
{  
  public function executeGgFeed()  
  {  
    // use cache not to fetch google groups feed each time  
    $cache = $this->context->get('cache_manager')->getCache('feed');  
 
    if ($cache->has('diem-users'))  
    {  
      $this->items = $cache->get('diem-users');  
    }  
    else  
    {  
      $feedUrl = 'http://groups.google.com/group/diem-users/feed/rss_v2_0_msgs.xml';  
 
      $this->items = sfFeedPeer::createFromWeb($feedUrl)->getItems();  
 
      $cache->set('diem-users', $this->items, 1800);  
    }  
  }  
}  

The controller uses sfFeed2Plugin to fetch the feed. This plugin is not packaged with Diem, but you can install it as any symfony plugin.

Then we will create the template, in
apps/front/modules/community/templates/_ggFeed.php

foreach($items as $item)  
{  
  echo £link($item->getLink())->text($item->getTitle());  
}  
 

This template uses Diem template helpers

For more info on specific widget creation, see the config/dm/modules.yml documentation.