jploch

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

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.

PAGEGRID 2 is out now! 🔥 The new version contains several bug fixes and adds exciting new features. It's also more flexible and easier to use. Check out the new website ? and click the edit button ✏️ to see for yourself. With this update, PAGEGRID becomes a very flexible no-code editor that still gives developers the power and control they need. Easily modify existing block templates or create your own with your favorite code editor and ProcessWire's powerful API. Use PAGEGRID to build whole websites, connect PAGEGRID to regular ProcessWire templates/pages or use PAGEGRID only as a "body" field. PAGEGRID 2 uses as many native features from ProcessWire as possible (everything is a page). NEW Reusable Symbols Turn nav bars, footers, or any combination of items into symbols that you can reuse wherever you need them. (Symbols are pages) Animations Add powerful multi-step CSS animations with a few clicks. Use interactions like scroll, mouseover, inview, loading or click to trigger them. Reuse them throughout your website. (Animations are pages) Blueprints Blueprints can be used to automatically populate empty pages with a predefined layout. They are useful if you want website editors to start from a base design when they create new pages. (Blueprints are pages) DOM Navigator The dom navigator makes it possible to select any markup on the page through PAGEGRID's style panel. It gives you full control over your site's appearance. Style regular templates Make CSS edits to any template inside processwire just by adding the PAGEGRID field to it (works with any markup). VW and VH units Almost all style inputs now support PX, %, VH and WV units. Updated Google Fonts The fonts list has been updated to include the latest fonts and material icons. Datalist Block (PageGridBlocks module) The new datalist block renders a link list of pages that you can define. It can render a title, thumbnail, video, or text per page. This can be useful for rendering a grid of your latest portfolio projects, news, or a list of articles. iFrame Block (PageGridBlocks module) The new iFrame block uses layziframe to layziload any iFrame when you click a placeholder. You can upload a custom placeholder or, for YouTube/Vimeo, the placeholder can be loaded automatically and saved to the database (to comply with the EU General Data Protection Regulation). This is great for embedding external services such as YouTube, Vimeo, Spotify, Soundcloud, or others to your site. –––––––––––––––––––––––––– How to update from version 1: Please make sure you run the latest ProcessWire version before updating. I would also recommend to make a database backup for existsing websites before the update (just to be save). Then simply update the FieldtypePageGrid and PageGridBlocks modules.

This seems to be related to the fact, that the $pages->find('') call is inside a inputfield module function. Calling it from a template file seems to return all grandchildren even without the rebuildAll() call.

@monollonom I will only use it in cases, where $pages->find('') is not working as expected. In my case it would not return any pages with a deeper nesting then 5 levels (tested on the latest PW master version 3.0.227). I never run into this issue before so there might be something else going on, or I never had a nested structure that was this deep. Will also test with a new install when I have some time.. If the issue persists, I might open an issue on Github.

@monollonom Nice! If I call $myParentPage->parents()->rebuildAll() before $myParentPage->find('') This seems to fix the issue. Thanks! The performance seems to be great so far with about a 70-100 pages. Before I was using a recursion function like this as a workaround that would call itself for a number of times. Will investigate further wich version is more performant.

Hey folks, it seem that after a certain level of nesting $pages->find('') is not returning all grandchildren. This seems to be a bug or maybe it is intentional? Is there another way of getting all the pages no matter how deep they are nested with a selector?

@adrian Sorry I totally forgot about this ? I can live with it. Since it only happens sometimes and only locally, it's fine. Thanks for your time!

@adrian no worries. Thanks for taking a look. I made some changes already to my local enviroment (updating php and valet) and the error above seems to have changed. Strangely it was only happening once in a while, and not on all the pages. But for some of my local websites I still get errors on the frontend and tracy is not loading (only on some pages): TypeError: strpos() expects parameter 1 to be string, bool given in /Users/jploch/Sites/pgrid-website/dist/site/modules/TracyDebugger/tracy-2.9.x/src/Tracy/Bar/assets/loader.phtml:14 Stack trace: #0 /Users/jploch/Sites/pgrid-website/dist/site/modules/TracyDebugger/tracy-2.9.x/src/Tracy/Bar/assets/loader.phtml(14): strpos(false, '?') #1 /Users/jploch/Sites/pgrid-website/dist/site/assets/cache/FileCompiler/site/modules/TracyDebugger/tracy-2.9.x/src/Tracy/Bar/Bar.php(109): require('/Users/jploch/S...') #2 /Users/jploch/Sites/pgrid-website/dist/site/modules/TracyDebugger/tracy-2.9.x/src/Tracy/Debugger/DevelopmentStrategy.php(139): Tracy\Bar->render(Object(Tracy\DeferredContent)) #3 /Users/jploch/Sites/pgrid-website/dist/site/assets/cache/FileCompiler/site/modules/TracyDebugger/tracy-2.9.x/src/Tracy/Debugger/Debugger.php(321): Tracy\DevelopmentStrategy->renderBar() #4 [internal function]: Tracy\Debugger::shutdownHandler() #5 {main} (stored in /Users/jploch/Sites/pgrid-website/dist/site/assets/logs/tracy/exception--2023-03-19--14-23--52479f289e.html) I did a "var_dump(parse_url($_SERVER['REQUEST_URI']));" on those pages on the frontend, it returns this: array(1) { ["path"]=> string(0) "" } array(1) { ["path"]=> string(0) "" } On the pages that work (same installation and setup), I get this response for the var_dump: array(1) { ["path"]=> string(4) "ice/" } array(1) { ["path"]=> string(4) "ice/" }

When running tracy in my local development environment (node + laravel valet), I get the following error on my frontend: Notice: Undefined index: path in /Users/jploch/Sites/pgrid-dev/dist/site/assets/cache/FileCompiler/site/modules/TracyDebugger/TracyDebugger.module.php on line 2784 This happens with the master as well as the dev version of PW.

@adrian I also noticed some problems with the sidebar. Would be nice to have a working sticky header option in the core theme without the sidebar, and maybe make the tree available in the first level like AdminThemeCanvas is doing without the need of extra modules.

@Robin S Thanks for pointing that out. While I like the sticky header, I am not a fan of the sidebar. Is there an option where you can just make the header fixed? Also there seems to be some problems with this setting if you reload the page.

@tires Glad you like it! While I prever this admin theme over the default one. I think the default Uikit theme actually looks fine. But there is more to it than just aesthetics. For me, the main advantage is the fixed navigation with direct access to the tree navigation. It's just so much faster to navigate in the backend. It would be nice if the core theme had an option for fixed navigation.

Would be nice to update the Fontawesome icons in PW core, so they can be used for labels in the backend. The current version 4 is quite old and has a very limit set of icons. Version 6 also has a free version with more icons. The implementation seems to be very similar, so it should be easy to implement. The icons can be downloaded here.