launch www.pluimveeweb.nl

[Martijn Geerts]

Today we launched a new website www.pluimveeweb.nl. This is our first portal page build in ProcessWire is all about poultry.

Partners of pluimveeweb can have their own Microsite within the site. There are several different sources where information is comming from, imported to ProcessWire, managed in the backend and make it ready for articles.

It is quite a big project worked the last 3 months on it.  

Here ya go: pluimveeweb

[Joss]

This is great stuff Martijn - I would be very interested to know how you have structured it out to allow for the micro sites. This is something that I think is a particular area that is good to develop in processwire. If you ever feel like writing out a techy case study.....

[arjen]

Looking great! Very nicely structured. Where are the minisites? Can't find them!

Couldn't help but noticed a small typo: Martktprijzen

[pwired]

Looks pro on layout, colors, look and user experience. I guess it doesn't go any better than that.

I guess that was a lot of work. Did you do that site alone ?  Used any framework ?

[Martijn Geerts]

As Joss mentioned ( I hope I find some time to do a case study. ) 

I didn't use any framework as I thought it's not necessary/not possible here as I needed specific widths.

The site should run on 1024px monitors and lower, and the company wanted the 970px banner format in the top. Next they wanted a fixed sized 336px rectangle banner on the right. We wanted to have max space on 1024px and it should work on mobile.

The thing I wanted was that more important content should be more in the top in the source then less important content. 

The max space I could give the site was: 1024px minus the 20px scrollbar for Windows XP Explorer 8. ( 1004px )

So here's  the calculation what I used for the sizes: (16 pixels is gutter space )

header:

     banner XL
16 + 970 + 16 = 1002px

body:
     column     column     banner size column
16 + 301 + 16 + 301 + 16 + 336 + 16 = 1002px

So 1004 is the max width the site can be (screen wise) but I succeed it to stretch till 1002.

The columns on home for example will figure out if the column should float left or float right. Those blocks can be 100% width or 50% width of the container. it's depending on height of  previous blocks. I wrote this script to handle it.

[Martijn Geerts]

Follow up, (scripts)

For this website I needed a way to insert JS & CSS files on demand. All blocks are controlled by the editors of the website. And I don't want to serve all scripts to the client. I 'needed' a way serve one file back to the browser but only containing the scripts it needed. 

Most blocks are essentially pages that get rendered. So from within that block I wanted to use  $config->scripts->add('my-script-here.js') to register the scripts.

That Filename array is picked up by the minify script. Each file gets minified and stored with MarkupCache if not exist, or if the modified date of the original file is higher than the cached version a new markup cache file is created. This allows me to edit and save the Javascripts while the minify template serve to updated file back. ( this feels the same as using a preprocessor ). Proper headers should be send to the client so that the client don't need to re-download the minified version over an over again.

This handling & the concatenate is handled all in the template file. This all felt very good, so thats why I wanted to share this with the community.

I started writing this module at that crazy last day voting for ProcessWire at Bitnami for the community. For those who are interested, I wrapped the whole thing in a module, template and class. The technic used is in production at pluimveeweb, but the module here is not. If you want to use it, you should test it thoroughly!

For pluimveeweb i didn't used the CSS, that part is added while writing the module.

Here ya go,

github: BundleFilesMinify

[Adones]

Partners of pluimveeweb can have their own Microsite within the site. There are several different sources where information is comming from, imported to ProcessWire, managed in the backend and make it ready for articles.

I guess you mean something else than what Joss, Arjen and I understand with microsites...

Structuring out the website to allow for microsites is a question that not only Joss has, I am looking for information about this matter for quite some time here in the forum.

[Martijn Geerts]

The microsite, is a part of the site, where only a partner of pluimveeweb has his rights. Those rights are based on a parent page. I will explain this later.

[statestreet]

That admin looks fantastic! What are you using for the page icons?

[kongondo]

That admin looks fantastic! What are you using for the page icons?

Hint...check his signature ;-)

[Martijn Geerts]

note: I do use Font Awesome page label, but that one should be updated soon. Just After the release of that module, Ryan included Font Awesome int the core, next, it didn't took long before Font Awesome updated to the the new classNames.

I really think that module deserve to be updated and it have to rewritten entirely. It has to adapt to how the how the things are now. I simply didn't had the time to do so.