Leaderboard

Like last week, this week, updates continued on the core and matrix repeater fields. Repeater and matrix fields can now be configured to use fewer pages. When set, it won't create placeholder pages for repeater items until at least one repeater item exists for a given page and field. This can drastically reduce the number of pages consumed by repeaters in your system, and even more so if you are nesting repeaters. Eventually, this will become the default setting, but for now we are playing it safe and making it optional with a new toggle that you'll find on the Details tab when editing a repeater or matrix field: After enabling the "Use fewer pages..." Setting, the "Find an optionally delete unnecessary pages" checkbox will take care of cleaning up anything that isn't necessary for existing repeaters already in the database. If you have a large site with a lot of repeaters, this could be deleting a lot of now irrelevant stuff, so just be aware of that and backup ahead of time to be safe. Thanks to @Jonathan Lahijani for the idea/suggestion. Also new this week is the ability to copy and paste repeater items, as well as to clone above or below existing items. It handles this by replacing the existing "clone" icon action with a dialog that now lets you choose among various related actions. Among them is the ability to copy/paste from the same page or between different pages. The only requirement is that the repeater (or matrix) items are from the same field. See the video below for an example of how this works: This works with either Repeater or Repeater Matrix fields. But if you want this feature in Repeater Matrix, you'll want to upgrade to ProcessWire 3.0.188 and download the new version posted today (v8 beta) in the ProFields download thread. The ability to copy/paste repeater items was an idea originally from @David Karich and a module he developed called Repeater Matrix Item Duplicator. Thanks for reading and have a great weekend!

@Ivan Gretsky Sure, I can add that.

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

I just re-read the previous post. It is what i did ask for not knowing we already have it) Could you please consider also allowing to put color code in that item headers string, so we can also define a per-type color? That would make different types really stand out)

Super cool! Just amazing) This is what we, the Repeater Matrix lovers are waiting))) Are those type icons already present in the new version, or are you saving them for now?

@Ivan Gretsky Those are already present in Matrix as part of the header label. See the "Item Headers" input for each of the matrix types:

Hello! I am a new user of PW and I really need some guidence. :---) I use PW to design a front-end for the researchers I intern with. They logged all their database with PW (but before only used admin backend). I use Page Reference field mostly to create filters. I have followed this tutorial (very grateful for it!) and it does work as you can see at the screen recording of the test-website. But I cannot figure out how to change the inner workings of it to combine the tags user presses like Russia&&esoterism to see only the items that have both of those tags. What is even more complex: I will have multiple filters working in the same manner (page reference field) and I need all of them to also be using && logic. With possibility of clearing the history and showing all documents again. My tree structure is sth like this: -Documents -document -document -document -Tags -tag -tag -tag -Types -type -type -type etc This is my code right now. <div class="row"> <ul class="nav"> <h3> Filter by tag</h3> <li class="nav-item"> <a class="nav-link" href="/Documents/">Show all</a> </li> <?php $docTags = $pages->get("/Tags/")->children; foreach ($docTags as $docTag): ?> <li class="nav-item"> <a class="nav-link" href='<?php echo "/documents/{$docTag->name}/"; ?>' ?> <?php echo $docTag->title; ?> </a> </li> <?php endforeach; ?> </ul> </div> <div class="row py-5"> <?php // only 1 URL segment should be allowed if ($input->urlSegment2) { throw new Wire404Exception(); } // create a string that will be our selector $selector = "template=Document"; // get URL segment 1 $segment1 = $input->urlSegment1; // if there is a URL segment 1 if ($segment1) { // get cat type page $catType = $pages->findOne("parent=/Tags/, name=$segment1"); // if cat type page exists if ($catType->id) { // add this to the selector $selector .= ", tags=$segment1"; } else { // invalid URL segment 1 throw new Wire404Exception(); } } // find the pages based on our selector $docPages = $pages->find($selector); foreach ( $docPages as $docPage): ?> <div class="col-md-4 pb-3"> <div class="card"> <?php // if the page object has a featured image if ( $docPage->featuredImage): // https://processwire.com/api/fieldtypes/images/ // set some default image options $options = array('quality' => 80, 'cropping' => 'center'); // create a new image on the fly 800px wide $img = $docPage->featuredImage->width(400, $options); // get the url to the image $imgUrl = $img->url; // get the description field $imgDesc = $img->description; ?> <a href="<?php echo $docPage->url; ?>"> <img src="<?php echo $imgUrl; ?>" alt="<?php echo $imgDesc; ?>" class="img-fluid card-img-top" /> </a> <?php endif; ?> <div class="card-body"> <h4 class="card-title"> <a href="<?php echo $docPage->url; ?>"><?php echo $docPage->title; ?></a> </h4> </div> </div> </div> <?php endforeach; ?> </div> I would really appreciate any links to resources/tutorials or even general explanation about which direction to take! Thanks in advance! This forum has already helped me a lot! Best, Ksenia

