You are here

Drupal 7

At the start of the academic year (October 2013) a few friends just started running AIESEC Limburg and they asked if I wanted to join and create a new website, since the old one was a Joomla website built with Joomla 1.3, while the current version was already 3.2.

We decided to create a Drupal 7 website, since nowadays almost every student has a smartphone we thought it would be best to make it responsive as well. And that's what we did. You can see the result below.

What is Plus Gallery?

Description from the +Gallery website:
+Gallery grabs all your albums and images from an online source or feed and display them on your site or within individual blog posts. It allows you to browse albums and galleries, or display just one Gallery at a time. Take a photo with your iphone, post to Facebook, Instagram, Flickr or Google Plus and it is automatically added to your site as well.

+Gallery is also built with Responsive Web Design in mind so almost wherever you put it, it scales automatically and plays nice. It shines and 960px and at 320px and hopefully everywhere in between. Not following me? Please Read here. +Gallery is designed for todays touch devices. Using your iPad, iPhone or Android

You might have noticed the website switched themes. The new theme is responsive and uses HTML5 & CSS3. For more information about the new theme, check out the project page. In case you've never seen the old theme, you can check out the project page of the old theme or compare them with the image above. (click on the image for the full layouts)

I also tweaked the embed_media module I created with for the old theme. The module is actually a filter that allows users to post a simple url, e.g. a YouTube video, that is automatically converted to a embedded video or slideshow. For the embedding I used iframes, which are responsive and have a 16:9 aspect ratio. At the moment the module supports the following urls: YouTube (youtube.com & youtu.be), YouTube playlists, Vimeo, Daily Motion Flickr and Google Maps. I didn't add this module to the Drupal repository and I'm not really planning to, but if you're interested and think I should add it let me know.

The new theme of this website has been built from scratch. The theme is created with HTML5 and CSS3, it also incorporates the responsive web design principle.

I created three main views and a few transitions. The main views are shown below; one for desktops and big resolution tablets (a), one for screens with a lower resolution (b) and one for mobile devices (c). If you want to view the transition phases, just resize your browser.

First I created a basic HTML file and wrote the corresponding CSS. Then I adjusted the CSS to incorporate the responsive web design. Once the offline design was finished, I started converting the HTML to the Drupal template files. After fine tuning the CSS I started testing the design on the live website. The result is what you can see right now.

This is the first responsive website I've built as a student worker at mediaworqs. The website was developed for Kirola Sports, a FIFA licensed player agency founded by Stijn Haeldermans.

For this project Bob and I created a theme based on the Omega Framework. The framework combines the Omega theme with several useful modules, like the Delta module. This combination should allow easy configuration of a 12-column grid, but we encountered several restrictions that made some parts of the design overly complex.

Another thing I noticed, the framework adds a lot of stuff that we don't need. I know that it's normal you don't use every part of the framework, but in my opinion the extra burden on the site performance isn't worth it, for this site and probably also for future sites.

As a conclusion I don't think I would ever use the framework again, by choice. However the result is good and you can find some screenshots below.