Theming Views on Drupal 6 (the simple way)

0 Comments

There are several ways you can theme a view on Drupal, and this tutorial will describe a simple and quick way to accomplish just that. I assume that you’re familiar to working with Views and CCK, so I won’t go in much detail on the process of creating the view and content type.

For this example I’m creating a block simple view that will display a teaser for the 3 latest blog posts.

First thing we’ll have to do is create the actual template file on the themes folder (I’d recommend that you create a folder for all the views, but this is optional). We’ll start by going to the views interface to find out how that file should be named.

On the Views interface select “Theme: information” under “Basic Settings”.

You’ll see a list of the possible files you can use listed from the most general(full page)on top to the most specific on the bottom. We’re going to be selecting one option on the “Row Output”. If you don’t need to be too specific about theming that view, you can use the second option. Copy the file name and create that file on your themes folder.

Back to the view interface again. Select “rescan template files” and the file you created should be highlighted on the interface.

Here is where the real theming begins. We’re going to create the variables we need on the template file. In this case, I’ll be creating $title and $body variables.

Go to your views interface under “fields.” However, the links to the fields you want to use are found at the status bar, on the bottom of the browser. We’re looking for the information on the last section of the link. For the Title field, my link looks like this: http://domainname.com/admin/build/views/nojs/config-item/footer_blog/block_1/field/title so the information we’re looking for is “title”.

Knowing that you can set up or title variable like this: $title = $fields['title']->content; And repeating the process for the body will get you something like this: $body = $fields['body']->content;

Now that you have your variables set, can go ahead and theme your file at will! You’ll find yourself dealing with a very simple and clean template file!

Do you have a different technique to theme your views? Share with us!

How to create a video carousel: Feed API + Emfield + Views Carousel

1 Comment
How to create a video carousel: Feed API + Emfield + Views Carousel

Recently, I had to create a carousel with YouTube videos (thumbnails). I downloaded and enabled 'emfield', 'emthumb', 'emvideo', 'viewscarousel' and 'jcarousel' modules. I created a new content type - youtube_video - with a field field_youtube_video of "Embedded Video" type.

Now I had to create a view. In a new view's Basic Settings, I set Style to Views Carousel and added Fields -" Content: Youtube Image Thumbnail (linked to node)" and "Node: Title". I also set Filters to "Node: Type = Youtube Video".

You will also want to modify some settings to make it look as you like, but this is pretty much everything that you need to create a carousel - just add some nodes and enter the URLs to a YouTube pages of video you want to display.

But I needed more than that - I needed YouYube_video nodes to be created for me from this RSS: http://gdata.youtube.com/feeds/base/users/alfresco101/uploads?alt=rss&v=2&orderby=published&client=ytapi-youtube-profile

Validating files on nodes with FileField and CCK

1 Comment

Recently I was working on a project where users were able to upload videos, the format in our case didn't matter since we were uploading to Youtube anyway. Allowing users to upload videos was easily done with the Video Upload module and the CCK module. This module allowed us to upload videos directly to our Youtube account. From here, we waited for the next cron run and the video's would be processed, published and viewable by users of the site. Fast, simple, and all done without any custom coding, sweet!

Creating nodes programmatically that have CCK image fields in Drupal 6

7 Comments

When creating nodes programmatically it's easy enough to give the node a
title, body, and type by using the following:


$node = new stdClass();
$node->title = 'title';
$node->body = 'body text';
$node->type = 'type';

These are simple properties that ALL nodes will have. What about nodes with CCK fields attached to them? Well for text fields we can simply use the following:


$node = new stdClass();
$node->title = 'title';
$node->body = 'body text';
$node->type = 'type';
$node->$field_name[0]['value'] = 'TEXT'

Where $field_name can take place of the internal CCK field name (field_XXX_XXX)

That covers the text fields but what about images? Here's a little background on the situation that was put infront of me. I had images on a different server which I needed to attach to an image field on one of our content types. So I used a combination of cURL and a CCK function in order to attach the images to the nodes.

Classy Captions with jQuery and FCKEditor

0 Comments

