In this post, I want to walk you through setting up a simple Drupal 7 website that will allow you to post content and media.

First – Download Drupal 7 from Drupal.org.

The easiest way to set up a Drupal site is using MAMP (for Mac) and WAMP (for Windows). This is a GREAT tutorial on how to install Drupal using MAMP – YouTube (this tutorial uses Drupal 6 but the setup is almost identical to 7) or if you prefer to read – http://drupal.org/node/66187. If you have a web server, it’s a similar process.

Once you have your site setup, you’ll notice that it doesn’t do much. Unlike WordPress, you don’t get much out of the box when it comes to Drupal. Let’s go over some simple terms that will help you understand how Drupal works.

1) Node – All content on a Drupal website is stored and treated as “nodes”. A node is any piece of content, such as a page, poll, article, forum topic, or blog entry.
2) Content Type – Content Types are part of the structure of Drupal and layout how you define how pieces of content will be organized throughout the site. For example, blog posts, videos, status reports, etc. can all be defined as content types on your site. Each node belongs to a content type.
3) Module – modules are a way of extending Drupal’s functionality. Think of it as little add-ons that that improve the flexibility of the site, however you only install what you need. This is both a burden and a curse. On one side, it can become very tedious to install every module you need each time you set up a site. On the other hand, it keeps your site very lean and keeps you from having extra stuff that will slow your site down.
4) Views – views are a way of aggregating content types or specific fields of a content type. For example, say I have a general “Post” content type that includes the fields a) Name b) Time c) Header d) Image e) Body. Say I have 100 separate “Posts” and want a way to build a preview like page that gives users a snippet of what each post is about. Using Views I can tell Drupal – show only fields A, C and D. And when they click on any of these fields, it will take the user to the actual node and show all the fields. Views also allows you to set a path and a page but we’ll get into that later.
5) Block – Blocks can be static content, an extension of a module, a view, etc. They are used to display content on certain sections of a page. For example, if you wanted to show the most recent comments that were posted on you site in the top right of the page. You could create a view that is a block that would display on every page of your site in that spot.
6) Region – Drupal’s layout is defined by regions. For example, header, footer, content top etc. You can define regions in your theme.

7) Theme – themes allow you to change the look and feel of your site.

Step 1 – Install all the modules you will need.

Now that we have some Drupal theory out of the way, navigate to your Drupal install on your local machine to your-site-name/sites/all. There should be a modules and themes folder there (In Drupal 6 you have to create these).

Next we’re going to download the modules that we will be using.

Go to drupal.org -> Download & Extend -> Modules. Here is the list of the modules we’ll be working with. Make sure to download the correct versions of the modules that correlate with your Drupal install. Since we’re using Drupal 7 ONLY DOWNLOAD DRUPAL 7 MODULES, otherwise your shit will break!

1) Media
2) Media Youtube
3) Ctools
4) Views

Once you’ve downloaded these files, unzip them and place them in the “modules” folder. Then on your Drupal site, navigate Modules section on the main nav. There you will see check boxes next to a bunch of module names. You’ll notice that some modules require other modules. Make sure to always check for these dependencies, otherwise you won’t be able to enable these modules or enable them.

Things to enable:
1) Ctools (This is packaged with other sub-modules, but you DO NOT need to enable these, just the main Ctools module).
2) Media
3) Media Youtube
4) Media Internet Resources
5) File Entity (included with Media)
6) Views
7) Views UI (this is the interface that you will use to create views)

Whenever installing a module make sure you Read the Documentation or the Readme.txt file that is included in the module which will give you instructions on how to install and configure it. Next, click save at the bottom of the screen.

Now you have all the modules you’ll need to create a website. **Note there are thousands of modules available for accomplishing all sorts of tasks. You can even write your own and contribute it to the Drupal community.

Step 2 – defining our content types

Our next task is to create content types that we will be using. So if we’re making a blog about music we’ll want to include certain fields in our pages. Click on Structure-> Content Types->Add Content Type. Here is where we’ll define our custom type to include the fields that we want. You’ll see that Drupal by default supplies you with “Basic Page” and “Article”. The first field is the “name” which is what we’ll see in administrative menu. Let’s call it Music Post. When defining a content type, the Name can include spaces and uppercase but the machine name must be all lower case with no spaces. In Drupal 7, it automatically generates machine names (A very nice new feature). And under description we’ll say “A place to post music news, videos and images. Click “Save Content Type”.

