Leaderboard

Good ol' ProcessWire - there's always a way! // Get the page to render $p = $pages(1234); // Set a page number $input->setPageNum(2); // Set a URL segment $input->setUrlSegment(1, 'my-segment'); // Set a GET variable $input->get->foo = 'bar'; // Render the page echo $p->render();

https://www.naturesextract.com.au/ Nature's Extract is an Australian manufacturer of water dispersible massage oils whose target market is professional massage clinics and day spas. They've had a BigCommerce web shop for a while. They decided to add a landing page to draw more customers to their online store. The store has the same domain name with .com extension. The landing page has .com.au extension to tweak geo-location oriented searches even though the .com site in Google Web Developers (or Search Console or whatever they call it now) is set to primary location is Australia. It is also hoped the .com.au extension will appeal to the targeted human audience. The client insisted that to reinforce buyer confidence, there should be a focus on the facts that the products are Australian made and that they've been in business for 25+ years. It's a single page site that grew a bit. Modules used: BigCommerce PHP API - pulls product images, descriptions & links from the BigCommerce store via the BC REST API Email Obfuscation ProFields - Repeater Matrix JSON-LD Schema ProCache MarkupSEO MarkupSitemap Database Backups Files Editor Upgrades It also uses PWABuilder code & icon images to make it a Progressive Web App. Google Lighthouse Report results are: Have done all I can think of to make the page pleasing to Google. Now for traffic, backlinks, recommendations, social media, influencers, etc. Almost makes me nostalgic for the days when to be found on the web, you only needed a web page with relevant content, attractive graphics and good page structure...

