How to extend page module in contao?

Question

I want to insert image in page module. Anybody have idea how to extend page in contao ?

See screen for more clarification.

http://screencast.com/t/JXk5thjlvHv

See attached screen .. my idea is like this.

Answer 1

You could do that by giving the pages specific CSS classes in their settings. This CSS class will also be used in the regular navigation modules. This way you can define the page's icon in your own stylesheets.

Answer 2

That actually depends how much you want to do.. the easy way: define classes... But thats not the most flexible one.

Lets say you have a custom icon font. Or maybe just FontAwesome. And you want to use these Icons to be shown. In this case, I would install the IconPicker Module by Rocksolid and write a custom module:

/system/modules/z-customs/dca/tl_page.php

$GLOBALS['TL_LANG']['tl_page']['icon']=array('Pageicon', 'Set an Icon for the Page');
$GLOBALS['TL_DCA']['tl_page']['fields']['icon'] = array(
    'label'                   => &$GLOBALS['TL_LANG']['tl_page']['icon'],
    'exclude'                 => true,
    'inputType'               => 'rocksolid_icon_picker',
    'eval'                    => array(
        'fieldType'=>'radio',
        'tl_class'=>'w100 clr',
        'iconFont' => 'files/fonts/fontawesome-webfont.svg',
        ),
    'sql'                     => "varchar(100) NOT NULL default ''",
);

/templates/nav_default.html5

<?php if($item['icon']): ?>data-icon="&#x<?= $item['icon']; ?>"<?php endif; ?>

This part can be added to the <li> or the <strong> or a. You may also add a class to the element, to make sure only the elements that have an Icon get the appropriate style.

To get the Icon into the CSS you would just do something like this:

a:before {
    content: attr(data-icon);
    font-family: "FontAwesome";
}