Love this! If you stay up late enough on Friday night (it is almost midnight here), wonders will happen!

Hello all! I am pretty new to PW and now trying to figure out how to build a filter that uses AND logic and includes many fields. With help I have figured out Page Reference fields and Repeaters, but simple Text Filed with dropdown text tags makes me confused. As I think of it, first I need to get the array of given fixed options of Text Tags here: And then I just need to print it out as checkbox form and circle through each page to see if they have the checked value in place of this field. Like what I have with page references: But for the life of me I cannot figure out how to get this list...So if you have suggestions, I would really appreciate it! Best, Kseniia

Hi @BrendonKoz I have never used markup regions, so no help here, but I see that you use Processwire instead of ProcessWire namespace and there is debug section in the docs, so maybe it could help to find what is going on https://processwire.com/docs/front-end/output/markup-regions/#debugging-regions

There was still a small problem that prevented the module from being automatically updated from within ProcessWire. I had renamed the root branch in Github from master to main, but then the download path in the ProcessWire module directory didn't fit anymore. Long Story Short: Now everything works again ?

@ryan my i draw your attention to https://github.com/processwire/processwire-issues/issues/1447 thats quite a big deal for us "internationals" as it affects every place where the page Lister Module is used. i first thought it was in media manager but later noticed that its also in the page/lister/ and so on in the backend: bug: i cant switch pages. when i click on the arrow or page number 2 on the items list i get this error:{"error":false,"message":"Unknown Lister action"}

@kongondoyes its a bug in the core since a couple of versions. https://github.com/processwire/processwire-issues/issues/1447

Oh cool, sounds good ? Your addition might be a good fit for the open issue by Ivan Gretsky: https://github.com/robertweiss/ProcessTranslatePage/issues/3 – would it be an option for you to fork my repository on Github so we can merge via a pull request?

Glad you've at least isolated the cause of the problem. If you find a solution, please let me know if there's anything I need to do on MM side. Thanks.

I was too, but @Jonathan Lahijani's explanation cleared things up. We only have to look at the thing inside a screen mockup (see my screenshot). We can interact with it create new blocks and toggle the edit/render state of the blocks. This thing can be a better UI for a RM-based content builder, but when dealing with a lot of blocks it can get in the way taking too much space. Anyway, I think there is a rather not-so-hard way to implement it not changing everything in PW admin (not rewriting it as a SPA) - using something like htmx (see example in the end of the linked page). Htmx is getting a lot of attention in Django and Flask communities lately. Maybe we could use it for these kind of things.

Hello Robert! Thanks for a perfect module! I've made some changes to it (e.g. possibility to set the source language in module settings), how can i collaborate with You?

@Jonathan Lahijani The png is just an example and it supports any common image extension: gif, png, jpg, svg. I'm cool with a preview option, but just didn't want to mix preview with editor. But a preview that appears above or in a modal or something has potential. We may be able to provide an option for developers to provide their own preview render files, like we do for the preview images. The acf examples look interesting, but admittedly I'm lost in them like a nuclear power plant control room, likely because I'm not so familiar with the wordpress tools. By the way, the option we talked about earlier (repeaters with fewer pages) is now committed in the dev branch and you can enable it by opening the "Repeaters storage" fieldset that appears on the Details tab when editing a Repeater or Matrix field.

