Leaderboard

Since InputfieldTinyMCE appears to make huge steps towards becoming a stable replacement for CKEditor and TinyMCE comes with a native autocomplete API, I just had to try my hands at migrating the autocomplete module I had built for InputfieldCKEditor. Lo and behold, it went even easier than I had hoped. So here - mind you, still very alpha - is my autocomplete module for the new TinyMCE input field. Since I may still introduce breaking changes while things become stable, it will only be available at GitHub for now. Autocompleter for InputfieldTinyMCE What does it do? Autocompleters work like the mention plugin in this forum. You type a "trigger" character (or characters) followed by some letters, and a list of possible results pops up, from which you can choose. InlineCompleteTinyMCE comes with three different autocompleters (called "actions" in the context of this module): Pages: you can configure a selector, just like when you search for pages in the ProcessWire backend. You can search for title, name or any field you would like. Like every action, it allows you to specify templates for the label and the HTML/text to insert. Users: this is the equivalent to the form mention. Type an "@" sign followed by the start of a user name, and it inserts a link to that user. If you have added an image field to the user template, you can display that in the selection popup too. Hanna Code: just type the opening tag ("[[" by default) for your Hanna code and any letter, and the module will look for all codes starting with those letters. You can easily implement your own action modules too. Just inherit from InlineCompleteTinyMCEAction and add the code for a few methods. Enabling Actions For every installed action, you will find a checkbox on the "Input" tab when you configure a field. Configuration for Actions Once you have enabled the action, more configuration options become visible. The exact options depend on the action itself, but you usually have a label template and a value template. You can use placeholders in both. Actions in Action This is what it looks like when used: Compatiblity The module has been tested with InputfieldTinyMCE v6.0.6 both in standalone and inline mode. Lazy loading the standalone editor is also supported. Outlook There's still a bit work waiting for me, from cleaning up some code, over making the Pages action support multiple autocompleters with different triggers and selectors, to adding a lot of documentation. Nevertheless, I'd be happy to get some feedback.

This week the ProcessWire core version on the dev branch has been bumped to 3.0.207. Relative to the previous version, there are several minor issue resolutions and improvements (commit log). I also recommend this version if you are testing out the InputfieldTinyMCE module, which will likely be merged into the core near the end of the year. Speaking of that module, it also received updates this week with the biggest being the addition of improved lazy loading modules for the Normal (non-inline) editor. Rich text editors are one of the most heavyweight input types you can use, so not having to initialize them all during page load is a major performance benefit, especially when you've got multiple fields using them at the same time. With these new lazy-loading modes, the Normal editor has many of the benefits of the Inline editor in terms of page editor performance, but without any of the drawbacks. The new default setting is to "load editor when it becomes visible". This ensures that resources aren't spent loading editors that are hidden behind editor tabs, fieldsets or language tabs, until they are needed. The other lazy-loading option ("load editor when clicked") is the most aggressive lazy loading option. It shows a preview of the editor content but doesn't actually load TinyMCE until you click the preview to edit it. Lastly, I've also been working on a new module (WireSitemapXML) that generates sitemap.xml output, but in a way that I think is more configurable than the other modules available for it. It also supports multi-language sitemaps, URL segments, various hooks and more. While I've got it in use already, I'm going to spend more time on the documentation before releasing it. That's all for this week, have a great weekend!

This is apparently a really old hat and common in many editors, but it’s the first I’ve heard of it and it just blew my mind. Did you know you can name heredoc strings “HTML” to get HTML syntax highlighting?! I kind of try to avoid heredoc, but this seems pretty neat.

I'm really happy with InputfieldTinyMCE so far. And as threatened to in reply to an earlier core updates post, I took a stab at migrating my autocomplete module over from InputfieldCKEditor. All in all, it was quite a pleasant experience and the JS side was really straight forward. The change also involved a lot of refactoring, and in the aftermath of that there's still a good bit of house cleaning to do, but for anybody willing to toy around with it, there's an alpha release of InlineCompleteTinyMCE on GitHub. A snapshot of InlineCompleteTinyMCEActionUsers in action: And the corresponding configuration in the field's "Input" tab (added to the TinyMCE config section): I haven't tested it with lazy loading or the inline editor yet.

