Internet Insights by LevelTen Interactive

Fighting Field Labels with Display Suite Extras

Kyle Taylor — Thu, 23 May 2013 12:30:13 +0000

Fighting Field Labels with Display Suite Extras

Kyle Taylor

Thursday, May 23, 2013 - 07:30

If you are a site builder or themer in Drupal, you might have a similar situation happen to you. You obtain a set of requirements for a content type, create all the necessary fields with semantic labels, and start building the displays and views. Great! Life is good. Now your project manager waltzes over to your desk to deliver an updated set of wireframes, and before you even get halfway down the page, you feel a breeze as you notice a person-shaped cloud of dust where your project manager just stood. You look at the document and see that on some displays, you will find a field label with a colon and some… without. Of course, you appropriately let out a lion of a roar that echoes throughout the office, because not only do you have you remove that colon from specific labels, but some of the labels even have different names depending on the display by dpm-ing the crap of the field template.

So you might have some questions by now, such as "Who prints out their wireframes anymore, can't they email it to you?" and "How dirty is your office that it leaves a cloud of dust?". It's odd, I know, but don't mind that. The biggest question is, how can we make this easier? Simple, we use Display Suite. (And if you don't use Display Suite already, here's why you should be.)

What's Included.

To be more precise, use Display Suite Extras. DS Extras is packed with bunch of features that will make your life a whole lot easier when it comes to having really complicated, or sometimes mind-boggling, displays. A few features include:

Region to Block - Put fields into a new region that is then turned into a block to be set in the block system, such as the sidebar or footer. This could be like a testimonial or image field.
Views Displays - Create a display for a View that turns sections into "fields" that can then be placed into a new layout, such as moving the pager to a header section above the content and exposed filters to the footer below.
Page Title Options - Customized page titles, like hiding it on certain displays or displaying a static title for all nodes of a certain content type, i.e. Reviews.

In short, we love Display Suite because it does some really awesome stuff and makes our job way more fun.

Now that you've heard about some of the other features, let's talk about this magical field template. Enable Display Suite Extras and head to configuration to enable Field Templates. There you can set a default field template, either Drupal default, full reset, or minimal. Full reset removes all extra field markup, while minimal leaves just the topmost field identification, i.e. field and field-name classes.

Setting Up

Pick a content type and go to its display settings and set a layout if you haven't yet already. Notice now that each field can be configured with its own field template (default, full reset, minimal, and advanced). By default without even changing the field template, we can reset the label to whatever we like. An instance you might use this could be you have a field called "Programs" that is a multi value field of software programs. If we limit the field to a single value, that label could appropriately be labeled singular "Program". If we list all programs, it could also be labeled as "System", meaning a collection of programs.

Is it against my logical, non-literature background to name these fields in such an incredibly non-semantic way? Yes. But, I'm a developer and I was given a set of specs, so dammit, I'll make it work no matter how grammatically incorrect or structurally awkward it might be.

Choosing the minimal field template, we can easily select a checkbox to remove that pesky little colon and replace the label if necessary. For the majority of these situations, this is all I will ever need. If you dare to select the Expert setting, you shall be wowed. You can customize every single little detail of the field template, from the wrapping element to custom classes and attributes. Very rarely do we need this, but it's really nice to have when you do.

Now that you know, you think it's awesome, right? I know, it's awesome. To put the icing on the cake, all of these settings are exportable into features...

Did you ever want to eliminate a race of rare rainbow unicorns because you had to override multiple field templates? Tell us in the comments below!

Featured image credit: David Numeritos

Futureproof Your Content: The Rise of Adaptive Content Architecture

Tom — Wed, 22 May 2013 13:12:34 +0000

Futureproof Your Content: The Rise of Adaptive Content Architecture

Tom

Wednesday, May 22, 2013 - 08:12

On most websites, web pages are treated the same as word processing documents or magazine layouts. Text, photos, media and layout all are meticulously laid out into a single flat document. This traditional approach is quickly becoming a liability in the “anytime, anywhere and any device” demands of the modern world.

