Categories
Drupal Planet

Displaying Recent Tweets in Drupal 6 with twitter_pull

I’m writing this blog post for the Austin Drupal Newbies February Meetup to go along with my presentation about Drupal and Twitter.

Drupal sites can display the most recent tweets for a Twitter @username with the twitter_pull module for Drupal 6 and 7. The twitter_pull module is one of many Twitter-related modules for Drupal – a quick search on drupal.org revealed 151 matches for Twitter modules.

Twitter_pull solves one problem, and one problem only – retrieving recent tweets and displaying them in Drupal.

The module was written for developers to use with PHP – it isn’t configurable from the Admin menu like most other modules, at least in the most recent Drupal 6 release. This means you will have to do a few extra steps to get the twitter_pull module running on a stock Drupal 6 installation.

I’m going to give directions on how to show your recent tweets in a block in the right hand sidebar of a stock, out of the box Drupal 6.20 installation on a UNIX host that you have shell access to – for instance, a VPS or a shared host like PHPWebhosting. You can also install the twitter_pull module using drush or anything else you’re already comfortable with.

Downloading and Installing the Twitter Pull Module

The first step is to login and change directories on your host to your Drupal directory.

cd drupal
Next, create your sites/all/modules directory if it doesn’t already exist. Change your working directory to the modules directory.
 cd sites/all
 mkdir modules
 cd modules
Once you are in the modules directory, use the wget command to download the Drupal 6 version of Twitter_pull into your modules.
wget http://ftp.drupal.org/files/projects/twitter_pull-6.x-1.2.tar.gz
Now, uncompress the twitter_pull module
tar fxzv twitter_pull-6.x-1.2.tar.gz
We can log out of the Unix shell now. With Drupal 7, it’s much easier to install modules through the administration interface.

Enabling the Twitter Pull and PHP Filter Modules

The next step is to go to our Drupal Administration modules page. Login as the administrator to your Drupal site, and go to Site Building->Modules. We need to enable two modules.

http://www.yourserver.com/admin/build/modules

The two modules we need to enable are “PHP Filter” and “Twitter Pull”. Twitter Pull is the module we just downloaded, so it makes sense that we need to enable it.

Why do we need to enable “PHP Filter”? The reason is that the Twitter Pull module requires a small amount of PHP code to make it work. We are going to put that PHP code into a Drupal block. A fresh, clean, new Drupal 6 installation doesn’t let you use PHP code in a block – you will need to enable the “PHP Filter” module that comes with Drupal 6 for this to work.

After checking the boxes next to “PHP Filter” and “Twitter Pull”, click the “Save Configuration” button at the bottom of the modules page.

Creating the Recent Tweets Block

Now, we need to configure a Drupal block to display our recent Tweets. Start at the Blocks Administration page:

http://www.yourserver.com/admin/build/block

Now, add a block from that page


http://www.yourserver.com/admin/build/block/add
Set the block description to Recent Tweets, and the block title to Recent Tweets as well. Next, inside the block body, we will have to use some PHP code. Don’t worry if you aren’t familiar with PHP, this is a great way to get your feet wet. We only have to change one thing to customize this for your site! Copy and paste the following into your block body.
<?php if (function_exists('twitter_pull_render')) { print twitter_pull_render('@jefflinwood', '', 10); } ?>
What we are doing in the above PHP code is first, checking to see if the Twitter Pull module is enabled. If it is, we are making a call to the twitter_pull_render PHP method from the Twitter Pull module with three arguments: the Twitter search, the title to use, and the number of Tweets to show. In our case, we are using @jefflinwood as the Twitter search term, no title, as the title is provided by the block, and we are going to show up to 10 recent Tweets.

Now, change @jefflinwood to your Twitter username – @racetothealtar, for instance.

To make Drupal execute the PHP code in your block, you need to set the Input Format on the block to be PHP Code. If you didn’t enable the PHP Filter module earlier, you will not see this option here.

