Tag: drupal

How to write a working Drupal Module

The power of Drupal can only be leveraged best if you learn how to write your own custom modules. If you know a bit of PHP and aren’t intimidated by functions, elements, arrays and the like, this is the best place to start. Drupal.org Community Docs. This tutorial will take you through the ins and outs of writing a basic but very functional Drupal module. This tutorial will, in great detail, explain all the steps needed to create a module that will allow you to show a configurable number of posts in a block, create a configuration menu option for the module and include a Help page.

I’ve looked at many online tutorials on how to write basic modules and this one is the best. It has the most thorough explanations and is rigorous in its adherence to Drupal commenting standards, coding standards and naming conventions. As well as the Drupal specific functions that make developing for Drupal easier. If you want to learn Drupal PHP development, this is the place to start.

https://drupal.org/node/1074362

Try out Pantheon for free Drupal hosting

There are a lot of good Drupal hosting sites out there. But Pantheon stands out because it offers FREE hosting. Are there caveats? sure, but that is to be expected. The two biggest are ads on your site and a domain name under their root.

Right now, I have a client who is sitting on the fence about a new site. I have a somewhat vested interest in his success so my plan is to develop a site first and then sell it to him. Now this is a weird use case sure. But it wouldn’t be possible without Pantheon’s offer of free hosting. And my client can choose a payment plan down the road with his own URL and no ads once he commits.

Pantheon offers some really cool features too. Either SFTP or Git access, Drupal distributions and a really easy install requiring nothing more than some mouse clicks.

They also offer a cool multistage dev/test/live environment that really allows you to develop safely in a multideveloper environment. Add Git to the equation and you have a distributed local environment with version control.

The first site that I am doing is called Landetech. So the urls from Pantheon are:

dev-landetech.gotpantheon.com

test-landetech.gotpantheon.com

live-landetech.gotpantheon.com

With the Pantheon control panel, you have clear and concise control over changes committed to each environment. Very cool stuff.

Pantheon also uses Varnish for caching for greatly improved performance, something that Drupal usually needs. Check them out.

https://www.getpantheon.com/

Webform Module – Quick and Easy Drupal Forms

Quick and Easy are not two terms that typically are synonymous with Drupal. You generally have to go through the ringer to get Drupal to do most things. That’s the nature of a tool as powerful as Drupal. But the Webform module will really surprise you in a very nice way.

I needed a quick and dirty way to let my users send me feedback. The comment system won’t do because the feedback is general and not specific to a node. And I really want it to go into an email.

Image

With an install base of about 350k sites, I really don’t know how I missed webform. But with just a few steps, I was able to create a one field form (see the SS) that emails the result to an email address that I specify.

The module will create a content type called webform. From there, you simply create a new node. Once the intitial node has been created, you can add all of the nice elements that will go into the result. I have a one field form here but you can have much more that that. Definitely worth the time for your Drupal install!

Drupal Multilingual Tips – Browser Settings, Session Params and Account Settings

I have a front/login page that is available to anonymous users. I need to be able to deliver the page bilingually but I rely primarily on the Drupal account settings and language switcher to determine whether the site is presented in English or Spanish. So how do I present in Spanish to anonymous users when appropriate? Drupal also allows you to use the user’s browser settings as well to determine what language to display. And it also allows you to change the order of factors to determine what language to present in. After some testing and a lot of thought about the UX, I have settled on,

  • Browser settings – Helps for Anonymous
  • Session parameter – If a Spanish defined account want to use the language switcher to get English instead for that session
  • Account settings – The catch-all
  • Default site language

In my specific case, this will provide the most flexibility for my audience.

Customizing Drupal Confirmation Pages

If you use Panels Pages for the bulk of you site building, you may have noticed that there are frequent limitations on some of the more random pages.

Image

An example is the comment confirmation delete form. I don’t need much on this form, the stock info is fine, but I want to add my logo at least. I don’t use the logo function that Drupal provides standard, I implement it with my own CSS.

On the form, I use the background element on the #node-confirmation-form ID to add the logo via the CSS shown in the SS. But since that places the background right underneath the form text, I have to tweak it a bit to move things around so that they look OK. I ended up using a combination of height, top, padding and relative positioning. I really just had to experiment until I got it right.

This is not the best approach, but it is a good quick and dirty way to customize a form strictly through CSS when Page Manager doesn’t offer to intercept it for you.

CSS Tip – Customize without Theme Intercepts

A thorough knowledge of CSS is a must for customizing a layout using Drupal. Today, I needed to move an input field on a form. The issue is that the field shares its Drupal defined selector class with several other fields of the same type on other forms. Fix one form by the selector, break the same field on a different form.

Image

By using the CSS ID of the parent form, (which is several divs up in the HTML) and inserting a space in between the ID and the class selector, I can zero in on the particular field that I want. The other way that this would have to be done is via an intercept at the theme level, which would be more involved and require subtheming, PHP and a TPL file. Using the two selectors together is easier for someone who doesn’t want (or know how to) take that approach.

Mobile Development and Tables in Drupal

Drupal uses Tables for its Forums. Tables don’t get a lot of respect in this day and age but they are still useful for many things. And Forum/Bulletin posting sites are one of them.

So I am trying to make the tables fit on a 320px width screen. Not easy. After playing around with several different CSS settings, I discovered that using

table-layout: fixed;

really seemed to help me. I had been shrinking the fonts to make the tables fit, with mixed results. Using the fixed setting helped.

CSS/JScript Aggregation, caching and performance – customizations do not show up

Drupal employs a great mechanism for speeding up page loads once active development has been completed. Under the Performance settings, there are several options for caching pages, CSS and more. As an example, from a high level, CSS files are consolidated from the often several dozen files down to one, with all whitespace, redundant or superseded selectors and comments removed. This is a great way to speed up your site once you are in Production. If you’re actively developing your site, you don’t want to use this because your changes won’t show reliably without constantly clearing your cache.

There are some caveats though. What? Caveats in Drupal? Uh, yeah. I love Drupal but it has more caveats than the US congress has vacations.

The symptoms are always the same – custom changes (to CSS, for example) don’t show up. In my case, Adaptive Themes manifests this type of behavior. AT has a way of “pre-caching” info within its area of Drupal and this will often lead to CSS customizations  not showing up once performance caching has been enabled.

In AT’s case, there is a work around. If changes don’t appear:

  1. Clear the cache
  2. Immediately save the AT Theme/Subtheme you are using under Appearance
  3. Clear the cache again

That should do it. You can read the conversation between some of the AT geniuses here:

https://drupal.org/node/1995938

It’s pretty recent and they will have a solution at some point soon, I hope. Considering how awesome AT is, with all of the Responsive features and easy subtheming, this is a pretty small accommodation to make.

Mobile Emulators/Testers

A couple of notes on a few tools for mobile development.

http://quirktools.com/screenfly – this is a great tool. make sure to be aware of the “proxy” setting if you’re having trouble navigating your site.

http://responsivepx.com – Really nice tester with a slider for easy adjustment of length and width of the site.