Now we need to define our fields. . After clicking save, you should be at the content type settings page, if not navigate there. Now let’s add a field to upload images associated with our music pots. Under the Operations row, you’ll see “manage fields” for the Music Post content type. Once you click here it will prompt an admin interface which will allow you to add fields. . You see “Add new field” on the left. In the label textbox type “Artist Image” in the filed name, type “artist_image”, under type of data to store choose “Image” and in Form element select box, choose “Image”. Next we will be prompted to an admin screen to set the specifications for our field. Let’s leave it alone for now but feel free to mess around with this later. Save field settings.

Now let’s create a text field that allows us to create a headline. In the label text box put “Headline”, in the field textbox put “headline”, under type of data to store choose “text” and then choose “text field” under the second dropdown. Let’s set the maximum length of the textfield to 150 characters. Click save field settings.

Let’s add a video field. Before we add the video field, we have to enable the youtube player. Navigate to Configuration->File Types->Video->Manage File Display and check the “Youtube” checkbox. Save.

Now go back to your content Following the same instructions as before.
- Label = Video
- Field name = video
- Type of data to store = Multimedia Asset
- Form element to edit the data = Media file selector

Click save and an admin settings screen will prompt. Under allowed media types, enable video. Under allowed URI schemes enable YouTube. Everything looks good for now but feel free to change the display settings for the height and width of the Video in the future.

Once saved, make sure the display settings for the video field and the image field are set. Click the “Manage Fields” tab and make sure the video field’s format is set to Media. For the Artist Image field, you’ll see an icon to the right of “Image style: none (original image)”. Click the icon and choose medium. This setting automatically crops the image so that they all look consistent throughout the site. You can create a setting by defining a height and width using Image Styles in the site Configuration.

Almost there! Let’s rearrange how these fields are displayed. If you hover over the left of the label a 4 point symbol will prompt. Let ‘s click and drag the “Headline” and move it right underneath the title. Next lets move the “Image” right above the “Body” field. And finally let’s move the “Video” field right below the “Body” field. This will just change the way the post is displayed.

Let’s create our first post! In the sub-menu, you’ll see Add Content and select Music Post. For the Title field choose whatever you want. Since mine is about music I’m going to put “Rusko – Somebody to Love”. Under Headline I’ll put – “This is Rusko’s new single which features a great music video with live clips”. Under Image, lets select a file to include with the post. In the Body, just type in some text. In the Video field, go to the Youtube video page and click on Share, copy that link and then place it in the Video field. Click save and we just created our first piece of content!

Now create a bunch more posts (say 10) so that we have some content to play around with.

Step 3 – Creating a View

So now that we have all this content, let’s present it to the user in a better way. Most of the posts are going to take up a whole computer screen. But we want our users to be able to skim posts and click to “Read More”, almost like a news feed. Let’s use Views to accomplish this.

As mentioned before Views are a powerful way to aggregate information. So for our home page, I think we should only show the node “Title”, “Headline” and the “Image”. So navigate to Structure -> Views -> Add. New View
- View name => Home Page
- Description => A list of Music Posts that displays the Title, Headline and Image
- Show => Content of type Music Post sorted by Newest first
- Create Page => Make sure this is enabled.
- Display Format => Unformatted list of fields
- Items to display => 10 (make it whatever you want)
- User pager => enabled (allows for pagination)
- Click Continue & Edit

Now we’re at the admin interface of our view. So where to begin. It’s always up to the user but I usually tend to start with the “Filters”. This does exactly what the title suggests, it filters information based on parameters we set. To backtrack (refer to the 3rd bullet point above) and explain how we got here, we only want Music Posts content types to display on this page. You can set as many filters as you want but we’ll leave it for now. Simply click the “add” button to add a new filter.

Now lets choose the fields that we want to show. Based on the three we’ve decided on let’s start with the Title (which should already be enabled, so we’ll do headline and image). Go to the Fields section and click the “add” button. Navigate to “Content: Headline” select it and click “Apply (all displays)”. Then a settings screen will prompt. We don’t want our Field to have a label (which Drupal usually creates automatically) so uncheck that. Some fields will give you the option to “link this field to its node”. Meaning it automatically makes that field a link that takes you to the full node. The Title field is already enabled this way. Everything else looks good so click apply.