The defaults for the rest of the block should be okay. Save the block. Your block is now configured and ready to display.

Displaying the Block

Under disabled, change the drop-down for Recent Tweets from <none> to Right Sidebar. Now click the Save Blocks button – you should see the Recent Tweets in your right sidebar! Go to your front page, and they should be there as well.

Categories
Drupal Planet

Drupal 7 Theming Tip: Any Link on an Image Field with Drupal 7

[Dec. 8,2012 – Thanks to Blair Wadman for  noticing that WordPress ate my – – and turned them into en-dashes, thus confusing anyone reading this!]

I’m moving Clutter Puppy – Daily Clutter Tips from static HTML to Drupal 7, but there are quite a few problems I’m running into with theming for Drupal 7, mostly because the documentation is pretty unorganized for Drupal 7 theming. I’m pretty familiar with theming nodes and fields for Drupal 6 with CCK – now that CCK has moved into core for Drupal 7, the API has changed.

In my case, I’m trying to do something simple – on my node, I have two fields that I’d like to use together – “field_url”, which is a text field, and “field_pictures”, which holds an unlimited number of Drupal 7 Image fields. I’d like each image to link to the URL in field_url – that’s not the node URL, it’s just an arbitrary URL that gets entered at content creation.

One thing that really frustrates me about Drupal is how easy this would be with other web application frameworks. Most of them, you’d simply add a foreach loop to your template, and write out the a href and img tags with tip.url and tip.imageUrl. Done!

With Drupal, things get more complicated and the documentation gets horrible as soon as you want to change the default rendering for a Drupal node. With Drupal 7 to do this simple task, you’ll need to modify node.tpl.php, and create a field- -field_pictures.tpl.php template.

In node.tpl.php, put:

<?php print render($content['field_pictures']); ?>

where you want the pictures – this by itself isn’t too bad, but because every field wants to render itself, you’ll need to replace the default field rendering template for field_pictures. Inside of field- -field_pictures.tpl.php, put:

<ul>

<?php foreach ($items as $delta => $item) : ?>

<li><a target="_blank" 

href="<?php print $element['#object']->field_url['und'][0]['value']; 

?>"><?php print render($item); ?></a></li>

<?php endforeach; ?>

</ul>

for a nice unordered list that you can plug into a jQuery plugin, for instance.

