Monthly Archives: April 2010

Displaying date events in a calendar in drupal 6

Modules that need to be activated: Date API, which is the parent and makes all the other date functions work, Date module to create fields for cck which we add our date information into, date timezone, a module that is sensitive to the timezone of the website in the web server, and the calendar module, which allows views to display all this information on a date layout.

From admin>site configuration>date and time things like default time zone (Europe/Dublin in my case) and first day of the week can be configured.

I have an “event” content type with a title and a body, and I have added a custom field of name “Date”, with a type of data to store “date”, and a form element to edit the data of select list (under “date”). After saving this drupal takes us to the field configuration page, here we can set the behavior for this field; I made this field required, so any time that a user submits a date event this will need to be filled. I set the “to date” to “optional”, in case users want to set an end date or time the particular event extends to.

The user creating a type “event” of content will have to submit a title, body, and date (from- to), selecting in the last case from drop down lists.

How to display this date information? Enabling the “calendar” view that comes with the module, and adding a filter of node:type “event”, so that in the calendar only content of type “event” are displayed. By default the calendar displays the date an event is published rather than the cck event date field, in order to display this last we need to change the default argument from “node: updated date” to the cck field, down under “date fields”. We also need to output this cck field.

I duplicated the settings from this block to another one, with identical settings but with the purpose of displaying it on the content top region instead of the sidebar one. Drupal doesn´t allow (yet?) to output same block in different regions depending on the URL, that´s why this step had to be taken. So this block is displayed in the content top region of the events page, and only on this page.

Complementing this views, I thought it would be useful to create another view displayed to another block, to show in a list format the upcoming events´ title and date. Only the future events. This is addressed the same way than before, but with the following additions:

-adding a filter of Date:Date (node), where the “content: date- from date” uses an operator of “is greater than” now. The date default box has to be filled in with the word “now”, and drupal will pick it up and filter only the events that have a “from date” greater than today´s.

-adding also a sort criteria of “content:date-from date” in an ascending order, so that the next event will appear at the top of the list.

Finally, a view to a page that displays the event teasers and the calendar block on the content top region has been also created.

I found this link of great help: http://heim.ifi.uio.no/inf5270/tutorials/calendar.html

As well as this video screencast: http://gotdrupal.com/videos/drupal-calendar

And also: http://technopragmatica.blogspot.com/2009/04/showing-lists-of-events-in-drupal-6.html

Theming comments in drupal 6

