Search the Community

If you love the simplicity of ProcessWire's API but want the reactive, SPA-like feel of modern frontend frameworks without writing complex JavaScript, this module bridges that gap. It brings native Server-Side Component state hydration, Out-Of-Band (OOB) swaps, and strict security to your ProcessWire application using HTMX. 🚀 What does it do? This module transforms how you write frontend components in ProcessWire: True Stateful Backend Components: It introduces Component and Ui base classes. Your PHP components automatically rehydrate their state (variables, dependencies, $page assignments) between HTMX AJAX requests! No need to manually parse POST payloads. Auto-Discovery: Just place your components in your site directories. The module automatically discovers and securely namespaces them (Htmx\Component and Htmx\Ui). Zero-Javascript Reactivity: You can handle form submissions, counters, validation, and multi-field updating dependencies directly from PHP using HTMX attributes. Cryptographic Security: The module uses strict HMAC-SHA256 signatures with TTL (Time-To-Live). This guarantees that bad actors cannot modify state payloads or trigger invalid endpoint logic in the browser. WebSockets & SSE Ready: It has built-in helpers to easily hook Server-Sent Events (SSE) and WebSockets onto your templates without exhausting PHP-FPM pools globally. 🛠 How it looks in your code You simply create a PHP component class, define some public properties, and write an endpoint action: <?php namespace Htmx\Component; use Totoglu\Htmx\Component; class ClickCounter extends Component { public int $count = 0; public function increase() { $this->count++; } } Then, you can render it anywhere in your site with a single line: /** @var Htmx $htmx */ echo $htmx->renderComponent(ClickCounter::class); View the documentation and examples on Github Feel free to try it out, run the tests included in the repo, and let me know your thoughts or feedback! htmx.mp4

Hello @ all I want to share a new module with you, which makes the creation and validation of forms easy. Take a look at the following example of a simple contact form: // A very simple example of a contactform for demonstration purposes $form = new Form('contactform'); $gender = new Select('gender'); $gender->setLabel('Gender'); $gender->addOption('Mister', '0'); $gender->addOption('Miss', '1'); $form->add($gender); $surname = new InputText('surname'); $surname->setLabel('Surname'); $surname->setRule('required'); $form->add($surname); $name = new InputText('name'); $name->setLabel('Name'); $name->setRule('required'); $form->add($name); $email = new InputText('email'); $email->setLabel('E-Mail'); $email->setRule('required'); $form->add($email); $subject = new InputText('subject'); $subject->setLabel('Subject'); $subject->setRule('required'); $form->add($subject); $message = new Textarea('message'); $message->setLabel('Message'); $message->setRule('required'); $form->add($message); $privacy = new InputCheckbox('privacy'); $privacy->setLabel('I accept the privacy policy'); $privacy->setRule('required')->setCustomMessage('You have to accept our privacy policy'); $form->add($privacy); $button = new Button('submit'); $button->setAttribute('value', 'Send'); $form->add($button); if($form->isValid()){ print_r($form->getValues()); // do what you want } // render the form echo $form->render(); This piece of code creates a simple contact form and validates it according to the validation rules set. Inside the isValid() method you can run your code (fe sending an email) Highlights: 30+ validation types Support for UiKit 3 and Bootstrap 5 CSS framework SPAM protection Highly customizable Hookable methods for further customization Multi-language You can download and find really extensive information on how to use at https://github.com/juergenweb/FrontendForms. Please report errors or suggestions directly in GitHub. Best regards and happy testing ? If you have downloaded the module in the past I recommend you to uninstall the module completely and install the newest version 2.1.14. There are a lot of changes in the new version, so please test carefully.

Hi, Yesterday I found out about the relatively new markup regions functionality and I love it. The ease of use and simplicity is just what I think is typically ProcessWire and is why Im still happy I chose for PW four years ago when changing CMS/CMF. So thanks Ryan for your vision and all you put into it. That said, Im running into an issue I'm not sure what to think of it. I have enabled markup regions in config.php and it does what I suppose it should: it replaced and all. Very neatly. The only thing I discovered is that while Im debugging some issues and I use var_dump to echo some stuff, it does that two times in a row. And this only happens when useMarkupRegions is enabled. I dont get this, does it mean the template file gets called twice (and thus the script is run twice?) or is it only displayed twice, where the first time most output is erased and /or replaced by the substituted output? I don't really get whats going on there. Is this behavior normal when using markup regions? Thanks!

Hello @da² I have added a new method to trigger an error message to a field manually: setErrorMessageToField() Here is a small example on how to use it: $form = new \FrontendForms\Form('testform'); $form->setMaxAttempts(0); $form->setMaxTime(0); $form->setMinTime(0); $firstname = new \FrontendForms\InputText('firstname'); $firstname->setLabel('Firstname'); $firstname->setRule('required')->setCustomFieldName('The first name'); $form->add($firstname); $button = new \FrontendForms\Button('submit'); $button->setAttribute('value', 'Send'); $form->add($button); if ($form->isValid()) { $form->setErrorMessageToField($firstname, 'This is my custom message'); } echo $form->render(); If the "default validation" was successful, then the error message will be displayed under the "firstname" field in this case. You can use it to make another validations inside the isValid() function to check the submitted form values against other conditions. If the conditions fail then you can output this manually triggered error message like written above. To use the new method, you have to replace the file site\modules\FrontendForms\Formelements\Form.php with the one from Github or you simply add the new function to your Form.php. Please let me know if this helps.

