Pages

Tuesday, September 11, 2012

Comparison of Lightbox-modules for Drupal 7


Drupal has many modules available for displaying Lightbox-type content. Unfortunately for Drupal 7, there is only a few. Here's some of them reviewed.

What is a Lightbox?

Lightbox is a JavaScript application, that is used to show large images or other content in modal windows. 

Shadowbox

Shadowbox
Shadowbox is an online media viewer application that supports all of the web’s most popular media publishing formats. Shadowbox is written entirely in JavaScript and CSS and is highly customizable. Using Shadowbox, website authors can showcase a wide assortment of media in all major browsers without navigating users away from the linking page.
Current version: 7.x-3.0-beta5

Colorbox

Colorbox
Colorbox is a lightweight customizable lightbox plugin for jQuery 1.3 and 1.4. This module allows for integration of Colorbox into Drupal. Images, iframed or inline content etc. can be displayed in a overlay above the current page.
Current version: 7.x-1.0-beta4

YoxView

YoxView
YoxView is a free Lightbox-type media and image viewer jQuery plugin. It's easy to use and feature-rich.
Current version: 7.x-1.2

How to convert your Drupal 6 theme to a Drupal 7 theme


When migrating your Drupal 6 to Drupal 7, one of the most important issues is the theme. Luckily, the base of the themes in Drupal 7 haven't changed that much, so the conversion is pretty straight-forward. Here are some tips for converting your theme, divided on different files in the theme.

 

.info File

All CSS and JavaScript files have to be included in the .info file. Before, you didn't need to include style.css and and script.js, since the theme engine automatically included them. This is not the case any more, so here is how to include them in your .info file:
stylesheets[all][] = style.css
scripts[] = script.js
PHPTemplate is the default theme engine.  In Drupal 6, it was necessary to include this line in the .info file:
engine = phptemplate
Since PHPTemplate is already the default theme engine in Drupal 7, this line can be safely removed.

Page.tpl.php

"Primary Links" is now "Main menu" and "Secondary Links" is "Secondary Menu".  This means at all the variables need to be renamed regarding "Primary Links" and "Secondary Links".
$primary_links => $primary_menu
$secondary_links => $secondary_menu
$help, $mission and $closure are now regions. So this means that the default regions ($left, $right, $content, $header, $footer) have three additional regions. $mission is also renamed to $highlighted and $closure is $page_bottom. And also, since we now have $page_bottom, we also have $page_top, which should be put right after <body>-tag. Like so:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML+RDFa 1.0//EN"
 "http://www.w3.org/MarkUp/DTD/xhtml-rdfa-1.dtd">
  ...
  <body>
      <?php print $page_top; ?>
      ...
      <?php print $page_bottom; ?>
   </body>
</html>
$content is a block, not a region. In other words, like in Drupal 6 you could only put blocks after the actual page content, now you can assign the $content as usual in page.tpl.php, but in the Blocks-page, you can change the actual page content position in the Content-region. This allows you to put blocks before and after the actual page content.
$left and $right are renamed, now they are called $sidebar_first and $sidebar_second.
Two new classes for hiding content in page, .element-hidden and .element-invisible..element-hidden completely hides the element, but can be shown with f.ex. jQuery fadeIn() function. .element-invisible hides the element visually, but is still available for example screen readers.
$search_box is no more, instead it is a block.

 

Template.php

Function names in template.php have to have the relevant theme's name. So that means no more phptemplate-prefixed functions, they all need to converted to use the theme's name.
Alter hooks can now be used in themes. This includes: 
  • hook_page_alter
  • hook_form_alter
  • hook_js_alter
  • hook_css_alter

These are the main things that have changed in the new Drupal 7. By all means it's not all, there's A LOT more things that have changed, you can see them in Drupal.org: Converting 6.x themes to 7.x, but these should be enough for most themes to become usable in Drupal 7.

How to use Facebook Connect in Drupal


Let's face it, everybody and their mother are using Facebooknowadays. So having Facebook Connect as an login option would be really beneficial on your Drupal site.
Some of the reasons for this are:
  • Users don't need to register on your website.
  • Users can use the same username, no need to remember usernames & passwords.

It is also fairly easy to setup. Let's begin!

Requirements


Step 1: Downloading all the necessary files

  1. Install Drupal 7 and set it up.
  2. Download "Drupal for Facebook" -module
  3. Go to "PHP SDK for the Facebook API"-page on GitHub and download the latest PHP SDK for Facebook.
  4. Extract the files to "sites/all/libraries/facebook-php-sdk"

Step 2: Creating a new Facebook Application

  1. Go to "Facebook Developers"-page and select "Create new application"
  2. Write your "App Display Name" and accept the "Facebook Platform Policies"
  3. Keep the page open, we will need the APP ID & Secret later. You can also setup the icon for the Application on this page. Users when see it when logging in on your website

Step 3: Enabling the Facebook module

  1. Login as Admin to your Drupal site and go to "Modules" (admin/modules)
  2. Under "Drupal for Facebook"-fieldset, choose "Facebook API", "Facebook App" and "Facebook Connect" and click "Save".
  3. Go to "Drupal for Facebook"-settings (admin/structure/fb) and click "Add App"
  4. On "Label", write a name for this App, like "fblogin1". On "Facebook App ID" and "Secret" write the info from the Facebook page before.
  5. Select "Primary" under "Facebook Connect" and click "Save".

And you are all done! In "Blocks", there should now be a new block "Facebook Connect Login". Apply that to the region you want hit "Save". 

8 Tips for Optimizing Drupal


At times, Drupal can be quite a resource hog. Especially if you have hundreds or thousands of visitors on your website. That is why optimizing your Drupal site is an important task. Here's some basic optimizing tips for those who need it.

1. Disable unused modules

Go to http://yourdrupalsite.com/admin/modules and disable all the modules that you don't need. Uninstalling them can help too, but beware, this also removes the tables this module uses, so there's no way to recover database data that you have made earlier using this module.

2. Install DB Maintenance-module

This module can be found at http://drupal.org/project/db_maintenance. This module optimizes your databases during your cron-runs. Mostly the effect is small, but in the long run, it's good to have.

3. Remove content you don't need

This includes nodes, users etc which you don't need anymore. These types of content will fill your database with unnecessary data, which is good to remove once in a while.

4. Aggregate your JavaScript and CSS files

You can do this by going to http://yourdrupalsite.com/admin/config/development/performance. This page has a ton of optimization settings, so you should read through them all. Most important thing is under "Bandwidth Optimization". You should check as many of these as you can.

5. Use Memcached

Memcached is a bit of an advanced solution for optimizing your website, but for some people it is necessary. The Drupal module can be found at http://drupal.org/project/memcache. It has a ton of settings, so you should carefully read the documentation before using this module.

6. Tune your MySQL

If you are using MySQL as your database and you have access to your my.cnf, you should definitely download and run MySQL Tuning Primer Script. This script will analyze your database and recommend you in plain english which values in my.cnf you should change. This can lead to great performance boosts.

7. Avoid using PHP Code in your blocks and nodes

Using PHP Code in fields can have some performance drawbacks. The code is first fetched from the website, then it is executed by PHP. In this way, the code is never cached by accelerators or other caches. It can also be slower to execute than "normal" code.

8. Log your site with Devel-module

Using the Performance Logging in Devel-module, log some basic page actions. Analyze the data and look for what queries are taking the longest to process. Try to think of how to optimize these or if you can find another module which does the same job with better performance.