Adding the user´s picture in the comment post, it has to be enabled from the theme settings, admin>theme>myzen>configure. If a default user picture (like an icon in my case) is to be used for non authenticated users posting comments, a default path has to be created in admin>user settings, and then enter the path to a previously uploaded image (in my case: /Scoutsdrupal/sites/default/files/userpics/user.png.

If markup needs to be themed the comment.tpl.php file has to be duplicated into the theme folder for customization, but I found that served my purpose and there was no need for that. Only styles were added in the stylesheet.

Conditional stylesheets in drupal 6 (IE browsers support)

Internet Explorer implements a proprietary technology called Conditional Comments. Conditional Comments are very useful to fix the broken rendering of CSS in older versions of IE browsers (6 and 7) by placing IE-only CSS inside conditional comments.

Previously in drupal, theme developers had to add these lines specifically to their page.tpl.php template or manually append them to the $styles variable. The Conditional Stylesheets module makes our life easier and allows themes to specify conditional stylesheets in their .info file and the conditional comments will be automatically included at the end of the standard $styles variable.  The following lines of code in the .info file load the ie7.css stylesheet.

; Set the conditional stylesheets that are processed by IE.
conditional-stylesheets[if IE 7][all][] = ie7.css

http://drupal.org/project/conditional_styles

Theming views in drupal 6

Taking as an example the view previously built to display the blogs page, I wanted to add an image on each of the outputted blog entries. This involves adding a division in the markup to accommodate an image on the background, therefore a tpl.php file that allows me to carry out the modifications on this particular view has to be created. I copied the views.view-list.tpl.php (which is the generic template for all views that wrap their rows in a list) from the modules folder, and pasted it into my theme folder.

Next thing is adding some specificity so that only the view to the blog page is affected, leaving the others as they are. Views provides a handy theming wizard in the Views UI, clicking on “theme: information” under basic settings. Doing so reveals a list of possible template file name candidates. Available template names will apply theming to various levels of the view, from broad to more specific. “views-view-list–Viw-to-blogs-page.tpl.php” served my purpose. In this file what I did was adding a div to act as the image placeholder on line 18, the result:

<?php foreach ($rows as $id => $row): ?>

<div></div>

<li class=”<?php print $classes[$id]; ?>”><?php print $row; ?></li>

<?php endforeach; ?>

The .imgplaceholder class contains the following attributes in line 318 of the file html-elements.css:

.imgplaceholder {

background-image:url(images/abs2.png);

background-repeat:no-repeat;

position:relative;

top:20px;

left:10px;

height:35px;

}

This was of help:

http://www.group42.ca/theming_views_2_the_basics

Configuring multi-user blogging in drupal

I have configured the path to all blog entries published to be mysite/blog/[title-raw], from administer>site building>URL aliases>automated alias settings, concretely under” node path settings”-> Pattern for all Blog entry paths.” The path to each blog posters (each user with blog posting permissions) is defined as blog/[user-raw], under “pattern for blog page paths”. This sets the automatic paths, so that when creating content, if “automatic alias” is ticked drupal takes care of the established paths.

A new menu item under “primary links” with path “blog” allows to link to the blogs page from the main navigation menu.

In my case I wanted more control over what is displayed on the blog page, pretty much like my news page but outputting the picture of the blog entry author along the title of the blog entry, its teaser and a “read more” link to the node itself. This is achieved with a view, which displays in a page of path ´blog´ all content of type blog entries in a post date descending order. The “read more” link is a bit awkward but is achieved by outputting a node:link field with a blank label and a “Read more” string under “Text to display:”. The view also displays the name of the author of the blog entry, with a link to its corresponding own blog page, by using a replacement pattern of blog/[name] under “link path”.

I created a new user role called “blogger” with permissions to creating blog entries and editing only their own ones. Two new users fall into this category: Andrew and Stef.

With appropriate styling, now I can output the picture on the left hand side and the node teaser/title/etc. on the right, all within a border to separate each entry.

I also wanted to theme the comment count, to display a “No comments” string instead of the default “0 comment(s)”. This was done by overriding the view-view-field template, as suggested by devel module and theme:information in the view for the comment count field. I copied and pasted into my theme folder the view-view-field.tpl.php from the views module folder, and renamed it to “view-view-field–comment-count.tpl.php”, which automatically registers in drupal. The file contains php logic that allows to override the output in case that there is not comments yet, prompting the users to add their comment in a link instead of outputting an ugly “0 comments”.

The following link provided help: http://www.dailyillini.com/blogs/devblog/2009/01/29/using-views-templates-make-prettier-comment-counts

Conditional stylesheets in drupal 6 (IE browsers support)

Internet Explorer implements a proprietary technology called Conditional Comments. Conditional Comments are very useful to fix the broken rendering of CSS in older versions of IE browsers (6 and 7) by placing IE-only CSS inside conditional comments.

Previously in drupal, theme developers had to add these lines specifically to their page.tpl.php template or manually append them to the $styles variable. The Conditional Stylesheets module makes our life easier and allows themes to specify conditional stylesheets in their .info file and the conditional comments will be automatically included at the end of the standard $styles variable.  The following lines of code in the .info file load the ie7.css stylesheet.

; Set the conditional stylesheets that are processed by IE.
conditional-stylesheets[if IE 7][all][] = ie7.css

http://drupal.org/project/conditional_styles

Theming comments form in drupal 6

Theming consists mainly in customizing markup and css; the second is fairly straightforward and can be achieved with the use of firebug, a firefox extension that allows to make changes to styles on the fly. Tweaking markup though is more complex and requires good knowledge of drupal´s template system. Devel module offers great help when it comes to identifying what template is being called for different parts of the page.

The HTML code that makes up each page in a drupal site is compiled from the output of various Drupal modules. If the default HTML markup supplied by any module does not suit our requirements, we can override some or all of it, so that the resulting page is exactly what we need for your design. For example, I decided that my site was displaying a quite poor “Leave a reply” text, and I wanted a more exciting “Tell us what do you think!” to invite users to post their comments. Further modifications could be the use of images, or unordered list to display some instructions, etc. Its very important to understand the concept of “overriding”. While it is technically possible to just find the module responsible for the comments form fields and edit the code directly, this is definitely not recommended. In the short term, it will seem to solve your problem, but it will soon make it difficult to keep your site up to date. Whenever you update the module, perhaps for a general security release, you would need to remember to redo any of your customizations.

The “Drupal Way” is to do an override. This involves four basic steps:

1-Locate the module responsible for the markup

2-If the module provides a template (tpl.php file), copy the template to our theme directory.

3-Within the copied function or template, change the HTML code to suit our needs.

4-Refresh the theme cache.

So in my case I wanted to modify the markup and look of the comments form for users who want to leave a comment to existing content. Having devel activated, it tells me that templates called are node.tpl.php for the existing content published on the page, and comment-wrapper.tpl.php below it for the comments area. Further exploration reveals that comment-wrapper.tpl.php calls box.tpl.php template. Comment-wrapper.tpl.php file´s location is in root>modules>comment , so I copied the file and pasted it inside my theme´s folder (in my case root>sites>all>themes>myzen). I opened and inspected the file, and in line 37 found a php function that prints the text “Comments”, surrounded by <h2> tags that I switched to <h3> for the title, so that the hierarchy of the page is <h1> for the node title, <h2> for the “Comments” title, and <h3> for the “Tell us what do you think!” This was achieved by opening the box.tpl.php (this template file is provided by default inside the zen theme but will be removed in drupal 7, read more on: http://www.slideshare.net/ccharlton/changes-to-drupal-themes-in-version-7-part-1), and on line 19 changing the <h2> tags to <h3>, as well as changing the text to print by having:

<?php print ‘Tell us what do you think!’; ?>

I also added an image with the shape of a bubble, which is loaded from line 17 in the box.tpl.php file.