Drupal | ben tedder

22 Jun
2012

Add HTML5 Video support to Drupal 7

There’s not much out there in terms of how to install video support for HTML5 video (mp4, ogv, webm, etc.) when using Drupal 7; so here’s my tutorial.

Install/enable the Video.js module
Add a field to content type
Modify field settings
Manage the content display
Upload files
Done!

Step 1 – Install/enable the Video.js module

Go to http://www.drupal.org/project/videojs to download the Video.js module. Install it, and then go to to Modules and enable it.

Step 2 – Add a field to content type

Create a new field in your new (or already existing) content type called “video”. Give it a data type of “file” and a form element type of “file” (this threw me off for a while).

Step 3 – Modify field settings

The next step involves setting the settings of our new field. First, make sure you allow the following file extensions: mp4, ogv, flv, webm

Next, scroll down and set the number of values to unlimited (so we can upload each video format for different browsers)

Step 4 – Manage the content display

Next, while still editing your content type, click Manage Display. Set the format of the Video field to Video.js : HTML5 Video Player and the label to “<Hidden>” (my preference).

Step 5 – Upload Files

The bulk of your work is done! Now, create a new piece of content that of that content type and upload 1 or more video formats (webm, ogv, mp4, flv). The module will pick whichever one is best fit for the browser

Step 6 – Done!

Enjoy your HTML5 video files in your Drupal 7 site!

10 May
2012

TinyMCE image uploader button “not showing”

I’ve had this happen several times during a Drupal project. The TinyMCE image uploader button (pictured below) doesn’t show up on accounts that aren’t the “site maintenance account”. Even if the account is an administrator account, the button won’t show up.

But there’s a fix! It’s really simple, but for some reason it eludes me for about 30 minutes each time. So this post is really for my own sake to reference later. If it helps you too, great!

Fix: Go to Configuration > Media > IMCE

Then make sure you add the correct profile to the correct role. If you’ll notice, the “Site maintenance account” already has a profile by default. That’s why when you’re editing it seems as if the uploader button is present, but when you sign on as a different user (even an admin) it disappears.

27 Mar
2012

Drag-and-drop menu rearranging not working in Drupal

Just a quick post for those who are having this same issue. The key, I’ve discovered, is to make sure the javascript files are being aggregated. Go to Configuration > Performance; scroll to the bottom of the page and click “Aggregate JavaScript files.” That’s it!

9 Mar
2012

Drupal Fix: Use of undefined constant MENU_PREFERRED_LINK

I was on Drupal 7.10 when I upgraded my internationalization (i18n) module. This Use of “undefined constant MENU_PREFERRED_LINK” error came up and basically disabled the whole site. Easy solution?

Install Drupal 7.12 = fixed

Enjoy!

30 Jan
2012

Embed a Block (created from a view) in a Node – Drupal 7

You need to embed a block (created from a view) in a node. It’s relatively easy to embed blocks in nodes, it just requires a bit of php. Use the following PHP snippet (don’t forget to enable the PHP text format):

<?php
  $block = module_invoke('module_name', 'block_view', 'block_delta');
  print render($block);
?>

Change module_name to views (for blocks indeed created from a view).
Change block_delta to the id of your block. Go to Structure > Blocks and hover/click the “configure” link next to your block. The block delta is the string before the /configure line of the url. In my case it was news_feed-block.

21 Dec
2011

How to Create Multi-Language Menus in Drupal 7

This tutorial will show you how to create a site in Drupal that allows the user to switch languages and see a different menu depending on the language they have selected.

Click to skip ahead:
Step 1: Enable all modules
Step 2: Add a language
Step 3: Detection and Selection
Step 4: Enable Multilingual Support for content types
Step 5: Create English Content
Step 6: Created the translated content
Step 7: Add support for multilingual menus
Final Results

Step 1: Enable all modules
Content Translation (core module)
Locale (core module)
Internationalization
Variable

optional:
Language Icons
Translation Overview

Step 2: Add a language
Go to Configuration > Regional and Language > Languages

The default language is English, and you can use the “Add Language” link to add either Predefined (see below) or custom languages.

Step 3: Detection and Selection
For this tutorial I’ve chosen to use the “URL Prefix” setting. This tells Drupal to use domain.com/es for Spanish and domain.com/de for German.

Step 4: Enable Multilingual Support for content types
Either create or edit an existing Content Type and click “Publishing Options”. Here you will see the option for enabling multilingual support. Select “Enabled, with translation”. This will allow you to translate a node into multiple languages.

Step 5: Create English Content
When you create your nodes, make sure you are using the correct language, not just “Language neutral”. This is important because when you create the URL alias and Menu link title it will know which menu to put the link in.

Once you’ve created your node you should see a “translate” tab. If you click this tab you’ll be able to add a translation to this node.

Note that if you have the “Translation Overview” module installed (I highly suggest it) you’ll get a nice little window that tells you which languages you’ve added, which require priority, etc.

Step 6: Created the translated content
When you create your translation give it a translated menu link title, but give it the same url alias as the original node. Because you have multilingual support installed, it won’t give you any errors for having the same URL alias (remember, it’s putting the Spanish nodes at domain.com/es and the German nodes at domain.com/de).

Step 7: Add support for multilingual menus
Go to Structure > Menus > Main Menu. Edit the menu and enable the “Translate and Localize” option. This will switch your menu items depending on what language the user has selected site-wide.

You’ll see you have both the English menu items and the Spanish items. You can order these like you wish, but know that only the Spanish links will show up when Spanish is selected as the main menu (you’ll know because the URL will say domain.com/es).

And your final product:

All menu items in English

And all menu items in Spanish