drupal 7 Archives - Ben Tedder

Add HTML5 Video support to Drupal 7

22 Jun
2012

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!

1 Comment

TinyMCE image uploader button “not showing”

10 May
2012

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.

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

30 Jan
2012

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.

How to Create Multi-Language Menus in Drupal 7

21 Dec
2011

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

10 Comments

Create a Simple Photo Blog in Drupal 7

2 Sep
2011

What you’ll need:
Drupal 7, that’s it!

Step 1: Activate the “blog” setting in the core module

Step 2: Configure Images Styles
Go to Configuration > Media > Image Styles. Add a new Image Style called “blog-style”. Add a “scale” effect. Add a width of 600px. This will ensure all of your image align to the width of the blog.

Step 3: Add an image field
Go to Structure > Content Types and click “Manage Fields” on the Blog Entry content type. I turn off “show author” in the settings of the content type itself. It makes for a cleaner front page. Ok, then go add an image field. Label it “Image” and give the field the name “blogimage” or something. The field data type should be image. Once you click save it will allow you to edit the settings of that field.

Step 4: Settings
Under “Image field settings” you have an option called “number of values”. This is where you will select if you want your image field to allow just one image (a more typical “photoblog” style), or multiple images so each blog entry can have its own “gallery”. I’m going to select 1 photo for the sake of this tutorial.

Step 5: Default Display
Make sure you are still in Structure > Content Types > Blog Entry. Click on “Manage Display”. For the label of your image, select “hidden”. Click the little gear on the right side to configure the display. Select the “blog-style” image style. Link the image to nothing.

Step 6: Teaser Display
Click “Teaser”. Make sure both fields for the body are hidden. For the image, use the same settings as in step 5.

If you follow those instructions, you will wind up with a blog in Drupal that shows the title and the photo. When you click on either of those, you’ll see the full blog post that has the description/body as well.

4 Comments

Recurring Calendar setup in Drupal 7

1 Sep
2011

What you’ll need:

Drupal 7.x
Ctools
Views
Date (includes date_api & date_views)

Download the three modules (Ctools, Views, & Date). Install the modules and activate. Note: the Date module requires that you set the timezone and first day of the week settings. If you haven’t, it should alert you of that when you install the modules.
Once you install these modules, you will see nothing different right away. No new content types are created…nothing useful that you can see. However, click on Structure > Views, and you’ll see what the Calendar module has done. You can see it has created a “Calendar” view. This calendar view includes a block, a feed, and a page. We’ll come back to this later.
Next go to Structure > Date Tools. Here is where you will create your calendar item. It will create a bunch of views, the correct content type, etc. Follow the date wizard to setup your calendar.

Some recommended settings and things to remember.

In the “Date Field” section, make sure and select the correct option for “show repeating date options”. Coming back and changing this later only creates problems. Decide now whether or not you want repeating dates.
In “Advanced Options”, confirm the way you want this calendar to handle the timezone. If you want no timezone conversion (my suggestion for most projects), then select that option.
You’ll want to select “yes” for “create a calendar for this date field”.
And, you’re ready to go! If you go to “Add Content” you’ll see your brand new “Date” content type. The calendar tool is fairly basic in this module, but you’ll see it has quite amazing recurrence features, which is nice.