https://50thbirthday.londonfriend.org.uk/ This is a site we created to celebrate the 50th anniversary of London Friend which is the UK's oldest LGBTQ+ charity. It has a timeline that covers significant events of the charity's history together with a showcase of 50 inspirational Londoners who have made a difference to life in the capital. The technical side of things is pretty much as you imagine. One choice we made was not to use ajax for loading the timeline events but instead loading all of the html and then leaning hard into caching and lazy loading of images. We did use @markus_blue_tomato 's imageBlurHash module to produce placeholders for our lazily loaded images - although honestly you rarely get to see them. For some of the pages the client wanted to be able to add footnotes so we created a text formatter than moves any text in a content block surrounded in square brackets into footnotes section and creates an anchor link. I'll tidy that up and pop it on GitHub when I get some time but feel free to nag me if you think it might be useful to you. Other modules of note were ProCache and (of course) TracyDebugger. We also have some galleries on the site that use PhotoSwipe which is still our g to script for phot galleries. We got great marks in Lighthouse, Observatory and Wave (even the timeline itself which is a complicated page still does very well). It was great to be part of the celebrations (just a shame that I'm on holiday when the launch party happens... dammit)

Thanks @flydev I thought that this is called type declaration. I have used this for a while, but I did not knew, that this was called union type. Now I have learnt something new today.? The problem is solved for flashmaster82, we have discussed the issue via PM. The module itself should check if version 8.1 is installed. 'requires' => ['PHP>=8.1.0', 'ProcessWire>=3.0.181'] So it should give you a warning message before the installation process starts.

@Flashmaster82 what's the version of your PHP install ? If I am correct, you need PHP 8.1 to get it working. Just saw the posted issue on the github repo, will comment it there, but @Juergen, as you are using arbitrary Union Type on property declaration in the module, it make it available only on php-8.

@bernhard updated it! For anyone that might come across adding something else on the admin theme's markup, here's a recommendation from Ryan: $src = "https://unpkg.com/alpinejs@3.10.2/dist/cdn.min.js"; $this->wire()->adminTheme->addExtraMarkup('head', "<script src='$src' defer></script>");

The module originated from an idea/discussion in this thread. I hope that helps to see more PRs for improving the PW backend ? https://github.com/baumrock/Scss Watch core files When working on PRs for the ProcessWire backend you'll notice that the core ships with several SCSS files and the corresponding CSS files. To make it easy to work on the SCSS files without the need of adding complicated build tools to your project you can simply install the Scss module and add the following in /site/ready.php $modules->get('Scss')->watchCore(); Now your SCSS files will be watched for changes and once you change something and reload your page you'll get the new CSS on the fly and can commit both changes ?

After a previous request for Webp support (6 years ago, times flies…) that Horst and Ryan kindly introduced in PW 3.0.132, I'm back with another request for a new image file format, AVIF, which has landed in almost all browsers. I'm actually surprised no one here in the PW community has been asking for AVIF support in ProcessWire as it seems to be provide much more consistent gains in compression and greater relative quality over Webp, and of course over good old JPEG. My experience using it definitely confirms this. I've been using Cloudinary to serve AVIF images to the browsers that support it, but of course I'd rather not use a third-party service, and use it natively in ProcessWire. Imagemagick supports AVIF if I'm not mistaken. Anyone else is interested?

Hi everyone, I would like to showcase a small micro site of own studio - 7studio.eu Personally I don't like to design anything for myself (as most projects lands in the trash or on the shelf), but I needed something new and simple quite fast before building a fully fledged portfolio, so I thought to built a small "starting point". This is more like a work in progress, than a finished site, it contains only basic info, screenshots of some of the latest works and that's it - as for now ? Technically, on the front end we have a simple custom HTML5/CSS3/JS code, on the back end site uses only core PW features (there is more features already built in on both backend and frontend but not published yet). Any comments, suggestions are welcome, hope you will like it and have a great weekend everyone! P.s. Sorry - there is no english translation yet, PW multilingual features will land in the upcomming weeks ?

ConfigurableModules class link from those pages leads nowhere helpful... a dead end. https://processwire.com/api/ref/configurable-module/

Great thx @snck ? Well... not directly. But the intention was to leave that open ? I'm not using Scss for anything other than core-files at the moment as I'm happy with my UIkit/LESS setup. But I'm happy to hear that it works for compiling bootstrap Scss as well. Who knows what happens to LESS... It's good to have two options ?