Just released v0.5 which includes the following new features: Exclude fields: choose fields which should not be translated Exclude languages: choose languages which should not be translated to Show Single Target Language Buttons: Show all target languages as single buttons in the save dropdown instead of having only one button for all translations Thanks to @Ivan Gretsky for proposing these additions!

@Jonathan Lahijani If I understand what you are asking for correctly, I think it's actually the next item in the class to-do's here -- does this sound like the same thing you are talking about? If so, I've actually reached the next step on that one along with some other updates, and may have it committed this week, so it's definitely on the way.

Well its about time, after using ProcessWire for years (and loving it) to share some projects we have done with it. This is our own agency website 2getmore.at we build websites, online shops and apps for our customers. Also we support them with their online marketing needs like ads, SEO and Social Media. Plugins used AdminOnSteroids Breadcrumb Dropdowns Custom Inputfield Dependencies Dashboard Email two-factor authentication Form Builder PRO General site settings (Process) Jumplinks Map Marker ProCache PRO ProDrafts PRO ProFields: Repeater Matrix PRO Seo Maestro SVG File Sanitizer/Validator TOTP two-factor authentication Tracy Debugger Upgrades Wire Mail SMTP Other tech We use the functions API. As the output strategy we are very happy with markup regions. For the Frontend we use UIkit which we also love just like ProcessWire. I will be posting some of our projects done for customers as well in the next couple of weeks. Happy to be part of the ProcessWire community, I am not very active in the forums but when i have questions people are always very supportive. Looking forward to your Feedback.

