Category Archives: Drupal Theming

Display Audio File Description in node.tpl.php (Drupal Media module)

The audio field widget that is included in the Media module is great! You add a File field to your content type with the Media Browser widget. This allows you to create nodes and upload audio files and they display with a lovely little audio player without any effort on your part.

Here is what the audio field looks like in the node edit form.

audio-description

Here is what it displays like.

player

This is all wonderful, but I recently had a request to allow for multiple Audio files being attached to a single node. This was a quick setting change, of course, but I realized when you have multiple audio players on screen, you likely want a label or description to be displayed for each.

As you can see above, there is a description field, but it is only displayed if you opt to display the audio file as download link and you use a token.

I wanted it to display above each player. Here’s how I did it.

I created a theme template override for the content type (“concert”). I named the file:

node--concert.tpl.php

…and saved it to my sites/all/themes/mytheme/templates/nodes directory.

Here is my code. Yours will vary as you may be doing special things with other fields in this template as well.

Once you save this file, Flush all caches. You will now see the description field above each audio player.

Hide Those Drupal Node Edit Tabs!

Wouldn’t it be nice if you could have your node edit tabs (view, edit, manage display, etc.) without having them push your layout down 50-100 pixels? Well, good news: you can!

This is how the node tabs normally look (with my subtheme styles). Not even close to what my normal visitors will see..

Screen Shot 2013-11-14 at 10.37.50 PMThis is what I’m going to show you how to do in this post…

Screen Shot 2013-11-14 at 10.29.30 PMYou can get a better sense of it from this short video.

Continue reading

How to Create a Slogan Randomizer Using PHP

One of my all-time favorite Saturday Night Live skits was “Stuart Smalley’s Daily Affirmations.

I’ve decided to have a little fun with PHP by adding random Stuart Smalley quotes to the gench site I’m building. I only want one user to see these quotes (my client who is also my husband) and it’s really just a silly joke between us. As silly as this example is, this technique can be used for serious applications as well. Many is the client who wants rotating slogans in their branding zone.

Continue reading

How to Style Responsive Omega Subthemes

A few people have asked me how I made the new gench site responsive, meaning its layout adjusts depending on the width of the browser or device. You can see it in action here by simply resizing your browser window (or flip your mobile device from horizontal to vertical or vice versa).

Part of the answer is that I created a Drupal subtheme based on a responsive theme (Omega – but there are others). This is taking care of the actual media queries that create the various sized layouts or “breakpoints.”

Continue reading

Drupal Commerce: Indicating a “Sold Out” Product

For the music label site I’m creating, the client wants to prevent people from ordering items no longer in stock, but he wants to continue displaying them as they represent his discography.

For a high-volume Drupal Commerce site, you’re going to want to write or use a custom module for inventory control (like Commerce Stock), but that seemed like overkill for this project.

I decided to deploy a solution that doesn’t require any additional modules – just a little jQuery and the addition of a status field to my product variation type.

Continue reading

Font-awesome’s Handy .icon-rotate Classes

Please Note: This example was based on version 3.2.1 of the font-awesome library. I’m not sure when this occurred, but the current version of the font-aewsome library  (4.0.3) has changed all the class names for their icons. The example in this posting will work with version 3.2.1, but if you prefer to use the most recent font-awesome library, you should substitute the word ‘icon’ in class names with ‘fa’

For example, in 4.0.3, you would use…

<i class="fa-play fa-rotate-90"></i>

etc…

Image

A commonly desired feature on websites is an expanding/collapsing list, with a rotating arrow button.

I want this feature on both the gench FAQ and album review pages, and I want the currently expanded section to collapse if another section is expanded or if the currently expanded heading is clicked on again.

Continue reading

Creating ‘Previous’ & ‘Next’ Buttons For Drupal Commerce Product Nodes

The gench site I’m building has an inventory of a few dozen albums for sale (mostly CDs).

Once I created all the products and styled the product display, I was pretty happy with my online store except that it lacked functionality for flipping through the products. I want the gench store to feel a bit like flipping through the LP bin at a used record store.

I briefly considered creating a paginated (or paged) view, with just one product per page. In some situations, this may have worked fine, but it would have broken my lovely content-aware view blocks which display songs, reviews and artists for the currently displayed album. Maybe there is a way to do this, but I couldn’t figure it out (at least not quickly).

Plus, it seemed like this wouldn’t be that difficult to accomplish with some PHP and jQuery.

This is what I created…

Screen Shot 2013-09-12 at 1.44.31 PM

Here’s how I did it…

Continue reading