Block Based Demo Site

[Joss]

This is a profile I am creating for my own use (though I will make it available once a lot of the kinks are out of it)

It is still Work In Progress!

http://pwdemo1.stonywebsites.co.uk/

This is basically creating a CMS that would be familiar to users of Joomla and similar where a lot of the information is contained in blocks.

Perhaps it should be called "Process-Drumlapress"

It is also designed to be very localised where many "front" pages can be created reflecting postcodes in a local area and where a phone number is pushed heavily. It will contain a lot of SEO tools throughout - the PW page naming and URL base is really useful here!

This is a Twitter Bootstrap based site, though I admit I need to tweak it a bit to get it working completely smoothly.

There is a central site settings page where many bits can be configured:

• Above and below content global banners can be chosen
• some common side bar blocks can be chosen
• Common footer information can be added
• Site name and top banner can be added
• Bottom blocks can be selected from a list and their width as a span number added
• Blocks can enable/disable display block title
• And other bits and pieces.

Each page created can choose whether to select the Global Above or Below banner, no banner or a custom banner text box.

Each page can choose from additional sidebar blocks

Each page can add an additional sidebar text block

Products and Services work on a very simple category system where you create a category page (just for a Select option). You then create a display index for the category where you fill in some intro information and choose a category. That will automatically create a list of all products or services linked to that category. (At some point I would like to customise the admin to put some of these links and create buttons on the top menu, rather than navigating through the pages list).

The Gallery used Fancy with a carousel - thanks for the Thumbnail module!

The front slide show allows text to be laid over the images.

Still to do:

• Add pagination to things like products and news
• Create a setting so the fixed footer can be un-fixed or removed
• Add some additional block customisation like border and background color/image
• Clean up some of the admin fields and improve labelling
• Sort out the admin permissions properly (they are a bit drunk at the moment)
• Clean up some of the template files

The overall look of the site is intentionally basic and some of the CSS values (like padding and margins) are default rather than pretty. This is intentional as this meant to be a starting point rather than a plug-and-play profile - in other words, it would need to be customised for the specific client.

The intention here is that you can change the structure of the site to a certain extent with just a few files without having to change the back end administration at all (though, some thumbnail sizes would possibly need to be changed.

Edit:

Forgot to mention a couple of tricks:

• The bottom blocks use JQuery so they are equal height all the time
• I have used JQuery to place an optional second image in a news article which counts the number of paragraphs for an insertion point. This means I do not need to use the image button in the TinyMCE.

Edit 16/01/2013:

Just updated the site a little.

It now runs on 2.3

News can be sorted by year and has grown itself Bootstrap styled pagination.

There are now potentially three rows of blocks at the foot of the site, which looks a bit mad at the moment, but in reality you would have one row of blocks, the next row perhaps a banner and the last row a normal footer.

You can select blocks from a library and choose how many in each row and the span size of each.

You can also select background colours for blocks.

In the backend the forms are sorted out a lot more into tabs and field sets to make them neater - especially the Site Settings page which has a lot of parameters now.

I have used Soma's wonderful Teflon Theme, but added a different, customised JQuery UI theme and changed the menu styles to suit my partner for her site. Other than that, it is as original.

http://pwdemo1.stonywebsites.co.uk/admin1ss.png

http://pwdemo1.stonywebsites.co.uk/admin2ss.png

Next to do:

• Put some better content in it for demo purposes
• Create a second site using the same basis, but change the template round a bit.

[Adam Kiss]

Interesting… I don't have much to say here, except 'Drumlapress' is gold.

[fmgujju]

Be nice - I am not a proper programmer and haven't the foggiest idea of what I am doing.

The statement you have wrote is wrong itself if you can make demo like the one you made yourself! Kudos!

[Joss]

Thanks fmgujji!

But to be honest, I am just the king of Cut 'n' Paste.

And that is a tribute to the way ProcessWire works, actually. Since I have been able to put that together relatively easily (I mean, in a way where I understand it) without knowing much PhP and almost no Javascript!

Joss

[diogo]

I am not a proper programmer and haven't the foggiest idea of what I am doing.

The statement you have wrote is wrong itself if you can make demo like the one you made yourself! Kudos!

In Portugal we have an expression "giving us music" that means "playing with us" or "trying to full us". In this case it applies beautifully

[Joss]

In Portugal we have an expression "giving us music" that means "playing with us" or "trying to full us". In this case it applies beautifully

Well, this is my proper job .....

http://dancingbear.co.uk/

Now, if anyone wants music composed for their clients commercials and/or websites, now then I AM an expert!

Joss

[Joss]

 Just updated the demo a bit - details on the original post.