Weekly update #6

[Days spent on website this week: 3.5]


The Home page - most recent view of it!

Another short week this week, owing to the Bank Holiday, so only 3 days spent on the website (a normal week is 4 days spent on it as I do other bits of work one day a week).

- Added the footer (c) section; I'll add the accessibility 'Change text size' bit to the footer if I get time, but may do after September. I don't think this bit is too important as you can change the text size in most browsers by pressing 'Ctrl' and '+' or 'Ctrl' and '-' (Ctrl becomes Cmd if you're on a Mac). I've also added the section for the footer logos, which need to be revised due to some being out of date.

- Quick Links now looking correct. I need to adjust the spacing between these at some point as they're a bit far apart.

- Lots of CSS on the homepage, along with Panels stuff. Tweaking it to look like the Web Visuals. It's getting close! Although so far it's only the Home page that's close, most of the work I've done up to now has been 'behind the scenes' stuff essential to make the whole site work, as well as learning how to do lots of things. Now that the Home page is nearly there, it'll be a lot easier to implement what I've already done on the other pages of the site.

- I've started work on getting the navigation that appears on the left hand side of all pages, other than the Home page. The web visuals have it looking something like this:


Left side navigation for the Learning page

I decided a while ago for consistency to make this nav bar the same width as the left hand column on the home page (which contains Quick Links, Events, etc.), so it's now slightly wider at 220px. I'm also going to change it slightly from the web visual shown, to also include the other primary links ('Home', 'About Us', etc.). The reason for this is that I'll be able to use the same navigation bar for every page (rather than having just the 'Learning' link at the top when you're in the Learning section) which will make things simpler for me to put it together, and should also make navigating the site easier for the user, so it's a win-win idea! In this case, if you're in the Learning section, the background behind the word 'Learning' as it's shown above will appear white, as is shown for 'Welcome'.

-ARGH! At 3pm on Friday afternoon, I experienced my first ever Drupal WSOD (white screen of death). Although this doesn't initially sound as scary as a Blue Screen of Death, it's actually worse, as at least a blue screen alerts you to the fact that the computer knows something's gone wrong. A white screen just leaves you stranded, unaware as to whether it's your fault, the computer's fault, or both. Or neither.

Fortunately Drupal have a page on their website about dealing with this and it was only the admin/build/modules page I was having this problem, which is mentioned on their page (the error occured when I tried to upgrade 4 modules at the same time). I followed the advice and ran upgrade.php, which gave me a scary looking error message, along the lines of:

Fatal error: Unsupported operand types in .../sites/all/modules/ctools/views_content/views_content.module on line 26

Not what you want when there are only a couple of hours until the weekend and you're feeling smug about the work you have done.

Fortunately, Dr Google came to the rescue when I copied and pasted the 'Fatal error...' message in and someone else had already had this problem and reported it on the Drupal website. All it took in the end was me having to remove one line of code and everything is now fixed.

The problem lay in the fact that some Drupal modules rely on others, which was the case for two of the modules I was upgrading. I think because of the order in which I upgraded them, it got confused.

All I can say is thank Zeus I backed everything up before I upgraded the modules!

- As a result of upgrading the Panels module, some weird borders have appeared around the edge of things:


Home page with strange borders added around things, thanks to Panels

I've removed these using CSS and the Home page now looks as shown at the top of this post.

Drupal does occasionally like to keep one on ones toes!

Weekly update #5

[Days spent on website this week: 3.5]

I lost half a day this week due to an emergency with the school newsletter!

- I've started to experiment with CSS a bit more to theme the content. This is how I go about actually changing the default appearance that Drupal gives, to look like the desired Web Visuals. So it lets me tweak all sorts for things such as the font, colour, etc. for specific areas within the design. I've managed to work out for example how to add dotted underline under each News item (on every page that a News item appears).

- I've started experimenting with the Panels module (version 3). It's been a bit tricky to figure out as all the tutorials I've found online are relevant to version 2, and I think it's changed quite a bit since then. I've laid out panels for each component of the home page. This is one of the things I've been slightly terrified of (along with styling the pages, which will come later), but the module seems to work pretty well. Although it did take a few attempts to work it out!

