Leaderboard

This is the topic for the new module, TextInputAwesomeplete. Github: https://github.com/outflux3/TextInputAwesomplete Modules Directory: https://modules.processwire.com/modules/text-input-awesomplete/ Text Input Awesomplete Key Points: Uses Awesomplete JS library for instantiating autocomplete suggestions on text input fields in Processwire CMS. Supports any text field, including Page Title (FieldtypePageTitle). Allows admins to configure a list of suggestions (textarea input), or pull suggestions from Processwire pages, by configuring which pages to pull from and which field's value to use. About Awesomplete https://leaverou.github.io/awesomplete/ https://github.com/LeaVerou/awesomplete Benefits & Uses Can be helpful for fields where users may need to enter the same text in the same field on multiple pages, and you can't or don't want to use a Page Reference field. One example could be a site where you send emails using various boilerplate subjects; Another place to use this would be if you had an existing site with a text field that has some inconsistency when same values are added. The autocomplete would help editors to always use the same format as the other pages with the same value. Installation Upload or install from Modules directory. Usage & Configuration Once installed, on any text input field (including Page Title), you will see an option to enable autocomplete. Once enabled you will have the option to type a list of items for autocomplete suggestions, or enable the module to search pages for suggestions. Note that if you enter any items in the Items List field, those will always be part of the autocomplete suggestions, in addition to pages if configured. If you elect to use pages for the suggestions, you have these options: Choose a template to limit by (adds a template=sometemplate to the pages find selector). Override which field to pull suggestions from (by default it will use the field you are configuring). Sets the $field!= in the selector. Setup a Selector for finding the pages for the autocomplete suggestions. This overrides the template selected. Note that the selector needs to return pages that use the field being configured, or the field selected for override. Screenshots: (1) Examples of in-use: Module Configuration Screen

This week we’ll take a look at 3 different WEBP image strategies that you can use in ProcessWire 3.0.132+. Then we’ll dive into a major update for the Google Client API module, and finish up by outlining some useful new updates in FormBuilder— https://processwire.com/blog/posts/webp-images-and-more/

Or you could just use a RuntimeMarkup field ? with WireHttp() and $cache. I'd never heard of SmugMug before ?. Here's a demo for how this could be done in RM. We are mimicking a ProcessWire image field by using similar markup and including Image field's JS and CSS. Please see the notes in the code. We are also caching the response for 1 hour so we don't hit SM limits. I created a free 14-day trial account for this. Here it is...I couldn't think of a better name for it ?. As you can see in the demo video, we are pulling the exact images. The code could be improved. You could get all fancy and even push changes to SM using Ajax, for instance. Please see the examples in RM docs. This code goes into the file you are rendering. <?php namespace ProcessWire; // set PW image assets $url = $config->urls->InputfieldImage; $config->styles->add($url . "InputfieldImage.css"); // @note: JS just in case you need it but in that case, you will also need Magnific, etc $config->scripts->add($url . "InputfieldImage.js"); // get cache only if it’s less than or equal to 1 hour old (3600 seconds) // @note: cache is unique for this page $cacheName = "smugmug_{$page->id}"; $images = $cache->get($cacheName, 3600); // no cache or expired, request data from smugmug if(is_null($images)) { // Get an instance of WireHttp $http = new WireHttp(); // we want JSON, so set headers accordingly $headers = array('Accept'=>'application/json'); $http->setHeaders($headers); // an example public album $url = 'https://www.smugmug.com/api/v2/album/xxxxxx!images'; $data = array('APIKey'=>'12345678900987654321');// API key $response = $http->getJSON($url, true, $data); $images = $response['Response']['AlbumImage']; // cache the response, and expire after 1 hour (3600 seconds) // @note: only caching the albmum! $cache->save($cacheName, $images, 3600); } // outer list markup for images (c & p from PW with slight modifications) $out = "<ul class='gridImages ui-helper-clearfix ui-sortable'>"; // iterate through response. // @todo: You might want to do some error checking first foreach($images as $image) { // file size to kB $fileSize = ceil($image['OriginalSize'] / 1000); $out .= " <li id='file_{$image['UploadKey']}' class='ImageOuter gridImage ui-widget'> <div class='gridImage__tooltip'> <table> <tbody> <tr> <th>Dimensions</th> <td>{$image['OriginalWidth']}x{$image['OriginalHeight']}</td> </tr> <tr> <th>Filesize</th> <td>{$fileSize} kB</td> </tr> <tr> <th>Description</th> <td><small>{$image['Title']}</small></td> </tr> </tbody> </table> </div> <div class='gridImage__overflow' style='width: 130px; height: 130px;'> <img src='{$image['ThumbnailUrl']}' alt='{$image['Caption']}' data-w='{{$image['OriginalWidth']}}}' data-h='{{$image['OriginalHeight']}}' data-original='' style='max-height: 100%; max-width: none; top: 50%; left: 50%; transform: translate3d(-50%, -50%, 0px);'> </div> <div class='gridImage__hover'> <div class='gridImage__inner'> <label for='' class='gridImage__trash'> <input class='gridImage__deletebox' type='checkbox' name='delete_images_{$image['UploadKey']}' value='1' title='Delete'> <span class='fa fa-trash-o'></span> </label> <a class='gridImage__edit' style='line-height: 130px;'> <span>Edit</span> </a> </div> </div> </li> "; } $out .= '</ul>'; $out = "<div id='my_album'>{$out}</div>"; return $out; Screenshot Video Demo