Hi, everyone! While working on a client project we were looking for a way to let editors apply CSS classes to individual images in rich text fields — quickly, visually, and also in the frontend editor. ProcessWire already has several ways to get CSS classes onto images, so it's worth being precise about what this module does differently: TextformatterFluidImages adds one class to all images automatically — great for img-fluid across the board, but there's no per-image choice. TextformatterImageInterceptor is more powerful: editors tag images in the image field, and the Textformatter applies the corresponding classes at render time. The logic is developer-defined and centralized, which is exactly right when you want consistent, rule-based image treatment. But the class is invisible in the editor, applied only in the frontend output, and editors have to set the tag in a completely separate place from where they're actually working. TinyMCE's built-in styleFormatsCSS is the closest thing to what we wanted. You write CSS, ProcessWire turns it into a Styles dropdown. It works, but the dropdown is generic — it shows all defined styles regardless of what's selected — and there's a known accumulation issue where nothing prevents float-left float-right ending up on the same image. And it doesn't work in the frontend editor. What we needed was simpler: editor clicks an image, picks a style, sees immediately which styles are active, can combine them or remove them individually. No dialogs, no separate fields, no render-time magic — the class goes directly into the <img> tag in the saved HTML, visible and editable right there in the editor. That's what this module does: It registers a context toolbar in TinyMCE that appears as a floating "Image Style" button when an image is selected. For CKEditor the same options show up in the right-click context menu. The class list is defined once in the module settings and works across both editors — no separate configuration per editor type. Each entry shows a checkmark when active, clicking it again removes it, multiple classes can be combined freely. Works in the admin and in the frontend editor. Complete Readme on GitHub: https://github.com/frameless-at/ProcessImageClasses and the module directory. Any thoughts on further improvements welcome! Cheers, Mike

