RayDale Multimedia - a case study

[raydale]

This case study relates to the topic here: http://processwire.c...ndpost__p__8988 about creating an archive of 'stories' about how PW has helped in relevant real life scenarios.

Website: http://www.ray-dale.com

RayDale Multimedia

Ray Dale is a multimedia designer. His portfolio website was 2 years old as of March 2012 and in need of a refresh. He found that the content management for his website was more time consuming than he wanted and the website was generally slow in performance and complex to update.

Ray needed:

• A website that could showcase his latest work with separate portfolio content types
  
• The ability to show lots of images and videos in each section
  
• Complex interlinking between each portfolio item - where each item would belong to a number of simultaneous categories
  
• To be able to publish a number of pages under various sections on the website
  
• To have a condensed navigation structure - not over-facing the user with navigation
  
• A blogging space that was easy to update
  
• To gain complete control over the HTML, CSS & JS markup and therefore the design of the website
  
• The ability to take more control over the admin experience - without using a host of plugins - so that the CMS could be used for clients to make their lives easier
  
• Speedy performance - even if a shared hosting platform were used
  
• Good site security
  

The previous solutions

Ray was previously using Drupal as a content management system. Drupal is a great system, it’s incredibly flexible, it can be made faster and using template overrides, almost complete control can be taken of the HTML and CSS output. However, the process to achieve any of this is time consuming and clunky from a web designer / front end developer perspective. Drupal was also going to require a number of plugins to be installed to achieve a lot of the required functionality.

Ray tested migrating his website over to WordPress. WordPress is another fantastic blogging system with light CMS functionalities. WordPress is generally easier to use than Drupal and a lot of control over the HTML & CSS markup can be delivered - in a much easier manner than Drupal. However, WordPress is still light on CMS features in the admin system. This means that it is difficult without either using a lot of plugins or custom php development (using the WordPress API) to have custom content types and fields.

The decision to use ProcessWire

Having searched around for an alternative to Drupal and WordPress - revisiting other CMSs that Ray had also previously used - Ray eventually landed on ProcessWire having read about it on a forum.

Right from watching the initial video produced by Ryan Cramer (the creator of ProcessWire) Ray was intrigued by the possibilities that ProcessWire seemed to offer - effectively solving all of the issues currently faced.

To summarise ProcessWire offered:

• Custom content types in the admin
  
• Custom field types in the admin
  
• Good control over media uploads
  
• A simple to use admin system
  
• A neat and simple API for custom frontend / backend development
  
• A customisable admin experience
  
• The ability to have a custom admin url
  
• Complete control over HTML markup
  
• Good security with flood control
  
• A powerful and flexible templating system (that was also simple)
  

Ray was extremely impressed by the features that ProcessWire offered, however, many CMSs look great until you actually start using them - where the unnecessary complexities, weak architecture and terrible, bloated functionality often start to appear.

The functionality seemed so promising that a gamble was taken to build the Ray Dale Multimedia website - with very little time now available - to ProcessWire and test how it performed.

Building the website

Having built the original Ray Dale Multimedia website in Drupal, then converted to WordPress before deciding to gamble on ProcessWire - Ray now had very little time left to build his portfolio website. As a testament to the ease and speed of using ProcessWire - he was able (with a little help from articles in the forum) to rebuild the Ray Dale Multimedia website in two days of effective full time development. This included all of the content creation and learning the new system - with the inevitable (but surprisingly smooth) learning curve.

Enabling complete control over output

ProcessWire allowed Ray to write HTML and CSS without any of the interference you get from other CMS systems. So, Ray was able to use the following frameworks of his choosing:

• HTML5 boilerplate
  
• jQuery
  
• Modernizr
  
• Masonry
  
• A customised version of the 960 fluid grid system
  
• PrettyPhoto for lightbox images
  
• Less - to create minified CSS
  

Though it must be said that literally anything can be used as ProcessWire makes no assumptions on the frontend - even on the Javascript framework.

Quick and easy API

One really pleasant surprise was the jQuery influenced API that ProcessWire offered. For example you can use php queries such as:

$pages->find("selector");
$pages->get("selector, path or ID");

to find content in the system - you can even filter your queries by template type, fields attached to that item, etc. You can even use a range of selector operators.

The API effectively works as a super powered and infinitely more flexible alternative to the WordPress loop.

Cross referencing pages easily

Complex cross-linking between portfolio items was needed so that capabilities, technologies and services could be linked to each item. It was easy to create a taxonomy system that worked the exact way required once the fundamental concept of how pages work in ProcessWire was understood.

Building navigation that works

Unlike a lot of CMSs that work effectively as ‘bucket systems’ - meaning that content is separate from any kind of structure or hierarchy by default in the system - whereas everything in ProcessWire is a page and arranged hierarchically. Whilst this may seem strange and restrictive to some used to the aforementioned ‘bucket systems’ - it works incredibly well and enables you to build navigational structures that are easy to plot a current location in. It is also something easy enough to break away from if you want a more ‘bucket’ type system.

