Jump to content






Photo
* * * * * 2 votes

IP.Content 2.3 Dev Update: Introducing Block Templates

Posted by Rikki , in IP.Content 24 January 2012 · 9,865 views

As part of our goal to improve the usability of IP.Content, particularly for non-coder administrators, we've used the 2.3 release to look at ways of reducing or eliminating the amount of code that needs to be written in order to create great websites.

In the current version of IP.Content, blocks require individual templates (entered as part of the wizard process), and the default, unedited HTML is generic and not ideal for most blocks you'd want to create. This clearly left room for improvement, so we're pleased to introduce our solution: block templates. Block templates give us two primary benefits:
  • Make it easier for IP.Content users to set up a good website, without needing to code
  • Make it possible for those who can code to share interesting block interfaces either directly or through the IPS Marketplace
Reusable Block Templates

In IP.Content 2.3, the templates that feed blocks use are created separately, using a new Block Template manager, and then assigned to blocks when they are created:

Posted Image
The block template manager


What does this mean in practice? Firstly, it means that block templates can be used by more than one block, without recoding them, and when changes are made to the template, all blocks update at once. More importantly, it means block templates can be created, exported, shared and imported, so that those with the skills to create them can share them with those who can't. We hope this will spur some great block interfaces from our modding community, to benefit all IP.Content users.

How does it work?

Templates are linked to a feed type and a content type. For example, you might create a template designed for "Topics" in the "Forums" feeds, or "Albums" in "Gallery". In addition, you can create generic templates based on a content type alone, for example "Comments", which can then be used with any feed that shows comments.


Posted Image
Adding a new block template

When feed blocks are created, you are presented with a gallery of all suitable templates. Clicking one previews the template with the real data that the block will generate, so you can see exactly what the block will look like on your pages:


Posted Image
Creating a new feed block using a block template

Of course, if you still wish to provide a custom template for a particular block, you can do so - the process will be exactly the same as before.

A Javascript & CSS framework provided

To go with block templates, we've created a mini Javascript and CSS framework. This means that all block templates, whether they are provided by us or by our modification community, can maintain a consistent style.

The required framework files are automatically injected into all IP.Content pages, whether you use the IP.Board wrapper or your own HTML wrapper.

The javascript side of things is powered by jQuery, and based on the jQuery UI Widget Factory. Block templates can include their own assets, such as javascript widgets, CSS files and images. IP.Content automatically compresses all the JS and CSS files from all templates into a single minified file to help keep websites loading quickly and cut down on HTTP requests.

Sharing templates

As mentioned above, block templates can be exported and shared with other IP.Content users. To make this process very simple, when a template is exported, it's built as an XMLArchive - that means all of your CSS, JS and other assets are compiled into one file for you to distribute (a little like an IP.Board skin is).

Posted Image
Exporting a block template into one XML file

Conclusion

To give you a taste of what is possible with block templates, here's a demo page I've created using some of the default templates we'll be providing. No code - other that putting template tags into a page and adding a div to make the right column - was typed to build this page!

Attached Image
An example page using default templates


Our aim with block templates is to allow all IP.Content administrators to have interesting, useful, interactive blocks, without needing to write the code themselves. The addition of a new standardized JS and CSS framework also means that blocks can maintain consistent styling, regardless of who authored the template.

We'll be including a number of pre-made templates with IP.Content 2.3, and hope that the modification community and other coders will embrace the new possibilities offered by block templates, and create many more to be shared via the IPS Marketplace. Once IP.Content 2.3 is released, we'll publish some developer documentation to help you get started with the new tools.

We think block templates are a huge step forward in making it easier to create websites using IP.Content. We hope you exploit their full potential!


We look forward to your suggestions and ideas for improving the software in our feedback forum. We heavily rely on feedback from all of our clients to shape the future of our software, and even if we don't reply to every topic, rest assured they are all read. If you have any comments on the new block templates feature in IP.Content 2.3, please share your thoughts below!

  • Breadfan, AndyF, Nick▓ and 18 others like this



This is EXACTLY what I need. I love the ability to create parts of my website from within IP.Content, and this makes the process much easier, and less stressful. Really loving all the great features IP.Content is getting.
Looks good :)
This sounds really good. Looking forward to playing with it
it means now I can use IP Content easily as like Subdreamer Portal system?
Because i'm not a coder and i don't know coding. With Subdreamer before 2-3years, creating portal, block and displaying latest topics, members etc. was eeasy but when I have purchased IP Content in 2011, i haven't understood anything :s and i don't use since longtime...