The most simple approach I can think of right now is hook into after InputfieldText::render: Put this code in site/ready.php: $wire->addHookAfter("InputfieldText::render", function($event){ $field = $event->object; if($field->name == "text_field_name" && $field->value){ $markup = $event->return; $url = "https://somedomain.com"; $markup .= "<img width='100' src='". $url . $field->value ."'>"; $event->return = $markup; } }); I'm assuming $url is whatever you need to append to complete the url with the ID in place. This should render the image right below the text input. If you want to dig a bit more, check the code in the link I pasted and debug with a $log->save() the $markup variable which basically gets it's content from the $event->return property which matches the return value of the render function in the Inpufield code.

And, if you want a nice CK'ish dropdown instead of having the user type, @Robin S' Hanna Code Dialog might also be an option.

It's possible, but not as simple as it should be because it seems that the option() method of Datepicker (and Timepicker) is not working for the stepMinute option. Instead it seems you have to destroy and re-init the datepicker if you change stepMinute. In some custom admin JS, for a field named "date"... // For a Datetime field named "date" with time enabled $('#Inputfield_date').on('focus', function() { // Get the existing options for the Datetimepicker var options = $(this).datetimepicker('option', 'all'); // If the picker has the default stepMinute setting... if(options.stepMinute === 1) { // Set custom stepMinute setting options.stepMinute = 15; // Destroy picker $(this).datetimepicker('destroy'); // Re-initialise picker $(this).datetimepicker(options); } });

After building the ProcessMentions module and another autocomplete module for images, I found that I am going to need even more of these, but things were going to get repetitive. So I refactored the whole thing into a basic autocompletion module and individual "actions". The result is Autocomplete for CKEditor (GitHub). To try out, Install the module and actions Enable actions in the settings of any CKEditor field Edit a page with this field, type "@" and some characters for the and enjoy There are still a few things I need to implement. ATM, it only supports single characters as triggers for the autocomplete. I'd like to change that to combinations so I don't run out of special characters at some point. I also have to add a few more configuration options (like search only at the beginning or also in the middle of the searched string). The documentation for custom styling also needs some work. I have tried to keep things generic. Implementing your own actions should be quite straight forward. The README at GitHub illustrates the main steps and the supplied action classes have inline documentation. I would love to get some feedback or even see some third party InlineCompleteAction implementations.

You are missing an echo: <?php echo $glb?> No big deal but "/" is not needed as the config value ends in that. I don't know what the JS code does but generating bits of it with PHP should work ?

I've used this on a couple of projects to authenticate against Azure, and can definitely recommend it. Getting the config right can be a bit tedious, but other than that it's a no-brainer, and the module does all the heavy lifting for you ?

A more complex approach would be a new fieldtype which allow to browse and select through the SmugMug API. Edit: just found this, which may help to go that way: http://phpsmug.com/

