jploch

If you want to support the development of my PAGEGRID module you can find it now on Kickstarter. You can donate here. Thanks for your support!

Like others I was also attracted to PW by the simplicity and low entry barrier. @ryan I am very grateful for the work you put into PW. The development experience with building the module was great, even addictive and I learned a lot on the way. I was also going to suggest Kirby as a good example. I think a redesign of the modules page would help a lot. A buying option is maybe not needed for now, but having a category like „commercial/paid“ that is easy to find. Also a „module of the month“ or „loved by the community“ (based on likes) section and a prominent spot on the homepage to highlight some modules would be nice. I am on mobile right now and can post more thoughts on this once I have some time. Edit: Also +1 for letting superusers access this new "module explorer" from the admin. This would make installing modules even easier and give new modules more attention. (Maybe we can address the security issues, that were mentioned.)

@ryan I like the idea. This could speed up the initial setup and if done well would also work for non technical users (They never heard of composer). It could be like a modules manager/installer/picker that lists all modules with short description. Like a more compact list/grid of modules (maybe an expandable accordion with checkboxes for each module). Anything that makes it easier to find and install modules from the backend/installer would be a good addition in my opinion. I have to say doing commercial modules in PW is hard. The target group is small and the marketing of the module is the sole responsibility of the developer (eg. building a website/shop to promote and get the module). It would be nice if there was a platform integrated into the PW site to list/promote and maybe even buy commercial modules (Not only Ryans pro modules but also commercial modules build by the community). What was asked here shows the interest in page/block builders, and I think both RockPageBuilder and PAGEGRID are already very promising and have the potential to attract more users to PW (Which in return would make it easier for other developers to sell modules). I could envision a light/free version of PAGEGRID, but I need to justify the time to maintain and develop it further, so I think there needs to be a commercial aspect to drive the project forward.

Multiple sites per account (Cloud version) Hi, I have just launched the new version of PAGEGRID Cloud (SaaS). It's now possible to have more than one site. I also removed some of the old restrictions for the free version. Now you can have unlimited sites, pages and items and only the webspace and publishing options are limited by the tier. This makes it more flexible and easier to get started. Simultaneously publish a portfolio, client website, idea boards, a profile site — basically any kind of site you need — all with a single account. Create as many sites as you like for free. Choose a desired service option and make a site public when you are ready to launch. Start with a blank canvas or use one of the site templates. Optionally buy a self-hosting license and export a site at anytime. (Of cause you can still host ProcessWire yourself and just install the PAGEGRID module from the modules directory.) Start for free (More templates will be added soon)

@joe_g PAGEGRID would still work for this usecase check this post. You can setup the field, so the client can only sort the items and add new ones. I am happy to provide examples here if you want to try it. An alternative to PAGEGRID is adding custom fields to your images/files field. This is a core feature, so no need for additional modules. This way you can let the client select a video/embed as an alternative for the image.

As an alternative you can also do this at the top of your template file (assuming you use your own template file instead of the default pagegrid-page.php): <?php namespace ProcessWire; // in the backend we render the default template and return (renders just the field) if( $pagegrid->isBackend() ) { include('pagegrid-page.php'); return; } //render PAGEGRID and stuff for the frontend $content = '<p>Some example content for the frontend</p>'; $content .= $pagegrid->styles($page); $content .= $pagegrid->renderGrid($page); $content .= $pagegrid->scripts($page); echo $content; In this case your page will load two different templates for the backend and the frontend. So you have to load your custom CSS code in both files if you want the backend/frontend to look the same.

