Author Archives: abonham2012

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

Leave a reply

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.

Meet the Friendly Ghosts: Casper, Phantom, Slimer and Wraith.

Leave a reply

This summer’s “Ghost Busters” movie was about naughty ghosts getting busted, but we’re going to discuss some very friendly and helpful “ghosts” who do some busting of their own: they bust (or detect) visual regression bugs on your website.

A visual regression bug is a style defect that is unintentionally introduced to the site, usually when a well-meaning developer changes some other styles. Unless you test every page (and every resolution) of the site every time you make a style change, these regression bugs can go unnoticed and get deployed to your live website.

Conducting this much manual testing on regular basis would be quite costly. It would also not be very reliable because humans often overlook slight variations in typography and layout.

Fortunately, this is where our friendly “ghosts” come in. Casperjs, Phantomjs, Slimerjs and Wraith are automated testing utilities that allow us to quickly and reliably compare a live website with a development copy (or a historical baseline) of that site. These tools view the pages of your website at any number of specified widths (or “breakpoints”), taking screenshots of each. The screenshots are then compared (“diffed”) pixel-by-pixel and any differences are highlighted. Continue reading →

Script to Make Anchor Links Work Within Accordions

Leave a reply

I found a lot of suggested solutions online to this problem, but none of them worked for my purposes, so I wrote this. Hope it helps others…

   /*except for the minimize and maximize links, add special class to all anchor links*/
        if (!$('a').hasClass('maximize' && 'minimize')) {
        $('a[href*="#"]').attr('class' , 'accordion-anchor');
        }
        /*wrap accorion header-content pairs*/
        $("#accordion h3.ui-accordion-header").each(function() {
        $(this).nextUntil("h3.ui-accordion-header").andSelf().wrapAll("<div class='accordion-pair'></div>");
        });
        /*Add script trigger to anchor link*/
        $('.accordion-anchor').each(function() {
        $(this).bind('click',function(){
         var target = $(this).attr('href');
         var header = $(target).parents('.accordion-pair').find('h3.ui-accordion-header');
         header.click();
        });
        });

If you need to see my html markup to parse this, let me know in a comment. My markup is the standard accordion.js structure so I think this will make sense to many of you without the markup.

“Shop Small Saturday” Resources for e-Commerce Sites

1 Reply

Today is “Black Friday” in the States, which signals the start of our holiday gift shopping season. This means tomorrow is “Small Business Saturday,” also sometimes referred to as “Shop Small Saturday.”

“Shop Small Saturday” is an effort to drive holiday shoppers to smaller businesses, which rely on holiday spending for their survival. I selfishly think it’s a great way to find gifts that are more interesting and unique than what I find in mega-stores.

I just finished preparing the gench site for “Shop Small Saturday” and thought I’d share some handy resources I found. Continue reading →

Hide Those Drupal Node Edit Tabs!

Leave a reply

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 →

Site Launched: Some Useful UNIX Commands for Promoting Sites

Leave a reply

I finally launched the new and improved gench site! It’s my first Drupal site.

In order to replace the current (non-drupal) site with the new one, I had to juggle some big directories around on the live server. The good news is it’s relatively easy to do this. The bad news is it’s still rather nerve-racking! UNIX commands are indispensable for a task like this.

My scenario…

development environment = my local MAMP stack

staging environment = sub-directory under the live site (the old gench site)

live site = root of shared hosting web server

Continue reading →

How to Create a Slogan Randomizer Using PHP

Leave a reply

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 →

The Power of CSS3 Pseudo Class Selectors

1 Reply

Though not fully supported in all browsers, CSS3 pseudo class selectors are really powerful and exciting. I’ve been using the basic CSS pseudo classes (e.g., a:hover) for ages, but I’ve only recently started using other pseudo classes, particularly the position/number-based ones.

Continue reading →

How to Style Responsive Omega Subthemes

Leave a reply

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

Leave a reply

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 →