Category Archives: Dynamic Media

Zurb responsive tables within Drupal

Responsive tables are a big challenge. Tabular data is often very important and you don’t want to hide the data just to keep the nice responsive design in shape. Currently within Drupal I am not aware of any defacto solutions. I experimented with jQuery Mobile’s technique table reflow, the footable module, and lastly Zurb’s responsive tables.

I had one criteria for a successful solution; my users should not have to do anything to make their table responsive. I did not want them to right click on the table and add a class, I didn’t want them to have to build all of their tables with views, just plop in a ckEditor table and hit save.

A secondary criteria was that the solution should be lightweight since it is primarily to be used by users on mobile devices and we don’t all have 4G LTE in our offices and living rooms as of yet. All of the solutions mentioned above use some sort of CSS hook to indicate that the table needs to become responsive at certain breakpoints. The lightest weight solution for me turned out to be Zurb’s approach.

To automate the insertion in the HTML of a CSS class I turned to the Flexifilter module. Not enough people use this module but what it allows you to do is to create a Drupal input filter, so really an output filter, on anything that is formatted, like your WYSIWYG output.

After enabling the module you need to go to Structure -> Flexifilters -> Add New Flexifilter.

Setting up a flexifilter in Drupal 7.
Configuring a filter.

Inside of a filter you have several options but the Pattern Based Text Replacement widget works with regex. Once a filter is configured, you have to enable it. Once enabled, head over to your text format configuration screen and enable your new filter.

Configuration -> Content Authoring -> Text Formats -> Full HTML. I put the filter as the last item to be ran so that I can ensure the class I want added is actually added.

Enabling a text filter in Drupal 7.
Enable the text filter and place it as the last filter to run.

So now we have a class called responsive being added to tables folks create. How does this help us? We need to leverage Zurb’s great work to answer that. You can grab the source from their GitHub project page. We want two of the files, responsive-tables.css and  responsive-tables.js. You can discard the rest. Place the css file in your theme/css directory and the js file in your theme/js directory.

Open up your file and tell Drupal about these two new files. In a Zen sub-theme it looks like this:

stylesheets[all][] = css/responsive-tables.css
; Optionally add some JavaScripts to your theme.
scripts[] = js/responsive-tables.js

Next, open up the responsive-tables.js file as we need to wrap it in a Drupal safe closure. At the very top of the file add

(function ($, Drupal, window, document, undefined) {

and at the very bottom add

})(jQuery, Drupal, this, this.document);

This allows the code that the Zurb folks wrote to run without conflict with the other jQuery that Drupal executes. That is pretty much it. Save those files. Go to Structure -> Appearance to reload the info file and your table should now be responsive at small window sizes.

Zurb style responsive table rendered in Drupal 7.20.
Zurb style responsive table in Drupal 7.20.

Image Captions in Drupal 7 – A method

Image captions are supposed are a fairly standard item in a web developer’s toolkit. In a modern CMS they seem to be a given. However, Drupal leaves this to the contrib space, as it should, since each site has different needs. However, the lack of an adopted contrib method for achieving image captions was a bit surprising.

With Drupal 7 the media module is used to handle media. No problem, however it doesn’t do anything to allow for automatic captions to appear. However, it does allow us to show users when they upload an image that an alt tag is a good idea and a title tag can be used. Most auto-caption techniques rely on that title tag to be used as the caption and you show it with a bit of javascript and CSS.

My goal for the end user was to have them get captions for free but have the ability to turn them off. I do not want them to assign a special class for a caption to appear because in my use case, the majority of folks want the captions. However, to disable a caption I want a fairly straight forward method that can be accomplished in the WYSIWYG editor.

To make this work I leveraged several contrib modules and now have it working except it still will not automatically show in the WYSIWYG editor. That last issue seems to be somewhere that improvements can still be made.

Ingredients (List of Modules):

  • Media Module 7-x.1.2
  • Insert
  • Image Caption
  • WYSIWYG with the CKeditor Library
  • HTML Purifier (Not needed if you allow full HTML)
  • Any dependencies of the above modules, i.e. ctools, views, etc…


Go ahead and download the modules and install them on your site whatever your preferred method. You can enable them as well.

Now, most of these modules auto-configure themselves. For this example we will use the basic page content type but add an image field.

Basic Page content type
Basic page content type configuration screen.

Notice that we use the image widget which is augmented via the media module. The next screen we need to edit is the images field. Make sure to check the Enable Alt field and Enable Title field.

The alt and title field checkboxes are checked.
Don’t forget to enable the alt and title fields.

Right below those check boxes, if you have the Insert module enabled you will see a collapsed field labeled insert. Expand it. Check the Enable Insert button check box. Choose the styles you want to make available to your users. Add the word “caption” without the quotes to the Additional CSS Classes text field. This will add the caption class to every image inserted into your nodes. This makes the caption magic happen automatically, as long as you fill out the title field with each image, because the image caption module looks for the class caption on all images.

The insert configuration screen.
Enable the insert button, choose some styles, and add caption to the classes field.

Make sure you have the image caption module enabled and let’s make a new test node.

Go to Content -> Add Content -> Basic Page and title your new node to test the image caption.

Then go down to your image field and upload a new image or graphic. Fill in the alt field and the in the title field add the text you want for your caption. Click the insert button near the style dropdown menu and the image appears in your post.

An image field being configured in Drupal 7.

