Content Block Builder in ProcessWire

[bora]

Hello Everyone,

I'll start my first project with PW next week, a multilanguage product catalogue website that demands some complex relations between products/products groups/usage areas etc. Normally I almost always use WordPress for CMS projects, but I know WP well enough to know that it would be very problematic for this website. So I choose to use ProcessWire, which I'm following for more than a year, tried locally a few simple things to get familiar. I noticed that I can plan more flexible site structure with PW, without all that post type, taxonomy etc structure.

While waiting for designs to finish I started working out on some of the parts which I don't have any idea how they're approached in PW world.

There is section in the main page of the site, which might look like in the attached image. Each grey box will compose of image - title - link - title_color fields. Those 7 in the image are just some of the possibilities but there can be more possility (like long vertical one added to the end or there can be 3 or more lines of block etc.). So what I need to do is build a block builder.

If it was a WordPress site, I would use a simple page builder like https://siteorigin.com/page-builder/ ,which basically gives a nice interface to use Shortcode API of WP. 

My question is, what kind of structure you suggest for this in PW, or what kind of approach should I use and for a PW newbie what sources should I look?

Thank you,

Bora

[Pete]

With ProcessWire you would just use PHP and output data using the API directly in the template files.

What you won't find is a tool for dragging and dropping blocks of content though I'm afraid - ProcessWire makes no assumptions about what you're doing with regards to layout, however a few lines of code will usually get you what you want anyway. What you will find is a very useful companion in HannaCode if you want to re-use blocks of code throughout different templates.

For example, if you have a page called news and you want to generate a list of the latest 10 headlines you only need to do something like this:

<h2>Latest News</h2>
<ul>
<?php foreach ($pages->get('/news/')->children('sort=-created, limit=10') as $article) {
    echo "<li><a href='$article->url'>$article->title</a></li>";
} ?>
</ul>

Now, if you want to re-use that code in different layouts then I would recommend putting snippets of code like that into the HannaCode module - this one could be called latest_news for example - and then in your various templates to output that where you want you would simply put [[latest_news]] where you want that to appear.

So assuming that your templates will be delivered to you as HTML files (??) then you can be making these snippets of re-usable code in advance ready to drop into the right place. If that assumption is incorrect and you're going to be presented with a PSD file and have to convert it to HTML yourself then an excellent starting point to achieve the sorts of layouts above is using something like these two HTML/CSS/JS frameworks: Foundation and GetUIKit.

Hope that's of some help!

[Sergio]

You can just create a loop to render the product info and have a javascript masonry script take care of the client side display, showing different heights and widths automatically based on the content length. 

[mr-fan]

For me this was a goal, too since my former cms works with pages _and_ blocks on that pages very simple so i've searched for a simple solution with PW on this topic.

You could take a look at the Blue VR Site Profile it's a great place to learn how to build variable content und flexible global blocks with repeaters, pages and pagefields...

https://processwire.com/talk/topic/6647-blue-vr-processwire-site-profile/

second important "block builder" is PageTableExtended module....with this you could create different templates and let the user choose what kind of content he needs next...and resort them in the backend with the extended version you could render the output in the backend to fit the frontend view better.

https://processwire.com/talk/topic/7459-module-pagetableextended/

since it is a little bit hard to setup the first time this post may help a lot:

https://processwire.com/talk/topic/7459-module-pagetableextended/#entry71972

third thing to look is this module that let the user choose a template file to render the output...my this could be exented with some kind of previewimage like shown in your post..

https://processwire.com/talk/topic/6377-fieldtypeselectfile-inputfieldselectfile/

options are all there, but nothing out of the box i think.

i'm very comfortable with pagetableextended on such things...combined with some optionfields it is quit powerful.

regards mr-fan

[Pete]

Having actually watched the video for https://siteorigin.com/page-builder/ now it seems very much like how the current template/field system works in ProcessWire (can do widths/columns, re-use fields etc) but with pre-defined widgets and blocks of code and a fun interface for it.