Sure... If you haven't read deeply into htmx, the main premise is that the server is the single source of truth regarding both data and markup, i.e. whole application state. If we need to update either data or markup, the server handles that. We just need to tell it what action to take. Validation has to pass, of course, before the server will oblige ?. Below is a quick example that demonstrates updating the markup using htmx based on user actions. Only 'remove' locations is demonstrated in this example. I wasn't sure whether your app shows the user both their removed and added locations and whether they can reset the session to have all locations reloaded afresh. It doesn't matter much as it wouldn't change much of the logic in the example. Secondly, note that this example makes use of alpine.js and tailwind css just for the pizzaz. These are not required by htmx. To let ProcessWire recognise htmx requests, please refer to this thread. Depending on the approach you take from there, you might not even need a JavaScript file! In the example below, we do have a JavaScript file just because we want to use alpine.js (for notifications) and we need htmx to talk to alpine.js. We also need the JavaScript file to tell htmx to add XMLHttpRequest to its request headers so that ProcessWire's $config->ajax will understand the request. First, let's see a demo then we'll see how easy our work is using htmx. Just for this demo, I have included htmx (and alpine.js and tailwind css via their respective CDNs [in production, you want to purge your tailwind css ?]) in my _main.php. Inside the template I am using for this demo, I have the following code. Here, I have removed the tailwind classes used in the demo so we can focus on htmx. Note that you don't need a dedicated template file for this to work. It will work with any template. As long as htmx is loaded in the page view and your template (in this case, the current page's template) is listening to ajax requests. In the template file, the main htmx magic happens here: <?php namespace ProcessWire; $out = "<a hx-post='./' hx-target='#locations' hx-vals='{\"location_add_id\": \"{$page->id}\"}' hx-include='._post_token' hx-indicator='#locations_spinner_indicator'>Add</a>" . "<a hx-post='./' hx-target='#locations' hx-vals='{\"location_remove_id\": \"{$page->id}\"}' hx-include='._post_token' hx-indicator='#locations_spinner_indicator'>Remove</a>"; echo $out; Let's go through the htmx attributes: hx-post This tells htmx where to send its ajax request. In this case, we are sending it to the same page we are viewing (./) and are using POST. We could have used hx-get if we wanted to (GET). hx-target This tells htmx which markup to replace/swap. The default is to replace the markup of the element from which htmx was called. However, hx-target can be used to specify the element to replace. In this example, we are replacing the whole listing so we target its wrapper element which has the id locations. hx-vals This is optional but we need it in our example. We want to tell the server which location (ID) has been added/removed. If we had a form element, we could have used it for this instead. Since we don't have one, we are telling htmx to process the (JSON) value of hx-vals and send that together with its request. Note: the escape slashes are so we can have raw, valid JSON in the attribute as required by htmx. hx-include This is also optional but important in our case. It tells htmx to include input elements found via the selector in this attribute in its ajax request. In our example, we are telling htmx to include the CSRF token we set on the server together with its request. hx-indicator Also optional. Tells htmx to show/hide this element to show the user that something happened. In this case we use a spinner. We could have used a progress indicator as well, .e.g., if we were uploading a file. That's it really! No event listeners, no handlers! We can add (and I did add one), event listeners on htmx events in order to do something after the event. In this example, htmx fires a custom event which alpine.js is listening to in order to show notifications after the DOM has settled. The notification type (success, error, etc) and the message are all coming back from the server but not as JSON. The markup to update the page is also coming back from the server. htmx receives it and plugs it into the DOM per the hx-target (also see hx-swap) attribute value. In this example, we are updating the whole listing. If we wanted, we could update just the location that was removed, e.g. add it back but with some removed 'indicator', e.g. greyed-out. In this example we use anchor tags as htmx triggers. For htmx, it doesn't matter; button, div, p, li, whatever valid HTML element would work. You already have a backend logic that's working for you but I show an excerpt of mine here, for completeness. Inside my-template-file.php (the template file for the template for the current page, in this example), I have the following code: <?php namespace ProcessWire; if ($config->ajax) { // check CSRF if (!$session->CSRF->hasValidToken()) { // form submission is NOT valid throw new WireException('CSRF check failed!'); } // ................ more code // e.g. check removed locations in the session, etc // get previously removed locations (keeping things in sync) $removedLocations = $session->get('removedLocations'); // REMOVING LOCATION if ((int) $input->post->location_remove_id) { $mode = 'remove'; $notice = "Removed"; $id = (int) $input->post->location_remove_id; } else if ((int) $input->post->location_add_id) { // ADDING LOCATION $mode = 'add'; $notice = 'Added'; $id = (int) $input->post->location_add_id; } // ................ more code // e.g. check if we really have a page by that id, SET $noticeType, $options and update session 'removedLocations' etc // build final content //----------- // @note: buildLocationsCards() is a function that does what it says on the tin. We use it in both the ajax response here and also below, in non-ajax content, when the page loads // the $options array contains a key 'skip_pages_ids' with an array of IDs of locations (pages) that have been removed in this session. We skip these in buildLocationCards(). $out = buildLocationCards($page, $options); // @note - here we always return one input only // we use the values in this input in JS to pass event details to alpine.js to show the correct notification and the notification message. $out .= "<input type='hidden' id='location_notice' name='location_notice' data-notice-type='{$noticeType}' value='{$notice}'>"; echo $out; $this->halt(); } // NON-AJAX CONTENT BELOW.... That's all there is to it ?. I am happy to share the full code if anyone wants to play with this further.

Hi @cb2004, I solved this with this code: $news = $page->children("limit=5"); $pager = $modules->get('MarkupPagerNav'); // this is required in order for getUrl to work // see https://processwire.com/api/ref/markup-pager-nav/get-u-r-l/ $pager->render($news); $paginationMarkup = ''; if ($news->hasPrevPagination() || $news->hasNextPagination()) { $paginationMarkup .= '<ul>'; if ($news->hasPrevPagination()) { $paginationMarkup .= "<li><a href='{$pager->getUrl($pager->pageNum - 1)}'>prev</a></li>"; } if ($news->hasNextPagination()) { $paginationMarkup .= "<li><a href='{$pager->getUrl($pager->pageNum + 1)}'>next</a></li>"; } $paginationMarkup .= '</ul>'; } echo $paginationMarkup;

The error is saying everything. It's not supported, but there's a workaround posted by Ryan here: https://github.com/ryancramerdesign/ProcessWire/issues/1210