To keep up with mobile, you will quickly find yourself replicating this process for a multitude of devices, creating multiple variants of the same content. If you need to support multiple languages, you will find this problem quickly multiplies out of control.

New search engine algorithms and the accelerated use of semantic markup are enabling people to narrow in and find specific elements of a page such as the time and date of interesting local events, or the hours of operations of a business. Proper content marketing necessitates the re-use and re-mixing of content components.

Great content marketers publish regularly and use a variety of means such as blogs, videos, Twitter, and Facebook. The need for highly effective organic content is pushing organizations towards new publishing roles and workflows.

These trends are forcing organizations to look at content differently. Not as words and photos on a page, but as orchestrated structures of discrete data. Savvy organizations are taking a content first approach by developing a comprehensive adaptable and maintainable content architecture.

What is content architecture?

At its essence, content architecture is about breaking content down into essential semantic components. Content is first broken down by type - blogs, events, videos, press releases, white papers and so on. Then each type is further refined into elements. For example, an event content type may be broken down to a description, time and date, location, and price for the event.

Each piece of content is given a resource locator (URL) as a home; however parts or all of the content can be integrated anywhere. Ideally an API is provided to enable other systems to use and act on the raw content and its elements.

Content architecture also incorporates publishing workflows. Great content is authored by subject matter experts. But often these people are not great natural writers. That is where an editorial review process becomes invaluable. Implementing a content workflow involving defined roles, permissions and editorial states helps assure everything you put out is top quality.

ADaptive Content architecture checklist

Conduct a content audit
Group all your content into types
Break each type down into elements
Apply taxonomies where needed
Assure proper semantic tagging of content elements
Define URL patterns for each content type
Create RSS feeds for all appropriate content
Define content workflows for each type

Takeaway

The path to success on the modern social web is through content: all kinds of different content and lots of it. To further manage your content for all the ways end users prefer to consume it, you need to implement a well thought out and componentized content architecture. Starting out this way will save you time and pain down the road.

Learn More

Guilty of one or more of these traps? Don’t worry you’re not alone. In my next post I will cover the four steps to a great homepage design that will keep you from the traps.

This post is an excerpt from the Website Redesign Success ebook. The ebook walks you through 8 simple steps to building a results-oriented website.

Download your free Website Redesign Success ebook here.

Feature photo by CannedTuna

Yahoo Buys Tumblr - Commence Wailing

Julie Miller — Tue, 21 May 2013 13:13:43 +0000

Yahoo Buys Tumblr - Commence Wailing

Julie Miller

Tuesday, May 21, 2013 - 08:13

It's been announced that Yahoo has bought the social blogging site, Tumblr for $1.1 billion. With the acquisition comes reprehension from Tumblr's devout, and vocal, user base. Yahoo's CEO, Marissa Mayer posted the announcement on her own Tumblr blog today, ensuring that Yahoo will "not screw it up". Interestingly enough this was her first post ever on her Tumblr blog. I suppose she decided to wait for the deal to come through. So what could the future hold for Yahoo and Tumblr (...Yumblr)? It's hard to say what will become of the site, but here are some of the good and bad points I see for the two companies.

why it's good for yahoo

Tumblr is one of the fastest growing social media sites with 120,000 singnups per day. The site manages to combine all of the hot online trends: content marketing, visual-heavy content, social/viral sharing, and microblogging. Tumblr also houses an overwhemingly young user base (46.5% are between 18 and 34 years-old). According to Quantcast, 67% of Tumblr users do not have children, meaning more disposable income. This is certainly the perfect audience for advertising efforts. Yahoo's credibility could increase if this proves to be a smart buyout.

why it's bad for yahoo

Some people believe that the company overpaid for the buyout. Considering the major pushback from Tumblr users to add any form of advertising, this could be true. It will be difficult to generate revenue without ads, but quick changes to the site could turn users off and have them looking elsewhere online. Strategy will definitely have to be used carefully when considering how to monetize the site. Also, it's risky to invest in social sites; remember when NewsCorp bought out Myspace in 2005?

why it's good for tumblr

