Finding The Path To Your Drupal Theme

Posted on March 29, 2010 by matt

Ever needed to reference a file in your Drupal theme? For example, an image from your page.tpl.php file, or a JavaScript file?

You can hard code the path, which might be something like:

/sites/all/themes/mytheme/images/myimage.jpg

Or, with a little bit of PHP, you can use Drupal’s built in path_to_theme() function. This function will print out the path to your Drupal theme from the root directory.

So, in your theme you might have this image, but instead of writing:

<img src=”/sites/all/themes/mytheme/images/myimage.jpg” alt=”My Awesome Image” />

You could write:

<img src=”/<?php print path_to_theme(); ?>/images/myimage.jpg” alt=”My Awesome Image” />

At first glance it is slightly longer and might seem like more effort to do. Think of it a bit differently though. What if you want to rename your theme, or use your theme on a different domain name? You will need to change the hardcoded path. By using Drupal’s path_to_theme() function, it will dynamically figure out the path to your theme directory for you.

We can then take this a bit further with Drupal’s base_path() function. This particular function returns the path to the base Drupal installation. If you have it installed in the root directory of your hosting account, then this will simply be a /.

The real benefit of this is if your Drupal installation is in a different directory. For example, /drupal. If this is the case, then your hard coded path would be /drupal/sites/all/themes/mytheme/images/myimage.jpg the path_to_theme() function will still only return /sites/all/themes/mytheme though, and the browser will not be able to find your image. The reason for this is that it only determines the path from the base installation directory of Drupal. So, to make sure your theme is truly dynamic and capable of dealing with this, you would use something like this:

<img src=”<?php print base_path() . path_to_theme(); ?>/images/myimage.jpg” alt=”My Awesome Image” />

Now if you have Drupal installed in a sub-directory called Drupal, this would actually return the full path we need: /drupal/sites/all/themes/mytheme

One thing to remember if you use this is that the path_to_theme() function doesn’t put in a trailing / or start off with a / so you will need to put these in before adding in the rest of your files location. Comparatively though, base_path() does add a / both before and after the path. So if you use it, you will not need to prefix it with a /.

This works in Drupal 5 and 6, and I believe is going to continue to function the same way in Drupal 7, so your themes will be all set to work on any server without needing to adjust the file paths. Give it a try!

You can also have a look at these functions in the Drupal API documentation:

Posted in Web Design | Tagged , , , | Leave a comment

Applying Patches to Drupal or Modules on Mac OS X

Posted on January 15, 2010 by matt

I’ve had to run a number of patches to Drupal modules before, and I’ve always done them on my Windows machine simply because that is what has the most instructions available to do so. At the moment though I am away on holidays and only have my Macbook Pro, so when I needed to run a patch I debated going to the effort of doing it through a Windows virtual machine that isn’t set up for it, or set up Eclipse and run it through their software. After much debating, I decided to look up the instructions again and see if there was a recommendation. While I was hunting around, I noticed two very, very useful things:

  1. Apple’s Xcode suite allows you to run Drupal patches.
  2. You can patch files using the OS X terminal without any need to install special software such as what I needed to do to run patches through the Windows Command Prompt. You don’t even need to have Xcode installed!

I already have Apple Xcode, as does every Mac user (if they choose to install it from their OS X disc), so that seemed like it would potentially be the easiest option, then I saw the instructions to patch a Drupal module using the OS X Terminal. It is so easy I can’t believe I didn’t start patching on my Mac sooner!

The process to patch a Drupal module on Mac

  1. Place both the original module file and the patch in the same folder.
  2. Make sure that they have the same name, with different extensions, so you would need my_module.patch and my_module.module.
  3. Open up the Terminal application. Either search for Terminal in Spotlight, or go to Applications > Utilities > Terminal.
  4. Navigate to the folder containing your files using the Terminal cd command. By default Terminal will start in your user directory, so if your files are in a folder called patch/my_module inside your user directory, you would type: cd patch/my_module. A little trick here to save yourself some trouble is just type cd and then drag the folder into the Terminal window. OS X will auto-fill the folder path for you.
  5. Run the patch using the patch command: patch < my_module.patch

That’s it! Simple as that.

If you would like to take a back up of the original patch file, type: patch -b < my_module.patch and a backup file will be created for you entitled my_module.module.orig

If you are patching Drupal core, the process is slightly different, you need to use the -p0 attribute to stop patch from asking you what file to patch, so you would do this as: patch -p0 < my_module.patch

Those are probably the main things you’ll use, but for more information, here are some other references:

One other thing to note is that if your .patch and .module files don’t have the same name, then Terminal does sometimes have issues with it. I’m not sure why exactly.