@bernhard - while the awesomplete library states that it might work with textareas, it would be somewhat clunky to add that support. Probably a better way would be to have a different module that approaches things a different way, especially since if you wanted to autofill a text area, you may only want to search for it by keyword or title, and not try and search within a larger block of text. Also, if you are looking for a module that you could already use to insert stuff into a ck editor, there is the Ck Inline actions which could be modified to insert blocks of text based on inserting a certain character and typing some word, which then displays a list of options inline and then it inserts the result. That's what I'd be looking into so that I could insert any boilerplate text anywhere into a Ck editor field, anywhere in the content. The major flaw currently with CK inline actions is that it breaks when the editor has overflow, so any long text in an editor you need to resize the editor to full height before using the inline actions.. If that could be fixed, it would be amazing...

RE Branding Thank you all for the conversation so far ?. Just some quick pointers/thoughts: There are two areas of branding that have been referred to so far. The first one is what users see when they log into the backend. The second has more to do with selling the product, aka marketing. Regarding the first one, unlike the present Padloper, the name Padloper will not appear anywhere in the shop. Btw, you will be able to call your shop whatever you want - store, shop, blah blah. So, reports, taxes, etc, will all just be part of the shop. No extra shop links outside the shop itself. Regarding the second issue of marketing, I am not an expert, so I'll pause and have a listen. However, @teppo is right. The name does already have some brand value and the product 'has been selling itself', so to speak. I am not saying things cannot be improved. In addition, and I am just thinking out loud here, I don't have the stats for how many people have come to ProcessWire because of Padloper. My gut feeling is probably not that many (if any at all). On the contrary, I think most Padloper users (I am referring to devs) were already ProcessWire users and needed an eCommerce solution. Of course, we can always aspire for the former case (Padloper attracting people to ProcessWire), but that's probably a longer term discussion.

For the sake of marketing and brand recognition I'd recommend not going with a generic name such as pw + [some commerce related term]. Best known brand names tend to be unique, and they don't really have to have any connection with the company/product (although they can). Trader is a decent idea, but I still think that Padloper is better -- not to mention that it already has some brand value, and an awesome logo ? just my five cents.

I like pwCommerce. For users it is much easier to understand pwCommerce, it is very intuitive and simple. Which from the commercial point of view is a fundamental characteristic. For the class I don't have idea. but also need be something connected with the name. Idea for the logo! If you don't already have one, you could launch a contest among community members! will be something fun. Maybe just for the concept, after all the branding you'll see how to do it.

RepeaterMatrix is going to be the best choice for any type of page builder in ProcessWire (at least at this time). The recent updates to the module improve its flexibility further, such as being able to change the matrix-type of an item that's already been added to a page (this is similar to Gutenberg functionality of being able to change block-types... nice). After using RepeaterMatrix and its equivalents in other CMSes over the years (such as WordPress ACF Flexible Content field), my suggestion is you're better off NOT providing fully customizable layout functionality within your builder (that is, avoid the capability of allowing users to add things like containers, rows, columns). I've personally found that even other CMSes that do this well and are built around that concept are just too clunky. It's the nature of the beast. The better approach in my opinion is to provide a good set (5-10) of matrix-types/blocks that can instead achieve this. Once again, the recent feature addition whereby matrix types can be changed is going to help here since switching a matrix-type retains its content as long as the matrix-type you are switching to uses the same fields.