so now this version of IP Content is for me? is easy as like using Subdreamer system?
    • Marcher Technologies likes this
w00t w00t
wonderful
awesome
marvellous
great
exactly what we wanted and with jQuery, I'm sure I'm gonna fill IPS marketplace with blocks
    • ADKGamers and Rugger like this
by the way, what is the ticker template?
A ticker shows headlines, one after the other. There's an example at the top of http://www.bbc.co.uk/news/ or http://www.reuters.com/ :)
    • Edward Shephard, Enkidu, Marcher Technologies and 1 other like this
Not quite sure I agree with the use of jQuery alongside Prototype as it seems like overkill to me... It does seem that sooner rather than later IP.Board as a whole will be jQuery based, which will be good for all. :P

Still, it's good to see that these kind of changes are being made to make the system easier for new users. :)
    • Marcher Technologies likes this
Photo
Marcher Technologies
Jan 24 2012 06:54 PM
... Ricki... just... pure yaaaaay!
one of the items I have been banging my head against with custom feed sources.
Thank you!!

A ticker shows headlines, one after the other. There's an example at the top of http://www.bbc.co.uk/news/ or http://www.reuters.com/ :smile:


thank you. Can't wait to get my hands on this. With jQuery, I'm gonna make it scroll :)
    • ADKGamers likes this

Not quite sure I agree with the use of jQuery alongside Prototype as it seems like overkill to me... It does seem that sooner rather than later IP.Board as a whole will be jQuery based, which will be good for all. :tongue:Still, it's good to see that these kind of changes are being made to make the system easier for new users. :smile:


I suspect IPB 4.0 will be powered by jQuery. :)
    • Lewis P likes this
This is great news. If you read the blog entry literally, it says feed types. So to me, I infer that the block templates will not work with raw php or other content types.

1. Would be great if the dropdown menu for feed types offered RSS feeds from the IPB system

2. For those of us who want to create specialized feed blocks, it would be great if you offered the ability, like the VNC, to check off items, such as [blogs I follow | content not yet read], as an example, or ... for the calendar events, [events I follow | latest updates],

3. For those of us who still use the ips 3.14 legacy portal and who wish to upgrade to 3.2.3, we are faced with having to create ip content blocks for latest blog entries because that plugin did not carry over when the portal was turned out as a 3rd party app... and this ip content block creator works except that the legacy latest blog entries portal plugin that was still supported from IPS was so much nicer in appearance than what you can create in ip content as a generic block. Why? Because the legacy blog portal plugin had such a nice layout with the blog creators mini photo, and then to the right, on one line, the blog entry name and below that, the name of the blog and the date .... and if you compare the output to the generic output of the ipcontent block, it is all jumbled together and there is NO mini photo and no name of the blog

so ... to bring home the point ... what you have done in improvements is great for the overall look of the template but if I understand it correctly, the templates won't do much for how the content is laid out inside ... and having a bunch of check boxes in the block creation process that allows me to add a mini photo, add 'show topic or blog title, add 'show blog name or forum name', and maybe add ajax capability of move up and down what shows first and second and third for date/time and blog title and blog name, all of these cookbook type features for most of the non-coder types who purchase ipcontent would be really helpful
Excellent news :)
Wow... great!... :)
Is it possible to add blocks on both right and left side? If not, what are the chances you guys make it happen?

Keep up the good work! :smile:
damn it! this is the 10th time I read this blog post. Still so damn excited.
Rikki, you had me at "improve the usability of IP.Content, particularly for non-coder administrators, we've used the 2.3 release to look at ways of reducing or eliminating the amount of code that needs to be written in order to create great websites." *man crush* ;-)

The IPS Marketplace is proof that community made Blocks just aren't being exported and shared as much as they should be. All these changes (improvements) definitely will change this for the better I think.

One of my main issues with IP.Content still seems unchanged however and that is we cannot display content from multiple feeds/types (such as a block that displays the next 3 upcoming Calendar Events with all RSVP attendees and their Member Age). I would like if (no idea how) I could have a block, click the 'variables' button and get a list of almost every variable imaginable (laid out hierarchically of course), instead of how it works now, and that is we only get a list of variables out of (what I assume is) a single database table.