Multi field support The latest version adds support for multiple PAGEGRID fields per page. This makes PAGEGRID more flexible when you want editors to control only some parts of the layout. Each field can use its own block templates: If you want to render more than one PAGEGRID field per page, you can call the render function for a specific field like this (assuming you added the fields named “mygrid” and “mygrid2” to your page template): <!-- render markup for field mygrid --> <?= $page->mygrid; ?> <!-- render markup for field mygrid2 --> <?= $page->mygrid2; ?> The old render function $pagegrid->renderGrid($page) still works, but it will always render the first field it finds. You can use $pagegrid->renderGrid($page, $field) or $page->fieldName to render a specific field. Custom code and markup You don’t have to write complicated foreach statements, PAGEGRID takes care of rendering clean markup. PAGEGRID wraps each item in a wrapper element. You can change the tag name or add custom classes to it easily. The rest of the markup is inside your block templates. Nice and clean. Add this function at the top of your block template file to change the wrapper element: <?php //The wrapper element of this block template uses the section tag and some custom classes $pagegrid->renderOptions(['page' => $page, 'tag' => 'section', 'classes' => 'my-class my-class-2 foo-class']); //Here goes your markup ?> CSS code It’s also easy to control the behavior of the grid using only CSS code (If you prefer to write your own CSS code or include a CSS framework, you can disable PAGEGRID‘s style panel): /* overwrite PAGEGRID defaults */ /* wrapper */ /* Use 6 equally sized grid columns */ .pg { grid-template-columns: repeat(6, 1fr); } /* items */ /* set both properties to auto */ /* let grid items take the available space */ .pg .pg-item { grid-row-start: auto; grid-column-start: auto; } /* or set only grid-row-start to auto */ /* items can still be positioned freely on the columns */ .pg .pg-item { grid-row-start: auto; } /* new items */ /* you can use this class to set the defaults for new items */ /* here we are overwriting the default size of grid items */ /* using this class makes sure you can still resize items with the PAGEGRID field */ .pg .pg-item-added { grid-column-end: span 3; /* let new grid items span 3 columns */ grid-row-start: auto; /* you can also change the placement here */ } You don't even have to use grid, flexbox or block also works. PAGEGRID makes no assumptions about your CSS code. Just make sure to call your stylesheet after you render the styles from PAGEGRID, so you can overwrite the defaults. Item Placement As a default dragged items will be placed manually on the grid. Manually placed items can overlap themselves. Here is a quick example, how the CSS properties grid-row-start: auto; and grid-column-start: auto; effect the dragging of grid items: Backend/Frontend PAGEGRID renders the same template in the backend (iframe) and frontend so the design will look the same. If you want to render only some parts in the backend you can use this check: <?php if( $pagegrid->isBackend() ) { // render things only for the backend } else { // render things only for the frontend } ?> Alternatively you can also load different templates for the backend and the frontend. E.g. you can do this at the top of your template file (assuming you use your own template file instead of the default pagegrid-page.php): <?php namespace ProcessWire; // in the backend we render the default template and return (renders just the field) // ignores markup regions by default (file has $pagegrid->noAppendFile($page)) and just renders that file if( $pagegrid->isBackend() ) { include('pagegrid-page.php'); return; } ?> <!-- render frontend stuff here (you can use markup regions if you like ) --> <div id="content"> <p>Custom frontend code for <?= $page->title ?></p> <!-- render PAGEGRID for the frontend --> <?= $pagegrid->styles($page); ?> <?= $pagegrid->renderGrid($page); ?> <?= $pagegrid->scripts($page); ?> </div> In this case you have to load your custom CSS code in both files if you want the backend/frontend to look the same. For more examples check out the docs

You might already know this, but I just found an easy way to have custom tooltips on inputfields: $field = $this->modules->get('InputfieldSelect'); $field->name = "example"; $field->label = "Cool Tooltip"; $field->attr("uk-tooltip", "title: My tooltip text; pos:left; delay: 200"); // this line $field->addOption("option1", "Option 1"); $field->addOption("option2", "Option 2"); Have a look here for all the options.

@kongondo THX! I have no experience with GCP, AWS, so I can not really compare those to Uberspace. I also never managed a server or VPS myself (Always used shared hosting or worked with a server admin). Managing a server seemed to complicated and time consuming for my usecase. I started having a discussion about my plans with @diogo and he showed me Uberspace (I never heard of it) and it had everything I needed already installed and ready to go. It's like shared hosting but with shell access (+ it has HTTPS for all domains and takes care of PHP/MYSQL updates). Also the price from 5€/month is very fair and the attitude of the people is very nice. I can only recommend everyone to try it out, because you can automate a lot of things through the shell (databases, install ProcessWire etc.). One thing to consider is that it will only work for a limited number of users, as 100 GB is the storage limit per account (At that point you have to pay 15€/Month). Also I think the servers are located in germany (not sure), which can be nice for GDPR but might not be ideal for people outside of europe. And of cause you have to think if it makes sense (financially) to spend the time to develop it (In my case most likely not, but it was fun ?). My setup is kind of like a multi-site installation that shares the wire folder, site templates and modules (those are just symlinked). The assets folder and config file changes for each ProcessWire instance. So to create a new instance I clone a "master" folder (with the smylinks and files/folders) and clone the "master database". Of cause there is more going on (like Gumroad integration, etc), but this is the basic setup. If you have any further questions, you can also send me a DM and I will try to answer them.