The key here was to use the un-Googleable $element[‘#object’] to represent the parent node, and then to retrieve the field_url’s value from the node.

If there’s a better way to do this, I’d love to hear it – the D7 theming guide seems to be missing a discussion of the new D7 fields and how to theme them.

Categories
iPhone Development

Three20 for iPhone: Add JSON support to a new project

Working on a new iPhone app, everything was going smoothly with Three20, following their guide to add Three20 to your application with a Python script. Everything was working smoothly until I wanted to parse some JSON. The ttmodule.py script added the frameworks for the other Three20 modules (considered core) to my XCode project, but didn’t include the JSON+SBJSON module (considered external or optional) in the linker flags. This was a little confusing, as the JSON library was listed as a direct dependency.

I had to add the following lines to my linker flags (from the info window for your target, go to “Build”, then look under the “Linking” header, and then “Other Linker Flags”. You’ll see some Three20 linker flags there, for the SBJSON library, add two lines:

-force_load
../../three20/Build/Products/$(CONFIGURATION)$(EFFECTIVE_PLATFORM_NAME)/libextThree20JSON+SBJSON.a

Where ../../three20 matches the location of your other Three20 libraries (this will depend on where you put the Three20 source code).

How it looks in XCode:

I hope this helps other iPhone developers who are using Three20! Mostly I put these tips together for my future reference.

Categories
Drupal Planet

Clash between JSON out of Drupal with Youtube Embedded Field and MongoDB Key Names

(Quick background) As part of a much larger project, I’m pulling content out of Drupal as JSON-formatted nodes into MongoDB. The plan is to use Drupal as the content creation platform, and MongoDB as the database store for the content delivery platform, with JSON as the data format.

Importing JSON content from Drupal into MongoDB is actually very easy – I’ve got Drupal 6 already configured to serve JSON through the REST Service (for more, read my post Using Drupal’s Views as a JSON Web Service with the REST Server)

I installed MongoDB on Mac OS X, installed the mongo ruby gem, and then wrote a quick ruby script to pull JSON off my server and dump it into mongo. This worked great – it throws errors when it hits nodes that aren’t published, but that’s fine. What didn’t work was pulling in anything that used the Embedded Media Framework CCK field for Youtube – one of the JSON tags that gets embedded uses the string “http://www.w3.org/2005/Atom” as a key, and the periods aren’t legal in a key name in MongoDB.

Luckily, this was just the one key name in my JSON output, so I added a quick gsub call to replace www.w3.org with www-w3-org, and all was well. I don’t plan to use the Youtube Atom feed anyway, but if I do, I’ll just have to remember to use my key, not the Drupal 6 CCK key.

Categories
iPhone Development Uncategorized

Quick Tip: Adding icons to Three20 Tab Bar

I’m using the Three20 Additions to UITabBarController for the Green Ninja Active City Guide iPhone app (based on TTNavigatorDemo). This is great, except all the examples I found for tab bar images use the controller to set the tab bar item. With Three20, that didn’t work, so I had to add some code to my TabBarController to get icons.

In the code below, the first part of the method sets up the tab bar for three URLs/controllers, and the second part of the method adds the images.

Has anyone else used a different approach to get icons on a Three20 application tab bar?

- (void)viewDidLoad {

[super viewDidLoad];

[self setTabURLs:[NSArray arrayWithObjects:

@"http://www.greenninja.com/city-guide/austin",

@"http://www.greenninja.com/activities/austin",

@"tt://map",

nil]];

NSArray *tabs =  [self viewControllers];

UIViewController *home = [tabs objectAtIndex:0];

home.tabBarItem.image = [UIImage imageNamed:@"house.png"];

UIViewController *activities = [tabs objectAtIndex:1];

activities.tabBarItem.image = [UIImage imageNamed:@"star.png"];

UIViewController *map = [tabs objectAtIndex:2];

map.tabBarItem.image = [UIImage imageNamed:@"world.png"];

}
Categories
Blueprint CSS Drupal Planet

Using Boks with the Blueprint CSS framework to create Drupal Themes, Part 1

We’re going to create a Drupal 6 theme with the Blueprint CSS grid framework using the Boks visual layout designer. Making a good looking theme in Drupal can be frustrating, especially if you aren’t a graphic or web designer, and you don’t have an HTML/CSS template to work from.

CSS Grid Basics

One shortcut I’ve found for creating great looking web pages is the Blueprint CSS grid framework, which is an open source toolkit that had its version 1.0 release on September 29, 2010. There are several other grid toolkits, such as 960.gs that are similar – each of these helps solve some of the most frustrating CSS layout issues. Blueprint also resets each browser’s CSS back to a common standard, and then builds from there.

The Drupal content management system works extremely well with grid-oriented layout solutions. Many Drupal sites have a similar layout – a header, a footer, a content area, and one or more sidebars on either the left or right sides with the same height as the content area. For those of you who have been doing web development without a CSS framework, just getting that basic layout to work properly (without fixing the height of the content area) can be difficult.

Coming from a software developer background, a basic, fixed grid layout makes a lot of sense, both programmatically and visually.  Generally speaking, a grid CSS framework will provide a content area of about 950 pixels wide, which is a common content area on most web sites (for users with 1024×768 monitors).

Laying out the page visually with Boks

If you start with a wireframe (see my post on DIY Wireframing), you can have a pretty good idea of which elements on your web site are going to go where. From a paper wireframe, we can layout our HTML template in Boks, a visual Blueprint CSS designer. Boks is an Adobe AIR application that runs on Macs, Windows, and Linux as a desktop application.

The Boks interface is confusing, but at its heart, it’s a simple tool.

Choose the width (the default, 950, is fine) and the number of columns in your grid (the default, 24, gives you flexibility)

Set the page title, uncompress the CSS (Drupal will do this itself), and turn off the grid on our page

Click OK and hide the Settings dialog box, revealing the main Boks window:

Using Boks the first time can be very confusing. It is not at all clear what you are supposed to do here from the user interface – what you should do is start to add your visual elements. For this example, we are going to create a header, a content area, and a footer with two equal width blocks.

Start from the top, with the header. Click and drag with your mouse across all 24 columns:

All you need to do now is add a CSS id, in our case “header”, in the id field for the div. You can add other CSS styles or change the markup to another HTML element here, but you don’t have to. We can also add some sample HTML content for our header – put in “<h1>Example Blueprint Theme</h1>”

This really doesn’t look like our web page – Boks abstracts the web page into a series of rows and columns. You define the number of columns you want in your web page – we stuck with the default of 24 columns. Each of these columns is 30 pixels wide with a 10 pixel gutter. Our layout elements can span as many of these columns as we want.

To add a content area, we can drag across all of the columns underneath the header, naming the div “contentArea”. We can also use the dummy text feature of Boks with the “+Lorem Ipsum” button.

Keep the dummy text defaults and add 1 paragraph of Lorem Ipsum text.

Last, we need to add a footer, the same way we added contentArea. Don’t add content to the footer, because we are going to add two equal width areas to the footer.

Within each layout element, we can also create additional layout elements that span all or any part of the parent container’s columns.  We’re going to add two footer elements, leftFooter and rightFooter. Instead of clicking and dragging below the footer element, we are going to click and drag within the footer element. We’re only going to select half of the columns for each div. Call this div “leftFooter”, and use “Left Footer Area” as the HTML content.

Do something similar with the rightFooter – choose the other 12 columns within the footer element:

Our web site’s basic layout is done! This is just the first phase, with just layout, and no emphasis on visual styles yet. We can use the Live Preview feature built into Boks to see how our content area looks  – Choose Live Preview from the Window Menu and see how your page flows:

The last steps are to save our project as a .bok file with File->Save. This lets us re-open the project later in Boks. It doesn’t give us the actual HTML we’ll use in our projects, though. For that, we need to Export from Boks. The Export button is in the upper left corner, and it will save our web page in the directory of our choice. Use Firefox, Chrome, Safari or the browser of your choice to open the page up – it will be named output.html.

Here’s the HTML Boks generated for us. With the next part of this series, we’ll explore the CSS classes added to the HTML, and talk about some of the advantages (and disadvantages) of Blueprint CSS.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<meta content="Boks - 0.5.7" name="generator"/>
<title>Example Blueprint Theme</title>
<!-- Framework CSS -->
<link rel="stylesheet" href="css/screen.css" type="text/css" media="screen, projection"/>
<link rel="stylesheet" href="css/print.css" type="text/css" media="print"/>
<!--[if lt IE 8]><link rel="stylesheet" href="css/ie.css" type="text/css" media="screen, projection"/><![endif]-->
</head>
<body>
<div>
<div id="header"><h1>Example Blueprint Theme</h1></div>
<div id="contentArea"><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin volutpat congue sapien, sed ornare velit suscipit eget. Vivamus eu lacus augue. Cras metus erat, posuere at venenatis vel, pulvinar molestie odio. Sed ac nibh sed enim suscipit feugiat. Pellentesque placerat porta tincidunt. Phasellus et nisl neque, sed gravida lacus. Phasellus posuere hendrerit ultrices. Fusce lacinia felis at elit ullamcorper lobortis. Pellentesque ac malesuada turpis. Nulla facilisi. Nullam bibendum ante eget lacus malesuada placerat. Donec sed neque sem. Aliquam erat volutpat. Duis vitae neque enim. Vivamus diam quam, posuere laoreet luctus sit amet, posuere at augue. Nam id ipsum enim. Donec diam justo, interdum ut pulvinar nec, lobortis non odio. Nam velit elit, tincidunt ac consectetur quis, ultricies vel magna.</p></div>
<div id="footer">
<div id="leftFooter">Left Footer Area</div>
<div id="rightFooter">Right Footer Area</div>
</div>
</div>
</body>
</html>
Categories
Uncategorized

Quick Tip: Displaying only one CCK image in your teaser

For my Drupal 6 web site,  Green Ninja Active City Guides, I have several CCK content types that all have multiple images. Each of these uses the same field, (field_pictures), and I use jQuery Gallery Formatter to create a scrollable picture gallery on my Race, Park, and Trail content types.

I’m getting larger amounts of photos on some of my nodes now, for instance, the Cactus Rose 50 Mile and 100 Mile Race page, and that’s starting to slow performance. The jQuery Gallery Formatter really slows down my pages, so I switched my teaser views to just display the images with the node. That works great for nodes with one or two images, but looks horrible on pages like San Antonio Trail Running – where users have to scroll through all thirty of the Cactus Rose photos to get to the next race.

Ideally, CCK Imagefield would have a display option like “first image” or similar. The problem, as discussed on drupal.org here: http://drupal.org/node/430604 is that the CCK formatters don’t take configuration parameters, so to add this, the formatter would have to double the number of formatters in the drop down box. ImageCache already adds formatters for each image size you support, as do several other modules.

As that solution isn’t available to me, I went ahead and created my own solution by modifying my node-race.tpl.php.

First, I changed my Display Settings on Race to exclude my Pictures field from $content so the entire list doesn’t get displayed. Check the first “Exclude” checkbox for your field, but not the second – that will exclude the images from your full node display as well.

Next, I made a slight modification to my node-race.tpl.php file. Decide where on your display you would like the thumbnail to go and add this code:

<?php if ($teaser): ?>

      <?php print $field_pictures[0]['view']; ?>

<?php endif; ?>

replacing field_pictures with field_NAMEOFYOURCCKFIELD.

That’s all you need to do! Clear your cache if you’re running into difficulties seeing the change.

Categories
Drupal Planet

Quick Tip: Theming Custom Node Types with Acquia Marina

As I go through the process of translating my wireframes into CSS layouts, I found a pretty interesting bug/feature with the Drupal 6 theming engine and subthemes. In my case, I was trying to create a node-race.tpl.php for Acquia Marina that contains my custom PHP.

I copied node.tpl.php from the Fusion Core theme into my Acquia Marina theme directory and renamed it node-race.tpl.php. What I should have done was copied it into the Acquia Marina theme directory and kept the name node.tpl.php, and then copied it to node-race.tpl.php for modifications!

The Drupal theming engine should look for node-.tpl.php, node-.tpl.php, and finally node.tpl.php when it renders a node (Hint: Rebuild your theme registry as a first step). With subthemes, Drupal won’t check for the custom node templates if there is no base node.tpl.php in the subtheme directory.

For more, see the Drupal Issue: Themes can’t use node-story.tpl.php without node.tpl.php – marked will not fix for some reason. I need to file this in my blog category “hope-I-can-save-someone-else-fifteen-minutes-of-googling”

Categories
Drupal Planet

Integrating DIY Game Mechanics with Drupal

Trying to grow a community, user-generated content site is hard. Engaging your users and making them “sticky” requires that you give them some reason to care about your site – once of the best ways to do this is to add some elements of game mechanics to your site. Successes like FourSquare, Gowalla, and StackOverflow show the value of providing badges, status, reputation, or other virtual goodies to your users. Drupal 6 and 7 community sites can take advantage of several modules that provide these game mechanics to your users.

Adding Fun to your Web Site

There have been a lot of good discussions in other blog posts about ways to add game mechanics to your web site, making your site fun and sticky, engaging your users, and using social media to engage them in game mechanics. Summarizing them, you should definitely add badges users can show off through social media outlets, let your readers rank themselves in leaderboards (site-wide or on a more granular basis) and give them some sense of completion or accomplishing a goal, and always have additional levels, tasks, or badges they can earn – don’t make them too easy to get.

Some great articles on game mechanics:

And for the contrarian view:

If you’re not using Drupal, or you’re not comfortable managing game mechanics for your web site, several startups have stepped into the space of providing game mechanics as a service – I haven’t used any of them, but here’s a small list:

Finally, website building tool DevHub added game mechanics – a case study of they jumped ahead of the competition in a crowded market with game mechanics, maybe using BigDoor?

Drupal Modules for Game Mechanics

There isn’t a one-size fits all solution for adding game mechanics to Drupal sites. There are a couple of modules that you can cobble together to create a solution, but there’s a market opportunity for one of the above players to launch a Drupal module that hooks into both their hosted service and the Drupal userpoints module and its contrib modules to provide a seamless experience – the easier the third party service makes it, the more customers they’ll get.

When you create your own game mechanics solution in Drupal, you’ll need to decide what direction to drive your users, either an overall point system, or a badge/achievement system (or both, of course). With points, the core module you’ll work with is User Points. User Points ties in with a number of other Drupal modules, core and non-core through the User Points contrib module collection. In addition to the modules in that collection, there are a number of other User Points integrations listed on the User Points contrib page.

For badges and achievements, there are two modules – User Badges and the newer Achievements. With User Badges, you’ll have to setup your own rules using the Rules module to grant badges to users, unless you just want to have them defined by their user role (and what’s the fun in that?). A better starting point for game mechanics is probably the Achievements module, but it’s very new, not in CVS, and needs a lot of integration work to get it to the level of User Points!

Categories
Drupal Planet

Wireframing and Theming Drupal Content Types, Part 1

After reading Head First Web Design, I’ve decided to take the plunge and create pen and paper wireframes for several of my Drupal content types.  I’d initially planned to design-as-I-go for each content type – improving each content type by modifying the node template PHP files in my Acquia Marina theme. This became pretty time consuming without a clear direction, so wireframing, here I come!

I’ve also developed enough content for the site that I know the direction it’s going – this helps a lot when it comes to visualizing how it will look. I also have an idea of the design I’m looking for from other content-heavy web sites – I’m already up to 1,700 unique pieces of content after importing all of the content from EveryPark.

For wireframing ideas, I found Using Wireframes to Bring Your Site Together from Design Reviver and Five Commandments for Wireframing from Boagworld.  Although I’m wireframing alone as the information architect, I’m also the designer, developer, and content creator, so that one’s fine! My drawings are horrible – I should probably invest in a ruler, but again, they’re for me.

I’m versioning my wireframes – I’m not ruling out switching to a prototyping web site or application in the future, but it’s a lot easier to just draw and scratch out what I want. One tip I have for those of you who are new to wireframing like me is to start by wireframing out an existing web site – like News.com, for instance.  If I do switch to a tool, Wireframing with Google Drawing looks pretty good.

I’m going for a consistent look and feel, and some of my Drupal content types are very similar (why isn’t there any kind of inheritance in CCK with content types?),  so I created two wireframes that will represent about five different content types.  I have another family of content types that are also very similar to each other, and I’m able to get away with one wireframe for that as well.

The next step for me is implementing my wireframes – from my research, I have three choices for theming my content types with Drupal:

I’m going to start with the first option – editing the TPL files myself. That gives me control over everything at the CSS level, and it reduces the overhead of the other two modules. I’d like to experiment with Panels and Display Suite, but I’m worried about running into limitations with these modules.

For my next post, I’d like to discuss lessons I learned from theming content nodes with PHP.