Where a ProcessWire version could excel is if fields could be created on-the-fly in this fashion just with normal templates as a start as that has much more power than pre-defined blocks I think, however still of course have the option to use existing fields and - as I mentioned previously - HannaCode snippets as well. Essentially the PW version of the pre-defined widgets are just ProcessWire InputFields so people can create them already as they wish.

This would be a big task to do though, but a starting point would be making the template edit screen a bit more like this (as in the grid you can drag, drop and resize) and be able to add new fields on-the-fly rather than on a separate screen (which I think someone - possibly Adrian - has already worked on?).

[mr-fan]

...on the widget topic i forgot these two interesting concepts of a kind of widget system with PW:

https://processwire.com/talk/topic/8635-simple-example-for-widget-management/

and some kind of showcase for widgets with PW:

https://processwire.com/talk/topic/10006-maletschek-nautics-boat-center-at-neusiedlersee-in-austria/

[pwired]

For the 7 layouts you've shown above, here is another great css framework to layout content: pocketgrid.

http://arnaudleray.github.io/pocketgrid/docs/

Pocketgrid is in the same spirit as pw: total freedom, leaving it all up to you.

As for blocks and widgets, compared to wordpress, here are some helpful links:

https://processwire.com/talk/topic/316-widgets-and-me-thinking-aloud/#entry2208

https://processwire.com/talk/topic/7350-smart-widgets-blocks/

[bora]

Thank you all for the detailed answers and insights, I will go through them.  

I had some nice "ahaa" moments since I started fiddling with PW, I'm sure while trying to figure this one out, I'll have lots more of them

I'll post the follow up story as I progress, hopefully I will make something that I can share in the end. (for now I don't have too much to say other than thank you )

For UI side of this I find http://gridster.net/ , I might fork and use it for layout building side of things. 

[Jonathan Lahijani]

There's a variety of ways to go about it.  The approach you choose ultimately depends on how flexible you want it to be.  This is a situation I've faced many times, and my approach has become more and more refined over time.

Approach 1:

You could assume that there will always be those 7 sections, in their exact configuration and only on one page.  If so, you could simply code the section grid structures in your template.  As far as what goes in each block within each section, they can either be coded in the template file, or there could be custom fields representing each block, or a combination of the two.  This approach is not the most flexible, but would be the easiest for your end client to manage because there a 1-to-1 relationship (meaning each block is defined by a specific field).

Approach 2:

You could create a section system using the PageTables field as described in the previous replies above.  It would involve the following:

Templates:

• template: content-sections.php
• template: content-section-type-1.php, -type-2.php ... -type-7.php (make sure to disable prepend of _init.php if using direct output)

Pages:

• /content-sections/ (uses content-sections.php; set this page to hidden)

Fields:

• content_sections (PageTable, allow use of content-section-type-1,2,3,4,5,6,7; pages created get stored under /content-sections/); auto-name based on a date timestamp; apply field to the template(s) you want

Now edit the page that contains the content_sections field and create your 7 content sections.  Edit the template file that this page uses and output the blocks:

<?php foreach($page->content_sections as $content_section): ?>
  <?php echo $content_section->render(); ?>
<?php endforeach; ?> 

Write the necessary HTML and CSS for each content-section-*.php file.

Limitations of this approach are the following:

• It forces you to assign the "content_sections" field to the template(s) that you want to use it on.
• Due to the nature of the PageTable field, you can't re-use an existing content-section on a different page.  You'd have to re-create it the content-section. (a regular Page field allows re-use of existing pages, however the interface isn't slick like PageTable; look into this PageFieldEditLinks for an easy workaround)
• In the event you want to insert a different kind of content between content-sections, that means you have to create yet another content-section type to handle that situation.  This will get intense if you have a lot of different situations.

Approach 3:

This approach is what I like to use if the situation is right.  Like Approach 2, create the templates and pages as described.  Now, if you want to create a content section, simply create it as a child page of /content-sections/.

Now you obviously want to insert these content sections on your page, but since we're not using PageTables, we need a way to do this.  Hannacode to the rescue.

Create a Hannacode called "content-section".  Give it a variable called "_name" (notice the underscore... "name" is a reserved word which Hannacode will complain about but no big deal).  Make sure it's a PHP Hannacode.

Now we need to program this Hannacode to output a content-section.  This code will work fine:

<?php
$content_section = $pages->get("/content-sections/{$_name}/");
if($content_section->id) echo $content_section->render();

Now in your page, simply insert something like this in the body field:

Welcome to my page.

[[content-section _name="the-name-of-content-section-1"]]

[[content-section _name="the-name-of-content-section-2"]]

[[content-section _name="the-name-of-content-section-3"]]

You can put text between content sections because we're just inside of a CKEditor field.  No limitations!

[[content-section _name="the-name-of-content-section-4"]]

[[content-section _name="the-name-of-content-section-5"]]

[[content-section _name="the-name-of-content-section-6"]]

[[content-section _name="the-name-of-content-section-7"]]

The key thing here is how Hannacodes are being used.  Notice how I'm just calling on the render method, so the Hannacode itself is not dealing with the any complex logic.  It's simply being used to load a page with its template... nothing more.

This approach is good because:

• it'll allow you to insert content-sections on any page with a body (or similar) field, regardless of the template.
• you can insert random content between the content sections
• content sections can be re-used (unlike with pagetable)

The drawbacks of this approach are:

• you have to use hannacode, the syntax and know the name of the content-section you want to insert. (although this could be solved with some sort of ckeditor button... I wish there was a ckeditor hannacode smart inserter; apeisa has thought up this idea as well; SOMEONE DEVELOP THIS!  )
• because the hannacodes are just text, it's not a "true" relation behind the scenes.  so, if you were to delete a content-section (or change the page name) from the page-tree, the hannacode will still be present (unless some sort of special text formatter like the page link abstractor is made)

--

The thing about ProcessWire is that you can create any approach pretty easily based on your needs, and I think that's what it comes down to.  There's no "right" answer, but rather whatever suits the site the best.

[bora]

1,5 month later, after I did most of the project and be sure that I understand PW system, I finally finished that part. It's not perfect of course but it's working fine.

Here is how I did it:

Templates And Fields:

I created 2 templates: grid and grid_item and 1 pagetableextended field grid_items. In grids page I can enter grid_items like below:

Title, summary, featured_image for content on the grid items,

external url for obvious reasons, 

grid_ratio is to determine size of item. Design is limited with ratios from 1x1 to 3x3, so I made it selectable page items from options

use_border : for images with white bg, so they don't look like they are floating

Modules

I have created 3 modules. InputfieldGridBuilder,FieldtypeGridBuilder and GridBuilder. 

Whenever I save the page, new items from grid_items pagetable are available to use like below.

I can order items, add new rows, delete row etc. 

Whenever I change something, there is a method that works to serialize data to the hidden input field,InputfieldGridBuilder. Also, just in case I call the function it every 5 seconds.

I make a small fixed grid that is very similar to the one used in the frontend. So anything that you can do here with jQueryui sortables, it's available for using in the frontend.

Last module GridBuilder is used for mostly utility purposes for both frontend and backend. It has methods like getItemSize, getItemImage, build etc.

Frontend

Normally these will be used in homepage but I made the view of page available to users with editing roles, so before using them they can see that it look like. For example this one in the gif above looks like this. So even with the empty rows, it works.

And for using in the homepage, I added a multiple selection page field. So they can use more than one grid, or with the location options we already added they can select to have a different view for different countries. (I added Location settings is globally for every page)

Questions, critics, feedbacks or "hi,there buddy"'s are highly welcomed.

[pideluxe]

hi, there buddy ;-)

it would be nice if you post your nice modules for all.

[Yannick Albert]

Questions, critics, feedbacks or "hi,there buddy"'s are highly welcomed.

A public git repo would be nice

[dragan]

Yes. Yes it would

[krisj]

I like what I see here. bora, you are doing some pretty slick work there! any updates?