public:calcms:drupal_customization

At this example we will embed calcms at a Drupal 6 site

Basics

  • Define a Drupal content type named „agenda“ and create a single instance of it.
  • For each calcms widget you want to use, define a Drupal block. Put a div container with a calcms ID into the Drupal block.
<div id="calcms_WIDGET" >to be replaced</div>
  • Calcms will hook into the resulting Drupal page and fill all blocks marked by calcms IDs by the requested content.

If you want to hide widgets on some page of your website

  • define a separate node type for events: page-agenda.tpl.php
  • apply a node type filter to the widget to block (or show) the „agenda“ node type (or other node types).

Drupal Theme

In this example we will customize the standart Garland theme.

  • copy theme ./themes/Garland to sites/all/themes/calcms
  • rename file garland.info to calcms.info
  • insert additional styles and javascripts before end of head section
    </head>

page.tpl.php

This page is used for all pages, except „agenda“ pages

  • defines our customized javascript and CSS,
  • publishs the Atom feed

At the end of </head> section replace/insert

<!--calcms start-->
        <link rel="alternate" type="application/atom+xml" title="Sendeplan Atom" href="/agenda/atom/" />
        <link rel="alternate" type="application/rss+xml" title="Sendeplan RSS" href="/agenda/rss/" />
	<link rel="alternate" type="application/atom+xml" title="Sendekommentare" href="/agenda/feed_kommentare/" />
        <link rel="stylesheet" type="text/css" media="screen" href="/agenda_files/css/calcms.css" />

        <script type="text/javascript" src="/agenda_files/js/calcms.js"></script>
        <script type="text/javascript" src="/agenda_files/js/calcms.cust.js"></script>
<!--calcms end-->

if your theme does not use jquery by default you will additionally have to include it

        <script type="text/javascript" src="/misc/jquery.js"></script>

below

        <?php print $scripts ?>

template.php (optional)

This enables the page-agenda.tpl template for all nodes of the type „agenda“.

<?php

function calcms_preprocess_page(&$vars){

  //calcms - set template dependent on node type (for "agenda")
  if ($vars['node']->type != "") {
    $vars['template_files'][] = "page-" . $vars['node']->type;
  }
  //calcms end

  $vars['tabs2'] = menu_secondary_local_tasks();

  // Hook into color.module
  if (module_exists('color')) {
    _color_page_alter($vars);
  }
}

?>

page-agenda.tpl.php (optional)

If you want to use a modified layout for the event pages

  • copy page.tpl.php to page-agenda.tpl.php
  • customize page-agenda.tpl.php

Enable the theme 'calcms'

  • In Drupal, you should find the new theme.
  • Enable it and customize it (logo, title, …)
  • on any file changes of the template, in drupal edit and save theme to activate them.
  • As alternative you might edit your original theme, but this could result in failures at updating it later.

Create an agenda node

Define a new content-type „agenda“

  • Administer - Content Management - Inhaltstypen
  • add content type
name agenda
typ agenda
description don't touch this

Instantiate „agenda“

  • Administer - Content Management - Create Content - agenda
book create new book
title Event Agenda <span id=„calcms_title“></span>
Übergeordneter Menüpunkt primary links
Content
<div id="calcms_list">please wait...</div>
Input Format Full HTML
  • All other options should be deactivated
  • save

Embed Agenda Widgets

  • add a block at drupal
  • This block contains the search field and the category select box.
  • This block will be visible on Drupal „agenda“ type pages only.
  • Administer - Site Building - Blocks
  • new block
Description calcms - search
Title Suche
Content
<div id="calcms_search">
	<form name="calcms_search" onsubmit="selectSearchEventListener();return false;">
		<input id="calcms_search_field" name="search" value="" size="30" max-length="30"><input value="suchen" onclick="selectSearchEventListener();return false;" type="button"></form>
	<div>
		<a href="#" onclick="showAdvancedSearch('calcms_enhanced_search');return false;">erweitert</a>
		<div id="calcms_enhanced_search" style="display: none;">

			Archiv <input type="checkbox" name="calcms_archive" id="calcms_archive"/>
			<span id="calcms_categories"></span>
			<span id="calcms_series_names"></span>
			<span id="calcms_programs"></span>
		</div>
	</div>