Hope that helps! If you’ve got any other tips for patching on OS X I’d love to hear them!

Posted in Web Applications | Tagged , , , , , , , , , , | Leave a comment

Placing Adsense After Your First WordPress Post

Posted on January 13, 2010 by matt

Google Adsense is a great way to make some money off of your blog, and by placing your code in a couple of key places in your template files, you can have it automatically displayed on all of your blog posts. One thing to keep in mind though is that you can only show 3 ads per page, any more than that and in most browsers an empty space will be left, which is to some extent ok, but in other browsers it can appear as a broken iframe or image. While an empty space isn’t ideal, it can be acceptable, a broken section on your site really isn’t.

It’s for this reason that most people will set up their template to only display Adsense code on the first post shown on each page where multiple posts are displayed. For example on your index page, category pages, tag pages and archive pages.

So to ensure that your Adsense code only displays once you need a way to make sure that when WordPress loops through each post, there is some way for it to figure out whether or not it’s the first post. Joe over at joehayes.org has written a great post about doing this.

Somewhere before the start of the WordPress loop, you need a base way to count. Joe has done this by placing the following code:

<?php $count = 1; ?>

Before the WordPress loop which starts off with:

<?php if (have_posts())

Then inside the content section of the loop which starts off with:

<?php the_content

You need to decide whereabouts you are going to put your Adsense code. Paste it in somewhere, this could be before or after the post content, or after the meta information, or anywhere else that be suit your particular template.

Now, just before the start of your Adsense code you need a way to check the number of posts. We’ll use some PHP to check the $count number that we set earlier.

<?php if ($count == 1) : ?>

This checks to make sure it is still 1. If it is, then your Adsense code will be displayed. If not then it won’t be.

Directly after your Adsense code we then need a way to make sure that the other posts don’t also appear as number 1.

<?php endif; $count++; ?>

This section of PHP tells WordPress to add 1 to the counter. So the next time WordPress runs through the loop, it will be a 2 instead, and it will go 1 higher for each post, so only the first post will appear as 1, thus only the first post will show the Adsense code.

It’s pretty simple but it does the trick very well!

If you wanted to display 2 or 3 ads, one on each of the first 2 or 3 pages, you could simply change the PHP around a little bit.

<?php if ($count <= 3) : ?>

The above snippet for example tells WordPress that if the count number is 3 or lower, than it should display the Adsense code with only 2 minor changes to the original code.

Posted in Web Design | Tagged , , , | Leave a comment

Don’t Settle For Less

Posted on January 9, 2010 by matt

I get emails from a website called Service Seeking when there is a job listed that is related to my field of work, specifically web design. I have practically given up on it though as there seem to be a number of firms on there now that come in with quote on under $1000 on pretty much every job, including jobs that I cannot see any way possible to do for under $6000 unless those working on it are paid around the $2 an hour mark. It’s just not possible.

I find firms that offer quotes like this to be degrading, they devalue the job and the designer. The brand image should be an important part of any business. A business should be willing to recognise that they need to spend money to get a job done well. Once it’s devalued, it can be difficult to help customers realise that our time as designers is valuable, that we are in control of how their business looks online and that subsequently if we are undervalued, we cannot make their business look good.

There was one new job listing posted today that reads:

“Hi, I am currently in the process of putting together my own … business and as I am still in the researching stage I am just simply after quotes so that when I am ready to hire in a few months I know exactly who to call. I am after a company that can build my … site exactly to my needs, be easy and helpful to work with, fast and can also host my website for me. I expect to pay no more then $1000 if not less and would like my website to be put together in a couple of weeks as when I am ready to go I want to get up and running asap.”

I’ve edited out a couple of points that may make this business identifiable, but what they are asking for here is pretty unrealistic. Part of one point that I had to remove is that they are after e-commerce functionality as they need to be selling things online. They want it for under $1000 AND done in a matter of weeks. Basically it’s a case of wanting the world for nothing, which is becoming all too common in web design. Let’s break it down and look at it more closely.

Let’s say we use Drupal for the content management system on this project with Ubercart handling the e-commerce side of things.

  • Installation of Drupal with Ubercart and other required modules could be done in about half an hour.
  • Customisation and testing of Drupal, Ubercart and other settings could take anywhere from an hour upwards. In my experience it averages at 5-10 hours.
  • Setting up and testing Ubercart with PayPal could take half an hour to an hour.
  • Doing up the graphics for a design with a customer that sounds like they are going to be picky could be anywhere from 2 hours to 15 hours.
  • Converting the graphic design to a Drupal template using another template such as Framework to form the basis of the design could be 5 to 15 hours as well depending on complexity of the design, not to mention ensuring that it suits the e-commerce side of things as well.
  • Consultation times, could vary from 1 to 10 hours.
  • Miscellaneous extra 1 to 15 hours.
  • Total minimum: 15 hours work.
  • More likely minimum: 40 hours work.