Now Lets add the image. Click the “add” button and navigate to “Content: Artist Image (field_artist_image). Let’s uncheck the label option. For the “Image Style” property, I have mine set to “thumbnail” so that its not so overpowering. However, feel free to choose whatever you like and remember you can always create your own prefixed image settings in the Configuration section of the website under Format choose Image. And we have all our fileds. Finally lets link the image to the actual node. So under “link image to” select “content”.

Now the question is where does this page exist? You might have caught this in the previous step when we were setting up our views. But in case you didn’t you can always modify the url path underneath “Page Settings” in the Views admin interface.

Since this is our home page, we’ll want to make it a menu item. Underneath the path you’ll see a menu settings, click it. Now make sure it’s a Normal Menu Entry, choose your Title, i.e. Home Page, Menu = Main Menu and then click Apply.

Make sure you click Save in the upper right. Its good to periodically do this when working on your Views!

Congratulations we now have our first view! Alright let’s create one more. Let’s make a Videos page and displays all of our Videos and their Titles. Go to Structure->Views->Add View. Set the filter up the same way as the previous example. Now under fields we only want the Title and the Video (Title will already be enabled). Then lets’ choose “Content: Video”. Let’s set the label to none and click apply and then save.

Now make this page accessible by adding a url and a menu just like we did before.

Step 4 – Getting rid of all the loose ends

Well now that we have our pages, I think we should change our home page to the “Home Page” view. So navigate to Configuration -> Site information. Under default front page at the very bottom, type in home-page. And now your home page will be set to this view.

To edit your menu, go to Structure->Menus. Then choose Main Menu and list links. Here you can set which menu items are enabled and change the order of the display.

Step 5 – Installing a theme

Drupal used to look pretty ugly out of the box with version 6. D7 is a huge improvement. We’ll need a place in your file directory to put the theme. In D6 you used to have to create this folder but with D7 it should already be created. Navigate to sites/all/themes.

Next go to drupal.org -> Download & Extend -> Themes. A lot of drupal themes are bare bones, which allows for easier customization but we’re not on that level yet so we’ll save Drupal theming for another lesson. Some good starter themes are Danland, Blue Masters, Corporate Clean, etc. There’s tons so just choose one, download and unzip it. Now place that unzipped folder in your themes directory. **Note that some themes depend on other themes (just like modules), so be careful and read the documentation.

Now once it is in your themes directory, navigate to Appearance and find your theme. Click “Enable and Set as default”. Find the theme that you downloaded, enable it and set it as the default theme by clicking the checkbox. Click “Save Configuration” and voila, your site looks completely different.

In this article I barely skimmed the surface of what Drupal is capable of. I didn’t even touch on many key features that are essential. So now that you’ve got a good base, keep reading and experimenting with your Drupal site. There are thousands of modules that do awesome things that I don’t’ have time to go over. And who knows, if you stick with Drupal, you may be able to write a module of your own and contribute to vast community that helped build this powerful CMS.

Always remember don’t hack the core (if you don’t know what that means, Google it).

Posted by Grant Skalak – DC Drupal Developer for Drupal Development Company Web Development Group in DC

Simple Drupal Terms:

Once you have your site setup, you’ll notice that it doesn’t do much. Unlike WordPress, you don’t get much out of the box when it comes to Drupal. Let’s go over some simple terms that will help you understand how Drupal works.

1) Node – All content on a Drupal website is stored and treated as “nodes”. A node is any piece of content, such as a page, poll, article, forum topic, or blog entry.

2) Content Type – Content Types are part of the structure of Drupal and layout how you define how pieces of content will be organized throughout the site. For example, blog posts, videos, status reports, etc. can all be defined as content types on your site. Each node belongs to a content type.

3) Module – modules are a way of extending Drupal’s functionality. Think of it as little add-ons that that improve the flexibility of the site, however you only install what you need. This is both a burden and a curse. On one side, it can become very tedious to install every module you need each time you set up a site. On the other hand, it keeps your site very lean and keeps you from having extra stuff that will slow your site down.

4) Views – views are a way of aggregating content types or specific fields of a content type. For example, say I have a general “Post” content type that includes the fields a) Name b) Time c) Header d) Image e) Body. Say I have 100 separate “Posts” and want a way to build a preview like page that gives users a snippet of what each post is about. Using Views I can tell Drupal – show only fields A, C and D. And when they click on any of these fields, it will take the user to the actual node and show all the fields. Views also allows you to set a path and a page but we’ll get into that later.

