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!

5 Great Web Design Resources (+1 Bonus)

2 Comments

960.gs

Khoi Vihn, the design director for NYTimes.com, is a fan of 960.gs, and has a great resource on his personal website as well: a presentation that he did on rapid prototyping at SXSW.

960.gs is particularly wonderful because you can download a custom created CSS file based on your column count, and 12 and 16 column grid files to use in pretty much any design program you can think of. A drupal theme is also in the works.

Color Lovers

If you ever need inspiration or a gentle prod in the right direction when it comes to colour schemes and palettes, Colorlovers is the website to check out. So many beautiful palettes to gain inspiration from, either just by browsing, or by searching by hue, name or hex number.

Guidelines for Adapting Web Site Designs for Mobile Delivery

1 Comment
Page Content

People on a mobile device are not ‘browsing’, but rather they are looking for a specific piece of information. 
Use the clearest and simplest language instead of a discursive style for site content.

Divide pages into usable but limited size portions.

If pages are too large they will take a long time to load. There are limitations on some mobile devices as to the largest page they can accommodate. Also, we don’t want our users taking a big hit on their (sometimes) limited data plans.

On the other hand, if a page is too short then the user may require multiple page requests to read the relevant information.

Scrolling

The layout of the page should be such that the user can use a simple repeated scroll. The majority of mobile sites scroll vertically, so elements should be “stacked” in this way. Some content requires a secondary scroll, such as maps or some images, but should be avoided wherever possible.

Speed-up jQuery with jString

3 Comments

One of the great benefits of jQuery lies in its syntax which makes code simpler to write and easier to read. Take these two equivalent examples:

While slightly slower, the jQuery approach is more compact, faster to write, and easier to debug. On the other hand, fewer jQuery calls mean faster code. When manipulating the DOM, it remains desirable to keep working with strings for that reason. Consider these 3 approaches:

With an array of 100 numbers, the benchmark results speak for themselves (10 times repeat):
Case 1. 328ms
Case 2. 78 ms
Case 3. 53 ms

Enters jString

The idea is to add jQuery-like methods to the String base class. These methods make what I call 'jString' or 'jQuery methods for Strings'. For building HTML, I found that I could get most of the work done with only five methods (empty, html, wrap, addClass and attr) so only these ones are currently implemented. For the examples above, using jString we can simply write:

Proximity Search using Views in Drupal

3 Comments

Problem:

I am working on a project that requires the user to input a maximum of two zip codes during. When the user is redirected to their dashboard, based on the zip codes provided, the site should list advertisers within the 30 mile radius. Note that if the user decides to change their zip codes later on, somewhere on their profile, the dashboard will show advertisers within the radius of the given zip codes.

Solution:

Implement the advertiser as a node with node location attached to it and create a “Location" type view.

Modules used:
Location – 6.x-3.0
Views - 6.x-2.7

Implementation:

Here are the steps to create the “Location" view, which will do a proximity search, given the user's zip code on their profile:

1) Navigate to "admin/build/views/add".
2) Enter the view name and description.
3) Select “Location" under “View type".
4) Under “Fields", select “Location" and add “Location: Distance / Proximity"
NOTE: The distance from the selected location and either the current user or a specific location.

CCK individual field themeing

2 Comments

CCK is a great module for allowing use to create custom content types without having to write a node module. Out of the box CCK provides everything a user would want. But there are times where I need to do some custom queries or add a custom theme function to get things just right. So here's something I like to do to keep things well and organized.

The best way to do this would be to copy the content-field.tpl.php from the CCK theme directory into your own theme directory. This will target ALL fields, but you'd like to modify onlt that one text field in that one content type. Well, you'd start off again by moving the content-field.tpl.php to your theme directory, and then create a copy of this file with the following schema:


content-field-FIELD_NAME-NODE_TYPE.tpl.php

If you'd like to modify a field that spans across multiple content types, you could use the following naming convention:


content-field-FIELD_NAME.tpl.php

4 Drupal Security Issues

9 Comments

UPDATE: There is some controversy about 1), see more information here: http://drupal.org/node/475858. As pointed out by some readers, there are other ways to figure out the Drupal version of the site.

While Drupal is a secure system, there are 4 configuration issues that are often overlooked when developing a Drupal site. By following a few easy steps, we can make a Drupal site much less vulnerable.

1) Leaving Drupal Version Information Text Files on Server
A lot of developers forget to delete the Change Log and other text files that come with the Drupal package. By leaving the text files on the server and having them accessible, you enable potential hackers to know about the exact version of Drupal that you are using. Once the hackers know about the version, they can more easily find the exploits to hack into the Drupal site.

2) Cross Site Scripting

Mysql remote connection

0 Comments

Most often we work on our local database for Drupal projects and thus mysql host in settings.php would likely be 'localhost' as in the line: $db_url = 'mysql://db_user:db_password@localhost/db_name'; However, occasionally we may want to connect to a remote mysql server directly (eg. on a dev server). If you have full control over the remote mysql server, here's what you can do to achieve that:

1) Log onto the remote server and edit mysql server configuration file
Suppose the remote server is Fedora with IP address 192.168.1.150.
vim /etc/my.cnf
Comment or remove the line 'skip-networking' if it exists and add a new 'bind-address' line like the following:

#skip-networking
bind-address=192.168.1.150

Then restart mysql server.
service mysqld restart

2) Grant relevant user and database permissions
Suppose you're connecting to the mysql server from IP 192.168.1.100. You can do the following in mysql prompt on server 192.168.1.150:
GRANT ALL ON db_name.* TO 'db_user'@'192.168.1.100' IDENTIFIED BY 'db_password';
or if you want to allow connection from anywhere:

Above or Below the Fold of a web page?

5 Comments

Designing for the web can often be a tricky task, there are many variables to take in account, some of them of technological nature, some of them of human nature. The fold is something that involves a little bit of both.

What is the fold?

If you’re not familiar with the idea of the fold on web-design, we could say in a nutshell that it is the area of the site that your users will see without having to scroll, therefore, making that region very valuable. Now, calculating how big that area is, is a slightly more difficult task, it involves screen sizes, resolutions, browser type, operational system, how many toolbars the users have, and so it goes. But we’re not going to go that far this time, the point of this post is to argue that the fold may not be as important as it’s been said.

It is commonly said that users won’t scroll bellow the fold or won’t pay too much attention to the content bellow that line. I would agree that to a certain extant. I can’t deny that for most of the sites that area is the most important. That is the first impression you user will get, so there are some important tasks to accomplish on there such as:

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