So I tried the following but I'm not sure if it's good practice or not. Sharing in case anyone finds it useful. This setup requires that the PageImageSource module is installed with srcset image sizes setup in its config. It basically involves creating a page where cross-site images can be uploaded - like a simple image library. I created a short function to make it easier to grab the images where needed. Adding ->render() will output <picture> with srcsets. The media page should be set as hidden. Create a template, give it a name and add a multi-image field In the templates folder create _func.php and add the following: <?php namespace ProcessWire; /* Create a fn. that returns a Pageimage object from media library page you just created. Here i called my function medialib, and $medialibrary is the name of my template.*/ function medialib($filename) { static $medialibrary = null; if (is_null($medialibrary)) { // REPLACE the get directory with the Media Library page url created in admin. Mine was /media-library/ $medialibrary = wire('pages')->get('/media-library/'); } // Returns the image object if found, or null return $medialibrary->id ? $medialibrary->images->get("name=$filename") : null; } Add the include for _func.php in your _init.php in the templates folder: <?php namespace ProcessWire; // This makes the medialib() function available to all templates include_once("./_func.php"); // Render media library images on other pages using format: /*<?= medialib("imagefile.jpg")?->render() ?>*/ Function can now be called in template markup using: // Render media library images on other pages using format: <?= medialib("imagefile.jpg")?->render() ?> //Example <?=medialib("imageNameMustMatchFileName.jpg")->render()?> // Outputs <picture> tag. For CSS styling, target outer div class like so: .class img{.....} Combining this with another module might https://processwire.com/modules/process-media-lister/ might be useful.

Hey all! This is a module to enhance forms built using the Pro FormBuilder module by providing the ability to submit them in place using AJAX and HTMX. FormBuilderHtmx works in harmony with FormBuilder by handling front-end rendering and AJAX and lets FormBuilder manage form configuration and processing. FormBuilderHtmx provides a drop-in replacement for the $forms->render() method and provides all native features and behavior (and adds a few extra superpowers to boot). Noteworthy features: Zero configuration, install and render AJAX powered FormBuilder forms immediately Render multiple forms on the same page. Supports both multiple instances of the same form or different forms. Each form is processed independently. Non-intrusive, can be used alongside FormBuilder's native rendering methods and does not modify core module behavior Perfect for forms embedded in popups and modals Does not conflict with styling and other JavaScript already in-place, only handles the form submission/response loop Automatically disables the `Submit` button on submission to prevent duplicate requests Provides the ability to add a custom 'spinner' shown when a form is being processed Gives you the ability to add additional HTML attributes to your FormBuilder <form> element. Add additional custom functionality using HTMX attributes, hook into form actions with your JavaScript, or even add AlpineJS directly to your forms. Compatible with FieldtypeFormSelect, let users choose which forms to embed, your code determines how they are rendered Uses HTMX, a stable, powerful, and tiny (14kb gzipped) library, installation documentation available here This module is BYOH (Bring Your Own HTMX) in that the HTMX library is not included or available within this module. This ensures long-term stability by not locking FormBuilderHtmx to external asset versioning. FormBuilderHtmx uses stable core HTMX features so use the library version that works for you and confidently add this module to both new, existing, and future ProcessWire applications. In some instances CSRF protection may need to be disabled to submit forms with this module. Just test your forms and you're good to go. Using this module is truly easy. <!-- Replace the native $forms->render() method with $htmxForms->render() --> <?php $htmxForm = $htmxForms->render('your_form_name') ?> <!-- Use native ProcessWire properties and methods as usual --> <?php echo $htmxForm->styles; echo $htmxForm->scripts; echo $htmxForm; ?> Presto. You can optionally include a helpful 'spinner' or activity animation that will be showed to users while their form request is being processed. Check out these ready-to-go examples you can use in your projects. <style> /* Add these styles to your CSS, the `.htmx-request` must be present as shown here. Be sure to include any CSS your 'spinner' may need, and style everything as desired */ .activity-indicator { display: none; } .htmx-request .activity-indicator, .htmx-request.activity-indicator { display: block; } </style> <!-- Optional second argument matches that of the $forms->render() method for pre-populated values The third argument is the CSS selector matching your 'spinner' element --> <?= $htmxForms->render('your_form_name', [], '#indicator-for-the-form') ?> <div id="indicator-for-the-form" class="activity-indicator"> <span class="spinner"></span> </div> Presto (again) Check out the documentation for detailed usage and other available features. Pull requests and issues filed on Github are welcome, or drop by here to get some help! Install as a ProcessWire module Install using Composer Download from the FormBuilderHtmx Github repository . Cheers!

@Ivan Gretsky I'm always a little reluctant to make a blanket statement like "avoid markup in page classes", but I'm referring to what I think works best with the projects I work on. The files in /site/templates/ are the view layer, as nearly all code in there is aimed at generating markup/output. Even if something isn't directly generating markup, it's still finding and preparing things for output. Most markup comes from "partials", which are files that I put in /site/templates/parts/, or if exclusive to a particular template, then /site/templates/[template]/. And then I either include() them, or files()->render() them from the site's template files. I primarily use Markup Regions. The _main.php establishes the base markup: <?php namespace ProcessWire; /** @var Page $page **/ ?><!DOCTYPE html> <html> <head id="html-head"> <?php include('./parts/html-head.php');?> </head> <body id="html-body"> <header id="header"> <?php include('./parts/header.php');?> </header> <h1 id="headline"><?=$page->title?></h1> <main id="content"> <?=$page->body?> </main> <aside id="sidebar" pw-optional> </aside> <footer id="footer"> <?php include('./parts/footer.php');?> </footer> </body> </html> Below is a template file for the /products/ page which lists product pages, supports pagination, and uses URL segments for sorting: <?php namespace ProcessWire; // products.php /** @var ProductsPage|CategoryPage $page */ $products = findProducts($page); $body = input()->pageNum === 1 ? $page->body : ''; $headline = $page->get('headline|title'); ?> <h1 id="headline"><?=$headline?></h1> <main id="content"> <?=$body?> <?php include('./parts/sorts.php'); // no expects ?> <?php include('./parts/products-list.php'); // expects $products ?> </main> <aside id="sidebar"> <?php include('./parts/categories-list.php'); // no expects ?> </aside> The category template file works exactly the same way, except that it lists products for the category rather than listing all products. The same code works either way, so "category.php" just includes "products.php": <?php namespace ProcessWire; // category.php include('./products.php'); There's that findProducts() function above in the products.php template file -- I usually have helper functions in a /site/templates/_func.php, /site/templates/_products.php, or /site/templates/products/func.php (assuming exclusive for "products"). Another place would be for the ProductsPage and CategoryPage to have findProducts() methods, but usually I don't want the page classes getting involved with detecting stuff about the current request (sort, pageNum, etc.) so like these in a simple function library file: <?php namespace ProcessWire; // file site/templates/_func.php included by _init.php function getSorts(): array { return [ 'name' => 'A-Z', '-name' => 'Z-A', 'price' => 'Price (low-high)', '-price' => 'Price (high-low)', 'created' => 'Date added (oldest)', '-created' => 'Date added (newest)' ]; } function getSort(): string { $sorts = getSorts(); $sort = input()->urlSegment('sort-(*)'); if(empty($sort)) $sort = 'name'; if(!isset($sorts[$sort])) wire404('Invalid sort'); return $sort; } function findProducts($page, $limit = 20): PageArray { $sort = getSort(); $find = "template=product, sort=$sort, limit=$limit"; if($page instanceof CategoryPage) $find .= ", categories=$page"; return pages()->find($find); } Here's an example of a ./parts/products-list.php file: <?php namespace ProcessWire; // file: parts/products-list.php /** @var PageArray|ProductPage[] $products */ $subhead = $products->getPaginationStr('Products'); $pagination = files()->render('parts/pagination.php', [ 'items' => $products ]); ?> <h3><?=$subhead?></h3> <?=$pagination?> <ul class="products-list"> <?php foreach($products as $product): ? <?php include('./parts/products-item.php'); // expects $product ?> <?php endforeach; ?> </ul> And the parts/products-item.php, though in reality there would likely be more to it: <?php namespace ProcessWire; // file: parts/products-item.php /** @var ProductPage $product */ ?> <li class="products-item"> <h3><?=$product->title?></h3> <p><?=$product->summary?></p> <p><a href="<?=$product->url?>">View Details</a></p> </li> To complete it, here's the parts/sorts.php file: <?php namespace ProcessWire; // file: parts/sorts.php $currentSort = getSort(); $url = page()->url; $sorts = []; foreach(getSorts() as $sort => $label) { if($sort != $currentSort) $label = "<a href='{$url}sort-$sort/'>$label</a>"; $sorts[] = $label; } echo "<p class='sorts'>Sort by: " . implode(' / ', $sorts) . "</p>"; If I start needing to output products in more places in the site, then I'll usually do fewer include()'s and move the rendering to dedicated functions. That way these things render in their own variable namespace and don't bleed variables or overwrite variables in the main rendering. So this would also go in that _func.php (or _products.php or ./products/func.php) mentioned above, and the include() calls in template fiels would be replaced with render...() calls: function renderProducts(PageArray $products): string { return files()->render('parts/products-list.php', [ 'products' => $products ]); } function renderCategories(): string { return files()->render('parts/categories-list.php'); } function renderPagination(PageArray $items) { return files()->render('parts/pagination.php', [ 'items' => $items ]); } So if using render() functions then the <main> with the include('./parts/products-list.php'); would get replaced with this: <main id="content"> <?=$body?> <?=renderProducts($products)?> </main> Ah yes, I hadn't thought about that in a long time. I can't remember if that was implemented yet or not. I'll find out. If not yet implemented I'll have to implement it, it should be fairly simple.

Good day! I need to render a page output for a given url segment from API. There is a way to render a page with $page->render() and now with $page->renderPage(). But I can't find a way to render a page passing in an url segment. So the output would be not of site.com/page but of site.com/page/urlsegment to make it more clear. Please share your ideas.

I've been reading through the forums for best practices on handling images on static pages - that's to say, how best to handle images in my static html markup when I don't have any need for image fields. On my current site, I have a lot of images on the home page and it seems silly creating an image field for all of these. Also, for pages where I do have image fields, I've been using the PageImageSource module to create wepb srcsets automatically (and it works great). I like setting my desired image sizes for the srcsets in one place, so I'd like to use this module for everything everywhere if possible. The problem is that it only works with PageImage objects, so I have to do something with my static images in order for the plugin to work with those. It looks like the media manager modules are not maintained. Could I just somehow put all my non-image field images in one page reference or something and have the PageImageSource module render those wherever they're needed? Could the following work? 1) Create an images/media page and template with images field. Set it to hidden. 2) // In _init.php: $media = $pages->get("template=media", include=hidden); 3) // on a template page markup: $desiredImage = $media->images->get("name=imageName.jpg"); .... <div><=?php $desiredImage->render()?></div> // renders the srcsets and <picture> tags with the PageImageSource module I don't know if this is the recommended way of dealing with <picture> tags for static pages (srcsets are such a pain to do manually!). Maybe there are some downsides to this that I'm not aware of. Any guidance would be very welcome.