This is the thread for the old version of RockMigrations wich is deprecated now and has been renamed to RockMigrations1 Here is the latest version of RockMigrations: -- Old post from 2019 -- https://github.com/baumrock/RockMigrations1 Quickstart First make sure you have backups of your database!! Install RockMigrations Create this ready.php <?php /** @var RockMigrations1 $rm */ $rm = $this->wire('modules')->get('RockMigrations1'); $rm->migrate([ 'fields' => [ 'myfield' => ['type' => 'text'], ], 'templates' => [ 'mytemplate' => [], ], ]); Open your PW Backend and you'll see the new field and new template! Now add the new field to the template: <?php /** @var RockMigrations1 $rm */ $rm = $this->wire('modules')->get('RockMigrations1'); $rm->migrate([ 'fields' => [ 'myfield' => ['type' => 'text'], ], 'templates' => [ 'mytemplate' => [ 'fields' => [ 'title', 'myfield', ], ], ], ]); Reload your backend and inspect the template: Now let's add a label for our new field and make title+myfield 50% width: <?php /** @var RockMigrations1 $rm */ $rm = $this->wire('modules')->get('RockMigrations1'); $rm->migrate([ 'fields' => [ 'myfield' => [ 'type' => 'text', 'label' => 'My Field Label', ], ], 'templates' => [ 'mytemplate' => [ 'fields' => [ 'title' => ['columnWidth' => 50], 'myfield' => ['columnWidth' => 50], ], ], ], ]); That's all the magic! You can easily lookup all necessary properties in Tracy Debugger: Let us add a Textformatter as an example! Add the textformatter via the PW backend (not via RM), save the field and inspect via Tracy: Now add this data to your migration: <?php /** @var RockMigrations1 $rm */ $rm = $this->wire('modules')->get('RockMigrations1'); $rm->migrate([ 'fields' => [ 'myfield' => [ 'type' => 'text', 'label' => 'My Field Label', 'textformatters' => [ 'TextformatterEntities', ], ], ], 'templates' => [ 'mytemplate' => [ 'fields' => [ 'title' => ['columnWidth' => 50], 'myfield' => ['columnWidth' => 50], ], ], ], ]); Ok maybe you noticed that migrations are now running on every request which may slow down your site a lot! RM2 will have a feature to automatically detect changes and fire migrations automatically. RM1 does not have this feature, but I've used a technique in all my projects that fires migrations on every modules refresh. Simply wrap the migration in a fireOnRefresh method call: <?php /** @var RockMigrations1 $rm */ $rm = $this->wire('modules')->get('RockMigrations1'); $rm->fireOnRefresh(function() use($rm) { $rm->migrate([ 'fields' => [ 'myfield' => [ 'type' => 'text', 'label' => 'My Field Label', 'textformatters' => [ 'TextformatterEntities', ], ], ], 'templates' => [ 'mytemplate' => [ 'fields' => [ 'title' => ['columnWidth' => 50], 'myfield' => ['columnWidth' => 50], ], ], ], ]); }); How to remove things you created before you may ask? Use the declarative syntax: <?php /** @var RockMigrations1 $rm */ $rm = $this->wire('modules')->get('RockMigrations1'); $rm->fireOnRefresh(function() use($rm) { $rm->deleteField('myfield'); $rm->deleteTemplate('mytemplate'); }); Refresh your backend and everything is as it was before! PS: Make sure you have proper Intellisense support in your IDE to get instant help:

I just submitted a pull request with fixes for the overflow positioning, offset when CKEditor is in inline mode, and overrides for the <ul> padding and margin coming from AdminThemeUikit. https://github.com/BitPoet/ProcessCKInlineComplete/pull/4

So many new features... so little time. ?

I've still got that on the back burner, but it'll likely be the next quarter until I find enough time for it. It's going to need some deep digging, unfortunately.

easy to miss, but one of the most awesome and useful recent plugins, i've got it doing all kinds of crazy things, inserting images, audio, links etc.. And i did spent some fruitless hours trying to solve the positioning issue for overflow but sadly got nowhere on it....

Wow, how could I miss that one! ? Thx

Well... maybe next time. ? Good to hear you found it.

In addition to my previous post some more details about a problem I recently faced with myStyles.js. The browser console showed the following error: Uncaught Error: [CKEDITOR.resourceManager.add] The resource name "mystyles" is already registered. The template had 3 textarea fields but only one of these fields had a custom myStyles.js. After adding the custom myStyles.js to the other two fields everything worked as expected again. Maybe this detail helps in the future.

I have, now! It worked a treat. The only consideration was that my title field was also being used to populate the <title> tag so I had to be a bit smarter, retain the original text that was being replaced in Hanna Code's replacement and strip tags in the page title.

Weird... the favicon.ico thing works like this: The browser looks in certain places for certain files. The favicon.ico is expected here: https://www.domain.tld/favicon.ico and will be displayed if it exists. You can... nonetheless... define an alternative file as described above to change default behaviour or to show another file like a .png Sometimes browsers are kind of lazy and don't look for new files they either haven't found for a while or have already cached. So using another browser or adding a bookmark to your bookmark bar can help to trigger a reload/refresh.