Blocks should also be (optionally) editable from the front-end. Currently if you want a 'Designer' or 'News Editor' to change an image in a HTML block, they need ACP access. Other CMS software have an 'edit' mode where you can edit a block directly from the front-end. Can't wait to see that in IPC! (yes I know IPC isn't a CMS, but plenty agree it should be).

P.S: Can future screenshots be hosted here and not some 3rd party site? I cannot view them currently due to proxy restrictions, so I can only see the example page screenshot.
Photo
Blueracer66
Jan 24 2012 09:52 PM
Keep up the great work!

This is great news. If you read the blog entry literally, it says feed types. So to me, I infer that the block templates will not work with raw php or other content types.


Yes, that's correct - block templates are only for feed types. It's almost impossible to provide a template for a custom template, because it could contain anything.

1. Would be great if the dropdown menu for feed types offered RSS feeds from the IPB system


It's off to the right behind the scrollbar in my screenshot, but yeah, RSS feeds are supported in block templates since that's a built-in feed type in IP.Content.

2. For those of us who want to create specialized feed blocks, it would be great if you offered the ability, like the VNC, to check off items, such as [blogs I follow | content not yet read], as an example, or ... for the calendar events, [events I follow | latest updates],


I think this would be great, but it would require blocks to be able to change their data source on the fly, which unfortunately isn't how IP.Content is set up to operate right now*. At present, the data source is fixed (it's determined when the block is created), and can't be changed when the block is displayed. What you're suggesting would require the block to be able to pull additional data on the fly. Certainly something that would be great to see in the future.

*Theoretically, you could actually do this in a block template. Say you're creating a template for forum topics. The block template has access to the forum ID and filter values that the block defined, so it could fire off an ajax request to get the next 10 results, providing somewhere in IPB returns the data needed. This would be a pretty advanced template, though, perhaps beyond the scope of what they're intended to do at this stage.

3. For those of us who still use the ips 3.14 legacy portal and who wish to upgrade to 3.2.3, we are faced with having to create ip content blocks for latest blog entries because that plugin did not carry over when the portal was turned out as a 3rd party app... and this ip content block creator works except that the legacy latest blog entries portal plugin that was still supported from IPS was so much nicer in appearance than what you can create in ip content as a generic block. Why? Because the legacy blog portal plugin had such a nice layout with the blog creators mini photo, and then to the right, on one line, the blog entry name and below that, the name of the blog and the date .... and if you compare the output to the generic output of the ipcontent block, it is all jumbled together and there is NO mini photo and no name of the blogso ... to bring home the point ... what you have done in improvements is great for the overall look of the template but if I understand it correctly, the templates won't do much for how the content is laid out inside ... and having a bunch of check boxes in the block creation process that allows me to add a mini photo, add 'show topic or blog title, add 'show blog name or forum name', and maybe add ajax capability of move up and down what shows first and second and third for date/time and blog title and blog name, all of these cookbook type features for most of the non-coder types who purchase ipcontent would be really helpful


I'll look into adding a default template for blog feeds - what you're describing is what block templates will be perfect for. You want a blog block that shows the list in a certain way, and now we or other authors can make that for you.

The second part of what you're describing here is beyond the scope of block templates. There's no settings for individual block templates, so you can't tell a template to show x, y or z exactly. What's coded in the template is what will show when the block is displayed. Template settings are something I'd like to investigate in future, but it's not available at present.

Is it possible to add blocks on both right and left side? If not, what are the chances you guys make it happen?Keep up the good work! :smile:


You can set your pages up however you like - the two columns in my example page are just to show the blocks in action. You could have any arrangement of blocks, you'd just have to build the layout in a page then insert the block tags.

April 2014

S M T W T F S
  12345
6789101112
13141516171819
202122 23 242526
27282930   

Recent Entries

Latest Visitors

  • Photo
    Meddysong
    A minute ago
  • Photo
    EleganceReef
    A minute ago
  • Photo
    Andrii Koretskyi
    2 minutes ago
  • Photo
    + ORION ::
    3 minutes ago
  • Photo
    Ryan Ashbrook
    5 minutes ago
  • Photo
    AlexJ
    6 minutes ago
  • Photo
    FaggoT
    6 minutes ago
  • Photo
    kalderwin
    8 minutes ago
  • Photo
    GreenLinks
    12 minutes ago
  • Photo
    goli1995
    12 minutes ago

Recent Comments

Search My Blog