jploch

@CeMcc Sorry for the trouble and thanks for reporting it. This is not something that happend to me before with any PAGEGRID site, it could be something with the server or with your setup, but it's hard to know. Can you send me a DM with the email that you used for your cloud account? Like this I can check the logs and maybe find the cause of it.

@CeMcc Thanks for using PAGEGRID. Like @elabx sad this could be an issue with your server. But it's a bit strange that it's only happening on the homepage. If I understand correctly this is only happening in the backend and not in the frontend? Are there any redirects happening in the home template? Are you using markup regions with the option to auto append the main.php file? Are there any custom blocks that are only on the homepage? If possible can you share the code you have in your home template?

Hey everyone! Finally I have time to post a detailed developer walkthrough for PAGEGRID. I have the feeling that many people don't know how flexible PAGEGRID actually is as a developer tool. I think this is mainly due to the fact that most videos are showing the no-code features of PAGEGRID. But since these features are completely optional and PAGEGRID has a lot more to offer, I've put together a video walkthrough to show you exactly what I mean. My hope is that it'll give you a clearer picture of how PAGEGRID can fit into your projects and help you decide if it's the right tool for you. Please take a look at the video below! I think you'll be surprised at what PAGEGRID can do. PAGEGRID's core concepts (video summary): Your markup: Unlike many other site builders PAGEGRID gives you complete control over the markup and structure of your frontend. You can use PAGEGRID to build specific sections or parts of your custom coded website or you can use it as a full-blown site Builder that can work without any coding. Everything is a page: PAGEGRID items are ProcessWire pages that are defined through native ProcessWire templates and fields. Control what clients can edit: PAGEGRID offers an intuitive editor experience that's easy to learn for clients. Editing and design features can be controlled through ProcessWire’s native roles and permission system. Your CSS: You can use your code editor to write CSS or you can bring your own CSS framework. PAGEGRID makes no assumptions about your CSS code. And it’s not just for Grids, display properties like Flexbox, Block or Inline-Block are also supported. Nesting: A powerful feature of PAGEGRID is nesting and while this feature is completely optional it's quite useful for a lot of cases. You can define a block as a container and can define what kind of templates are accepted for the children. This can be used for layout purposes or to group items together, another example might be a slider or gallery block that the user can add items to or basically any repeatable content that you might want to put inside a block. Developer walkthrough: Developer Documentation: https://page-grid.com/docs/developer/ How to create a custom block: Documentation for creating blocks: https://page-grid.com/docs/developer/blocks/ Try PAGEGRID for free PAGEGRID is not free. However, you can try PAGEGRID on your local machine or on a test server as long as you need to make sure it is the right tool for your next project. … and when you’re convinced, buy your license. Installation PAGEGRID (FieldtypePageGrid) is listed in the modules directory, you can install it like any other module. See the install guide for more information. Recent Updates (2025) Group Blocks Now Linkable (april) Performance improvements (markup cache integration) (march) Quick add feature (february) Symbols and Patterns (january)

The hidden field that saves the page id is called "pg_group_link_page" (int), which is present on your screenshot. So it should work as expected without any additional setup. The autocomplete feature is added with a hook from the group module. What happens when you leave the field empty and just click and focus the field? It should suggest all the pages that are viewable and published (Make sure you have created some pages). When you start typing a letter. E.g. If you have a page with the title "Test" and you type "Te" the page should be suggested. If this is not working maybe try a fresh install with the latest FieldtypePageGrid and PageGridBlocks modules and see if it works there. It's working for me (tested in Chrome Browser) so maybe it's something wrong with your setup.

You can control this through CSS. Either using the style panel, or in code: /* use pg class to control all wrappers */ /* E.g. Use 6 equally sized grid columns */ .pg { grid-template-columns: repeat(6, 1fr); } /* main wrapper */ /* optional set main wrapper to display block (default is grid) */ /* to only allow vertical dragging/sorting of direct children */ /* useful if blocks can have children */ .pg-main { display: block; } Please take a look here, for more styling options. Not true. It's using an autocomplete input that lists all your pages and saves an ID into a hidden field when you select one or write an URL. So it works like a reference field, but gives you the convenience that you can also add external links as a string (e.g. https://www.google.com/). Not sure what you mean with this. Sometimes it helps if you put a padding on the group so it's easier to select the group when it has items in it. Another option is to use the item list and select it there: Or use the item breadcrumb menu (located at the bottom of the page when you select an item):

@joe_g I added a link option to the group block. Please update the FieldtypePageGrid and PageGridBlocks modules to try it. Let me know what you think and if this works for you please mark this thread as [SOLVED].

I think the solution in this case would be to keep the style panel enabled. The panel is only shown to users with the right permission anyway. Your client will never see the panel. You can test this when you create a user and assign the role "pagegrid-editor". This role is created by PAGEGRID when you install the module. With this role your client always sees the edit buttons and can use the inline editor, no need for the tree view. You can learn more about PAGEGRID's permission and user management here.

It seems like it's comming from the core PageFrontEdit module (which PAGEGRID is using) when you enable the title field. Somehow I cannot replicate this error. Please mark this as solved since it's not a bug from PAGEGRID.

This is definitely possible and would be relatively easy to integrate into the group template. I like the idea, but I'm a little concerned that users might accidentally create invalid markup. With this feature it would theoretically be possible to nest links. So if a group is linked and there is another text/image link in the group, that would not be valid HTML markup. It may be sufficient to display a corresponding warning in the link option for the group. I will look into it and keep you posted.

No the menu is connected to the style panel. Can you explain why you need the menu?

Can it be that you disabled the style panel in the module settings?

@Klenkes is right, it has to to with enabling the title field for front end editing. What is your screenshot showing, is this the browser tab? Is this happening on the frontend or backend?

Not out of the box, but it would be quite easy to do that with a custom block. Maybe I will add a link option to the group block at some point

@joe_g The reference block is not needed fo this. You can simply click the pen icon above an image block item. On the sidebar you have the option to set a link. If you want to link rich text you can use the link button from the editor. The reference block is not for linking, it can be used to render items from other pages, but for this it's better to use symbols anyway.

Glad that you got the install working. Thanks for informing me about this. Just pushed an update, should be fixed now. PAGEGRID block modules can have dependencies that they download automatically (eg. the image block donwloads the SVG File Sanitizer/Validator Module). Ryan added a new check with the latest updates that needs a setting in config to allow downloads. But I found a way to set this at runtime when the user is superuser und debug is on, so should work now even without setting it explicitly. You are on the right track. PAGEGRID is not doing anything special when it comes to multilanguage. You only need to install all the core multilang modules and set the fields to multilang like you did. You can also test if multilanguage works for other non PAGEGRID pages and make sure it's not relates to PAGEGRID. Also you can click the edit icon (pen icon) when you hover the text block. In the sidebar you should see your textfield with the multilanguage tabs. The buttons at the top of your PAGEGRID field are switching the whole site to the corresponding language so you can quickly edit the text with the inline editor. What happens if you click those buttons?

Did you create your own block with a .php file in "site/templates/blocks/" or did you use the premade blocks? If you used the premade blocks the uploader should just work out of the box. Maybe somethinng went wrong on install. So it's probably a good idea to reinstall the block modules as well if you want to use them.

@joe_g Thanks for considering PAGEGRID and sorry for the trouble! A recent update seems to have introduced a bug for the install function. I just pushed on update that should fix your issue. Please uninstall the module and then reinstall with the new version (2.2.19).

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. 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.