Jonathan Lahijani

@adrian That issue has been there for a couple years. I spoke about it with Ryan on a thread in the RM forum, but I can't find it. You can ignore those errors. I do however wish they would not appear since it feels like like a bug.

@ryan I'm not sure how ACF Extended is doing previews, but let's just assume it's rendering frontend code in the backend (iframe). The specific matrix-item previews would have to be from frontend code (so as a result, inside an iframe) so it utilizes the frontend css and js. I experimented with a concept a couple years ago (go to around 2:48 in this video -- notice the preview iframe changing there as the dropdown changes). With that being said, when switching from editor mode to preview mode, it would have to save the content in the repeater item so that the preview shows the up-to-date data. Perhaps this could benefit from the new snapshots feature that you've been developing separately? Regarding your concern about it being a lot of developer work, I think leaving the intricacies up to the developer is fine as long as ProcessWire provides some basic guidelines and makes it easy to pipe it all together. Because page builders can get ridiculously complex (I've gone DEEP down this rabbit-hole) and ProcessWire doesn't force a specific frontend approach (good), I believe providing the minimal foundation for letting developers decide how they want to go about it is the best approach. There are a lot of developers on here trying to twist RepeaterMatrix to work a certain way, but with a few more adjustments I believe it will be in a perfect spot. To recap the last few years of "page building" with regards to ProcessWire, here's what really drove it forward: the Repeater Matrix fieldtype nesting repeaters inside repeaters repeater depth family friendly option (being able to drag a "parent" item and it takes the children with it) Mystique fieldtype (for being able to define option type fields that don't warrant the use of "real" ProcessWire fields since it would get unwieldy -- I love this module) new methods by which a matrix-type can be chosen (developed this week) repeater lazy parents (developed this week; big efficiency gains) --> matrix-type previews (or some sort of preview system) ? ? ? THE END. ? There is a client of mine where one of the editors (a marketing person with a good eye for design) has been using my advanced RepeaterMatrix setup with great success. The pages he's created are outstanding and he doesn't require any of my help (I'll demo this later this year). While the page building experience won't match an "inline" type page builder (WP Block Editor and the million other ones out there), I've found that this approach is "good enough" and the pages made will be very consistent.

Yea, preview can be done either in the ProDrafts Live Preview way, or the ACF Extended way. I haven't given it much thought but with the ACF Extended way, you save a lot of horizontal space in the page editor, which is especially important if you have a lot of configuration options for each matrix-type. With the ProDrafts Live Preview way, it gets squished (although resizable). ProDraft's Live Preview way does however provide a more realistic (not chopped up) live preview. Pros and cons. Would be nice if everyone had an ultrawide monitor. ? HTMX is freaking awesome and I'm currently using it heavily on a site for filtering and such. It's made me 100x more productive for the repetitive fancy JS type things while still being able to use regular HTML (no JSON and brittle SPA nonsense). If that could be leveraged in some way it would save a lot of headache, although Ryan seems very comfortable with jQuery. @ryan I think looking into HTMX is worthwhile. It's going to stay around for a long time if I were to make a prediction.

I just tested the repeater storage option and it's working nicely. This behind-the-scenes tweak was really important in terms of efficiency, so thanks for implementing it. As for the ACF example, what you're seeing on that page is basically the equivalent of a matrix field with 3 matrix-types already added ("Header", "Hero" and "Cards") in a "preview" state (remember, this is inside the WordPress admin area, not frontend). (Note: ignore those 8 vertical tabs on the left, that's just marketing material) If you click on the rendered content of one of the matrix-types there, it will switch to "editor" mode and allow you to edit the content. Once done editing, you can click the "Close" button to go back to preview mode. If you click "Add Row" at the bottom, it's the equivalent of the newly created images approach to selecting a matrix-type. Hopefully that clears it up.

@ryan Can matrix preview images also support .jpg in addition to .png? Also, this is more of a stretch, but what are your thoughts on the ability to have a "Preview" option that renders a repeater item's frontend output in the backend? There is a plugin in WordPress for Advanced Custom Fields that does this which I think could be a great addition in ProcessWire: https://www.acf-extended.com/ That page has an embedded WordPress admin interactive demo right there in the hero section. This is similar to the spirit of PageTableExtended module: https://processwire.com/modules/fieldtype-page-table-extended/

Perfect. Yes that's it.

Hi Ryan, Just gave 3.0.187 a whirl along with the new version of Matrix and it's looking really great. I wanted to get your thoughts about a potential optimization to repeaters (which would also apply to matrix). Right now, if you add a repeater field (let's call it 'my_repeater') to a template, then create a new page (let's call it 'p1'), ProcessWire will create a "for-field" page and "for-page" page in the following fashion: /admin/repeaters/for-field-123/ title = my_repeater /admin/repeaters/for-field-123/for-page-456/ title = p1 That's all good, but when utilizing RepeaterMatrix as a page builder in the way that I do, it can get a little insane with how many 'for-page' pages get automatically created, even if a repeater field is not being used for a particular matrix-type. In my advanced setup, if I apply a single matrix type to a page, then as a result of having 6 different repeaters as part of my overall matrix field, 6 'for-page' pages will get created behind-the-scenes no matter what. Now imagine a page with 20 instances of various matrix-types used, that means there will be at least 20*6 pages that have been utilized behind-the-scenes which can lead to performance issues (deleting a page like that takes some time). I could demonstrate this with a video, but I think you know what I mean. So in short, is it possible to somehow improve repeaters so it's more efficient with the creation of 'for-page' pages?

Solution: https://processwire.com/api/ref/page/num-parents/

I think I had this issue as well in some version of Next a few months ago and downgraded. Sorry I can't provide more details at the moment.

I would like to do this, but right now I just don't have the time. The module is in a state where it needs a significant amount of cleanup before it would be usable for people who are not myself. For example, right now it forces you to install practically all the pro modules (FormBuilder, Matrix, ProCache, etc.) as they are dependencies. Secondly, I've hardcoded various things in there at the moment (due to time constraints) that would have to be cleaned up. Third, right now it's kind of in a frankenstein state of how it works with various CSS frameworks. The goal is to make it work with UIkit3, Bootstrap5, or Tailwind2 (or none at all), but I have to finish making it work with each and do the proper OOP (right now it's a mess). Also, the builder related stuff is constantly changing but nearly settled after 2 years (I've had to re-develop builder pages on a site 10 times once, I don't wish that on anyone). Also keep in mind it forces the creation of a bunch of general fields which I would suspect might be a turn-off if you have a purist approach. For example, I have a text field called "IP Address" that gets created. There's not really a choice in whether you can keep it or not. If you delete it, it will get recreated on a re-install or update. I do wonder though if I released if it would take on a life of its own through contributions (even clean-up related work initially). The vision of this module is to be "the best of ProcessWire" and from that it's highly opinionated. Meaning, it forces the use of Markup Regions and setting() vs other approaches. It uses a built-in menu builder based on repeaters (as opposed to something like MenuBuilder module). It relies heavily on the Mystique field for the builder options. I will make a video eventually.

Wire Mail SMTP + Mailgun works well for me. Settings SMTP Server Local Hostname: example.com (or whatever the default is) SMTP Hostname: smtp.example.com SMTP Port: 587 Allow Connection without Authentication: unchecked SMTP User: postmaster@mg.example.com SMTP Password: (from mailgun) Use START-TLS: checked Select a crypto method for TLS: (blank) Use SSL: (unchecked) Sender Send Email Address: postmaster@mg.example.com Send Name: (website name) Send Sender Signature: only when explicitly called via API

I'll make a video of this in the near future but here's the extremely short version of the page builder journey I went on. There are 2 approaches that ultimately make sense: section-based and component-based Section Based: This is the "intended" way repeater matrix (and similar fieldtypes in other CMSes -- WordPress ACF has flexible content, Craft has Matrix) is supposed to be used. Each matrix-type represents a section with the necessary fields to populate that section. No depth. Pros easy for editors to understand they just need to put in the content and it will work; no need to worry about layout because it's baked in; hard to mess up Cons not flexible / requires a lot of discussion to make sure all sections, fields and their variations are covered can't move content from one section to another can lead to field bloat Component Based: Each matrix-type represents a component (headline, text, image, video, description list, etc.). Furthermore, 4 additional matrix-types for layout: section, container, row, column. Depth is enabled as well as the new "family friendly" option which I pushed Ryan to implement earlier this year and makes this approach more usable. Pros extremely flexible; closely follows YOOtheme Pro's approach but in a matrix-way can move content anywhere Cons higher learning curve compared to section-based since layout and nesting is involved structures must be repeated over and over again since each component is independent uses many more pages behind the scenes -- Which approach is better? The answer is it depends on the nature of the content of the site and the technical ability of editors. If the site has a level of consistency from page to page, the section-based approach would work better. However if there is less consistency and/or the editors need and/or are willing to put in extra effort to build truly unique pages, then the component-based approach makes sense. The thing is, you can actually use both approaches. The matrix field name for the section-based approach that I use is called 'sections' and the component-based approach field name is called 'builder'. My base module sets up these fields automatically and uses Mystique for all the settings. You can add both the 'sections' and 'builder' fields to a template and the editors can decide which one makes more sense given a page's needs.

I developed the new Geffen Playhouse website over the course of 2018/2019 and launched it in September 2019. It has been perhaps the largest project I have been involved in. The Geffen Playhouse went through an entire re-branding done by Base (including a custom font), and I worked with Teak on the new website. Website https://www.geffenplayhouse.org/ Wikipedia https://en.wikipedia.org/wiki/Geffen_Playhouse Base write-up https://www.basedesign.com/work/geffen-playhouse-always-geffen-playhouse-always-new Teak SF write-up https://teaksf.com/work/geffen-playhouse-ticketing-ecommerce-website-design/ Another write-up: https://www.laurentakayama.com/geffen Their previous website was severely antiquated and it wasn't a responsive website (as of 2019!). Instead, it forwarded mobile users to a "mobile-friendly" website on a different subdomain, which I think was hosted by a third party service. However the data containing all the actors, shows, seasons, news and press articles were all in there. So one major aspect of this website was de-duping and importing their data into ProcessWire, along with some post-import cleaning… that's ~25 years of data. The site is built with UIkit 3 for the most part, and also uses FullCalendar for the large and small calendars. There is a custom integration with AudienceView, their ticketing system, which is used to import all the performance showtimes of their shows into ProcessWire. It's not the easiest API to work with (XML), but I eventually got it working. Repeater Matrix is being heavily used for section-based page building. Building out all the necessary matrix types took a long time as there was quite a bit of thinking what types and layouts we needed as we went along. However the end result has given the editors a lot of flexibility. ProCache is being used as well, including a CDN for all assets. This is crucial because when opening season sales are announced, the site gets slammed, but with caching turned on, it's not a problem anymore. On a deeper level, the site uses my new (well 2 years old now), universal and very opinionated base module that provides a menu builder, a standard set of fields/templates/pages, and a bunch of other tweaks that I tend to use on every site. All the fields, templates and pages are set up in a streamlined and editor friendly way. I wasn't able to access their previous CMS backend for various reasons (I only got the MySQL dump), so when developing the site and data model in ProcessWire, I was able to completely re-envision the editor experience and the data model without bias. A quote from one of the marketing directors at Geffen Playhouse: "We absolutely love ProcessWire." More details on my personal website: https://jonathanlahijani.com/projects/geffen-playhouse/

I have a decimal field that has been set to non-editable. I want to format the value so it's nicer when editing a page. For example, instead of showing 123456, I want to format it to show $123,456.00 What is the proper way to hook into it and modify the rendered value?

I swear I tried that and it didn't work. But maybe I did something wrong and didn't notice. Anyway, it works now after looking at it with a fresh mind.

I see this works but not as ideal: $results = $pages->find("title~=word1|word2|word3")->find("title~=word4");

I want to find pages where the title has (word1|word2|word3) + word4. Meaning if word1/2/3 and word4 were in a page title, then it would match. I'm not sure if selectors can do this however? title~=word1|word2|word3 word4 That unfortunately does not work correctly. What am I missing?

HTMX is quite good. $config->ajax won't detect HTMX requests though, so I recommend adding this to your /site/ready.php: // if htmx request, DO NOT use _main.php if(array_key_exists('HTTP_HX_REQUEST', $_SERVER)) { $config->appendTemplateFile = ''; $config->htmxRequest = true; } That assumes you are using the Markup Regions output strategy by the way. Use $config->htmxRequest as needed.

CodyFrame is their CSS framework (free). It uses the BEM convention. It handles things like colors, spacing, fonts, form styles. No JS. Then there's CodyHouse UI Framework / components which use CodyFrame as the base layer. There are many free components, but CodyHouse Pro membership (now a one time fee for life), gets you access to all the components. The difference I see with CodyFrame + CodyHouse components vs Bootstrap/UIkit is that CodyFrame is just and base layer and doesn't try to do every possible thing. CodyHouse components are where they make their 1-off, tightly coupled section templates. By tightly coupled, I mean that the component relies on the utility classes from CodyFrame + specific CSS classes for the component that aren't in CodyFrame + any dependencies on other components + custom, vanilla JS for that particular component (this part is huge). I feel like this 1-off approach gives them a lot of flexibility, although it means you as a developer have to take the necessary files and insert them correctly into your project (which is not hard). Here's their offcanvas component which is a good example of what I described... it relies on (a) CodyFrame + (b) custom CSS for that particular component + (c) custom JS for that particular component + (d) other component dependencies (like animated menu button): https://codyhouse.co/ds/components/info/off-canvas-navigation https://codyhouse.co/ds/components/app/off-canvas-navigation They've done all the hard work for you. I think this will be my go-to front-end framework moving forward.

I purchased CodyHouse Pro (it's $129 for a lifetime license) a couple months ago. While I haven't use it yet for any projects (I haven't taken on anything new and large for a few months), it's looks like an exceptional product and value. It's ridiculously comprehensive. @rafaoski seems to be the only one using it with ProcessWire as far as I know. I'd be interested in hearing what the experience has been like building with it on a real world, intricate project.

I've been following WP's Block Editor development on-and-off since it was announced. I was hoping for the best and something very well thought out given they could make core changes to WordPress to facilitate a great experience, but it seems, at least from my point of view, chaotic and disjointed. I am not surprised however since page builders are tough to do, especially if certain things are not "forced" (like a universal CSS framework). This comment touches upon several issues from a developer's point of view: https://wptavern.com/getting-to-know-the-upcoming-wordpress-5-8-template-editor#comment-382930

I think namespacing your file with the ProcessWire namespace should fix your issue.

Lol yea my excitement got ahead of me before thinking that through.

Love it. The appending the form ID to the subject line is very convenient. I relied on using a hook for this for the last however many years. Nice to see it baked in. Thank you for Bootstrap 5 support as well. New spam features will be very helpful. I will immediately be adding these rules: %=search engine optimization %=seo ?

Are you referring to Repeater Matrix? https://processwire.com/blog/posts/processwire-3.0.4-repeaters-revisited-preview-of-profields-matrix/#repeater-matrix-details-and-screenshots