@bernhard Thanks! ? I was looking for a nice way to compile some SCSS (Bootstrap in my case) the other day and as Sassify has not been updated for almost 4 years I had a look into your Scss module. It might not have been your intention, but as this a viable wrapper for scssphp I could use it for my case as well. Maybe this can be a starting point for somebody else looking for a way to compile something else than the PW core: <?php $compiler = $modules->get('Scss')->compiler; $input_scss = $this->wire->config->paths->templates."scss/custom.scss"; $bootstrap_scss_path = $this->wire->config->paths->templates."bootstrap/scss"; $output_css = $this->wire->config->paths->templates."css/bootstrap_custom.css"; $output_map = $this->wire->config->paths->templates."css/bootstrap_custom.map"; $compiler->setSourceMap($compiler::SOURCE_MAP_FILE); $compiler->setSourceMapOptions([ // relative or full url to the above .map file 'sourceMapURL' => $output_map, // (optional) relative or full url to the .css file 'sourceMapFilename' => $output_css, // partial path (server root) removed (normalized) to create a relative url 'sourceMapBasepath' => $this->wire->config->paths->root, // (optional) prepended to 'source' field entries for relocating source files 'sourceRoot' => '/', ]); $compiler->addImportPath($bootstrap_scss_path); $compiler->setOutputStyle("compressed"); $result = $compiler->compileString('@import "'.$input_scss.'";', $this->wire->config->paths->templates."scss"); file_put_contents($output_map, $result->getSourceMap()); file_put_contents($output_css, $result->getCss()); ?>

Hey @netcarver thx ssh config files are great for sure, but they do not work when using DDEV because you are in a container and not on your host's filesystem with the ssh config file in place. That's why ddev has the ability to do "ddev auth ssh" where it grabs all SSH keys from the host and copies them into the container. Then you can do ssh magic in the container just as if you were working on the host. Almost. The issue I explained above was only occuring inside the container. On the host machine "ssh foo" just worked because the ssh config file was in place. Hope that makes sense. RockShell's db-pull command uses exec() to connect to the remote server via SSH, then it creates the remote dump, it copies it to the local filesystem, then it restores the dump and then it triggers all migrations. That way you can quickly develop locally, do anything you want, try crazy stuff and if you want to start over you just do "php rockshell db-pull staging" and you get a clean version that you have on your remote. Same goes if you added a feature locally and you want to make sure that everything works when pushing to remote. Then you can do a db-pull as well and fire all migrations to see if you forgot anything. Hope that makes sense as well.

For several days I've had issues with connecting to my host from within the ddev container when using RockShell for a quick php rockshell db-pull staging I got the following error: Turned out that the problem was that I had too many SSH keys in my container (4) and the webhost seemed to block the request before ddev could use the correct key. The solution was to put only the two necessary keys in a dedicated folder ~/.ssh/ddev and then provide that folder as parameter on ddev auth ssh: ddev auth ssh -d ~/.ssh/ddev It have been tough days having to restore the database manually from staging to my local development ? I guess nobody will ever have problems with this as it's a quite specific situation but maybe it helps someone googling for it...

Hi, two more litte cents ? if this hosts var is not well filled you may also run into another little problem as pw automatically build the preview links in the admin based on this var have a nice day

Glad you're making progress. If only the homepage works, it's usually an issue with RewriteEngine support or RewriteBase not being set correctly in .htaccess (or a missing .htaccess). Make sure you didn't miss any files starting with a "." in the upload.

A few more things come mind: check if really all files have been uploaded, as we have seen strange errors with incomplete uploads before. Make sure that uploading to OVH didn't mess with character encodings, and verify that the configured PHP version is actually active (e.g. by placing a small script containing just <?php phpinfo(); ?> in the web root.

To get more control over what happens in the user's browser, you can output your PDFs through a specific template file. Example implementation: Create a new template "pdf", in the URLs tab allow URL Segments Create a hidden page named "pdf" under home with that template. URL for that page will be: "/pdf/" Change text links for the PDFs to a format like "/pdf/{$pageId}/name-of-pdf-file.pdf" Sample code to create text links: /** @var Page $page page that the PDF file lives on */ /** @var Page $pdfPage page that ouputs the PDF file */ $pdfPage = $pages->get('template=pdf'); /** @var PageFile $pageFile object that holds the PDF */ $link = $pdfPage . $page->id . '/' . $pageFile->basename; // example result: /pdf/1234/name-of-pdf-file.pdf Now in site/templates/pdf.php you can use URL segments logic to retrieve and output the pdf if ($input->urlSegment1 && $input->urlSegment2) { $pageId = $sanitizer->int($input->urlSegment1); $baseName = $sanitizer->filename($input->urlSegment2); /** @var PageFile $pageFile object that holds the PDF */ $pageFile = $pages->get($pageId)->file_field->getFile($baseName); if ($pageFile) { $filePath = $pageFile->filename; // see https://processwire.com/api/ref/wire-file-tools/send/ for more options /** @var Files $files PW Files API */ if($filePath) $files->send($filePath, array('forceDownload' => false)); } } Instead of sending the file directly to the browser, in pdf.php you could implement https://pdfobject.com/ to embed it for every browser

@DV-JF it was running 3.0.200 and I upgraded to the latest dev 3.0.207 I also changed line 845 in PagesLoader.php to confirm if $options is an array: $options = is_array($options) && count($options) ? array_merge($defaults, $options) : $defaults; Switched the site back to PHP8 and it's working again. @ryan fyi

Then it would be nice to get a step by step guide to reproduce it ? I've seen that error here and then but don't know when it occurs or why. And a simple reload fixes it. This error does cause issues, because if it occurs then livereload is not working (since it needs the eventstream to work). So if you find anything helpful I'm happy to improve that piece of rockfrontend.

Hi @bernhard, I found an issue with the livereload feature. When enabled, I get the following error message in chrome development console: "EventSource's response has a MIME type ("text/html") that is not "text/event-stream". Aborting the connection." https://stackoverflow.com/questions/53591954/eventsources-response-has-a-mime-type-text-html-that-is-not-text-event-str It is reproducable, as soon as livereload is turned off, the error message is gone. The message is not causing any issues, as far as I can tell, but I was spending now a lot of time just to find out it was caused by livereload. So maybe you can check and make sure it gets fixed.

Yeah I think that would be a good addition. I'm happy to help whoever wants to tackle that ?

@kongondo Also managed to load AlpineJS like this: https://github.com/elabx/AlpineJS Although only works with the edited core version files mentioned above lol Then on the Inputfield on init(), I can do: $this->modules->AlpineJS This was copied from: https://github.com/somatonic/JqueryDataTables Only adding the composer dependency since that's how I want to manage it through the Inputfield actually using Alpine

Sticking to FA will probably be a good idea because there's a lot of javascript on the backend (for example for adding spinners that indicate loading) and that would likely break with other icon libraries that work differently or use other classes. On the other hand having more icons available would be nice, so the free subset of FA6 sounds like a good idea to me if it does not take up too much space just for the small benefit of having more icons. I think the best chances to get that into the core are if someone just tried it out and provided a PR and let Ryan know about it. Or maybe ask Ryan before doing it if he'd be willing to add it at all (to prevent useless work).

@jacmaes To remove all in an existing parent (i.e. Align), you can add: #Align { display: none } To add custom styles at the root level, omit a #Parent. So to add "Red text" at the root level, add: span.red-text { color: red } /* Red Text */ To add your own custom parent at the root level, specify it as the #Parent for any items you want to add within it, i.e. here's how we add a parent named "Hello": #Hello span.blue-text { color: blue } /* Blue Text */ #Hello p.outline { padding: 20px; border: 1px dotted #ccc } /* Outline paragraph */ I prefer the single line rules, but it's also fine if you want to use multi-line rules: #Hello p.outline { /* Outline paragraph */ padding: 20px; border: 1px dotted #ccc; }

@Juergen I needed a solution to start with a quite complex form. I tried the module, thats was fast. Freaking cool ! Thanks .

Hey @cosmicsafari — not a bad question at all. The description field comes from a module config setting. By default the module is set up to look for field called "summary", but you can change this to something else: $config->SearchEngine = [ 'render_args' => [ 'result_summary_field' => 'summary', ], ]; My guess is that your pages don't have the summary field? You can use some other field instead (if there's a suitable field), or you could let the module auto-generate the description by setting the summary field as "_auto_desc"... though please note that the support for auto-generated descriptions is experimental, and comes with one major gotcha: SearchEngine doesn't know which parts of your search index are "public knowledge", so it may end up displaying anything stored there. If you end up using this option, be sure to test it and make sure that you haven't indexed anything you don't want to show up in the search results ?

Hey @fruid, SearchEngine finds content via the API and the operator used for text searches is configurable (see module config screen), so there's that. Depending on the operator you use you'll get a different set of results (obviously). You can read more about available selectors from the docs. As for Google-style search queries, there's nothing exactly like that built-in, but if you've got a newish version of ProcessWire (3.0.160+) and a recent version of SearchEngine installed, the module supports the advanced text search operator. The downside is that it's currently a little unclear how such queries should be sanitized so this feature is not fully functional. If you don't mind writing a bit of code yourself, there's also an example in the README about how you could provide your own search query and frontend (which, in turn, would allow you to sanitize the query string and then perform a find operation using the "#=" operator). ... and, as for the last point, it's actually also possible to use markup generated by SearchEngine yet still provide a custom results object. It involves a couple of extra steps, but something like this should work (requires SearchEngine 0.26.0 and ProcessWire 3.0.160+): // load and init SearchEngine $searchEngine = $modules->get('SearchEngine'); $searchEngine->initOnce(); // (for autoloader) // construct a Query object ($q stands for the _sanitized_ query string) $query = new \SearchEngine\Query($q); $query->results = $pages->find('search_index#=' . $q . ', limit=25'); // render results echo $searchEngine->renderResults([], $query); That doesn't remove the need to sanitize the query, though. That's something you'd (currently) have to do yourself if you want to use the advanced text search operator to the full extent.

Ive been using signaturepad.js for this, its a js library that allows you to put an input field where users can sign (works really well on mobile), it outputs a png/jpg file that then you can upload to any image field you want (what i do for this on the front end is to upload the signature to a temp folder via ajax and then retreive the url and put it in a text field and then input that url to a $p->image->add($url); on server side, this works for a frontend implementation, i dont know if you require to do this using a processwire form

So, I uninstall and reinstall the site. I discover the problem. I try to modify and remove i 2 "#" by pannell hosting, NOT BY FILEZILLA. Now, my site work very well with certificate https://. My personal lesson: NOT USE FILEZILLA FOR TO EDIT FILES!

This code can be placed into any generic site utilities module and you can add the hook in the init(); you can for example take the hello world module and clone it, rename to SiteUtilities, and then you can throw all of your custom stuff in there, instead of doing independent modules for everything.. $this->pages->addHookBefore('save', $this, 'addImageDataAttributes'); public function addImageDataAttributes($event) { $page = $event->arguments[0]; $ta_field = 'body'; // change to your editor field that holds the images $img_field = 'images'; // change to the name of the images field if(!$page->$img_field || !$page->$ta_field) return; $html = $page->$ta_field; if (strpos($html,'<img') === false) return; //return early if no images are embedded in html $dom = new \DOMDocument(); $dom->loadHTML(mb_convert_encoding($html, 'HTML-ENTITIES', 'UTF-8')); $images = $dom->getElementsByTagName('img'); if(!$images->length) return; // not needed? $imgCount = 0; foreach ($images as $image) { $img_url = $image->getAttribute('src'); $path_parts = pathinfo($img_url); $imgName = $path_parts['basename']; $sysImage = $page->$img_field->get("name={$imgName}"); $width = $sysImage->width; $height = $sysImage->height; $image->setAttribute('data-width', $width); $image->setAttribute('data-height', $height); $imgCount++; } if(!$imgCount) return; $page->of(false); $page->$ta_field = preg_replace('/^<!DOCTYPE.+?>/', '', str_replace( array('<html>', '</html>', '<body>', '</body>'), array('', '', '', ''), $dom->saveHTML())); $page->save($ta_field); $this->message("image links updated with data attributes."); } This has been tested and works, but it will only retain the data attributes if your CK editor settings allow it..

Absolutely! Here is a simple, but functional example for both login and logout templates. You would want to replace the markup with your own markup or includes. Likewise you'd want to change the redirects to redirect to whatever page you want them to go to after completing a login. /site/templates/login.php: <?php if($user->isLoggedin()) { // user is already logged in, so they don't need to be here $session->redirect("/somewhere/"); } // check for login before outputting markup if($input->post->user && $input->post->pass) { $user = $sanitizer->username($input->post->user); $pass = $input->post->pass; if($session->login($user, $pass)) { // login successful $session->redirect("/somewhere/"); } } ?> <html> <head> <title>Login</title> </head> <body> <form action='./' method='post'> <?php if($input->post->user) echo "<h2 class='error'>Login failed</h2>"; ?> <p><label>User <input type='text' name='user' /></label></p> <p><label>Password <input type='password' name='pass' /></label></p> <p><input type='submit' name='submit' value='Login' /></p> </form> </body> </html> /site/templates/logout.php: <?php $session->logout(); ?> <html> <head> <title>Logout</title> </head> <body> <h1>You have logged out</h1> </body> </html>