designguru's blog

How to install APC on Media Temple's Gridserver accounts Aug 12 '10

I freaked out a little this morning when I noticed that a key resource I had bookmarked was missing from the web, well almost!  Thanks to Google's cache I dug up the instructions originally posted on urbanmainframe.com on how to install APC (for displaying realtime upload progress details next to the field uploading a file in Drupal, for example) on a Mediatemple account.

Et voila:

Installing APC on Media Temple Grid Server

1. Telnet or SSH onto your GS server

2. mkdir /home/#####/data/lib (where “#####” is your Media Temple account number)

3. mkdir /home/#####/data/lib/php

4. wget http://pecl.php.net/... (at the time of writing, this is the latest stable version - adjust as necessary)

5. tar zxvf APC-3.0.19.tgz (again, adjust as necessary)

6. cd APC-3.0.19

7. phpize5

8. ./configure --enable-apc --enable-apc-mmap --with-apxs2=/usr/sbin/apxs --with-php-config=/usr/local/php-5.2.6-1/bin/php-config

9. make clean

10. make && cp modules/*.so /home/#####/data/lib/php

11. Finally, add the following code to your php.ini file:
extension_dir = /home/#####/data/lib/php/
extension = apc.so

That’s it. APC should now be installed and you should be able to measure a significant improvement in your PHP script performance.
 

Using Imagecache to provide a hover state image (preview) Jul 14 '10

Often cases it can be useful to display a larger version of an image to the site user when they hover their mouse over a thumbnail on your site (a simpler interface than the magnification idea I've blogged about). 

There is a ton of javascript floating around out there on the Web which you can use to do this but I've just come across a cool drupal module (Hover Preview for Imagecache) that integrates cleanly with imagecache; allowing you to choose a hover relationship between any two imagecache presets on node field displays as well as in Views!

Explaining why the Economist chose Drupal Jun 16 '10

Here's an interesting short interview Leisa Reichelt, a user-experience specialist who worked with Mark Boulton design on the Drupal 7 User Experience Project, uploaded just about a year ago - when the Economist Magazine had begun a shift over to using Drupal for their websites.

How to add a zoom/magnify feature to images Jun 8 '10

Lightboxes have become a de facto standard for displaying larger-than-thumbnail images to site viewers over the past couple of years.  They work pretty well for this function but there are instances when you may want to display details in an image that would require it to be large yet contained within a small area.

We just added a magnification/zoom function to a client site which I thought I'd share - the idea was to let clothing shoppers of the indie label JUMA be able to see the fine detail on garments whilst shopping online.  We had already implemented the Views Slideshow module to provide an interface where people could hover over thumbnailed images to instantly view a larger version (see the left side of the image above) but wanted to add a third level of enlargement.

After doing some best-approach research this morning I found two solid ways to do this using modules powered by javascript which are easily available. 

One option was commercial and the other free, but the real decision for us came down to the commercial one because it played nicely with Views Slideshow - that module is Magictoolbox.com's Magic Zoom.  Both this and Cloud Zoom offer essentially the same functionality - they create an image display option (for cck image fields per content type and in Views) and Magic Zoom can automagically override the display site-wide of a specified imagecache preset.

Both solutions are easy to implement and offer some cool customization options to help you aesthetically integrate the magnification window into your themed site but we found that Cloud Zoom would only load the first item in a View Slideshow list of nodes.  For anyone not using Views Slideshow I'd highly recommend checking out Cloud Zoom.

Adding a Facebook Like widget to your Drupal site Jun 7 '10

After searching around in vain this morning for a module to include the nifty Facebook Like widget on some client sites I came to the realization that it should work just like the Tweetmeme solution I cooked up back in December last year.

The idea is that Facebook gives you an iframe tag to use per domain - so instead of hard-coding a URL into the code to let people 'like' a specific page, just make that URL call dynamic using the PHP so that the tag works on any node you want it on.  From there, all you have to do is embed the code in a node-type.tpl.php template file and boom, you're off! 

Here's the code with a wrapper div you can use via CSS for extra positioning etc:

What you'll notice is that you don't have to do much - just get the code from facebook then include your own root URL and add the php to call specific nodes right after it:

<?php print $node_url ?>

You can see this in action here on the Why Drupal blog at the end of each post.

New Release of Aegir & Installation Instructions Feb 2 '10

You might have read a post I did recently about how Aegir makes managing Drupal installs really easy.  Well, wondered how to get it all installed?  Here's a video with instructions.

Also - be sure to read Development Seed's post about the new release for all the goods on new changes etc...

Internet Explorer 7 work-around for multiple css file limitation Jan 21 '10

When you're building sites which use many contributed modules (+ views and panels) you can end up with a ton of CSS files being called at the same time.  Generally the main down-side to this is load-time, so most Drupal site developers choose to use the css-aggregation function (found under Site Config > Performance) that comes stock with Drupal.

The problem with using Drupal's aggregated CSS is that you end up with a crazy mashed-up chunk of CSS which can be a pain when you're still editing it live on a site in development (for example, using firefox's web development toolbar or firebug).

Asides from the load-time issue, I noticed something else whilst doing x-browser testing on a new site we're developing @ design guru; Internet Explorer 7 won't load more than 30 (or 31?) CSS files at once!  Supposedly a security feature, this annoying phenomenon makes CSS/styling dev work a pain in ie7 but fear not, there's a work-around and its as easy as installing a module!

The 'IE Unlimited CSS Loader' module will save much head-scratching - it fixes the ie7 problem and lets you still work on your site's css without using the Drupal aggregator. Nice. :)

The better way to manage your Drupal sites Jan 12 '10

As anyone managing multiple Drupal sites knows, it can become a nightmare to either try and keep them up-to-date via old-school download-modules-then-upload-via-ftp or svn methods.

Last week Walkah blew my mind by showing me his new setup that used the Aegir Hosting Method and Drush Make to rapidly deploy new sites from known profiles (oooohhh Drush Make..) as well as easily upgrade modules etc for existing sites.  I'm about to switch over to this method for hosting all of our client and incubator sites over @ Design Guru and I thought to clue you all in to a great write-up on how these things come together, thanks to mig5.net [read it here]...

Notes on Open Atrium Beta 4 Jan 12 '10

Development Seed's just announced that their Open Atrium distro/'installation profile' of Drupal is just about ready to be released.

For those of you who haven't heard of it yet, Open Atrium is an interesting Drupal-built Project Management package (basically, some modules, Drupal 6 and a custom theme with some config options setup when you install it).

I'll get into a fully hands-on review of it soon, but for now, pop over to Development Seed's blog to read the deets and be sure to watch the video below to clue into this cool free project.

Adding Tweetmeme to your Drupal site Dec 15 '09

There are so many reasons to making your site easily visible on Social Networking websites and platforms - they raise general visibility and offer access to communities which may not otherwise find the information you spend time publishing in your posts.

Of course, one of the most agile word-of-mouth Social platforms on the web is Twitter and you may have recently noticed a pretty cool widgety thing people are using on their blogs/sites to include a 'retweet' link and counter of how many times a post has been tweeted - its powered by a site called 'Tweetmeme' and installs pretty easily on any website - whether using static html or a CMS like Drupal.

When you take a peek at the tweetmeme page containing the necessary embed code it may not be too easy to tell how to use it with your Drupal site - and though there's a module out there for Tweetmeme, it may not offer the flexibility you require for clean theming.  Fear not, there's an easy way to go about embedding this and all it takes is a small modification of the de facto embed code. 

All you have to do is:

  • copy the following code,
  • replace 'http://mysite.com' with your own root URL and:
  • replace 'twitterhandle' with your twitter handle (if you want reweets to automagically incude @yourtwitterhandle - you can opt to delete that line from the code otherwise.
<script type="text/javascript">
tweetmeme_style = 'compact';
tweetmeme_url = 'http://mysite.com<?php print $node_url ?>';
tweetmeme_source = 'twitterhandle';
</script>

The trick then is to take this code and include it in the appropriate version of node.tpl.php for your theme - for example, if you only want the tweetmeme widget to be displayed in blog posts for a content type called 'blog' then bung it into whatever place you want in your node-blog.tpl.php file.  You can learn more about versioning the node.tpl.php file for this purpose in the drupal.org theming guide.

Basically what we've done here is include some php to tell the embed code the specific URL for each post - without this php it will only work on full-node view pages and not Views/Panels that list multiple nodes.

*You can see the widget in action here on this site below - just to the right of the tags for each post.

Syndicate content