Excellent never really thought about using modules for repeated tasks but makes complete sense. Module settings could be exported with any changes and installed on each instance. I read about multi-instance support need to explore this further. So you could have one PW instance affecting lots of others. Hope soon I'm creating modules for the community and giving out gold advice like this. Thanks appreciated everyone.

Hello, well I have not too much new ideas, but I can describe how I normally do it. I go to https://realfavicongenerator.net/ to upload my png and generate the code. I always use a subfolder in the siteroot, I call it /bicons for example: <link rel="apple-touch-icon" href="/bicons/apple-touch-icon.png"> <link rel="icon" type="image/png" sizes="32x32" href="/bicons/favicon-32x32.png"> <link rel="icon" type="image/png" sizes="16x16" href="/bicons/favicon-16x16.png"> <link rel="manifest" href="/bicons/site.webmanifest"> <link rel="mask-icon" href="/bicons/safari-pinned-tab.svg" color="#5bbad5"> <link rel="shortcut icon" href="/bicons/favicon.ico"> <meta name="msapplication-TileColor" content="#da532c"> <meta name="msapplication-config" content="/bicons/browserconfig.xml"> <meta name="theme-color" content="#ffffff"> Sure, images are not in the templates directory in my case but that should not matter, I guess.

+1 Let's rename it ? A few more ideas: pwCommerce pwShop pwStore pwTrader Trader pwTrader ShopWire TradeWire A couple of things to consider: A unique (maybe a made-up name) helps web/forum/code searching a lot. Eg: a Google search Trader site:processwire.com/talk reveals only 2(!) results, meaning it is not an overused word here (just yet) even though it is not even unique. It is worth googling a bit before picking a name, as ShopWire and TradeWire are already in the use, so they are unique in the ProcessWire forum but not on the web. It's not a big deal just something worth considering. To keep source code lean, one word like Trader is what I'd prefer. It's class can be Trader ? and things like $trader = $modules->get("Trader"); are short and easy on the eye, therefore on the brain. Things like pwShop are problematic as such names are not good for the class name and turning it into PwShop looks odd to me, for example.

Ah thank you for this. It was a bit weird for having to reinit it ?

Just a small amendment to the above: If you really want a single dashboard I‘d rather look into another processwire install using multi instance support to load the others for data access. This works for things on a single server.