Working with a large company like Yahoo means there are more opportunities to improve the site's speed and functionality. Not that Tumblr isn't already growing at a fast rate, but Yahoo's buyout helps the site reach an even wider audience. Everyone working at Tumblr gets to keep their job, and title, as the company will be independently operated. Mayer stated in a press conference, "The product, service and brand will continue to be defined and developed separately". This ideal makes it look like a win-win investment.

why it's bad for tumblr

While Tumblr's main age demographic is between 18 and 34, Yahoo skews more toward an older audience. It may be difficult for Tumblr bloggers to identify and trust with the Yahoo brand. Despite Mayer's promise not to "screw up" Tumblr, in the end, Yahoo holds the purse strings and I'm assuming the final word will be theirs. Are they capable of relating enough to the Tumblr audience to make the right decisions and not come off as "the stepmother" company?

Another major boundary to cross will be copyright issues. How will Yahoo be able to handle Tumblr's lenient policy on sharing content? Will there be legal issues to address? And if so, this may take away the easy and fun nature of Tumblr blogging.

what tumblr bloggers are saying

Credit: Awkward Pygmies

Credit: Aspergers Aligator

Credit: Unfiltered Rants and Raves

Credit: Staying Alive

What are your thoughts on the buyout? Which company do you think benefited most? Let us know in the comments below!

Featured image credit: Red Orbit

The Press Release How-To Guide, Part 1: Writing

Julie Miller — Mon, 20 May 2013 12:23:25 +0000

The Press Release How-To Guide, Part 1: Writing

Julie Miller

Monday, May 20, 2013 - 07:23

So your boss has asked you to write a press release about your company's first annual Hawaiian Shirt Block Party. You might query, What the heck is a press release? A press release is simply a written or recorded announcement directed to the media in an effort to report a newsworthy event. Well that sounds easy enough, but the media need to be able to access and decipher quickly if your document is a press release.

In this post I will discuss how to properly draft a press release so that its intent is recognizable and trustworthy and its content hooks the reader.

Keyword to Keep in Mind: Inverted Pyramid

What does it mean? It means that the main idea of your announcement goes at the beginning of your press release.

Here's an example chart for your to keep an image in your head while writing

Image Source: Wikipedia

Headline:

Keep your headline as short as possible while still making sense. Limit characters to around 150-170 in you headline. Make sure you include your keywords. So, with our Hawaiian Shirt Block Party example, our headline might read something like, "Pretend Town's own Festivitee's, Inc. Holds First Annual Hawaiian Shirt Party This Friday"

Location/Date:

This goes right before your first paragraph so as to orient the reader. Here's an example of the format, "Pretend Town, Pretend State - May 13, 2013 - First sentence of first paragraph."

Introductory Paragraph:

You have to expect that this may be the only part of the press release the journalist will read, so put the bulk of your information here and keep it as concise as possible. Be sure this information answers the questions, "who, what, where, when, and why".

The Who is our fake company, Festivitee's, Inc. The What is the first Annual Hawaiian Shirt Block Party. The Where is Pretend Town. The When is This Friday. The Why is to raise awareness for the awesomeness of Hawaiian themed apparel.

Body Paragraph (the "fluff"):

The body paragraph fills the reader in on the other information that is pertinent, but isn't really the main announcement. The body is usually a couple of paragraphs and fills in information such as statistics, background information, names of key people involved, quotes, etc.

About the Company:

Write a short paragraph about the company or person the press release is regarding. Include a link to the professional website.

Media Contact Information:

Include a line with a person's name, phone number, email address, and physical work address so that the media can contact him or her with questions.

Closing Line:

The final line should have "# # #" or "ENDS" to inform the reader of the end of the press release.

Remember, press releases are to be newsworthy. Don't write a press release with the intent to sell something - journalists will see through this, and doing so will give you low credibility. Remain honest and focused with your writing and you will see results.

Stay tuned for part 2 of this post where I will discuss how to send out your press release to the media.

Was this post helpful to you? Let us know in the comments below!

Great Star Trek Puns

Julie Miller — Fri, 17 May 2013 12:46:45 +0000