At an average rate of $85 per hour, that’s an absolute minimum of $1275, but more likely $3400. That’s still a cheap e-commerce website, and costs more than 3 times the amount they want it for. Most e-commerce sites that I have worked on have been around the 50-60 hour mark or higher. By devaluing the market, clients don’t realise just how much they need to invest in this sort of thing.

Compare it to radio or TV advertising where advertisers will unquestioningly pay $5000 upwards on advertising campaigns, many looking at over $20,000 for one campaign, it’s a big difference, especially considering your website is advertising for you 24/7 compared to your TV or radio advertisement that’s only 30 seconds or so here and there!

One thing to keep in mind is that you always get what you pay for and you certainly cannot get the world for nothing. Don’t get me wrong, there are some quality designers that have specials and do quality work for cheap. In the end though you need to analyse what you need and be prepared to pay for it. You don’t have to pay top dollar, just ensure that what you are paying for is what you really want.

A final example to leave you with. I had one client previously whom I quoted for. They decided to go with another group who quoted them about a fifth of what I did. After the other group completed the website, I thought I should point out to the client the (numerous) accessibility issues with any non-IE7/8 browser. By the time they had paid the other group to get everything right, they ended up paying more than what I had quoted them in the first place, so paying a bit more to start off with would have saved them both time and money, and potentially saved them on any damage to their reputation that the poorly designed website could have caused.

Investigate your options and make an informed decision, don’t just go with what seems to be the cheapest.

Posted in Web Design | Tagged , , , , , | Leave a comment

Adwords Management

Posted on December 23, 2009 by matt

I picked up a new domain name yesterday, http://adwordsmanagement.net.au which I’m thinking I’ll use to create a landing page relating to Google Adwords management as part of the TerraMedia website. I’m not sure when I’ll get round to it though as I’ve got a number of other things on my to do list that are of a much higher priority.

It is quite a good domain name to use for an Adwords management landing page, or even more so for an entire website relating to Adwords management simply because it has exactly those terms in the domain itself – Adwords management. It would be better if it were a global domain, such as a .com or .net, or even if it was the .com.au country coded domain simply because those ones are all easier to remember. Regardless of that though, I think it has potential.

If I haven’t gotten around to doing anything with it when you are reading this, and you are interested in purchasing it, I will consider selling it if the offer is reasonable, so you are welcome to make an offer. Otherwise, hopefully I’ll be setting it up within the next couple of months.

Posted in Domain Names | Tagged , , , , | Leave a comment

Using the GMap Module with Drupal’s Private File System

Posted on December 23, 2009 by matt

If you use the GMap module with your Drupal installation, something you may not realise initially is that a file is created in your Drupal file system called gmap_markers.js.

By default this file goes in sites/default/files/js/gmap_markers.js and is not the same file as the gmap_marker.js file in the Drupal module directory.

When the Drupal private file system is enabled, you cannot directly access a file in the sites/default/files directory, this means that when the the gmap_markers.js file is looked up, Drupal doesn’t allow access to it. Fortunately, GMaps provides a way around this.

Change the location of gmap_markers.js

The first thing you need to do to resolve this issue is to change where the gmap_markers.js file is located. The next thing you need to do is to tell GMap where to find it.

  1. Pick a location outside of the Drupal file system. For example, files/js/gmap_markers.js instead of sites/default/files/js/gmap_markers.js
  2. In your Drupal administration section, go to your GMaps settings and below the “Google Maps API Key” text box, there will be an option to specify the path to gmap_markers.js from the Drupal root directory.
  3. Enter the path.
  4. Save the changes.
  5. Click the “Regenerate” button in the “Regenerate Marker Cache” section.

Your cache should now be rebuilt in the new location using these settings. This should resolve any private file system issues relating to the GMap module in Drupal 6. Drupal 5 may vary a bit and I have not tested this, but I suspect it should still resolve the problem, for the most part, but you may need to use a different directory than what I suggested.

Good luck, if you have any issues or other tips, such as for Drupal 5, I’d love to hear about them in the comments.

Posted in Web Applications | Tagged , , , , , , | 2 Comments

CSS Clip Property

Posted on November 14, 2009 by matt

I recently came across the clip property on the Web Designer Wall, it’s a property I’ve not heard of before, probably because I’ve not really had a need for it, but now that I know what it does, there are so many things it would save time with!