Now, click the preview button and you will see the caption appear beneath your image. Styling the caption class is up to you.


A picture of the author with a caption below.
Look ma’ a caption!

Fairly awesome.

Why this approach:

OK, so why did I decide to do it this way? There are a few other modules, notably jCaption. You could also make each image a node and then attach a caption field to the image. That approach seemed unrealistic as then I would have to easily allow authors to import nodes, into their post in an easy manner. However, the author would have to create at a minimum two nodes/entities just to create a page with one image. That doesn’t entice many people.

jCaption looks interesting except that you cannot turn off captions. Anything with a title attribute gets a caption. Sometimes, captions are not appropriate but people still want the contents of the title attribute to appear on mouseover. With the image caption module because the caption is controlled by a class, the user can edit the image in their WYSIWYG editor and remove the class. In the next image you can see the caption class has been removed, meaning no caption will appear. This gives control to the page creators which is a fundamental goal of CMS.

The advanced property screen of the CKeditor image window.
No caption class means no caption accompanying the image.


I am happy with this approach except for the fact that users cannot see the captions directly in the WYSIWYG. It would be fantastic if that were possible and it will require more research. Since the caption appears because of jQuery we would have to utilize a drupal behavior to fire whenever an image is inserted and then with ajax save the state of the page and add in the caption. It sounds messy.

I wish there was an easier way for users to disable the caption as well. It is not hard to go into the properties of an image but it would be great if they could just click the image and remove the caption class via a dropdown menu or contextual editor.


This seems to be a robust approach that helps the user by minimizing the knowledge and time needed to add captions. I need to find a good way to alert them of how to remove a caption, but I am hopeful for the use of this technique.

New themes and Concrete 5

As you may have noticed, I have switched the theme on the blog to something other than the default WordPress install. I did this in anticipation of eventually getting my Google AdWords campaign back running at the bottom of the page.

Concrete 5 Logo
Concrete 5 Logo

Along with the new theme I installed Concrete 5 on the Linux server to evaluate it and eventually move my site to the software. Concrete is a Content Management System that I believe has great promise. It balances the need for attractive front ends on websites and allows for powerful customization ala PHP. It is straightforward out of the box too. Check out my default install. The link will open the Concrete site in a new window. I applied one of their themes to the default site but have not yet done anything with it.

Installation was extremely straightforward, possibly even easier than installing WordPress. The goal with Concrete will be to integrate my Facebook information, blog posts, and any other services that I use with OpenId authentication. I want it to be easy for my friends and family to check out what I am up to when I am away this summer wrapping up my student teaching.

I am very impressed with the Concrete product and am excited to start making it my own.

Using Dynamic Media in the classroom

Citation: Bull, Glen & Garofalo, Joe. (2009). Dynamic Media. Learning & Leading with Technology, (36, 5), 40-41.

Summary: Dynamic Media consists of six characteristics, Cultural: media that can be remixed, shared, and is social. The authors use YouTube as an example of Cultural Dynamic Media. You can post video, share it with others, and rate the videos themselves. Google Earth is an example of technical Dynamic Media: Interactive, Multilayered, and Mobile. This new media needs to be used in the classroom to engage students and encourage them to gain a deeper understanding of the content.

Response: Before reading this article I did not really consider interactive applications such as Google Earth as dynamic media. The piece mentions mashups, that was my initial thought of dynamic media when scanning the article. After a thorough read the shift towards Dynamic Media is great. As more and more portable devices that can connect to the internet become available, this type of media will be more useful. Imagine a lesson where you as a teacher post a google earth route that students need to follow. Along the way they need to collect evidence of where they have been. Aggregating data from several sources the students can add to the path you created. At the end of the lesson you can fly through the route and record it as a movie and have each student explain what they found and why they chose to include it on the trip. That is interactive and engaging. The author’s mention a book titled Remix by Lawrence Lessig. Lessig discusses, ” ‘interest-based’ learning.” This type of learning is possible with dynamic media. I encourage all future educators to read this article and let your imagination go wild.

Information Literacy – Paramount to deep understanding

Citation: Diana, G. Oblinger and Brian, L. Hawkins(2006). The Myth About Student Competency Our Students are Technologically Competent. Retrieved March 03, 2009, from

Oblinger and Hawkins assert that students must be trained in information literacy, not just technological competency. Most students already posses the tech competency but need help learning how to filter the massive amount of data that they can access via the computer. They pose 5 strategic questions for us to consider.

  1. What skills do students and faculty need in a digital world?
  2. Do we have an operative definition of IT literacy?
  3. Do we help students acquire the skills they need?
  4. Is IT literacy integrated across all units?
  5. Do we know how well we are doing?

I think the last question should be answered before addressing the prior 4. The importance of developing a measuring system is important because what needs to be taught is dynamic in IT. Focusing on Information Literacy, this fluidity which is IT, can be constantly revisited without having to rework the metric. Since IT is fluid, the evaluation system needs to be fluid as well. Possibly a set of authentic tasks could be presented to the student and using the appropriate technology and literacy skills, an answer could be formulated. Again, due to the rapid change in IT, understanding of the concepts and skills should be sought, not raw answers that may not be constant from one day to the next.
Doing this would allow teachers to integrate technology in ways that are authentic to their discipline and not superficial. In this way we help students achieve the skills they need in the content area we can honestly help them with.
Questions 1 & 2 are both nebulous and could be debated for years, I will leave them to others to shed light upon.