</div>
Input Format Full HTML
show block on specific page Show if the following PHP code returns TRUE (PHP-mode, experts only).
<?php
$match = FALSE;
$types = array('agenda' => 1);
if (arg(0) == 'node' && is_numeric(arg(1))) {
  $nid = arg(1);
  $node = node_load(array('nid' => $nid));
  $type = $node->type;
  if (isset($types[$type])) {
    $match = TRUE;
  }
}
return $match;
?>
  • save block

Add Calendar

  • add a block in Drupal
  • This block shows the current calendar for navigation by dates.
  • It contains a customized Calendar widget.
  • This block will be visible on Drupal „agenda“ pages only.
Description Kalender
Content
<div id="calcms_calendar">Calendar - please wait</div>
Input Format Full HTML
show block on specific page Show if the following PHP code returns TRUE (PHP-mode, experts only).
<?php
$match = FALSE;
$types = array('agenda' => 1);
if (arg(0) == 'node' && is_numeric(arg(1))) {
  $nid = arg(1);
  $node = node_load(array('nid' => $nid));
  $type = $node->type;
  if (isset($types[$type])) {
    $match = TRUE;
  }
}
return $match;
?>
  • save block

Add Menu

  • add a block in Drupal
  • This block contains a menu to navigate through the broadcasts
  • It contains a customized Agenda Widget.
  • This block will be visible on Drupal „agenda“ type pages only.
Description calcms - menu
Content
<div id="calcms_menu">Agenda-Menu - please wait</div>
Input Format Full HTML
show block on specific page Show if the following PHP code returns TRUE (PHP-mode, experts only).
<?php
$match = FALSE;
$types = array('agenda' => 1);
if (arg(0) == 'node' && is_numeric(arg(1))) {
  $nid = arg(1);
  $node = node_load(array('nid' => $nid));
  $type = $node->type;
  if (isset($types[$type])) {
    $match = TRUE;
  }
}
return $match;
?>
  • save block

Add Playlist

  • add a block in Drupal
  • This block will be visible on each Drupal page except „agenda“.
  • It embeds a customized Agenda Widget, which shows the next 5 broadcasts
Description calcms - playlist
Title Playlist
Content
<div id="calcms_playlist">what's running now</div>
Input Format Full HTML
show block on specific page Show if the following PHP code returns TRUE (PHP-mode, experts only).

Warning: Following code is different to the previous ones!!!

<?php
$match = TRUE;
$types = array('agenda' => 1);
if (arg(0) == 'node' && is_numeric(arg(1))) {
  $nid = arg(1);
  $node = node_load(array('nid' => $nid));
  $type = $node->type;
  if (isset($types[$type])) {
    $match = FALSE;
  }
}
return $match;
?>
  • save block

Add newest comments block

  • add a block in Drupal
  • This block will be visible on each Drupal page.
  • It embeds a customized Comment Widget, which shows the last 5 comments.
Description calcms - new comments
Title neue Kommentare
Content
<div id="calcms_newest_comments">newest comments</div>
Input Format Full HTML
  • save block

Place blocks at layout

e.g.:

  • assign calcms-menu to left
  • assign calcms-calendar to right
  • assign calcms-playlist to right
  • assign calcms-controller to right
  • assign calcms-newest_comments to right
  • save blocks
  • Administer - Site building - themes - global settings
  • disable „display post information on agenda“

Hints

  • do not forget to press „save“ after any changes
  • clear cache at at Drupal's Performance settings
  • switch off caching at Drupal's Performance settings while making changes to see the results immediately.
  • press CTRL+R for forced reload and browser's cache clearing

Impressum Datenschutz