@ryan It's not really related to the module (which looks really useful), but generally to the problem that you adress with the module, when you have to edit lots of children. With the arrows you would edit one sibling page after another, which is a different use case and for some client might be more intuitive than editing the parent page. I really liked the feature of the AOS module which is not maintained anymore, so I thought why not ask here. Sorry if it was slightly off topic. I was also not aware of @bernhards module, which seems like a really nice replacement of AOS. I just think it's such a useful feature, that it might make sense to consider it for the core.

@ryan sorry I was not very clear. I was talking about two buttons while editing a page, that go to the next/previous page (with same parent)

@ryan This is a nice adition! When editing multiple (child) pages it would also be helpful to have a previous/next page button (I know that we have "save + next"). Maybe it could be added next to the title with little arrows. Just my two cents ?

A lot has happened since the first version of PAGEGRID. At first I used PAGEGRID myself to build smaller custom websites faster or to allow users more freedom for the layout of certain pages. But since a page builder like this is quite time consuming to maintain, I decided to release PAGEGRID as a commercial module to support it in the long run. Initially I had ProcessWire users in mind. But my idea for the module was also to make PAGEGRID (and ProcessWire) interesting for a group of users who are not so experienced with code. I soon realized that this group is able to work with PAGEGRID, but often does not get along with the installation process (E.g. Graphic designer friends of mine were never able to install ProcessWire themselves). Things that we take for granted, such as creating a database and working with FTP, were difficult for them. That's why I decided to launch PAGEGRID cloud. PAGEGRID Cloud ☁️ With the new cloud service, it's easier than ever to create a website. Don't worry about hosting, installation and server updates and focus on designing your website ?️. Start with the free plan and upgrade to unlock more features. Websites are hosten on Uberspace and the process of creating a new ProcessWire instance is completely automated. For now consider this a beta launch, since it was not tested with a lot of users. Even if you are not inetrested in PAGEGRID Cloud, I am happy about everyone who wants to help with testing. Start for free (Note: I won't share your email with third parties or spam your inbox and your password is saved through ProcessWire's native encrypted password field.) Self-hosting Of course you can still host PAGEGRID yourself. Just install the module (The site profile is deprecated, but I made it much easier to get started with the module). You can even export an existing cloud website and install it on another server (E.g. You can start with the free cloud plan and later export the site und install it on your own server). Self-hosting is more flexible since you have access to the API and code. This is the best option for users with coding knowledge, who want to build their own blocks or use PAGEGRID as part of a larger individual website. Other updates this month: Pin scroll animations Elements can now be pinned to the screen for a certain scroll distance. When the scroll distance is exceeded, they are released and continue to scroll normally. This feature uses the native CSS position sticky and some javascript to update the scroll state. Client-side resizing of images The latest update brings support for client-side resizing of images uploaded through the inline file uploader. Once enabled images will be resized and compressed before they are uploaded to the server. This makes uploads faster and saves disc space. You can enable this option in the admin through ProcessWire's native image field settings. Accordion Block (PageGridBlocks Module) I added a new block that shows a vertically stacked set of clickable headings that can be expanded to show more content. Content can be added as child items, so you can be very flexible with the design of it.