The example below is an excerpt from the Web Designer Wall:

.clip {
 position: relative;
 height: 130px;
 width: 200px;
 border: solid 1px #ccc;
}
.clip img {
 position: absolute;
 clip: rect(30px 165px 100px 30px);
}

How it works is you have a surrounding element, such as a div or li which sets the overall width and a border which gives the appearance of masking the image. It also sets the position of relative so that on the img tag, we can absolutely position it within the outer element.

The img tag is then set to position: absolute; with a clip property that clips the image to a rectangle shape (so it can also be a square).

The uses of this property are potentially huge, especially for image galleries, and you can also resize images by specifying the width and height on the img tag. Perfect for a gallery, as long as the images you are scaling aren’t huge, you don’t want images that appear small ot take a long time to load after all!

The big downside of this is that according to the SitePoint CSS reference, Internet Explorer up to and including version 7 do not fully support it, so you may need to use a variation on the syntax especially for Internet Explorer. The way I understand it,  you just need to use spaces instead of commas in the rect() syntax for Internet Explorer, but I haven’t had a chance to test this yet to be sure.

Even if it doesn’t work fully in Internet Explorer, you could easily implement it in a way that will gracefully degrade in IE.

I’m looking forward to using this property, have you used it on one of your sites? I’d love to see how you’re using it, let me know in the comments!

Posted in Web Design | Tagged , , , , , , , , | 2 Comments

What I’ve been Doing – Yahoo Pipe Feed Aggregation

Posted on October 26, 2009 by matt

For KIB216 I have created a pipe which takes an RSS feed from numerous sources where I post blogs and updates, including:

It then lists them in chronological order:

Posted in Web Applications | Tagged , , , , | Leave a comment

Embed Flash video in valid XHTML

Posted on October 24, 2009 by matt

Getting a Flash video to embed in an XHTML strict document without breaking validity is something that has always been a frustration to me, as I aim for every website I build to be written so that it validates and is the most search engine friendly. After a bit of a hunt around, I came across this code snippet from Yoast.

Basically, the key is the <embed> tag that usually gets used. It’s not valid and it turns out, it’s not actually needed. So basically, you want something that looks like:

<object type="application/x-shockwave-flash"
	data="music/sound.swf"
	width="0" height="0">
	<param name="movie" value="music/sound.swf" />
	<param name="quality" value="high"/>
</object>

Thats basically it, just change the width and height to the dimensions you need and change the path in object and in the movie parameter. There you go.

As Yoast indicates, this doesn’t automatically update the Flash player for clients if a new version is needed, but thats fine for my purposes at the moment. You would need to add in a codebase attribute to the object tag in order to have it automatically check, but I think thats for another time.

Posted in Web Design | Tagged , , , , , , | Leave a comment

Find your Latitude and Longitude

Posted on October 16, 2009 by matt

While I was experimenting with Yahoo Pipes for the Flickr photo display mashup I made the other day I found another mashup which could potentially be very useful.

It is simply called “Find Latitude and Longitude” and does pretty much exactly what it says.

You are shown a big map which is pulled from Google Maps and you can subsequently navigate the map just like on Google Maps. The latitude and longitude of your cursor is shown below the map, and if you click on a location, that latitude and longitude is stored below the map along with the address until you click on another location.

The interface for locating a latitude and longitude on http://www.findlatitudeandlongitude.com/

The interface for locating a latitude and longitude on http://www.findlatitudeandlongitude.com/

This makes it very quick and easy to find the latitude you are looking for. Unfortunately, it doesn’t have an address search option, but if you know where it is and how to use Google Maps, you can quickly navigate to the locatino you are after and grab the latitude and longitude for it.

Uses

This is something that has a lot of potential use for in web site development for determining geocodes for the geolocation tags of a web site. An option, such as a copy to clipboard button that copies the longitude and latitude in a single string could be a nice extra feature for this purpose that isn’t currently available.

Obvious other uses are mashups such as the Flickr mashup I mentioned earlier which I used the latitude and longitude for.

Aside from that I’m not sure that there are a significant number of other uses, aside from just general curiousity or needing to know the latitude and longitude of places for planning say a hiking expedition.

Final comments

The interface is very simple but effective, the design could perhaps be spruced up a bit to make it a nicer site, but I don’t think it’s really necessary.

I think adding the extra clipboard functionality would make this tool tremendously more valuable than it already is, and it isn’t something that would take that much more to add I don’t think, after all the information is already being printed, it’s just a matter of some JavaScript on a button to store it in the clipboard, ready to be pasted.

What do you think? What else could you or do you use it for?

Posted in Web Applications | Tagged , , , , , | Leave a comment