Great Star Trek Puns

Julie Miller

Friday, May 17, 2013 - 07:46

It's every nerd's right to have a love for Star Trek, and we are happy to exercise this right. In celebration of the new movie, here are some punny pictures of Star Trek's past.

credit: somuchpun.com

credit: b3ta.com

credit: somuchpun.com

credit: i.chzbgr.com

credit: funnyasduck.net

credit: Tumblr.com

credit: somuchpun.com

Credit: Facebook.com

Source: funnyjunk.com

Are you excited for the new Star Trek movie? Let us know your thoughts in the comments!

Featured image credit: todowallpapers.net

Setting Up the Rackspace Cloud to Send Drupal Emails with SendGrid

Chris — Thu, 16 May 2013 12:14:48 +0000

Setting Up the Rackspace Cloud to Send Drupal Emails with SendGrid

Chris

Thursday, May 16, 2013 - 07:14

Moving Drupal website clients to cloud hosting has been great as they're able to get high performance, scalable capacity at a pretty reasonable rate. However, we have discovered when clients offer an email sign-up, the emails that are generated from the cloud-hosted Drupal website are often rejected as spam. For those clients who have chosen the Rackspace cloud, here is a step-by-step solution to the problem.

To begin, you'll need to login to the Rackspace Cloud Tools Marketplace with your Rackspace Cloud username and password. Install the free SendGrid app; this will connect the Sendgrid email system to your cloud account. When you install the SendGrid app, you'll see a large link that says try the free edition. Click that box and then input your email address. An automated reply will be sent to you where you can create your SendGrid account using the Rackspace Cloud. Complete your registration and keep your SendGrid username and password handy.

Next, you'll need to install and configure the SMTP Authentication Module on your Drupal site for SMTP support. Once you've got the SMTP module installed, configure the SMTP Authentication with the following settings:

SMTP Server - smtp.sendgrid.net
SMTP Port - 587
Use Encrypted Protocol - No. If you want encryption choose “Use SSL” and set SMTP Port to 465
Username - SendGrid Username
Password - SendGrid Password

Once that's complete, you should be ready to send emails off your Rackspace Cloud server. You can test the setup using the test email box at the bottom of the configuration page and hitting save.

For more information on how to get SendGrid setup with Drupal, be sure to visit the website directly.

Have any questions about this tutorial? Leave us a comment below!

So You Wanna Be a Rock Super Star?

Ian Whitcomb — Wed, 15 May 2013 12:57:25 +0000

So You Wanna Be a Rock Super Star?

Ian Whitcomb

Wednesday, May 15, 2013 - 07:57

One important factor of running a company, as well as becoming a rockstar developer, is efficiency. Here at LevelTen we are constantly tweaking and revising our development processes to become as efficient as possible while still providing clients with the best possible solution for their website needs.

LevelTen has developed a number of internal tools to help standardize work across our small team of developers. These tools not only help with efficiency, but also with work consistency, and code portability. What this actually means is that rather than reinventing the wheel each and every time a client requests a common feature, like a blog, we can simply copy it from a repository of features, and tweak a few things to meet our clients' needs. While this requires a lot of time and thought to develop these features in such a way that is reusable, it dramatically reduces the amount of time spent per client to build them out.

Here I will talk about a few of the Drupal modules, and other tools we use to standardize our internal development workflow.

Features

http://drupal.org/project/features

Features is the heart and soul of creating a packaged set of reusable functionality. In case you're unfamiliar with this module, the general idea is that it allows you to export configuration settings into a "feature" which is really just a module. The point of this is to get it out of the database and into the codebase which will allow you to store things like views, and content types, in a version control system rather than the database.

LevelTen uses Features to package specific functional use-cases, like an entire blog, in such a way that the functionality is general enough to be reusable across multiple client sites as a solid foundation for customization.

Twitter Bootstrap

http://twitter.github.io/bootstrap/

http://drupal.org/project/bootstrap