Hello community! I want to share a new module I've been working on that I think could be a big boost for multi-language ProcessWire sites. Fluency is available in the ProcessWire Modules Directory, via Composer, and on Github Some background: I was looking for a way for our company website to be efficiently translated as working with human translators was pretty laborious and a lack of updating content created a divergence between languages. I, and several other devs here, have talked about translation integrations and the high quality services now available. Inspired by what is possible with ProcessWire, I built Fluency, a third-party translation service integration for ProcessWire. With Fluency you can: Translate any plain textarea or text input Translate any TinyMCE or CKEditor (inline, or regular) Translate page names/URLs Translate in-template translation function wrapped strings Translate modules, both core and add-ons Installation and usage is completely plug and play. Whether you're building a new multi-language site, need to update a site to multi-language, or simply want to stop manually translating a site and make any language a one-click deal, it could not be easier to do it. Fluency works by having you match the languages configured in ProcessWire to those offered by the third party translation service you choose. Currently Fluency works with DeepL and Google Cloud Translation. Module Features Translate any multilanguage field while editing any page. Translate fields in Repeater, Repeater Matrix, Table, Fieldset Page, Image descriptions, etc. Translate any file that added in the ProcessWire language pages. It's possible to translate the entire ProcessWire core in ~20 minutes Provide intuitive translation features that your clients and end-users can actually use. Fluency is designed for real-world use by individuals of all skill levels with little to no training. Its ease-of-use helps encourage users to adopt a multilanguage workflow. Start for free, use for free. Translation services supported by Fluency offer generous free tiers that can support regular usage levels. Fluency is, and will always be, free and open source. Use more than one Translation Engine. You may configure Fluency to use either DeepL, Google Cloud Translation, or both by switching between them as desired. AI powered translations that rival humans. DeepL provides the highest levels of accuracy in translation of any service available. Fluency has been used in many production sites around the world and in commercial applications where accuracy matters. Deliver impressive battle-tested translation features your clients can count on. Disable translation for individual fields. Disable translation for multilanguage fields where values aren't candidates for translation such as phone numbers or email addresses Configure translation caching. Caching can be enabled globally so that the same content translated more than once anywhere in ProcessWire doesn't count against your API usage and provides lightning fast responses. Set globally ignored words and text. Configure Fluency to add exclusionary indicators during translation so that specific words or phrases remain untranslated. This works either for specific strings alone, or present in other content while remaining grammatically correct in translation. Choose how translation is handled for fields. Configure Fluency to have buttons for either "Translate from {default language}" on each tab, or "Translate To All Languages" to populate every language for a field from any language to any language you have configured. No language limits. Configure as few or as many languages as you need. 2, 5, 10, 20 language website? Absolutely possible. If the translation service you choose offers a language, you can use it in ProcessWire. When new languages are introduced by third parties, they're ready to use in Fluency. Visually see what fields and language tabs have modified content. Fluency adds an visual indication to each field language tab to indicate which has different content than when opening the edit page. This helps ensure that content updated in one language should be updated in other languages to prevent content divergence between languages. Render language meta tags and ISO codes. Output alt language meta tags, add the current language's ISO code to your <html lang=""> attribute to your templates that are automatically generated from accurate data from the third party translation service. Build a standards-compliant multi-language SEO ready page in seconds with no additional configuration. Render language select elements. - Fluency can generate an unordered list of language links to switch between languages when viewing your pages. You can also embed a <select> element with JS baked in to switch between languages when viewing your pages. Render it without JS to use your own. Manage feature access for users. Fluency provides a permission that can be assigned to user roles for managing who can translate content. Track your translation account usage. View your current API usage, API account limit, and remaining allotment to keep an eye on and manage usage. (Currently only offered by DeepL) Use the global translation tool. Fluency provides translation on each field according to the languages you configure in ProcessWire. Use the global translation tool to translate any content to any language. Use Fluency from your templates and code. All translation features, usage statistics, cache control, and language data are accessible globally from the $fluency object. Perform any operation and get data for any language programmatically wherever you need it. Build custom AJAX powered admin translation features for yourself. Fluency provides a full RESTful API within the ProcessWire admin to allow developers to add new features for ProcessWire applications powered by the same API that Fluency uses. Robust plain-language documentation that helps you get up to speed fast. Fluency is extremely easy to use but also includes extensive documentation for all features both within the admin and for the Fluency programming API via the README.md document. The module code itself is also fully annotated for use with the ProDevTools API explorer. Is and will always be data safe. Adding, upgrading, or removing Fluency does not modify or remove your content. ProcessWire handles your data, Fluency sticks to translating. Full module localization. Translate Fluency itself to any language. All buttons, messages, and UI elements for Fluency will be presented in any language you choose for the ProcessWire admin. Built for expansion. Fluency provides translation services as modular "Translation Engines" with a full framework codebase to make adding new translation services easier and more reliable. Contributions for new translation services are welcome. Fluency is designed and built to provide everything you need to handle incredibly accurate translations and robust tools that make creating and managing multi-language sites a breeze. Built through research on translation plugins from around the web, it's the easiest and most friendly translation implementation for both end users and developers on any CMS/CMF anywhere. Fluency complements the built-in first class language features of ProcessWire. Fluency continues to be improved with great suggestions from the community and real-world use in production applications. Big thanks to everyone who has helped make Fluency better. Contributions, suggestions, and bug reports welcome! Please note that the browser plugin for Grammarly conflicts with Fluency (as it does with many web applications). To address this issue it is recommended that you disable Grammarly when using Fluency, or open the admin to edit pages in a private window where Grammarly may not be loaded. This is a long-standing issue in the larger web development community and creating a workaround may not be possible. If you have insight as to how this may be solved please visit the Github page and file a bugfix ticket. Requirements: ProcessWire 3.0+ UIKit Admin Theme That's Fluency in a nutshell. The Module Is Free This is my first real module and I want to give it back to the community as thanks. This is the best CMS I've worked with (thank you Ryan & contributors) and a great community (thank you dear reader). DeepL Developer Accounts In addition to paid Pro Developer accounts, DeepL now offers no-cost free accounts. All ProcessWire developers and users can use Fluency at no cost. Learn more about free and paid accounts by visiting the DeepL website. Sign up for a Developer account, get an API key, and start using Fluency. Download You can install Fluency by adding the module to your ProcessWire project using any of the following methods. Method 1: Within ProcessWire using 'Add Module From Directory' and the class name Fluency Method 2: Via Composer with composer require firewire/fluency Method 3: Download from the Github repository and unzip the contents into /site/modules/ Feedback File issues and feature requests here (your feedback and testing is greatly appreciated): https://github.com/SkyLundy/Fluency/issues Thank you! ¡Gracias! Ich danke Ihnen! Merci! Obrigado! Grazie! Dank u wel! Dziękuję! Спасибо! ありがとうございます！ 谢谢你