@Entil`zha Hi. By default PAGEGRID renders the whole template inside the backend/fontend. But you can easily customize that. <?php if(!$pagegrid->isBackend() ) { // render things only for the frontend // Eg. Header, Sidebar } // render pagegrid $pagegrid->styles($page); $pagegrid->renderGrid($page); ?> If you are using markup regions you can have the check from above inside your _main.php file. To quickly disable ProcessWire’s automatic append/prepend of file “_init.php” and “_main.php” for a template, you can put this function at the top of your template file. $pagegrid->noAppendFile($page); Note that this will disable the append and prepend files from this template also for the frontend. You can also do it the other way around and disable it globally by uncommenting the lines $config->prependTemplateFile and $config->appendTemplateFile in the config.php file off your site folder and include the files manually on the templates where you want them..

@wbmnfktr I created an issue on Github for this.

@wbmnfktr just tried it locally and got the same error "Unknown character set: utf8mb4mb4". Not sure if it was always like this or if it's a new thing. Usually I stick with the default utf8 formatting. But for the support of emoticons, I try to use"utf8mb4" lately. Would be nice if the site exporter/importer takes care of this. Edit: If I keep default utf8 settings, I can install the utf8mb4 formatted site, but the fields containing emoticons are empty.

You can also try PAGEGRID, it's a very flexible no-code pagebuilder for processwire. You can try it for free and see if it works for you.

Watch this 6-minute video to learn the basics of PAGEGRID. TIPP: You can hold down [SHIFT] while dragging to change the parent of an item. More shortcuts How to install and setup the module How to install the theme

With the style panel, you can customise the look of your website without writing CSS code. If you prefer to work with code, that's fine too. Just deactivate the panel and load your CSS as you are used to. PAGEGRID will stay out of your way. You can also combine the approaches or bring your favorite CSS framework. The style panel is a tool for developers, designers or "advanced users", not necessarily for your client (you can give them access, but I wouldn't recommend it ?). The great thing about using the style panel (and PAGEGRID) is that you don't need a build tool or deticated development environment. If you use the block modules, a simple database backup can be enough to restore all changes. Since the templates and fields are all created by the modules, migrations are no longer an issue. This can be a quick and easy way to create a custom website. Which CSS frameworks are supported by PAGEGRID? The style panel generates modern vanilla CSS. The block modules use vanilla CSS and vanilla JS. With your own custom blocks you can easily add a framework if you want. If there are enough requests in the PW community for a certain framework, I might build some blocks for it. ?

PH seems to have some strange bugs at the moment. Votes are also nor showing up for me. Not the best launch ?

I am very exited to launch PAGEGRID on Product Hunt today ? You can support it by upvoting or giving feedback here. And while you're there don't forget to give your love to processwire too. PAGEGRID is a friendly pagebuilder for ProcessWire. Learn more Thanks for your support!

@bernhard Thanks for the quick reply. I just watched another of your videos and together with your explanation I can see the benefits. It looks really nice! I just discovered that you now can copy the code directly from the templates and fields inside the GUI, which makes it even easier to use. You also have a good point about RockMigrations not really breaking stuff as it's just used for the migration and can be replaced later on if necessary. I will test it a bit more and see if it makes sense for my next project.

I am thinking about integrating RockMigrations in my workflow, but would like to make sure I understand it correctly before. On most of my projects I am the only one developing the website. I usually develop locally and push changes to a production server. So I FTP the files and either use the core native field/template export/import in the GUI or make the changes manually in the GUI. For more complex things, I also sometimes write my own litte scripts to automate stuff using the PW API and put them in the site/ready.php or a seperate module. I have helper functions to simplify the template and field creation. The benefit of RockMigrations seems to be to simplifying/abstracting the native PW API and helping with triggering the migration? I can see the benefit of it but I am not sure if I want to depend on RockMigrations for this, since the native API is already quite easy to use. An automation I wrote using native API and helper functions might look like this: // function to create template and fields // you could run this function on module resfresh for example public function create() { //install dependencies if (!$this->modules->isInstalled('InputfieldTinyMCE')) { $this->modules->install('InputfieldTinyMCE'); $this->modules->refresh(); } //call to helper functions //the functions will make sure it only creates the template and field if they don't exist $this->createTemplate('example-template'); $f = $this->createField('example-field', 'FieldtypeTextarea', 'example-template'); $f->inputfieldClass = 'InputfieldTinyMCE'; $f->label = 'Text'; $f->contentType = 1; $f->features = array(0 => 'toolbar', 1 => 'stickybars', 2 => 'spellcheck', 3 => 'purifier', 4 => 'pasteFilter'); $f->save(); }

@MarkE Thanks for your interest. Choosing the right tool always depens on the job and personal preferences. And of cause I am a bit biased, so choose what ever works for you and your clients. You can use PAGEGRID with a CSS framework if you like. You just have to include the css file in your template. Then it's just a matter of adding the right classes, either in the block template files via code or via the style panel. You can even add multiple classes, e.g. utility classes from tailwind throught the style panel. A Component in PAGEGRID would be a block. So you can create a block template and use any combination of fields in it (similar to how Repeater Matrix or PageTable work). You can also add a custom css and/or javascript file that will get loaded with your block template (e.g. myBlock.php, myBlock.css, myBlock.js).

@wbmnfktr thanks for your support! Feel free to ask any questions in the forum if you need help with it.