Let's say you have a news article content type and you use FCKEditor so your non-html savvy publisher can post a story with some basic formatting. One thing they will have difficulty doing is creating a caption for any images they insert into the body. This is not to say that they couldn't just bold some text below the photo and call that the caption, but this just isn't ideal. There is no relationship between the caption and image this way.

You could just switch off FCKEditor and stick a p tag with a class below the image, but if you've ever used FCKEditor you know how ugly and unmanageable this can be. And, still there is no real 'relationship' between these two.

Here's an elegant solution. How about re-purposing the img's "alt" attribute? After all, the "alt" attribute on an image is supposed to describe what the image is. There is no character limit, and these can make great captions. Here's how you can easily set up captions in your news articles.

First you'll want to create a class called ".caption". You can style it however you want, just be sure that it doesn't have any top margin so it stays flush to the image.

The Drupal Quiz Module

7 Comments

My first experience with the Quiz module was amusing, to say the least. A project, which I had just finished, required registered users to be able to take different quizzes and successfully complete them in order to receive a certificate. I turned to the quiz module to avoid any custom coding. Overall, I was able to do what I needed. However, below I have listed three issues I had ran into:

1. No import/export of quizzes.

New Appnovation.com Launched in Drupal 6!

6 Comments

We are pleased to announce the release of the new Appnovation Company website. The site was constructed using Drupal 6 and includes extensive use of jQuery in many sections of the site.

The showcase slider on the front page uses the jQuery Coda Slider Plugin. If you click on any of the showcase items such as the Canadian Cancer Society logo on the far left, the showcase will start automatically scrolling through all the portfolio items. This has been built using custom jQuery.

On the services page, we used the jQuery Accordion plugin to create a sliding submenu. This allows site visitors to view all the service details without clicking through multiple pages.

Some of the modules used for the site include:
Views
Pathauto
Sitemap
Captcha
tagadelic
print
Imagecache
google_analytics
cck
contemplate

Migrating web site from Plumtree to the Drupal Platform

0 Comments

We have recently completed a Drupal 6 project that involved transferring an existing site to the Drupal platform. Introducing, Bushmeat.org. This site is operated by the Bushmeat Crisis Task Force (BCTF), an affiliate of Conservation International and was built using components from the Plumtree system. BCTF wanted to upgrade the look and feel of the site while keeping the navigation and content the same to help accommodate current users.

The main challenge this type of project faced was content material. Where and how to get text, images and downloadable files, from one site to the next was a struggle. The current architecture stored files in multiple folders but only certain content could be downloaded / exported to CSV type document. This meant that any content that was not downloadable had to be re-created manually on the new site.

Web Applications – a Drupal Development Story

0 Comments

I just completed a Drupal project that was more an application than it was a website. The program pretty much centered on a custom node type that we created, and instances of this type could be accessed by users depending on their roles. The main node type linked to other nodes and had fields that were user or taxonomy references. The purpose of the site, or in this case the application, was to integrate and manage tasks for the users, to make things easier for them to synchronize their schedules. These are some of the contributed modules that our team used:

Admin_menu – This was included to allow for easier navigation of the Drupal core menu items. I found it useful since I am, as of yet, memorizing the urls of all the Drupal components. It also gives the clients who are not regular Drupal users a simple way to navigate the admin menus. I recommend this module for the “mouse” type developers like me who prefer clicking as opposed to typing.

Location – Using this saved us a lot of time because the address fields that the client wanted, were all already built into this module.

Create multiple step form in Drupal 6

3 Comments

Multiple step form which consists of multiple steps or pages is useful sometimes. It allows you to create a form workflow and helps to make your web site user-friendly and flexible. For example, you can make different contents on next pages based on user inputs from previous pages.

The key things to make a form multiple pages are setting $form_state[‘rebuild’] and $form_state[‘storage’] variables in a submit function.

 

function example_form_submit($form, &$form_state) {

  if($form_state['storage']['page'] == 1) {

    $form_state[‘rebuild’] = TRUE;

    $form_state[‘storage’][$page][‘values’] = $form_state[‘values’];

    $form_state['storage']['page']++;

  else {

     //process the data

  }

}