Twitter Bootstrap is an awesome Less/CSS framework for creating really beautiful, responsive, and very consistent looking websites. Out of the box, it is nothing more than some basic Less and javascript libraries for things like form fields, buttons, drop downs, accordions, and various other common page elements. However, if you're at all familiar with theming a website and writing CSS, you probably know how frustrating it is to try to change the styles on a site that someone else themed. In the past, there had never really been a best-practice for writing CSS; everyone seemed to have their own opinions on how things should be done and they were ALL different. Bootstrap IS a best practice for writing Less/CSS and HTML.

Display Suite

http://drupal.org/project/ds

Like Features, Display Suite has been around for a while. Display Suite enhances Drupal's core templating engine allowing you to structure the display of node pages(among other things). So you need to display an image in the left column of a page and the body inside the content area? Before Display Suite(and Panels) this may have required some clever CSS wizardry and template overrides. Now it's just a matter of dragging fields into the proper region and clicking save - all of which is exportable using Features.

While it's arguable whether or not Display Suite is superior to Panels, some reasons why LevelTen prefers Display Suite are:

It uses Drupal's core templating mechanism and the Field UI, so the learning curve is much smoother than with Panels. In other words, with Display Suite there's really no need to re-learn how to do something the "Display Suite" way.
We can render entity displays using Drupal's internal view modes inside of views rather than using views fields. Views fields are messy and require a lot of work to keep consistent. Imagine a site where you have 5 different views all displaying a blog teaser. With views fields(or panels), you would need to update every view to keep them all consistent each time a small change is made. With Display Suite, you can simply edit the blog teaser view mode. When paired with something like Twitter Bootstrap(or not), this is a powerful way of maintaining a high level of consistency across a website, which is an important usability tactic.