For example, in Drupal and WordPress it can be very difficult to highlight the navigation on a website if you are using custom content types. Try using custom post types in WordPress and keeping your navigation tracking which page the user has landed on - it’s extremely difficult without a fair bit of custom development (this is true as of the time of writing - WordPress 3.3.1).

Because ProcessWire uses a structure and hierarchy by default - this structure makes building navigation that can track the current page very simple.

Easy / flexible admin system

The admin system in ProcessWire was easy and fluid to use, logical and stable.

The admin system can also be overridden with templates (there are already some great community contributed templates).

Modules used

Whilst ProcessWire has a number of contributed modules from a thriving and helpful community - absolutely no additional modules were needed. All functionality on the website was achieved from a vanilla version of ProcessWire.

Performance

Another area of importance was the performance of ProcessWire. Again, Ray found this aspect to be well covered with built in caching capabilities that were thoughtfully included ‘out of the box’. The caching was simple to enable on templates and fields. The memory footprint of the Ray Dale Multimedia website was a third of that of Drupal on the same website without using addon caching plugins.

Challenges

The only real challenge faced was understanding that ‘pages are everything’ in ProcessWire. You build categories, taxonomy, articles, blog systems with the ‘page’ (and any fields it contains) being the basic building block for all of this.

‘Pages’ in ProcessWire can be attached to templates and injected with fields to enable the creation of literally anything conceivable. However, understanding this concept takes a little work for people used to other CMSs such as Drupal, WordPress and Joomla.

However, in context - and compared to other systems - this learning curve is still fairly easy. There are so many other time savers that this learning curve becomes negligible.

The other area that Ray had to understand about ProcessWire was that there aren’t any template system paradigms that exist in Drupal and WordPress. Other systems have parent and child templating systems with default parent templates that can be leveraged, however, because ProcessWire makes no assumptions on how you are going to build a project (being a true framework) you currently need to create your own template files. This is made easy by good documentation on the ProcessWire website and a decent set of ‘starter’ template files that come as part of the default install.

Conclusion

ProcessWire was an absolute dream to work with. Ray found it to be very stable, well thought out and hugely flexible. So much so in fact, that Ray has decided to standardise on using ProcessWire for upcoming web design projects.

The flexibility and simplicity of the admin system, combined with power in frontend development that ProcessWire provides is something that Ray found to be liberating and more importantly ‘best in its class’.

[apeisa]

Wow - pretty amazing case study, well written and very interesting!

[diogo]

This is great, raydale!

[Soma]

Thanks for putting this up here. Interesting read for sure!

[raydale]

Thanks guys! Hopefully this is start to get a few case studies on here.

[Pete]

It's a good read My thought though would be to make it personal if these end up on the new PW site - write them as customer succes stories rather than 3rd person case studies (which would just mean re-wording it to the 1st person in this case).

What do you guys think?

[diogo]

It's a good read My thought though would be to make it personal if these end up on the new PW site - write them as customer succes stories rather than 3rd person case studies (which would just mean re-wording it to the 1st person in this case).

What do you guys think?

Hm... I think the writing style should be free

[raydale]

It's a good read My thought though would be to make it personal if these end up on the new PW site - write them as customer succes stories rather than 3rd person case studies (which would just mean re-wording it to the 1st person in this case).

What do you guys think?

I think that's a fair enough point - particularly in this case. I have a habit of writing like this from working as an employee of the big corporates.

However, as PW grows and the community grows (the Drupal showcase reflects this) you will often see 3rd party entities writing articles on behalf of the studio who created a the website / project. To force this either way would potentially alienate one or the other.

I would like to see what other people here think too.

[apeisa]

I agree with Diogo here: no reason to be too specific how these should be written or produced.

[charliez]

Excellent Case Study!!

I like the way it is written because it can be used for distribution

to promote both ProcessWire and Ray Dale.com

I am a newbie so I have some questions if I may...

- The ability to have a custom admin url

What is this? URL segments?

- Good security with flood control

What is "flood control"?

- A powerful and flexible templating system (that was also simple)

Is there a templating system? I thought that there was none, just PHP.

Thanks for the Case and I am also getting in the "pages are everything" state of mind!!

[SiNNuT]

I'm quite the noob myself but i'm sure someone will correct me if i'm wrong

-snip-

I am a newbie so I have some questions if I may...

- The ability to have a custom admin url

What is this? URL segments?

I think this is just as easy as editing the name of the admin page to something other than 'processwire', like 'mysecretadminpage'

This is a case of security through obscurity but it's nice that it is possible

- Good security with flood control

What is "flood control"?