I agree 100% to what @wbmnfktr said! If you want to get rid of repeated task jump into module development and build reusable components that you can share. Far better than putting many sites under one hood. I know what I'm talking about - I've also done that once and regretted it lateron ? Building modules also has the benefit of being more flexible (you don't end up in all sites having the 100% same setup) and last but not least: You can share them with the community ?

Not sure if anybody is already using it... I'm using it every day and I'm extending the api from time to time. Today I added a setFieldOrder() method. Now it is quite easy to change the order of fields and set new column widths: // adjust field widths $rm->setFieldData('project', ['columnWidth'=>33], 'rockinvoice'); $rm->setFieldData('inv_date', ['columnWidth'=>33], 'rockinvoice'); $rm->setFieldData('type', ['columnWidth'=>34], 'rockinvoice'); $rm->setFieldData('invoicetomarkup', ['columnWidth'=>100], 'rockinvoice'); $rm->setFieldData('due', ['columnWidth'=>25], 'rockinvoice'); $rm->setFieldData('paid', ['columnWidth'=>25], 'rockinvoice'); $rm->setFieldData('num', ['columnWidth'=>25], 'rockinvoice'); $rm->setFieldData('sap', ['columnWidth'=>25], 'rockinvoice'); $rm->setFieldOrder([ 'type', 'invoicetomarkup', 'due', 'paid', 'num', 'sap', ], 'rockinvoice');

You should be able to. Just assign the Hannacode Textformatter to the fields of your choice and it should work.

https://github.com/processwire/processwire-issues/issues/896

And done – was a simple case of me forgeting I've switched to tag-based releases.

Nice one @3fingers. Thanks @Wanze hook works great. I like this truncate function, simple and works as advertised: https://www.the-art-of-web.com/php/truncate/ Regarding the above when you say left to the template engine what do you mean? I assume disable that tag from automatic output by Seo Maestro and add yourself using eg twig filter?

See how PW determines $config->ajax here. So you may need to set the X-Requested-With header:

if($config->ajax) { header('Content-Type: application/json'); echo $json; $this->halt(); // like die(); } else throw new Wire404Exception();

There's also an AOS checkbox for that: Add new page: uncheck Active? for non-default language names: the state of a page on non-default languages can be set to inactive here when adding a new page. https://github.com/rolandtoth/AdminOnSteroids/wiki/Misc

Quick follow-up to last announcement regarding Discounts. Here's a screenshot ( @szabesz look away now ? - giant padding! will work on it later) of the Discount bulk view/edit screen (WIP). Discounts bulk view/edit

Not sure if anybody is watching what's going on in the requests repo or here in the forum... nevertheless, if you find this idea good, please support it on github: https://github.com/processwire/processwire-requests/issues/305

ok thanks, i'll be back on heavy module development in about a week or 2 and will be able to finally merge the versions and test and get this all sorted..

Hello, I hope you are all doing as well as possible. A friend has sent me the following link: https://undesign.learn.uno. And there seems to be interesting things also directly at https://learn.uno. Explore topics, Learning tools... Have a nice week! NB: I was not sure whether it was preferable to put this topic in Pub or in Dev Talk...

I've found this module really useful, and thought I'd share an interesting use case I've come up with for it. I had a client who wanted both the functionality of pageTable, and PageTableExtended, ie they wanted a tabular summary like PageTable provides, but with the option to expand or collapse to display rendered detail from a template like PageTableExtended allows. It turns out, I was able to provide the desired functionality using PageTableExtended, and built in UI-kit classes in the template file I provided to PageTableExtended. <!-- This is the summary section, like displayed by PageTable --> <table class="AdminDataTable AdminDataList uk-table uk-table-divider uk-table-justify uk-table-small"> <thead> <tr> <th>BOM</th> <th>Cases to produce</th> <th>+/- or exact</th> <th>Notes</th> </tr> </thead> <tr> <td><?= $bom->title ?></td> <td><?= $page->cases ?></td> <td><?= $page->exact ?></td> <td><?= $page->notes ?></td> </tr> </table> <!-- Toggle to display detail section --> <a herf="#" class="toggleRenderedLayout"> <i class="toggle-icon fa fa-angle-right"></i> </a> <span class="renderedLayoutTitle">BOM Details</span> <!-- Detail section, hidden by default, using built in ui-kit css. --> <div class="renderedLayout hiddenOnStart"> <div uk-grid uk-margin-small-top> <div class="uk-width-1-3 uk-margin-small-top"><strong>Wine Variety </strong><?= $bom->wineVariety->title ?></div> <div class="uk-width-1-3 uk-margin-small-top"><strong>Brand </strong><?= $bom->brand->title ?></div> <div class="uk-width-1-3 uk-margin-small-top"><strong>Market </strong><?= $bom->market->title ?></div> <div class="uk-width-1-1 uk-margin-small-top"><strong>Orientation </strong><?= $bom->orienation->title ?></div> ... </div> </div> Screenshot, showing the tabular summary, with the detail section expanded.

I don't use this feature very much but if you feel it would make a useful addition, create a PR (or show the changes in other ways) and I'll check.

this is working really well for inserting images, audio players and videos from a central media library, inline into ck editor. It saves so much time since it is so fast to insert the page reference to the media item... and i can just intercept my custom insert templates and replace with the video player popup, or audio player (soundmanager2), or responsive image...

You need to add: xhttp.setRequestHeader("X-Requested-With", "XMLHttpRequest"); This is something that jquery does automatically, but you have to do yourself with vanilla JS. I think you may also need to add this inside your xhttp.onreadystatechange function. xhttp.getAllResponseHeaders();

The simplest solution I see: Create a template file content_block.php Create a folder in your /site/templates/ folder called content-blocks Put in all content blocks you want (can be just .text or .PHP, whatever you wish) Download and install: FieldtypeSelectFile, give it a name. Go to templates add new template with the field you just created, name it content_block. Set the setting of the field to the folder content-blocks Check the Change Page Template setting. Create for every content block a page with the content_block template. Select in every page the block you want to render. Then the magic: // name of the content block template. $blocks = $pages->find("template=content_block"); foreach ($blocks as $block) { echo $block->render(); } Or you can make a pagefield (multiple) allowing al pages with template content_block.