One thing I've decided to try and avoid with this module is the 'flexible' layout option, which turned out not to work very well (it didn't mark the css up for me nicely). But fortunately one of the templates it comes with works perfectly as it is (although I've used css to adjust the column widths). There are still a few things I need to iron out on the Home page now i'm displaying it as a panel, but I feel like this is a great step, and that I'll know how to lay out all the other pages now!


Home page using the Panel module to set the layout

- Created a design mockup for the Expressive Art faculty and the Art department, taking into account a realistic example of what text may appear on their page, and changing the page design to give a more realistic idea of how the finished page may look (although this is still subject to change). I created two versions of each of these - one for how it'll look when finished, and the other with my guess as to how it will look for Sept.

- Went through the content with my amazing boss, to figure out things like what exactly we need for each page, and word limits for each section.

Weekly update #4

[Days spent on website this week: 4]

- I've set things up so that, when a News story is added, an image can be uploaded to go alongside it (as per the Web Visuals). Using the ImageCache module, this then resizes the image to the correct thumbnail size that I want for the home page, as well as producing a larger version of the image that fits nicely on a page.

- I think I'm finally getting to grips with Views, one of the most important Drupal modules. I managed to get the view for the News items (thumbnail, title, and summary of content), working unaided. A breakthrough for me!


The updated News view

-I've added the Pathauto module (http://drupal.org/project/pathauto) which is one of the most popular Drupal modules. This automatically creates a friendlier-looking URL when you add a new News or Date item, by incorporating some of the text from that item.

So, for example, prior to installing Pathauto, if I'd added a News story with the title 'Will it add 'news' to the url this time?', the URL for this story would end up as something like this:

http://www.sns/hackey.sch.uk/node/60

With Pathauto, it becomes this:

http://www.sns/hackey.sch.uk/news/will-it-add-news-url-time

Which shows both that it's 'news', and some of the title of the story.

Why is this useful? Well, aside from being a more 'human' thing to read/remember, it also makes our website more friendly to search engines, a la Google.

- Having set up my Taxonomy terms last week (allowing someone writing a News story to say which subjects it's relevant to, e.g. 'Mathematics'), I've worked out how, using Views, to display News items only relevant to Mathematics on the Mathematics page. I'll eventually get round to doing this with dates too, so that each faculty page has its own calendar.


News with the 'Mathematics' tag appearing in the Mathematics section

- I've added a fuller list of Taxonomy terms (all faculties/departments are now on there). I'll need to figure out at some point what else will require taxonomy terms. This shows the options available when adding a News item now:


New Taxonomy terms added for faculties and departments

- Added the Menu Breadcrumb module (http://drupal.org/project/menu_breadcrumb) which has fixed the slightly odd behaviour of breadcrumbs with the 'out of the box' version of Drupal:


Breadcrumbs now reading correctly

- I've created a favicon for the site (the little logo you see in your browser next to the site's URL). This required getting an extra plugin for Photoshop (which can't otherwise save .ico files, those required for favicons, out of the box). I used this link to help create it:

http://www.revolutionwebdesign.com/blog/index.cfm?mode=entry&entry=8B1F9EB1-D1B9-61C4-09F428DC29AF6230


Favicon

- Upgraded Drupal Core to version 6.12

Weekly update #3

[Days spent on website this week: 2.5]

A shorter week than normal this week due to the bank holiday and some urgent things at work, so only 2 and a bit days rather than 4 this time.

- Added dimensions to the Web Visuals of some areas on the Home page (required for the css). I've since decided that the Header (wiggly lines + logo) and the photo slideshow that appears just under the primary navigation are taking up far too much vertical space, so I've reduced this. Once web browser navigation is taken into account, and if you're looking at the site on a wide screen (such as that of the laptop I'm creating it with), the actual content of the page previously only began about half way down the screen!

Modified Web Visuals with smaller header and slideshow, some dimensions shown

- Looked at the 'Panels' module for laying out the Home page. I'll be looking into this more soon.

- Added 'Taxonomy' to the News and Dates content types. This is a way of categorising content, so that when, for example, a Date is added to the calendar, I can say what subjects this is relevant to. So if I was adding information on a school play to the calendar, e.g. Romeo and Juliet, I can specify when I'm uploading this Date that it's relevant to both 'Drama' and 'English'. Once I've got time after the initial 'alpha' version of the site in July, I'll hopefully be able to do clever things with this in terms of giving faculty pages their own calendars, which only show events related to the English Dept, for example.

- The default method of input for these Taxonomy terms in Drupal is ok, but it could benefit with being a bit more user-friendly. To get around this problem, I spent some time researching how best to allow input of this kind - this page on the Drupal site was helpful: http://drupal.org/node/212834. I opted to use the 'Content Taxonomy' module to add checkboxes for the available categories for News and Dates content, as this seemed to be the most popular module of its kind, and seemed to have more potential for customisation.

- Scrap that - I tried 'Content Taxonomy' out for a bit, and it didn't seem to integrate well with Drupal's core Taxonomy features. So I'm now using 'Taxonomy Super Select' which seems to do the simple job of providing checkboxes for Taxonomy terms, far better.


Taxonomy in action - notice how News items now have links to the subjects they relate to


When the Humanities link is clicked, the user is taken to a page with all Humanites information in one place (News and Dates)

- One of the problem's I'd intended to fix, seems to have fixed itself! (Not that I'm complaining). For some reason, until I checked yesterday, an error was occurring when a normal user added a Date to the calendar, this would get published immediately, without requiring moderation from an Editor, which shouldn't be the case (News items were working perfectly, however). Dates now go unpublished until an Editor allows them. Phew!

- I've started setting up News items such that an image can be uploaded to go alongside them. I'm currently trying this our with the ImageField and ImageCache modules, but it's quite possible I'll change my mind about these modules once I've seen them in action and start again using different ones!