I think this refers to a mechanism that limits the number of (failed?) login attempts. Sometimes with an interval that increases with every failed attempt. Not sure where and how PW implements this.

- A powerful and flexible templating system (that was also simple)

Is there a templating system? I thought that there was none, just PHP.

I think you are right. It's just PHP, combined with the lovely API that makes things a breeze imo

[raydale]

Charliez, I think SiNNuT has pretty much answered your questions. I would add:

• Custom admin URL - SiNNuT is spot on here. It may seem like a small point, however, if you are training and documenting the cms for a client it is often useful to state that the 'backend' system in ProcessWire is the 'admin' area. Therefore, it can be extremely useful to have them login and manage their content from a 'domain.com/admin' style url.
  
• Flood control - again SiNNuT is accurate here. To add more information - if you login to ProcessWire and go to your 'Modules' section you will see 'Session Login Throttle' there. The description to this module states: 'Throttles the fequency of logins for a given account, helps to reduce dictionary attacks by introducing an exponential delay between logins'. This is often referred to as 'flood control' with other CMSs and is usually NOT built into the system - instead being offered as an addon module. PW makes this sort of basic protection simple by being built into the system and enabled by default.
  
• Templating system - to my mind there is a templating system in PW. Yes, it is very 'light' and gets out of your way by not assuming you want to work any particular way. However, the fact that you setup 'templates' in the PW admin and then the system finds those php files carrying a predefined template name from the 'site/templates' folder suggests that there is some sort of automatic templating sytem.
  

Guys, as stated elsewhere I am also a bit of a noob when it comes to ProcessWire and this case study is very much from that perspective. Some of the language I use may be at odds to the vision and communication intended here. So, this is a good discussion - I think - as I am approaching PW from more of an enthusiastic outsiders perspective. I can change any of the case study to better reflect a desired approach if needs be.

[formmailer]

Ray, I enjoyed reading your case study. Thanks for sharing!

/Jasper

[raydale]

Ray, I enjoyed reading your case study. Thanks for sharing!

/Jasper

Thanks Formmailer!

[ryan]

Ray this is fantastic! Thanks so much for writing and sharing this with us. I am setting up a case studies forum as a subforum of showcase (unless you guys think it should go elsewhere?) and will move this there. Thanks again!

[raydale]

No problem Ryan. I will get more case studies up as I go along. Hopefully, this will entice other people here to do the same and add real use cases for people considering PW. I'm also hoping that this will persuade people that PW actually delivers on its promise - and isn't too good to be true as it first seems.

I think a subforum should be fine.

[Nico Knoll]

Love this!

[onjegolders]

Just saw this. A fantastic read and more than anything else, it just reaffirms the view for beginners that high-quality work is definitely achievable with Processwire. Case studies like this I think are definitely a confidence boost for any other designer using this system.

Would be great to see a few more, and for different types of site.

[raydale]

Just saw this. A fantastic read and more than anything else, it just reaffirms the view for beginners that high-quality work is definitely achievable with Processwire. Case studies like this I think are definitely a confidence boost for any other designer using this system.

Would be great to see a few more, and for different types of site.

Thanks very much onjegolders - I'm glad you found it useful. I hope to get more people contributing Case studies and I plan to write one for my next client site with PW coming up soon.

I hope the case studies will highlight the strengths that PW has in real life scenarios (it has many) and help people to decide on using it.

[Joss]

Late to the party, though I am, just read this and booked marked it as a really useful reference.

For a newcomer like me, trying to work out a) what I can do with processwire and b) how I should do it is difficult.

Processwire is so basic when you first install it that it really looks like it cannot do much more than sew a few pages together - even though that is, of course, what most websites are!

Reading properly written case studies that demonstrate not just what problems were posed but how they were addressed is invaluable and can help others think out of the box and take on the truly bendy nature of PW properly.

Thanks

Joss

[OrganizedFellow]

Incredibly well-written RayDale.

[raydale]

Thanks Joss and OrganisedFellow. I've been away on other projects for a while. Glad you found the study useful.

BTW - this site will be up for a bit of a refresh around May this year. I'll post an update then and a bit more in retrospect.

[dragan]

Thanks a lot for this tutorial. I'm a PW newbie (coming from MODX), and naturally, every piece of real-life examples and how-tos are welcome.

I have one question:

Cross referencing pages easily

How exactly was this accomplished? In the admin section, did you create a text-input and just entered other page ids?

Or to put it in other words: Is there a special input-field that lets you select one or more PW pages? (radio buttons, select field, checkbox or whatever).

[diogo]

@dragan, welcome to the forum!

Yes, there is a special field for this task. Have a look here http://processwire.com/videos/page-fieldtype/

[bfncs]

Thanks a lot for this Ray, it is a really good read and something you can point your customers to, if they are in doubt because they've never heard of Processwire before.

I would really like to see a case studies area on the main Pw site if there are some more of these.