[Update] Free Access Display Support (v0.1.7) Hi everyone! Following the latest release of StripePaymentLinksv1.0.23, we've updated this module to match the new free product access — so manually granted product access now shows up properly in all portal views. When a user has products assigned via spl_free_access, those products appear in the portal almost like purchased ones: Grid view: Free-access products render as full active cards instead of grayed-out "not yet purchased" ones. Table view: Free-access rows get a cyan "Free access" badge in the status column. The date column shows a dash (—) since there's no purchase timestamp involved. This makes it immediately clear which products came through Stripe and which were granted manually. Cheers, Mike

A quick WireIconifyData class or your name it as IconifyWireData, IconifyValue <?php namespace ProcessWire; class WireIconifyData extends WireData { public function __construct(?array $data = null) { parent::__construct(); // set defaults if (!is_array($data)) { $data = [ 'raw' => null, 'set' => null, 'name' => null, 'path' => null, 'url' => null, 'svg' => null, ]; } $this->setArray($data); } public function __invoke(array $attrs = [], bool $withHeader = false) { return $this->render($attrs, $withHeader); } public function render(array $attrs = [], bool $withHeader = false): string { if (!$this->get('svg')) { return ''; } try { $xml = new \SimpleXMLElement($this->get('svg')); foreach ($attrs as $key => $value) { if (isset($xml->attributes()->{$key})) { $xml->attributes()->{$key} = $value; } else { $xml->addAttribute($key, $value); } } // Return XML without the header declaration for clean HTML embedding $out = $xml->asXML(); return $withHeader ? $out : preg_replace('/^<\?xml[^?]*\?>/i', '', $out); } catch (\Exception $e) { wireLog('error', "SVG icon: {$this->get('name')} error => {$e->getMessage()}"); return ''; } } public function __toString(): string { return $this->render(); } } Usage: <?php // render echo $page->icon_field; // render with attrs echo $page->icon_field->render( attrs: ['width' => 40, 'style' => 'color: red;'] ); // render with attrs and header echo $page->icon_field( attrs: ['width' => 40, 'style' => 'color: red;'], withHeader: true );

Hi everyone, This module completely replaces the default ProcessWire image sizing engine with the powerful Intervention Image v3 library. The goal was to modernize how we handle images in ProcessWire, bringing in features like AVIF support, superior resizing quality, and strict aspect-ratio handling, while keeping the API compatible with what you already know. 🚀 What does it do? Replacement: It hooks into Pageimage. You can keep using $image->width(300), $image->size(800, 600), or $image->crop(...) just like you always have. Modern Formats: Automatically handles WebP and AVIF generation. Smart Responsive Images: It introduces a configuration-based approach where you define Breakpoints, Grid Columns, and Resizing Factors. The module uses these settings to automatically calculate and generate the perfect srcset for your layouts. ✨ New Methods: render() and attrs() While standard methods work as expected, I’ve added/updated methods to handle modern HTML output: 1. $image->render(string $preset, array $options) This outputs the complete HTML tag. It automatically handles: The <img> tag with srcset and sizes. The <picture> tag with <source> elements if you have enabled extra formats (like AVIF/WebP) in the settings. Lazy Loading & LQIP: It automatically generates a Low Quality Image Placeholder (pixelated/blur effect) and applies a base64 background to the image tag for a smooth loading experience. // Example: Render a 'landscape' preset defined in module settings echo $page->image->render('landscape', ['class' => 'my-image']); 2. $image->attrs(string $preset, array $options) Perfect for developers who use template engines like Twig or Latte, or prefer full control over their HTML. This returns an array of attributes instead of an HTML string. $data = $page->image->attrs('landscape'); // Returns array like: // [ // 'src' => '...', // 'width' => 1200, // 'height' => 675, // 'srcset' => '...', // 'sources' => [ ... ], // Array for picture tag sources // 'style' => 'background-image: url(data:image...);', // LQIP Base64 // 'class' => 'iv-lazy ...' // ] ⚙️ Configuration Strategy Instead of hardcoding sizes in your templates, you configure your design tokens in the module settings: Breakpoints (e.g., 1200px) Aspect Ratios (e.g., 16:9) Grid Columns (e.g., 1-1, 1-2, 1-3) Factors (e.g., 0.5, 1, 1.5, 2 for Retina support) The module calculates the necessary image dimensions based on these combinations. If you request a specific aspect ratio, it ensures strict adherence to it, preventing 1px rounding errors. 📝 A Note on Documentation I wanted to get this into your hands as soon as possible, but due to a heavy workload, I haven't finished writing the detailed README.md yet. Currently, you can grab the code from GitHub (link below). I will submit this to the official ProcessWire Modules Directory after add some other features and after update readme.md Download / GitHub: GitHub Repo I’d love to hear your feedback and suggestions!

Looks great. New to PW here and have been scanning the forums for best practices on including images on static pages (no image fields). A media library seems to be the way... I wanted to understand how I might use the PageImageSource module to render webp srcsets on the fly for static images but was disappointed to learn that it can only be used with PageImage images. https://github.com/nbcommunication/PageimageSource I think ProcessWire would be a hard sell to many clients without some a full-featured image library solution, which is a great pity. The UI looks well done.

I just reinstall Processwire with latest RockPageBuilder (6.5.2). After adding a Content-Element (Afred oder Backend) I get an error: Error: Call to a member function render() on string search► RockDevTools LiveReload is active File: .../modules/RockPageBuilder/RockPageBuilder.module.php:1596 1586: } 1587: 1588: /** 1589: * Render content of blocks field 1590: */ 1591: public function render($renderPlus = true) 1592: { 1593: $page = $this->wire->page; 1594: $field = $page->getFormatted(self::field_blocks); 1595: if (!$field) return; 1596: $html = $field->render($renderPlus); 1597: $rf = $this->wire->rockfrontend; 1598: if ($rf) return $rf->html($html); 1599: return $html; 1600: } In Latte-Template: {if $modules->isInstalled('RockPageBuilder')} <main sortable> {$rockpagebuilder->render(true)} </main> {else} If I delete the Content-Element it works like expected.

Example: foreach($list_of_cards as $card){ // cache cleared then selector matches $files->render("inc/some-include", $vars , ["cache" => "template=some_template", "name" => "template_cache_{$card->id}"]) } Available since version 3.0.130

I can guarantee from experience all these work together fine. This could be another logic for your what you are trying to achieve, although I don't see anything wrong in your snippet! Just figuring out that if you are getting started you might find these examples useful: // assuming section is the name of the repeater $projects = $pages->find("template=project, section.images.tags=gallery"); foreach ($projects as $project) { $title = $project->project_header->first()->project_title; // Maybe something like this to get images from any of the repeaters? $images = new WireArray(); $project->section->each(function($images) use(&$images){ $images->import($item->images->findTag("gallery")); }; foreach ($images as $img) { echo "<a href='{$project->url}' title='{$title}'>"; echo $img->render(); echo "</a>"; } }

Hi @elabx Thanks for your post. Your code looks clean but I'd like a little more flexibility ideally for my use case. I'd like the option to choose any image from my projects (not just the first). Also, sometimes I'll need to pick more than one image from the same project for display on the masonry gallery. For this reason, I'm thinking image tags might be the way to go but then the question is, how do I wrap that image in a link to its respective project page.. Page references seem like the way to go, but I'm still trying to wrap my head around how these work tbh. Custom image fields could also work but I'm trying to keep things as simple as possible. I also don't want to screw up alt fields for SEO and I'm looking to use PageimageSource to manage srcset and webp automatically (maybe I'm looking to learn too much at once for my first PW site 😂) https://github.com/nbcommunication/PageimageSource Assuming all image fields are image arrays with tags enabled in admin, could I do this?: // "sections" is the repeater on my projects pages that contain images and content. // "project_header" is a repeater in project template that contains project title and info. // Can I can use find() to get repeaters with template=repeater_repeaterName, like this? $projSections = $pages->find("template=repeater_sections, images.tags=gallery"); foreach ($projSections as $section) { $projectPage = $section->getForPage(); $title = $projectPage->project_header->first()->project_title; foreach ($section->images->findTag("gallery") as $img) { echo "<a href='{$projectPage->url}' title='{$title}'>"; echo $img->render(); echo "</a>"; } } It seems inefficient to me to have to parse through all project content repeaters for tagged images like this but maybe with caching it wouldn't be a problem? In my setup project title and description text is in one repeater, and all images are in another - not sure if that complicates things. I would like to wrap each image in a <a> that links to the respective project page.

Hello everyone, I’m happy to share a new module I’ve been working on: WireMagnet. We often face the requirement to offer "gated content" (like Whitepapers, PDFs, or Zip files) where users need to provide their email address to receive a download link. While there are external services for this, I wanted a native, privacy-friendly, and lightweight ProcessWire solution. What does WireMagnet do? WireMagnet handles the entire flow of capturing leads and delivering files securely. It intercepts form submissions, logs the lead, and sends an email with a unique, temporary download token. It prevents direct access to the files (assets are not just sitting in a public folder). Key Features: Secure Delivery: Generates unique download tokens (valid for 24 hours) and serves files via wireSendFile(). Double Opt-In (DOI): Optional support for DOI to verify email addresses before sending the file. Automated Emails: Automatically sends the download link (or attaches the file directly if preferred). AJAX Ready: Comes with built-in Alpine.js support for seamless, reload-free form submissions. Lead Management: Logs all subscribers (Email, IP, Timestamp) to a custom database table (leads_archive). Admin Interface: View leads and export them to CSV directly from the ProcessWire backend. Easy Integration: Render the form with a single line of code. How to use: Install the module. Create a page (e.g., using a lead-magnet template) and upload your file to a file field. Output the form in your template: // Render the subscription form (default field: 'lead_file') // The module automatically handles success/error messages and styling. echo $modules->get('WireMagnet')->renderForm($page); // OR: Render for a specific field (e.g., if you have multiple magnets or custom field names) echo $modules->get('WireMagnet')->renderForm($page, 'my_custom_file_field'); // OR: Override the button text manually echo $modules->get('WireMagnet')->renderForm($page, 'lead_file', 'Send me the PDF!'); Configuration: You can configure the sender address, email subject, DOI settings, and styling preferences (like button text) in the module settings. Download & Source: GitHub: https://github.com/markusthomas/WireMagnet Modules Directory: https://processwire.com/modules/wire-magnet/ I'm looking forward to your feedback and suggestions! Cheers, Markus

So in the Markup Regions output strategy, the docs seem to suggest that we can render markup using a different base to _main.php, for use on specific pages (like rss feed, homepage, etc) if needed. Have I understood that correctly? https://processwire.com/docs/front-end/output/markup-regions/ It says "we can do so by editing the template settings in the ProcessWire admin to use a different file, or no file at all, when appropriate. (This is found in Setup > Templates > [choose a template] > Files [tab])." I'm not sure, however, what setting I should change here. Let's say I want this template to apply Markup Actions to 'base.php' instead of _main.php, where would I set that here? Most of my confusion stems from the "Prepend" and "Append File" wording... I'd really appreciate any help 🙂 Thanks

I am using ProcessWire as the backend for an online shop system, which fetches the content as JSON files. The processwire installation has some legacy template code, which causes the startpage of the shop to require 3 or 4 actual ProcessWire pages. The JSON files are saved into a custom cache folder. When this cache is deleted, it has to be rebuilt. To achieve that, I implemented a Hook into PageRender::renderPage, which saves the currently viewed page and all of its language variants into JSON files. To get the actual markup, I am using $page->render(). Doing that, I noticed, that ProcessWire seems to prevent the currently requested page from also being generated (a second time) via $page->render(). The return value of $page->render() was always empty within the PageRender::renderPage Hook if $page was identical to the page of the current request. And it always returned the correctly rendered markup, if the current page was not identical to the Page in the $page->render() call. I assume that this has something to do with a mechanism in ProcessWire which shall prevent infinite loops. Does anybody know more about this? Are there any workarounds? Update: The issues were solved by cleaning up legacy template code – especially missing namespaces.

A couple days ago I tried migrating my site. Things went relatively smoothly, I installed the processwire site, migrated the database, but now cannot seem to get the ImportPagesCSV module to work. Here is the error I'm receiveing: Uncaught TypeError: count(): Argument #1 ($value) must be of type Countable|array, null given in site/modules/ryancramerdesign-ImportPagesCSV-18cd5a6/ImportPagesCSV.module:515 #0 site/modules/ryancramerdesign-ImportPagesCSV-18cd5a6/ImportPagesCSV.module (515): count(NULL) #1 site/modules/ryancramerdesign-ImportPagesCSV-18cd5a6/ImportPagesCSV.module (432): ImportPagesCSV->importPage(Array, Object(InputfieldForm)) #2 site/modules/ryancramerdesign-ImportPagesCSV-18cd5a6/ImportPagesCSV.module (154): ImportPagesCSV->processForm2(Object(InputfieldForm)) #3 wire/core/Wire.php (413): ImportPagesCSV->___executeFields() #4 wire/core/WireHooks.php (968): Wire->_callMethod('___executeField...', Array) #5 wire/core/Wire.php (484): WireHooks->runHooks(Object(ImportPagesCSV), 'executeFields', Array) #6 wire/core/ProcessController.php (361): Wire->__call('executeFields', Array) #7 wire/core/Wire.php (413): ProcessController->___execute() #8 wire/core/WireHooks.php (968): Wire->_callMethod('___execute', Array) #9 wire/core/Wire.php (484): WireHooks->runHooks(Object(ProcessController), 'execute', Array) #10 wire/core/admin.php (174): Wire->__call('execute', Array) #11 wire/modules/AdminTheme/AdminThemeUikit/controller.php (15): require('/home/enusanne/...') #12 site/templates/admin.php (15): require('/home/enusanne/...') #13 wire/core/TemplateFile.php (328): require('/home/enusanne/...') #14 wire/core/Wire.php (413): TemplateFile->___render() #15 wire/core/WireHooks.php (968): Wire->_callMethod('___render', Array) #16 wire/core/Wire.php (484): WireHooks->runHooks(Object(TemplateFile), 'render', Array) #17 wire/modules/PageRender.module (581): Wire->__call('render', Array) #18 wire/core/Wire.php (416): PageRender->___renderPage(Object(HookEvent)) #19 wire/core/WireHooks.php (968): Wire->_callMethod('___renderPage', Array) #20 wire/core/Wire.php (484): WireHooks->runHooks(Object(PageRender), 'renderPage', Array) #21 wire/core/WireHooks.php (1094): Wire->__call('renderPage', Array) #22 wire/core/Wire.php (484): WireHooks->runHooks(Object(Page), 'render', Array) #23 wire/modules/Process/ProcessPageView.module (193): Wire->__call('render', Array) #24 wire/modules/Process/ProcessPageView.module (114): ProcessPageView->renderPage(Object(Page), Object(PagesRequest)) #25 wire/core/Wire.php (416): ProcessPageView->___execute(true) #26 wire/core/WireHooks.php (968): Wire->_callMethod('___execute', Array) #27 wire/core/Wire.php (484): WireHooks->runHooks(Object(ProcessPageView), 'execute', Array) #28 index.php (55): Wire->__call('execute', Array) #29 {main} thrown (line 515 of site/modules/ryancramerdesign-ImportPagesCSV-18cd5a6/ImportPagesCSV.module) I've tested the csv file on the old site and it imports fine. When imported on the new site this error occours, and it appears the first page in the csv is imported only. As far as I can tell the template/field settings are the same between sites. Uninstalling and reinstalling the module didn't help either. This is the context of line 515 // import post-save data, like files if($page->id && count($page->get('ImportPagesCSVData'))) { foreach($page->get('ImportPagesCSVData') as $name => $value) { $page->set($name, $value); } $page->save(); } I don't really know what this is doing so I'm not sure where I need to go to solve the problem.

As per my own use and the linked forum topic, it's possible to render a lister in an execute() method of a Process module without any problem. However, once I try to render it in a sub page of the Process module, eg executePage1() it doesn't render correctly, with only the header of the lister rendering, and then the content of the execute() (not executePage1()) method rendering underneath it. I think there might be some conflict between url segments used by Process modules to identify subpages and lister. It seems like calling the execute() method of the lister is partially working, but then calling the execute() method of the module it's called from after it's rendered its header. I'm using the latest build of ProcessWire. Is it possible to have a lister render in a subpage of a Process module? If not, are there any alternatives to display a lister predefined in module code?

@elabx - I don't really know how those apache modules work exactly, but wouldn't they have the same issue as I realized when I thought - why not just hook into Page::render and do a string replace on all <script> tags to add in the nonce at runtime - the problem being of course that this would also add the nonce to any maliciously injected <script> tags, thereby effectively removing all protection?