iMentor: World Class Website for a World Class Mentoring Organization
Website: iMentor
Partner: NPower
Challenge
iMentor is a very web-savy organization. They get media and viral marketing. So it was with a bit of sad irony that they were dealing with a dated website and using antiquated technology to manage it.
We needed to give them a slick-looking site that could incorporate impactful information with timely content that would attract talented volunteers and impress prospective funders. And it has to be easy and distributed.
Solution
This project was largely about themeing and setting up Content Types that made it easy for iMentor to publish content to look like a specific design template. Even event detail pages had a specific layout.V-Shift joined NPower and Capellic on this project and they produced an amazing design. From the home page, to the home page-like landing pages for iMentor's three branches of programming, to the photo gallery and the video gallery, etc, etc. Instead of working on hardcore community functionality, we largely focused on the quality of the aesthetic experience – themeing.
Home Page
http://www.imentor.orgWe used Panels to do the layout for this page and it worked out nicely. The blocks for the galleries and statistics are using Views Carousel to display a view with forward and back buttons.
Other than that, there aren't any other exceptional Drupal tricks here – the home page is more about good design and theme implementation. It should be noted that we used Zen for our theme platform.
Program Landing Pages
http://www.imentor.org/imentor-nychttp://www.imentor.org/imentor-interactive
http://www.imentor.org/about-imentor
All three of the program landing pages use the same structure using the Panels module. Many of the elements are the same as the home page. The biggest difference being the content slideshow at the top.
The content slideshow is Content Type that asks for the title, a blurb a link, link title and a photo. This is an image-heavy website, so time was given to make the process of getting them on to the site as easy as possible. So for this field – and many other image fields throughout the site – we used the Imagefield Crop module that, yes, allows editors to crop the image the image after they upload it.
And while the ordering of content is usually as simple as using a weight field or the Nodequeue module, we had the added complication of any one of the slides appearing on one or more of the three landing pages. Providing a weight on a slide for one landing page might put it in the wrong place on another. Each slide needed a weight for each of it's contexts.
Enter the Draggable Views module. Not only would this module give us a nice way of sorting via drag and drop, but it also provided us with the unique weight per view that we needed.
And if that wasn't enough, the titles for the slides need to be in ITC Eras Standard font face, a non-standard font which is actually quite rare. Of course we're not going to ask the editor to load PhotoShop, create the title and then upload it. Instead, we installed the the Signwriter module which provided us with the ability to generate PNG files with transparent alpha layers out of the string in the title field.
And finally, the Views Rotator module was used to actually do the slideshow. We applied a patch to get the slide navigation which appears in the lower right of the content slideshow.
Banners
http://www.imentor.org/fundraising-eventsAll other pages on the site have static banners per section that includes a title (again using Signwriter to render the font), blurb, Share This widget, a photo and two links (menu). Implementing this feature with the built-in blocks management page would have been tedious. We used the Context module to manage our blocks, giving us much more control over when and how blocks were included on a page.
Photo Galleries
http://www.imentor.org/photo-galleriesA big part of iMentor's success has been engaging their mentors and mentees with media. Photo galleries of mentor/mentee events is one example. Sure, they had this capability on their old website, but they had to do a lot of work to prep the photo and thumbnail and then FTP ... you get the picture.
The new process is much easier. The editor clicks a link to add a new gallery. They give it a title, write a description, choose the date of the event, classify the event with a couple of different taxonomy vocabularies and then upload, in mass, all the photos. iMentor uploads a lot of photos and having to use a distinct file upload field for each was going to be tedious at best. By using the Image FUpload module, we were able to allow the editor to select all the images from their computer once and then they would all upload in one batch – no prep needed!
The display of the galleries is also quite nice. We spent a lot of time here to ensure that the casual visitor could jump right into a gallery or a visitor looking for a specific event could use the filter fields at the top of the page to conduct their search. Of course, we're using the Imagecache module here to produce the thumbnails.
The gallery detail pages feature the directory thumbnail at the top. Clicking on a thumbnail will show a larger version of the photo using the Lightbox 2 module.
Video Gallery
http://www.imentor.org/video-galleryThe video gallery mimics the photo galleries in layout and behavior. We're using the Embedded Media Field module so that editors can simply paste the YouTube URL into a dedicated video field instead of having to copy embed code into the Body field. This ensures that videos are always displayed consistently throughout the gallery.
Google Maps
http://www.imentor.org/imentor-interactive-member-organizationshttp://www.imentor.org/imi-member-organization/american-corporate-partners
http://www.imentor.org/partner-schools
http://www.imentor.org/partner-school/lower-east-side-prep-hs
Maps are used in several places throughout the website and we used a combination of the Location and GMAP modules to deliver this. The address entered into the fields provided by the Location module are geo-encoded by Google via the GMAP module and stored locally. Then when a visitor hits a page with a map on it, the map is retrieved using the longitude and latitude information that the GMAP module is storing.
Salesforce Integration
In order to track interest in the iMentor Interactive software platform, iMentor using the Salesforce web-to-lead form. Instead of simply embedding the exported form from Salesforce, we wanted a more seamless experience for users where we could effectively enforce required fields and collect the data in Drupal as well. We were able to achieve this by using the Webform and Salesforce Webform Data Integraton (with this patch) modules.We also applied a different page layout template if the node was a webform which can be seen in the screenshots.
FAQ
http://www.imentor.org/imentor-interactive-faqThe Frequenty Asked Questions module allowed us to enter each question and answer as a node and gave us a nice way of presenting the questions and answers, using jQuery to expand the question to see the answer.
Quality Control
While Drupal provides iMentor with the ability to decentralized content contribution, there is also the opportunity for poorly written copy to get onto the website. For this reason, content managers (role) receive an email when content is added or updated. They also receive an email when comments are added to the blog since approval is not required. Instead of using specific modules for these specific cases, we used the Rules module to create the conditions and actions.Additional Drupal Notes & modules
- CKEditor: FCKEditor became CKEditor this year and the improvement is substantial including the ability to easily add embedded code, paste from other sources (looking at you, Word!) while stripping out most of the native formatting directives, a spell checker and it loads a lot quicker.
- WYSIWYG Filter: The companion to any rich text editor is a good input filter to prevent editors from inadvertently changing the body text or adding HTML styles that are outside the style guide. This module allows you to define which tags are OK to use and even gives you the ability to only allow specific tag attributes. And if you allow the "class" attribute, you define which classes are OK. There is an amazing amount of control. However, we patched this module to loosen the restrictions on the non-configurable blacklist.
- Path Redirect: What happens when an editor changes the path to the node? Any inbound links from websites and search engines will get a 404, yes? Not with this module. Every time the path changes, it adds a redirect so the user/crawler is always redrected to the most recent path.
- Pathauto: Another standard module to us, gives users sensible paths and gives search engines more meta information.
- CCK & Views: It should go without saying: Absolutely critical to any Drupal website of note.
- Cobalt: A module for the site builder, provides a Quicksliver-like interface for jumping around the site. Very handy.
- IE CSS Optimizer: Another great module for the site builder. Allows you to work on the theme CSS file without breaking the site for IE users.
- Nodewords: Used for SEO
- Backup and Migrate: Backing up database daily and keeping for two weeks.
- Better Formats: Absolutely essential for sorting through the morass of input formats.
- Image Resize Filter: Great utility module that will resize an image used in the Body field to the defined width and height.
- Menu Trails: Great for being sure that the menu trail is properly highlighted. Now also has the ability to affect breadcrumbs which leaves the future of Custom Breadcrumbs in doubt.
- CAPTCHA: Used on the registration form to avoid bot spam.
- External Links: Automatically opens external links in a new window.