5) Block – Blocks can be static content, an extension of a module, a view, etc. They are used to display content on certain sections of a page. For example, if you wanted to show the most recent comments that were posted on you site in the top right of the page. You could create a view that is a block that would display on every page of your site in that spot.

6) Region – Drupal’s layout is defined by regions. For example, header, footer, content top etc. You can define regions in your theme.

7) Theme – themes allow you to change the look and feel of your site.

Drupal is harder to understand then CMS’s such as WordPress and unlike WordPress, you don’t get much out of the box with Drupal which is why the basic terms used for the Drupal framework is important to understand.

If you are looking for a DC Drupal Development Company feel free to contact our DC and Virginia Drupal Developers by sending us an email to business@webdevelopmentgroup.com or visit our contact us page.

As a DC based web Development Company, we see a tremendous traction and need for Drupal and WordPress implementations.

WordPress – Easy to install, easy to support, maintain and is also easy to find designers and developers for – An overall great platform for beginners and non-technical content managers that can serve as robust blogging site or a website. For developers the theming language is fairly simple and straightforward and has a tremendous development community.

Drupal – Another powerful content management system that rules the Washington dc open source community. Drupal is a pure CMS and framework and not just a blogging platform. An installation comes with a ton of optional modules that can add lots of interesting features like forums, user blogs, OpenID, profiles but most popular item is its Taxonomy module which allows for displaying related articles or content at multiple levels based on categories etc. Great platform for sites with tons of data and high traffic.

Joomla – Joomla 2.5 is very similar to Drupal in that it’s a complete CMS but is best used for simple and smaller sites. Joomla comes with a decent admin dashboard, complete with intuitive drop-down menus and other features. The CMS also has great support for access control protocols like LDAP and opened. We have a good amount of clients that use Joomla such as congressional members, associations and smaller businesses.

ExpressionEngine – ExpressionEngine is packed with helpful features like the ability to have multiple sites with one installation of software but comes with a small yearly license fee. There is a good community for EE but not as large or active as the WordPress or Drupal community. ExpressionEngine runs large and small sites with the most popular being obama.com

Please to contact our Virginia and DC based web development offices to learn more about these platforms and which may be best fit for you.

Join the group where you will be Drupal Developers, WordPress Developers and Web Designers! – Here is the link to register, and bring friends!!

http://www.meetup.com/DesignAnon/

Give our Virginia and DC Drupal development team a call at 703-652-7103 or email us at business@webdevelopmentgroup.com

Drupal Development Service:
New Site Development: We begin all of our projects with an intensive discovery and research phase, dedicated to generating a solid infrastructure and architecture plan so you get the site you want with the features you needs at the right price: value and innovation.

Drupal Data Integration:
From Salesforce, Eloqua, Fatwire, Google and other data points, WDG has extensive experience integrating third-party applications into Drupal.

Drupal Migration:
WDG can upgrade your Drupal version or migrate your existing data or website into Drupal.

Drupal Performance Services:
High-traffic Drupal websites take specific knowledge of caching, loading, server topology, load balancing and other performance issues specific to Drupal.

Additional Drupal Development Services:

• Needs-assessment and strategic web consulting
• Graphic design and branding
• Drupal architecture
• User interface/experience design
• Theme development
• jQuery, AJAX and AHAH feature development
• Module engineering
• Scaling Drupal / High performance
• Optimizing Drupal for search engines (SEO)
• Administrator and site builder training
• Private training, customized to suit your specific needs such as themeing, module development

Contact our Virginia and DC Drupal development team a call at 703-652-7103 or email us at business@webdevelopmentgroup.com to discuss if Drupal is the right platform for your business.

Built on open-source Joomla!’s platform, the new website for local Congressman Jim Moran’s campaign website not only offers visitors a user-friendly experience, but also boasts new features, such as an events stream, easy access to the opportunity to volunteer and donate, updated photo galleries, and a friendly Facebook stream that keeps website visitors updated on his social network happenings.

Designed and developed by Alexandria-based web agency, Web Development Group, the new campaign site maintains the traditional campaign blue and white scheme for Jim Moran.  Incorporated into that traditional color theme, the most obvious new feature of the new site is its ease of use, prominent throughout the site with a streamlined homepage, blog-styled news, and user-friendly navigation which is accessible throughout the website.

