The DotNetNuke Media Module is Relevant Again!

I knew the challenges when I first took over the Media Module.  In it’s first series of releases, it was built to make it easy to simply add an image on a page in DotNetNuke.  Eventually, it was extended to also allow you to display videos in nearly the same way.  Unfortunately, for many end-users, it’s just as easy to simply add the requisite HTML code to the Text/HTML Module to display all of the media types that the module was supporting (depending on the user, of course).

Boring…

I struggled at first to find a way to make the Media Module more relevant and give it a wow factor.  Eventually, it hit me…  What’s the most common and popular form of media?  Social media!  Duh…

Social Media

I immediately added the ability to include social media types to the module issue tracker.  That alone really got the geek in me excited, considering how I was planning to implement it.

Embed Codes

Probably the most common way to bring social media into your own site is through the various embed codes that site provide to you.  For example, consider the snippet of HTML you can copy and paste from sites like YouTube and Vimeo.  You can now choose this media type, and paste in code from other websites, to embed their content into yours.  It will be displayed just  as if you had pasted it into the Text/HTML module.

OEmbed

If you’re not familiar with oEmbed, it’s simply a technology that is used by many popular sites to allow you to copy a URL, paste into a content management system, and when the page is rendered to the website visitor, the desired media on the original website is magically inserted into your site.  For example, you can paste the URL from Vimeo or YouTube into this setting, and the video from that page will be injected into your site when you save your settings.

The setting includes a validation routine to check and see if the URL is a supported media site.  This feature currently supports 11 different oEmbed providers, but allows you to import content from over 200 different social media and media websites.

Usability & Standards

The social media features were not the only updates to this release.  They are rather just a couple of many updates, but like usability and standards, they are some of the most significant updates.

I, like many others, have learned the importance and benefits of standards-based design and layouts over time.  I began implementing such an approach to my development about 2 years ago.  However, the edit views in modules continued to be ugly, slow, boring, and non-standards friendly tables.

There are numerous reasons why you’d not want to use tables – such as the fact that the labels tend to very easily and consistently break XHTML layouts – but they are a necessary evil if you’re using the built-in DotNetNuke label control to display help.  I took a different approach in this release for a couple reasons.

First, the edit view was not standards friendly or accessible.  Second, it was the right thing to do.  And third, the new approach not only makes it incredibly easy and flexible for designers to customize the look of the edit forms, but is also the first step in making the user interface (UI) at least partially match what you will see in the version 6 series of DNN releases.

Disclaimer: This is not necessarily the “best practice” approach to implement a standards and accessible friendly UI for your edit views.  You will see a different approach in DNN 6.0.  This module will move to use that approach once it’s available.

You can clearly see in the screen shots above that the dreaded help labels are no longer in the UI.  So, even though there’s a bit of help text integrated into the module, how does someone get help?  For this release, I have added the help into the TITLE attributes of the labels and form fields.  The help appears when your mouse hovers over either of the mentioned form elements – and it’s customizable!

There are a handful of other features and updates, but I think these two things are a great start to you getting to know the latest release of the Media Module.  Download the Media Module today!