Bean (Block Entities Aren't Nodes)

http://drupal.org/project/bean

Content types are to nodes as beans are to blocks. We've all run into situations where you need to display blocks of data formatted a certain way inside the WYSIWYG. Bean solves this problem by allowing you to assign fields to a block type and output using templates rather than using something as free-form as the WYSIWYG. Bean block types are also fully exportable which allows us to include them in our Features.

Source Tree

http://sourcetreeapp.com/

I think we can all agree, Git is complicated even for power users. Trying to manage workflow on a team of two or more is difficult. Git is designed to make this possible without overwriting someone else's work, but some may argue that it actually hinders efficiency and over complicates everything. I know I've caught myself asking "why can't we just go back to the good old days of using FTP?" Still, the positives still outweigh the negatives. On the surface, Source Tree looks like another Git tool for developers. You're right, except that it has this nifty little "Git Flow" button that puts your team into a Git workflow. This workflow allows you all to do your jobs with little interference from anyone else and it's relatively easy (at least in terms of using Git).

See here for a better explanation of what is actually happening. http://nvie.com/posts/a-successful-git-branching-model/

Honorable Mentions

Bakery

http://drupal.org/project/bakery

If you've ever tried to build a really big site with lots of functional components on Drupal, then you probably know how out of hand it can get in terms of trying to QA and fix bugs. Bakery is specifically designed to function as a single-sign-on for multiple Drupal sites (and it does a pretty good job). At LevelTen, we've been tossing around the idea of using it along side a standard multisite setup to "quarantine" large functional sections of a single site, thus creating a sort of "unified multisite". Although this method does present some other challenges(which we're already working on), it should, in theory, lessen the complexity of the different sub-sites enough to make them a lot more manageable.

Entityforms

http://drupal.org/project/entityform

Entityforms is similar to Webform in that they are both designed to solve the same problem. Webform has been around for a long time and has been the defacto standard for creating forms ever since. Unfortunately, it uses its own API and UI for creating fields while Entityforms uses Drupal's core Fields instead and is fully exportable using Features. This simply means that you can use all of the core fields and field type contributed modules to build your form, thus adding another level of consistency and availability of field types.

EVA (Entity Views Attachment)

http://drupal.org/project/eva

EVA is especially cool when paired with Display Suite. Because rather than creating a views block and placing it somewhere inside a region in a page, you can attach it to an entity as a field. This allows you to place the contents of the view using the Field UI.

Pantheon

https://www.getpantheon.com/

I'm including Pantheon in the honorable mentions section because we haven't fully adopted it at LevelTen just yet. However, we've got nothing but good things to say about it, and it's a fantastic efficiency tool for setting up Drupal environments.

Any thoughts? Leave us a comment below!

Great (Free) Web Design Tools

gretchenv — Tue, 14 May 2013 13:46:54 +0000

Great (Free) Web Design Tools

gretchenv

Tuesday, May 14, 2013 - 08:46

As a designer, I am always looking for tools to make my work better and easier to create. Over time, I’ve collected a number of great, free tools that I use on daily basis. Most of the time, I go directly to one of my bookmarked tools for a specific purpose as I design. Other times, when in need of inspiration, simply perusing these tools is often enough to spark new ideas.

Check out the following tools to see if they can help you in your design process.

Inspiration

Benchwarmer

My colleague introduced me to this tool a few months ago and I’ve been in love with it ever since … With this Google Chrome extension, every time you open a new tab in your browser, a page full of new and inspiring designs appears. The designs are fed to the page through the designer site – Dribble – that allows designers to display their most recent work.

Sometimes I will see a shot of someone’s recent work and be inspired by the color palette or typography and apply that inspiration to my next design. Benchwarmer is great for keeping the creative juices flowing.

Visual.ly

Visually is a site full of awesome infographic themes that visitors can use to create their own custom infographics. When I need to make an infographic, or even just an illustrative design, I like to look at the infographic showcase on this site. The designs on Visually are modern and fun, and I like to get inspiration for funky design elements here.

Typography

What Font

As designers, we frequently look at great web designs and say to ourselves, “Wow, I love the type on this page! What is it!?” Well, of course we can “inspect element” and figure it out, but an even faster way is a nifty little plugin called WhatFont. With this tool, you simply highlight the text in question and right click to find out the font.

Font Squirrel & Google Fonts

These are my go-to sites for free fonts. Both sites allow users to download web fonts for free, and Font Squirrel even has a webfont generator that provides the CSS to embed a desired font. Pretty handy!

COLOR

Webcolordata

This is one of the coolest tools I’ve seen. Simply enter the url of any site and press a button to get the exact hexadecimal color codes of the color scheme used for the site, as well as an analysis of which hues are used the most. Additionally, this tool provides a list of other sites that have similar color schemes.

Adobe Kuler

This Adobe tool allows members to peruse an extensive color scheme gallery, and contribute their own color scheme. This is a great tool for inspiration and can help perfect the color palette of your design.

OTHER

Fontello

Need an icon? Fontello probably has it. Fontello allows you to embed icons in your site or even download a font file that you can use to display icons in software programs. Learn more about Fontello here.

Twitter Bootstrap

Bootstrap is a new tool we've started using that makes our job of producing beautiful websites a lot easier. It is a 12-column responsive grid structure built on top of LESS that gives us a lot of really neat features like font icons and built in components like navigation bars and tooltips.Check out the Bootstrap project on GitHub or the Bootstrap theme on Drupal.org.

Do you have any design tools to share? Leave a comment below!

Icons and Drupal: These are the Years of our Lives

Mark Carver — Mon, 13 May 2013 12:20:43 +0000

Icons and Drupal: These are the Years of our Lives

Mark Carver

Monday, May 13, 2013 - 07:20

The title alone says it all. If you're reading this post, it probably is because you desire an easier way to insert a simple icon into your Drupal site. Many times this involves adding an icon library into your theme and doing some pretty undesirable pre-processing or template overrides to insert them where you want.

What are icons?

They're images right? Well, technically yes. Icons are a visual representation of some intended object or action - a pictogram essentially (think of a stop sign). What I'm really asking though is:

What file format/method are or should be used for icons?

This question has pretty much been answered for years. Whether it be a single static image or one massive image used for CSS sprites, they're usually a GIF, JPEG or PNG file. Pretty standard stuff and all is happy in the world. Well, guess what world? Meet font icons.

Font Icons

While this concept really isn't new, it probably isn't as widely known and has really changed how some of us themers approach icons in general. Fonts are vector-based in nature so they can be scaled, colored, text-shadowed... pretty much every CSS trick/method you can apply to text can be used for a font icon. This has really changed the game:

While font icons are great, they do have a few limitations. (I only mention this so I don't get a comment about it below.) They are mainly monochromatic in nature, given the limitations CSS text coloring. In theory, it is possible to apply perhaps another secondary color if your font icon provides ligature support (IcoMoon). If you still need full-colored icons though, sprites are still probably the best way to go. Simplistic and flat silhouette icons are "in" right now. So in retrospect, perhaps font icons aren't as "limited" as some may believe, but purposefully and strategically left this way... at least for now.

Regardless of how one might perceive it, fonts icons have simply added to the noise of what "icons" are now considered to be and the markup that comes with it. Ironically, one might think this would complicate matters more, but in reality font icons are typically easier to implement and are overall easier to maintain.

Icons in Drupal

This problematic issue isn't anything new to the Drupal community. In fact, there are issues and discussions that span all the way back to 2007 (if not farther). With a SoC initiative and a couple more attempts to put icons into Drupal, they either didn't gain much traction or have just failed over time, miserably. As a themer, I have noticed that often times the lack of icon support in Drupal has perhaps limited the design or even affected the choices in how we build a site.

Let's take a step back and look at the underlying issue though. It's never really been about the icons themselves, has it? Rather, "How do we get them in the site?", "Do we put them in the theme or a module?" or "Do they need to be interchangeable?". It is no wonder this issue seems to go around in circles and can never really seem to come through to fruition. Often times, we've been more focused on putting the actual icons in Drupal, instead of looking at the bigger picture.

Icon API

We need a framework/API. Period. Something that can manage our wonderful, varied, multi-licensed and different methods approach to icons. We also need a way to list these icons so they can be inserted into many common places throughout Drupal.

Icon bundles (sprites and fonts) are also inherently bandwidth vampires. Often times, we don't need all the icons on the single page request, just a few. This is where services like Fontello and IcoMoon have really soared. Granting us the ability to pick and choose only the icons we need, instead of loading an entire library, most of which we don't use.

Ultimately, my goal is to figure out the best approach for dealing with fully modularized icons. To elaborate and give one possible solution: base64 embed the icon data (image/font glyph) into a separate icon specific CSS file with just that class. This would allow the icon to be aggregated into the page's CSS and loaded only when that specific icon is being used. I'm not sure how useful this would ultimately end up being and further testing needs to be done on it. There are always pros and cons to any idea, especially anytime you consider performance.

So despite the obvious challenges ahead of me, I decided to take on this whole icons in Drupal issue. I spent quite a bit of my time researching the best approach to solve and ended up building the new Icon API. Recently, l released the first public beta:

Icon API - 7.x-1.0-beta1

This API provides the necessary framework for modules and themes to provide icon bundles inside of Drupal. The power really lies within the sub-modules though. Their ability to integrate an icon selector into the key areas of Drupal is really the primary goal of the API. Currently these integrations enhance the block, menu and field systems. There are plans to support content areas in a filter/WYSIWYG sub-module, but given the nature of what this entails, it may be a while.

In reality though, the possibilities are endless! You can integrate icons anywhere you can think of. Please feel free to create new feature requests in the issue queue (and of course submit bugs... there will always be bugs). The icon selector is still very rudimentary at the moment, mainly due to the focus being on the back-end integrations. Future plans also include making this very dynamic in an effort to support things like icon variations (icon sizes, colors, additional classes, etc).

Warning to non-drupal co-workers: Drupal themers and developers may involuntarily and randomly throw their hands up in the air to celebrate this newly and long awaited integration. This is completely normal and to be expected. Do not be alarmed.

Photo credit: ocean.flynn

Every Programmer Can Relate To These Comics

Julie Miller — Fri, 10 May 2013 12:17:20 +0000

Every Programmer Can Relate To These Comics

Julie Miller

Friday, May 10, 2013 - 07:17

Whether you've been coding your whole life, or have just started recently, you can probably relate to these situations.