Learn more about the new campaign site for Jim Moran by visiting it at http://jimmoran.org, or give us a call and we can discuss how we can make your next project larger than life!

#

Using DC’s leading WordPress and Drupal Web Development company, WDG, to design and develop a new website and content management system, Barton’s new congressional campaign design is a combination of pleasing aesthetics and a streamlined, organized structure powered by WordPress, a powerful open-source platform.

With the flexibility and ease of use that WordPress and its content management system is well-known for, Barton’s campaign is now able to easily maneuver within the administrative end of the site to update and add new content to showcase Barton’s priorities, upcoming events, and other essential information in a clean and viewer-friendly format.

Check the new site out for yourself at http://joebarton.com and contact us for your own design/development needs!

What an awesome way to start the month of March here in the DC Area!  Temps in the high 50s / 60s … Flowers starting to bloom! St. Paddy’s Day Parade coming up this weekend on the streets of Old Town!

The last few weeks have been busy busy busy in the WDG studios (stay tuned for some fun launch news!), but we always make sure to take time to step away from the screen, enjoy fresh air and learn about the latest of what’s going on around the internet.  Here are a few of the fun things we read about around the web this week!

FB Timeline for Pages is Coming … Whether or Not You Like It -The Key Things to Know

Some Literature On the How-Tos for Timeline

Another Way To Harness the Power of Your iPhone’s Kick@$$ Camera

Color Inspirations From Around PinTerest

And Lastly, Just For Fun
Your Future Home … Built With IKEA’s Hex Wrench! 

Happy Friday!

But now, the web world is trying to take mobile UE a step further by incorporating “Responsive Text” — essentially, changing typography and condensing the content of a web page down to the minimum that will directly get the point across to someone reading the text on their smartphone.  Cleaning up typography to be more streamlined for mobile devices, ok — yes, this can be clutch. Who wants to be viewing Fugu type in an 18pt font whilst on their Blackberry?  But dumbing down the actual text for a tablet or an iPhone … Is that really necessary?

I wonder whether Responsive Text can truly be justified.   Are we honestly so busy and on the go in our daily lives that we can’t be bothered with a  full page of content that, in all reality , our brains already scan through to pick out key words/points? (The typical brain in today’s world is trained to skip nonessential verbiage and fluff while reading any set of text … if you literally sit there and read every “the”, “but”, “a”, “says”, “and”, “or”, “to”, then you, my lucky friend, have been blessed with a relaxed life somewhere on a warm sandy beach sipping a delicious tequila sunrise without any cares in the world!)  Rather than minimizing for a smartphone, why not incorporate a preview blurb on your site’s mobile version that can then take the user into the full text should they choose to in their own right?  Let the reader decide if they want the Spark Notes of what you have to say while they’re hustling about their daily routines.  Not only will excerpts/blurbs provide readers of all device types the capability to enjoy the full intake of information provided on the web page, but it will also avoid the unnecessary extra steps to a web admin’s job of coding a page of content to specify what is shown on which device.

In the end, it’s going to be about preference and the audience, but Responsive Text doesn’t seem to be as useful as it could be in the world of flexible and user-friendly WordPress/Drupal themes … just yet … Let’s see where we go in the next wave in technology and mobility.  Maybe then condensing a 5-paragraph body of text down to a sentence will be deemed necessary.

If you’re interested in learning more about Responsive Design & the pros/cons of Responsive Text, or just want to chat about your upcoming project,  give us a shout via the form to the right, or at info@webdevelopmentgroup.com!

Ball Pool is one of those amusing websites combined with a brilliant and cool idea that is simple and dynamic.  Programmers and heroes such as Mr. Doob, Ricardo Cabello, who created Ball Pool, is one of the talented leaders to the geek tech world we live in.  Ball Pool is a simple concept that provides exciting interactive animation.  Who wouldn’t be intrigued by your blank browser filling up with multi-colored balls where you can drag your browser around and shake up the balls!  Or better yet — you can send the balls flying around the browser with a quick jostle of the browser window!

Just imagine, having a few minutes to kill and decompress.  Ball Pool is a perfect and fun site to let your brain zone out and be artistically entertained.  It’s a great way to recharge and keep you busy for plenty of time.  If you don’t like the background color or if you just want to be amused even more, you can double click on the background and change the color.  Or you can drag multi-color balls and even create new ones.

Be inspired with Mr. Doobs awesome effects here.