The notion of core in MODX might be different from the one in ProcessWire (maybe?). Btw, I don't know if you've seen this post on MODX to ProcessWire welcome brief? It might be of interest ?. One of the philosophies of ProcessWire, one that makes it very extensible is the fact that everything, all its building blocks is a module. Yes, even the admin (backend) is a collection of modules. Modules are just PHP classes. You have your classes (i.e. modules, or the site's custom classes) and these live here: /site/modules/. ProcessWire has its own core classes: the ones designated as modules live here: /wire/modules/. The are other classes, in fact, the main classes of ProcessWire, aka the core, and these live here: /wire/core/. In order for ProcessWire to know about and register your classes, they have to live where ProcessWire expects them to, i.e. /site/modules/. Now, this does not mean that all your classes have to be modules. No; you can have custom classes (i.e. my_class.php) living in /site/modules/my_module/my_class.php or /site/templates/includes/my_class.php (@note: includes here is just arbitrary) which you access from within your registered classes (modules) or from within your template files. Any attempt to access such classes directly will be blocked by ProcessWire for security reasons. This just means you can have helper classes or other libraries you need for your modules which ProcessWire does not need to be aware about (in respect to registering them). The foregoing means that... ..is not necessary in ProcessWire. your /site/ is already outside the core. It survives upgrades and ProcessWire never touches it. It just communicates with it (bidirectional communication). All ProcessWire core variables (e.g. $wire, $config, $fields, $page, $pages, etc) are available everywhere for your use, both in the backend and the frontend. I hasten to add that ProcessWire will not automatically install your modules for you. If it finds a new module, it will just let you know that it has found a new module. If it finds duplicates of the module, i.e. either duplicated under /site/modules/ or under both /site/modules/ and /wire/modules/ , it will alert you to the fact and will ask you to choose which one you are going to use. This means that you can duplicate a core module found in /wire/modules/ under /site/modules/, edit it to suit your requirements and ProcessWire will happily continue serving the copy under /site/modules/ and yes, it will survive upgrades. This is not always a good idea though, as the mother module could get some upgrades which you would be missing on and/or require. So, in ProcessWire, we develop our modules under /site/modules/. Most people who develop modules use a versioning system, invariably git, and host their modules on GitHub, BitBucket, GitLab, etc. Secondly, many people make use of git's branches and work in the dev branch. All development and testing is done under that branch. When ready for production, they merge into master branch. For modules submitted to the ProcessWire modules directory, if the project (code) is hosted in GitHub, ProcessWire (the site) reads the master branch of the project to access the README and the download link. In the past, I have used symlinks to link my module to different ProcessWire versions. For a quick and dirty check, I have occasionally had two wires, e.g. wire and wire27 which I rename to suit my needs RE ProcessWire version. Many of us here develop using the latest ProcessWire dev. I cant' speak for everyone, but I think many then use (if they need to) a ProcessWire 2.7 just for final tests. I doubt many of go back and forth between versions (i.e. between 2.7 and 3). No ?. As long as you name your module classes as per ProcessWire requirements work with what suits your needs. The above is just the basics. We have people here who work in teams and have slightly different approaches, but the basics are the same.

Want to announce that I started with embedding support for the WebP format into the core. Current state in my dev-branch is, that you can call / create additional image variations in the WebP format by passing this param within an options array to any size call: // mandatory is: 'webpAdd' => true // optionally define a quality for WebP: 'webpQuality' => 80 // currrently it only is implemented in the GD-Engine, so you need to force its use, $options = [ 'forceEngine' => 'ImageSizerEngineGD', 'forceNew' => true, 'webpAdd' => true, 'webpQuality' => 80 ]; $image = $page->images->first->size(700, 700, $options); If you want to be an early tester, you can get a fork from here (patch-1), or you grap these three files: Pageimage.php ImageSizerEngine.php ImageSizerEngineGD.php More will be done between christmas and new year!

That's totally fine. We could simply not support different formats besides webp for now. I was really just talking about the configuration, so if there is time in the future to have a more extensive featureset supported we don't need to change the configuration, but can just add the features / remove warnings.

@Noel Boss thank you for the improvements, looking good so far! Can you update the version info here, too? https://github.com/noelboss/AdminThemeBoss/blob/master/AdminThemeBoss.info.json When you have ProcessWireUpgrades installed it always alerts you that a new version is available ?

Hello everybody, I‘ve just released version 0.5.1 with @Chris Bennett‘s toggle checkboxes. a redesigned login screen and many small imrovements and fixes! Check out more screenshots at github. I hope you like the changes...

This was the problem! It now works as expected. So each file (.module.php, .info.php and .config.php) need to be namespaced. Thanks all for your help!

Beta testers needed ?. Please send me a PM if you'd like to help. An active subscription/current license is required. I'm happy (and frankly relieved ?) to announce Media Manager v 012 is ready for beta testing. Please accept my apologies for the delay. With this version: Only ProcessWire 3.x (preferably the latest master) is supported from now on. Currently, only AdminThemeUiKit is supported. (we may support Reno theme in the future). Changelog ProcessMediaManager (Media Manager Library/back-end) New UI: Responsive and closely matches ProcessWire theme (UiKit) Media thumbs shown in their natural orientation Upload Anywhere: Upload directly to Media Manager Library using drag and drop New edit media page in modal (natural ProcessWire page) (respects locked status and Media Manager edit permission if present) Create image variations in natural ProcessWire page during editing Add, edit, display and access custom ‘columns’ (fields) added to media manager templates (e.g. add text field to media-manager-image and access value using Media Manager API) Hide media types menu items if media type not in use Global setting for allowed media types (e.g. image and video only) Hide ‘All’ menu item New filters dashboard Updated and freshened up upload’s dashboard Option to upload ZIP archives as is (to save as documents) vs. to decompress them (recursively) Preview PDF documents in ‘gallery mode’ (if browser supports it) Selection of media is now identical to how images thumbs are selected in ProcessWire FieldtypeMediaManager Enable Upload Anywhere (for InputfieldMediaManager use) Allow users to edit media displayed in a Media Manager Inputfield Change whether to use text or icons for action ‘buttons’ Custom fields: Display and edit ‘columns’ (fields) added to media manager templates InputfieldMediaManager New UI: Responsive and closely matches ProcessWire theme (UiKit) Media thumbs shown in their natural orientation Upload Anywhere: Upload directly to Media Manager Library using drag and drop AND simultaneously insert into the Media Manager field on the page being edited Inputfield Media Manager markup updated/refreshed using Ajax when media is added or edited. No need for a page reload (so you won’t lose unsaved changes on the page) New edit media page in modal (natural ProcessWire page) (respects locked status and Media Manager edit permission if present) If a media in a Media Manager Inputfield is unpublished or trashed, it is automatically removed from all Media Manager Inputfields present on the page (including its variations) and the fields refreshed using Ajax View values of custom columns (not all Fieldtypes supported for viewing although all supported for accessing using the API). These are refreshed on the Inputfield using Ajax once editing is complete. Better support for repeaters Preview PDF documents in ‘gallery mode’ (if browser supports it) Selection of media is now identical to how images thumbs are selected in ProcessWire Inserting image variations Media Manager API (working in the front-end and manipulation via the API) Access media in a Media Manager field on a given page (see examples below) In the example below, we access custom fields (columns) added to the image media template (media-manager-image). In this case, two fields have been added. A URL field named links and a text field called headline. You can add any field you want. Please note though that not all fields can be displayed in the backend (for practicality). In the frontend, there are no such restrictions and you can access any of the fields as shown below. Your MediaManager object gives you access to the fields. For instance: $m->name_of_your_field. Below, we have $m->links and $m->headline. Please note that $m->media still returns the first media in the MediaManager object. In case you have added more than one media to your media field, e.g. more than one image added to one MediaManager object (done via editing a Media), you can access all of them using: $m->mediaField; In the case of image media, $m->mediaField returns a Pageimages object which can be iterated. This assumes, of course, that your media_manager_image field accepts more than one image (the default). The default setting for number of files accepted for other media types is 1, hence $m->mediaField returns a Pagefile object. You can edit these fields (media_manager_audio, media_manager_document and media_manager_video) to accept multiple files is you wish, in which case $m->mediaField will return a Pagefiles object which you can loop through, access using first(), last(), eq(n), etc. // get the media manager field on the page $mediaContent = $page->media_manager_tests; $tbody = '<tbody>'; $tbody .= $mediaContent->each(function($m) { if($m->typeLabel !='image') return; $thumb = $m->media->height(130); $img = "<img src='{$thumb->url}' alt='{$m->media->description}' height='130'>"; $tds = "<td>$img</td>" . "<td>{$m->headline}</td>" . "<td><a href='{$m->links}'>{$m->title}</a></td>"; $row = "<tr>{$tds}</tr>"; return $row; }); $tbody .= '</tbody>'; $content .= "<div class='uk-overflow-auto uk-width-1-1'>". "<table id='news-outlets' role='presentation' class='uk-table uk-table-divider uk-table-hover uk-table-justify uk-table uk-table-middle uk-table-responsive'>". "<thead>" . "<tr>" . "<th class='uk-width-small'>Preview</th>" . "<th class='uk-table-expand'>Summary</th>" . "<th class='uk-width-medium'>Link</th>" . "</tr>" . "</thead>" . "{$tbody}". "</table></div>"; Output of the above code

Pages At Bottom Keeps selected pages at the bottom of their siblings. A "bottom page" will stay at the bottom even if it is drag-sorted to a different location or another page is drag-sorted below it (after Page List is refreshed the bottom page will still be at the bottom). Newly added sibling pages will not appear below a bottom page. The module also prevents the API methods $pages->sort() and $pages->insertAfter() from affecting the position of bottom pages. Note: the module only works when the sort setting for children on the parent page/template is "Manual drag-n-drop". Why? Because you want some pages to always be at the bottom of their siblings for one reason or another. And someone requested it. ? Usage Install the Pages At Bottom module. Select one or more pages to keep at the bottom of their siblings. If you select more than one bottom page per parent then their sort order in the page list will be the same as the sort order in the module config. https://github.com/Toutouwai/PagesAtBottom https://modules.processwire.com/modules/pages-at-bottom/

Cool, I think I got it! Thanks a lot for your immediate help!

@kongondo wow, I didn’t expect a full tutorial in answer to my question! Great! This community is one of the best I’ve ever seen!

While I am waiting to hear back, if you have a critical error like this, you can remove a module by deleting it's files from /site/modules and it's entry in the modules database table which is easy to do with Adminer which is packaged with Tracy.

Have a look at the Connect Page Fields module. This will let you simultaneously add conferences to speakers when you add speakers to conferences. You can also get pages that reference a page via the API with $page->references() since PW 3.0.107.

Hi @Michkael I haven't read back through the previous posts so apologies if this is addressed above by someone else. Responsive Images I primarily use UIKit (v3) for my sites and one thing I really like is that images are responsive by default and don't require any extra markup. This is particularly useful for clients because they don't have to apply any CSS to their images. I like to keep things super-simple for my clients to save them having to remember CSS class names and it also keeps my support times down. Blog Overview Structure My blog 'Overview' page is very simple and here's a simple wireframe. To have the blog overview page populate with content, I am only asking my clients for a few simple items Create a page with template=blog-post Add a preview image (the thumbnail above) to an images field Complete a field called blog-summary The key thing here is really how you handle the preview image and there's a couple of ways to do this as outlined in the help docs FIRST IMAGE You can can tell your client that the first image in an image file will always be the preview thumbnail. This has worked well for me. // grab and output first image $image = $page->images->first(); if($image) echo "<img src='$image->url'>"; or IMAGE WITH TAG You can tell your client to 'tag' an image within an image field to make it the preview thumbnail. That works well too. // retrieve first image with tag 'mytag' $image = $page->images->getTag('mytag'); or SPECIAL IMAGE FIELD You could always create a specific images field just for the thumbnail and limit it to 1. That way your client has zero configuration. I know some of the guys like to keep their fields to a minimum and usually I too try to avoid this. I make a call based on the actual client and their level of experience with CMS etc. Blog Post Structure On the actual blog post, I almost always have the preview image as the first image in the post. Crucially, this is added automatically by my PHP / templating. IE client only adds an image once for it to be both thumbnail intro image For the other images within the body of a post (number 2 and 3 below), it's up to the client to add these to the images field and then apply via the text editor etc. So I never run into the issue you mentioned re CSS and images. I know there are ways to add CSS to the CK Editor and ask the client to apply them but I try to steer clear of that. To me, a CMS is a content tool. Not a design tool. Telling clients they have formatting options within the CKEditor field beyond H1, H2 etc opens up the possibility for them to get 'creative' and can quickly make the site content look messy. If I really, really had to apply CSS to the images within the body field, I would probably look at something called field templates which was announced a while back. I can't recall but i *think* this allows you to specify a mini field template. Within that you could probably target your images with something like .my-body-template img { // css rules } Might be worth a look.

I’ve updated the version number. There is now a shiny new release page where you can subscribe to updates for new releases of AdminThemeBoss!

Current state is that only the images are created and removed. There is no markup generation or additional url output implemented yet. But will be added soon.

Should Google really be the ruler of the web? Great effort and results, anyway! ?

Thanks @Chris Bennett ! Just integrated it in my latest release: Looks nice!

Hello Robin, thanks for bringing light to this issue. The entity encoder textformatter really didn't come to my mind here. Now it makes perfect sense…

v0.1.1 released: if you select more than one bottom page per parent then their sort order in the page list will be the same as the sort order in the module config.

Hello @7Studio! I was just curious if there is a newer translation and here we are. Tomek, great job, all is working fine (PW 3.0.98 on localhost). I can see that there are still some phrases in English. I don't know if this has been your choice to leave them like that or was it rather lack of need / time. I'm a newbie here (just converting from WordPress after almost a decade) and still learning everything, but after few weeks I'm planning to build a bigger site with PW and there will be several places that will have to be in Polish. If you need some help with translating - let me know. Pozdrawiam ciepło, Krzysztof

Or just put that in the settings: { "files.associations": { "*.module": "php" } }

Or change it in the database - via the link to Adminer in the RequestInfo panel in Tracy is a nice shortcut, but however you get there is fine.

In admin.php file : /** * Hook : * Add FieldtypeDecimal to compatible fieldtypes of * a FieldtypeFloat when a superuser need to change the type * of a float field. * * https://modules.processwire.com/modules/fieldtype-decimal/ * https://processwire.com/talk/topic/7542-development-fieldtypefloat-fieldtypedecimal/ * */ $wire->addHookAfter('FieldtypeFloat::getCompatibleFieldtypes', function($event) { if(!$this->modules->isInstalled('FieldtypeDecimal') || !$this->user->isSuperuser()) return; $return = $event->return; $return->set('FieldtypeDecimal', $this->modules->get('FieldtypeDecimal')); $event->return = $return; });

CKEditor is a nasty beast when it comes to configuring it, but I will try to help ? First things first, how to configure it: https://github.com/processwire/processwire/blob/dev/wire/modules/Inputfield/InputfieldCKEditor/README.md#custom-editor-css-file You probably did this but to make things clear: the field's type is Textarea, while the inputfield's type is CKEditor. So far so good ? On the Details tab: content type is recommended to be Markup/HTML and it should be. "Markup/HTML (Content Type)" option can be configured as required, as they do not affect the CSS we are dealing with. The things in question be configured on the Input tab, under the CKEditor settings, so here come the interesting bits. Available core toolbar items are listed there, and as an example, here is what I often use: PWImage, Format, Styles, RemoveFormat, Bold, Italic, NumberedList, BulletedList, PWLink, Unlink, Table, SpecialChar, Sourcedialog Format and Styles are needed to make those dropdowns show up. If you do not have too many CKEditor fields on the edit page then I recommend setting them to "Regular Editor". We have a thread of discussing settings, BTW: https://processwire.com/talk/topic/17862-share-your-ckeditor-settings/ Turning ACF and HTML Purifier on is generally recommended, however, they might make things harder in terms of keeping those HTML bits intact when saving the page. In the case of ACF, you need to deal with "extra allowed content" so that your code actually gets saved as intended. Here are some forum topics to tackle some issues that may arise: https://processwire.com/talk/topic/19519-ckeditor-and-extra-allowed-content/ https://processwire.com/talk/topic/19918-modify-ckeditor-image-markup-via-hook/?do=findComment&amp;comment=172616 https://processwire.com/talk/topic/12773-ckeditor-does-not-reapply-styles/#entry116174 Normally I turn ACF on, but keep HTML Purifier off in some cases, as I usually use "Regular Editor" instead of "Inline" and have trusted users. However, HTML Purifier is good for making sure only valid code is saved, so it is a trade off not to turn it on. When I do use HTML Purifier, then I sometimes temporarily turn it off during development but I make sure to turn in on for the production site, even for trusted users. If you run into troubles, try turning it on and off to see what it changes in the source. Sadly, HTML Purifier is not yet configurable in ProcessWire. You can give this request a thumb's up though: https://github.com/processwire/processwire-requests/issues/226 Setting up Format Tags is self explanatory, usually I use at least the minimum of p;h2;h3;h4;h5 (h1 is always generated by the template file so no need to include it). Extra Allowed Content is very important, normally I use this: p(*)[*]{*};div(*)[*]{*};li(*)[*]{*};ul(*)[*]{*};i(*)[*]{*};tr(*)[*]{*};*[id];*(class); *[id] and *(class) are somewhat redundant as they allow any IDs and any classes while (*)[*] also allow any of those in the case of the element they are applied to. Now we are getting to the bits you are probably concerned with: Custom Editor CSS File (regular mode) - which can be used to style the HTML of content editor itself as opposed to the frontend Custom Editor JS Styles Set - this is the file you need when you want to define styes for the Style toolbar dropdown Custom Config Options - the notes of the field read: these settings can also be set in one of these files (e.g.) ...config.js and ...config-body.js and this is what I normally use. To configure these options properly this is what you need to tripple check: Make sure: you did create the directory /site/modules/InputfieldCKEditor/ and copied the file called mystyles.js from /wire/modules/Inputfield/InputfieldCKEditor/ to its counterpart: /site/modules/InputfieldCKEditor/ Make sure: files in the directory /site/modules/InputfieldCKEditor/ are named exactly as the ones configured in the options. In the case of Custom Editor JS Styles Set, make sure that in the JS file the function parameter reflects the name you defined in the admin. The default is "mystyles", defined this way: mystyles:/site/modules/InputfieldCKEditor/site_styles.js which means that in the JS file you need CKEDITOR.stylesSet.add( 'mystyles', [... but if you want to use a different string, then replace "mystyles" both in the admin's configuration filed and the accompanying JS file, something like: cke_extra:/site/modules/InputfieldCKEditor/my_extra.js and CKEDITOR.stylesSet.add( 'cke_extra', [... Regarding the configuration files themselves, here is an example for config-body.js: CKEDITOR.editorConfig = function (config) { // Define changes to default configuration here. For example: // config.uiColor = '#AADC6E'; //config.enterMode = CKEDITOR.ENTER_BR; // stops new <p> tags from being added, adds <br /> instead. config.protectedSource.push(/<i[a-z0-9\=\'\"_\- ]*><\/i>/g); // needed for empty <i> tags (icons) config.protectedSource.push(/@/g); // needed for empty <i> tags (icons) /* If this one is enabled: * config.allowedContent = true; * then it is not possible to stop adding widht and height to images */ config.disallowedContent = 'img[width,height]'; // to stop adding widht and height to images }; CKEDITOR.dtd.$removeEmpty['i'] = 0; // needed for empty <i> tags (icons) Regarding mystyles:/site/modules/InputfieldCKEditor/mystyles.js here is one approach for UIkit 3: CKEDITOR.stylesSet.add( 'cke_extra', [ { name: 'Normal Paragraph', element: 'p', attributes: {'class': 'site-paragraph'} }, { name: 'Clear runaround', element: 'p', attributes: {'class': 'uk-clearfix'} }, { name: 'Warning Paragraph', element: 'p', attributes: {'class': 'uk-alert-warning', 'data-uk-alert': ''} }, { name: 'Success Paragraph', element: 'p', attributes: {'class': 'uk-alert-success', 'data-uk-alert': ''} }, { name: '1/2 left align', element: 'img', attributes: {'class': 'align_left uk-float-left uk-width-1-2@s site-body-img'} }, { name: '1/2 right align', element: 'img', attributes: {'class': 'align_right uk-float-right uk-width-1-2@s site-body-img'} }, { name: '1/3 left align', element: 'img', attributes: {'class': 'align_left uk-float-left uk-width-1-3 site-body-img'} }, { name: '1/3 right align', element: 'img', attributes: {'class': 'align_right uk-float-right uk-width-1-3 site-body-img'} }, { name: '1/4 left align', element: 'img', attributes: {'class': 'align_left uk-float-left uk-width-1-4 site-body-img'} }, { name: '1/4 right align', element: 'img', attributes: {'class': 'align_right uk-float-right uk-width-1-4 site-body-img'} }, { name: 'center image', element: 'img', attributes: {'class': 'align_center uk-align-center site-body-img'} }, ]); This method above defines classes for the Style toolbar dropdown in a way that more than one class or attribute is applied to the selected element. For example align_left is applied because the default ProcessWire CKEditor class for left align is this (see this post). However, to make sure that in the frontend the same element is also aligned to the left, I also apply uk-float-left uk-width-1-2@s to it. This is just a dead simple approach but you can make it more sophisticated. If you want to turn CKEditor into a WYSIWYG editor then you need do some extra work, because you need to make sure your contents.css defines the classes and styles also used on the fronted. I have not ventured too far in this direction though. Normally I use UIkit 3 on the frontend and not in the admin so I simply mimic the most important subset of the frontend's styles in contents.css. I will need to improve on this practice but only after I have switched from the Reno Admin Theme to Admin Theme UIkit. I hope I cleared up a few things for you. I you want even more tips form others, I recommend using google to search like this: https://www.google.hu/search?q=CKEditor+site%3Aprocesswire.com%2Ftalk&amp;oq=CKEditor

I think this might be one of those cases where a little debugging saves a lot of head-scratching. Try dumping the value you are trying to match: Now it's obvious what the cause of the issue is. The title field has the entity encoder textformatter applied (like all text fields should), so the formatted value that is prepared for display on the front-end is different than the unformatted value that is saved in the database and that you are searching against with $pages->find().