Jump to content

Some kind of a page builder


Recommended Posts

hi there everybody,

I'm new to Processwire and I'm trying to figure out how things can be done. First of all i'm no developer so i have some difficulties with php and coding at all.

So I tried to put some sections on the home page of the website I am going to create. The point is that i'm unsure if this is the way to go. Maybe there is an easier way or something completely different. I would like to do this without any plugins or some kind of stuff.

How can i limit the amount of columns if i do it this way? ( a 3 column section can have only 3 columns right? )

And Yes i did read the tutorials.

How do you guys do this?

For a better understanding I have included some pictures.

Thank you.



Link to comment
Share on other sites

Welcome to the forums, @rookie!

The question you're asking is very interesting and important. But I think you have to read the forums a bit before continuing with it. For now it seems like any answer will be not good enough for you. So do search the forums for 'page builder' and 'content builder'. It is better to search with google though)

It is possible to do it with the page structure you're showing. But without  Repeater an PageTable fields (or preferably RepeaterMatrix) it will be pretty hard to maintain. So take your time to explore a bit.

  • Like 1
Link to comment
Share on other sites

@Ivan Gretsky

Thank you. I think you're right it will be really hard to maintain it this way.

With the search you recommended, I found another way. I will try the combination with PageTable and PageTableExtended. This seems like a more elegant way to go.

I just wonder if the PageTable module is an ProField or not.

@Robin S

Thank you. Yes, you are right, this is how it works. I just thought that this would somehow be possible in the backend as well.

Link to comment
Share on other sites

1 hour ago, rookie said:

I just thought that this would somehow be possible in the backend as well.

Everything is possible in ProcessWire. 😉

For example, you could create a "max_children" integer field and add it to the template of any pages you want to limit the children of. Then use this hook in /site/ready.php:

$wire->addHookAfter('Page::addable', function (HookEvent $event) {
	/** @var Page $page */
	$page = $event->object;
	// If page has the "max_children" field, and the field isn't empty, and the number of children is at the maximum...
	if($page->hasField('max_children') && $page->max_children !== '' && $page->numChildren >= $page->max_children) {
		// ...then don't allow child pages to be added
		$event->return = false;

But this is not to say it's the best solution, just that it's possible. 🙂

  • Like 2
Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

  • Recently Browsing   0 members

    • No registered users viewing this page.
  • Similar Content

    • By schwarzdesign
      Herzzentrum Bonn
      The Herzzentrum Bonn (Heart Center Bonn) is part of the University Hospital Bonn (UKB) and consists of the cardiology and heart chirurgy clinics. Goals for the website were a clear content structure, friendly and personal communication tailored to the different visitor groups and easier maintenance and content updates. Concept, design and implementation by schwarzdesign.
      You can read more about the challenges, concept and implementation of this project in the case study on our website (German only).
      Notable modules used
      ProFields (especially RepeaterMatrix) FormBuilder ProCache UniqueImageVariations WireMailSmtp ProcessCacheControl ProcessRedirects TracyDebugger Development insights
      One thing to note is the central management of staff members. To represent staff members as well as the hiarchies and different departments, we created a layered template structure:
      person – Represents a single person and has fields for name, title, position, portrait, contact info etc. hierarchy – Represents a hiarchy level or department in the organisational structure. Has person pages as children. people – This is a singleton template which displays all team members sorted by hierarchy level. Has hierarchy pages as children. The central staff database is also used to display people throughout the site – for example, the experts on angiology on the angiology page. Most of the editorial content is created through a RepeaterMatrix field with different section types. The section type for people contains a simple page reference field, allowing the editor to select the people to display in a given context while still being able to edit their contact info in a central place.
      Another interesting content type are the track records on the homepage. Those are implemented using CountUp.js and a custom IntersectionObserver script to trigger the animation as soon as the section comes into view.
      Finally, we built a very flexible grid section which uses CSS grid to display grids with variable contents and row/column spans (see an example here).

    • By nickngqs
      Hi guys,

      I'm trying to wrap my head around creating dynamic blocks where the end-user can add blocks on the fly on individual pages without specifying it in the templates.

      What approach do you guys usually do? I've tried scouring the forum for solutions but seems to get abit confusing. I've read Hanna Code, Repeater Matrix, PagesTables and seen the youtube tutorials. Not sure, where to start from. I only got very minimal knowledge of php as I came from a front-end background (html, css, js)

      I'm looking to define my blocks somewhere where the end-user will not be able to see.

      For example, a simple block container
      <div class='container'> <div class='container__title'> {{ $title-field }} </div> <div class='container__image'> {{ $image-field }} </div> </div>
      Then maybe we got a second block container
      <div class='container-2'> <div class='container-2__title'> {{ $title-field }} </div> <div class='container-2__image'> {{ $image-field }} </div> </div>
      Then the end-user can just to add these blocks into any pages on the fly and re order them according to their needs. My processwire is v3 using the UIKit3 Admin if that makes any difference

      Sorry if I sounded too noob.
    • By ferraky
      Hey Guys,
      Looking for a little help with working with the depth feature on the Repeater Matrix. I am working on building a page builder similar to the one discussed here: https://github.com/ryancramerdesign/ProcessWire/issues/1906.
      I am having a hard time looping over the Repeater Matrix and each item at each depth and combining them into a single array to present to the UI. The reason I am trying to push this to an array is because I am converting it to JSON for various Vuejs components that need to be supported.
      The structure of the "Builder" is:
      section: depth 0 - has various options that can be applied to a section of page( background image/color etc...) container: depth 1  row: depth 2  column: depth 3 - has various options for different widths for the column being set up. custom components: depth 4  - CKEditor, slider, whatever custom component that is needed Hopefully I am making sense explaining this. Any help would be greatly appreciated.
      Thanks Ya'll!
    • By mikeuk
      (apologies if this looks too similar to previous topic I created, seems more logical as a new topic)
      I'm curious if anyone here is implementing something along the lines of Drupal's block / Joomla's custom (editable) module functionality?
      In other words, areas that are editable in the backend, that can be placed on multiple pages without needing to re-enter the content on each page it is used.
      I tried to do this using a page as a block, and then field type Page (to get a page within a page), but this led to issues with rendering, and more important this creates an object $page->fieldtypePage which is exceptionally large, so I would prefer to avoid that route.
      My guess is those that do it, do it outside of PW with PHP. But the 'blocks' being editable and creatable by a site editor is important so I need to explore this or find a different solution (or tell the client no-can-do).
    • By DarsVaeda
      I have the following simplified layout on my page:
      row1_card1 - row1_card2 - row1_card3
      row2_card1 - row2_card2 - row2_card3
      You can add as many rows and cards per row as you like. Each card has a title, text and a button whose text is the same on every card but should be editable too, just not individually.
      I wonder what is the best approach to do this without making it awfully complicated to setup in the admin from an editors perspective.
      I thought about a solution using a PageTable for the rows and a Repeater for the cards but that started to be complicated to setup even.
      It would be awesome if you could use the FrontpageEditing to edit these cards and even add more or add rows.
      How would you implement it?
  • Create New...