Leaderboard

/* * Example of how to clone a locked page, remove the lock on the copy, and clear the value of a field in the copy. * Reset stockCode Field when copying a page using a specific template, also remove locked status. * This code is included in the /site/ready.php file. */ $wire->addHookAfter('Pages::cloned', function($event) { /* * Important: The event arguments include both the copied page and the newly created page. * Don't use $event->arguments('page') as this returns the page that is being cloned rather than the cloned copy. * Instead use $event->arguments(1) which correctly refers to the new copy. */ $currentPage = $event->arguments(1); if ($currentPage->template == 'bom') { $currentPage->stockCode = ''; $currentPage->status = $currentPage->status & ~Page::statusLocked; //probably better to use removeStatus(Page::statusLocked) $currentPage->save(array('quiet' => true)); } }); Here's my documented example of how I got this to work.

Hi @Soma, Could you please add this very useful module to the PW modules directory? Thanks!

The map still seems broken. It would be really sweet if Ryan could put the website code on Github so other people can contribute as well through PR's.

The newest version of RockGrid now supports RockFinder2 as data source ? $finder = new RockFinder2(); $finder->find('template=basic-page'); $finder->addColumns([ 'title', 'body' ]); $this->setData($finder); Data is available on the JS side via the RockFinder2 property in the GridItem object:

Offtopic, but have you (@zeka) had a look at RockFinder and RockGrid? And the upcoming RockFinder2 and RockTabulator? ?

I've spent the last while experimenting with srcset implementation - and PageimageSrcset is the result: PageimageSrcset Provides configurable srcset and sizes properties/methods for Pageimage. Overview The main purpose of this module is to make srcset implementation as simple as possible in your template code. It does not handle images rendered in CKEditor or similar fields. For an introduction to srcset and sizes, please read this Mozilla article about responsive images. Pageimage::srcset() // The property, which uses the set rules in the module configuration $srcset = $image->srcset; // A method call, using a set rules string // Delimiting with a newline (\n) would also work, but not as readable $srcset = $image->srcset("320, 480, 640x480 768w, 1240, 2048 2x"); // The same as above but using an indexed/sequential array $srcset = $image->srcset([ "320", "480", "640x480 768w", "1240", "2048 2x", ]); // The same as above but using an associative array // No rule checking is performed $srcset = $image->srcset([ "320w" => [320], "480w" => [480], "768w" => [640, 480], "1240w" => [1240], "2x" => [2048], ]); // Use the default set rules with portrait images generated for mobile/tablet devices $srcset = $image->srcset(true); // Return the srcset using all arguments $srcset = $image->srcset("320, 480, 640x480 768w, 1240, 2048 2x", [ "portrait" => "320, 640", ]); // The set rules above are a demonstration, not a recommendation! Image variations are only created for set rules which require a smaller image than the Pageimage itself. On large sites this may still result in a lot of images being generated. If you have limited storage, please use this module wisely. Portrait Mode In many situations, the ratio of the image does not need to change at different screen sizes. However, images that cover the entire viewport are an exception to this and are often the ones that benefit most from srcset implementation. The main problem with cover images is that they need to display landscape on desktop devices and portrait when this orientation is used on mobile and tablet devices. You can automatically generate portrait images by enabling portrait mode. It is recommended that you use this in combination with Pageimage::focus() so that the portrait variations retain the correct subject. The generated variations are HiDPI/Retina versions. Their height is determined by the portrait ratio (e.g. 9:16). Variations are always generated, regardless of whether the original image is smaller. Upscaling is disabled though, so you may find that some variations are actually smaller than they say they are in their filename. The sizes attribute should be used when portrait mode is enabled. Pageimage::sizes will return (orientation: portrait) and (max-width: {maxWidth}px) 50vw by default, which handles the use of these images for retina devices. The maximum width used in this rule is the largest set width. Pageimage::sizes() There is no option to configure default sizes because in most cases 100vw is all you need, and you do not need to output this anyway as it is inferred when using the srcset attribute. You can use the method for custom sizes though: // The property $sizes = $image->sizes; // Returns 100vw in most cases // Returns '(orientation: portrait) and (max-width: {maxWidth}px)50vw' if portrait mode enabled // A method call, using a mixture of integer widths and media query rules // Integer widths are treated as a min-width media query rule $sizes = $image->sizes([ 480 => 50, "(orientation: portrait) and (max-width: 640px)" => 100, 960 => 25, ]); // (min-width: 480px) 50vw, (orientation: portrait) and (max-width: 640px) 100vw, (min-width: 960px) 25vw // Determine widths by UIkit 'child-width' classes $sizes = $image->sizes([ "uk-child-width-1-2@s", "uk-child-width-1-3@l", ]); // (min-width: 640px) 50vw, (min-width: 1200px) 33.33vw // Determine widths by UIkit 'width' classes $sizes = $image->sizes([ "uk-width-1-2@m", "uk-width-1-3@xl", ]); // (min-width: 960px) 50vw, (min-width: 1600px) 33.33vw // Return the portrait size rule $sizes = $image->sizes(true); // (orientation: portrait) and (max-width: {maxWidth}px) 50vw // The arguments above are a demonstration, not a recommendation! Pageimage::render() This module extends the options available to this method with: srcset: When the module is installed, this will always be added, unless set to false. Any values in the formats described above can be passed. sizes: Only used if specified. Any values in the formats described above can be passed. uk-img: If passed, as either true or as a valid uk-img value, then this attribute will be added. The srcset attribute will also become data-srcset. Please refer to the API Reference for more information about this method. // Render an image using the default set rules echo $image->render(); // <img src='image.jpg' alt='' srcset='{default set rules}'> // Render an image using custom set rules echo $image->render(["srcset" => "480, 1240x640"]); // <img src='image.jpg' alt='' srcset='image.480x0-srcset.jpg 480w, image.1240x640-srcset.jpg 1240w'> // Render an image using custom set rules and sizes // Also use the `markup` argument echo $image->render("<img class='image' src='{url}' alt='Image'>", [ "srcset" => "480, 1240", "sizes" => [1240 => 50], ]); // <img class='image' src='image.jpg' alt='Image' srcset='image.480x0-srcset.jpg 480w, image.1240x640-srcset.jpg 1240w' sizes='(min-width: 1240px) 50vw'> // Render an image using custom set rules and sizes // Enable uk-img echo $image->render([ "srcset" => "480, 1240", "sizes" => ["uk-child-width-1-2@m"], "uk-img" => true, ]); // <img src='image.jpg' alt='' data-uk-img data-srcset='image.480x0-srcset.jpg 480w, image.1240x640-srcset.jpg 1240w' sizes='(min-width: 960px) 50vw'> // Render an image using portrait mode // Default rule sets used: 320, 640, 768, 1024, 1366, 1600 // Portrait widths used: 320, 640, 768 // Original image is 1000px wide // Not possible to use portrait mode and custom sets or portrait widths in render() // Sizes attribute automatically added echo $image->render(["srcset" => true]); // <img src='image.jpg' alt='' srcset='image.320x569-srcset-hidpi.jpg 320w, image.640x1138-srcset-hidpi.jpg 640w, image.768x1365-srcset-hidpi.jpg 768w, image.jpg 1024w' sizes='(orientation: portrait) and (max-width: 768px) 50vw'> Configuration To configure this module, go to Modules > Configure > PageimageSrcset. Set Rules These are the default set rules that will be used when none are specified, e.g. when calling the property: $image->srcset. Each set rule should be entered on a new line, in the format {width}x{height} {inherentwidth}w|{resolution}x. Not all arguments are required - you will probably find that specifying the width is sufficient for most cases. Here's a few examples of valid set rules and the sets they generate: Set Rule Set Generated Arguments Used 320 image.320x0-srcset.jpg 320w {width} 480x540 image.480x540-srcset.jpg 480w {width}x{height} 640x480 768w image.640x480-srcset.jpg 768w {width}x{height} {inherentwidth}w 2048 2x image.2048x0-srcset.jpg 2x {width} {resolution}x How you configure your rules is dependent on the needs of the site you are developing; there are no prescriptive rules that will meet the needs of most situations. This article gives a good overview of some of the things to consider. When you save your rules, a preview of the sets generated and an equivalent method call will be displayed to the right. Invalid rules will not be used, and you will be notified of this. Portrait Mode Set Widths A comma limited list of widths to create HiDPI/Retina portrait variations for. Crop Ratio The portrait ratio that should be used to crop the image. The default of 9:16 should be fine for most circumstances as this is the standard portrait ratio of most devices. However, you can specify something different if you want. If you add a landscape ratio, it will be switched to portrait when used. Any crops in the set rules ({width}x{height}) are ignored for portrait mode variations as this ratio is used instead. UIkit Widths If your website theme uses UIkit, you can pass an array of UIkit width classes to Pageimage::sizes to be converted to sizes. The values stored here are used to do this. If you have customised the breakpoints on your theme, you should also customise them here. Please note that only 1- widths are evaluated by Pageimage::sizes, e.g. uk-width-2-3 will not work. Remove Variations If checked, the image variations generated by this module are cleared on Submit. On large sites, this may take a while. It makes sense to run this after you have made changes to the set rules. Image Suffix You will see this field when Remove Variations is checked. The value is appended to the name of the images generated by this module and is used to identify variations. You should not encounter any issues with the default suffix, but if you find that it conflicts with any other functionality on your site, you can set a custom suffix instead. Debug Mode When this is enabled, a range of information is logged to pageimage-srcset. PageimageSrcsetDebug.js is also added to the <head> of your HTML pages. This will console.log a range of information about the images and nodes using srcset on your page after a window.onresize event is triggered. This can assist you in debugging your implementation. The browser will always use the highest resolution image it has loaded or has cached. You may need to disable browser caching to determine whether your set rules are working, and it makes sense to work from a small screen size and up. If you do it the other way, the browser is going to continue to use the higher resolution image it loaded first. UIkit Features This module implements some additional features that are tailored towards UIkit being used as the front-end theme framework, but this is not required to use the module. Installation Download the zip file at Github or clone the repo into your site/modules directory. If you downloaded the zip file, extract it in your sites/modules directory. In your admin, go to Modules > Refresh, then Modules > New, then click on the Install button for this module. ProcessWire >= 3.0.123 is required to use this module.

Hello folks! Recently we published a new website for Brightline, a Project Management Institute (PMI) initiative together with leading global organizations dedicated to helping executives bridge the expensive and unproductive gap between strategy design and delivery. The previous website was made in Hugo as in the beginning it was a very simple website, but as the business needs changed, I decided to build this version in ProcessWire. Nothing fancy occurs behind the curtains, the need was more on getting some data in a way that makes it easier to create reports and to give access to PW's great admin to another team member. For the other website, that you can see here, I didn't implement a CMS on top of Hugo because for me it was quicker to edit the files and push to the repository. Some content is still being copied but 98% is done. A quick list of modules used: - ProCache, FormBuilder, ProFields, SeoMaestro, PageHits, TracyDebugger, MenuBuilder, AutoSmush, and other custom ones. I'm biased, but there a lot of good and useful content created by us and also by partners and all is free to download. :)

I want to be able to allow users with page clone rights the ability to clone locked pages with specified templates to a new unlocked copy, but without letting them edit the locked page. It looks as though I have the right permissions set to allow them to copy a page, but I need to add a hook in the /site/ready.php to unlock a page after it's copied. What method should I hook into? Edit: Figured it out. AddHookAfter Pages::Cloned. I had to be careful to pick the right argument though so that I was modifying the cloned copy and not the page that the copy was made from.

Hello, Will you please share a code snippet for future reference so that others can clearly see what to watch out for?

The easiest way I've found is to use Laravel Mix with two plugins, Laravel Mix Tailwind and Laravel Mix PurgeCSS to reduce file size by going through all php templates. But note, the website is not running the purged version yet, as I'm working on some configs on javascript generated classes and classes set by the user via admin (using RepeaterMatrix). But I also reduced manually Tailwinds output by using just a few colors and removing other pieces. Take a look on my webpack.mix.js file: And here goes Tailwind Config file. Note: I'm using Tailwind earlier version (prior to 1.0). Will upgrade it when possible, but it works just fine.

It's all in the facebook docs: https://developers.facebook.com/docs/plugins/comments/

Nothing in that regard yet. Let's just try to meet over a drink and learn from that point on whether to set up any form of "infrastructure" at all ?

You're correct that AdminBar only applies to users who are logged in. There's no "guest user" when it comes to AdminBar – only superusers and users with the "adminbar" permission will see anything out of the ordinary. Regardless, since AdminBar outputs features visible on the front-end, it's very much connected with everything else happening there. What you're missing here is that being logged in won't disable those browser extensions or nullify the effects of third party libraries – so it's not true that those features would only apply to users who aren't logged in. As such, it's very important that admin bar is as "tolerant" as possible, so that it won't break or cause new problems if you decide to implement a new JavaScript library on your site (or enable a browser feature/plugin).

@dragan Indeed nice catch. @bernhard Thanks for the RockSkinUikit module. Will use it in an upcoming project.

For what I understand you don't really need a plugin even though one could do it, from the last time I implemented something like this it's just javascript placed on the header/footer and placing the right HTML element.

Never had to use any such thing myself, but take a look here: https://modules.processwire.com/categories/social/ What exactly should this "comment system" do? Do you want to embed FB comments in your site? Something like this?

Hi Zeka, I was wondering how easy/difficult it has been to style the back office to black & white theme ? Any hints on how you achieved that ?

Definitely, I would recommend PW. In my case, the client didn't like the tree structure of pages, so I had to create separate Process modules for managing news, tags, banners, categories. I have found that it's much easier to control permissions and workflow via custom modules.

In a current project I am using a Repeater field to build a kind of pseudo-table, where each Repeater item is a row. Some of the rows are headers, and some have buttons that toggle corresponding checkbox fields in a hidden FormBuilder form. The problem was that when the Repeater items were collapsed I couldn't see which rows were headers and which contained buttons. I tried including the fields in the Repeater labels but it still didn't provide enough visual difference to be quickly recognisable. So I investigated how classes could be added to selected Repeater items in admin depending on the value of fields within the Repeater items. This is what I ended up with... In /site/ready.php // Add classes to selected service row Repeater items $this->addHookAfter('InputfieldFieldset::render', function(HookEvent $event) { /* @var $fieldset InputfieldFieldset */ $fieldset = $event->object; $attr = $fieldset->wrapAttr(); // Fieldsets in a Repeater inputfield have a data-page attribute if(isset($attr['data-page'])) { // Get the Repeater item $p = $this->pages((int) $attr['data-page']); // Check field values and add classes accordingly // If item is a header if($p->row_type && $p->row_type->id == 2) { $fieldset->addClass('header-row'); } // If item has a checkbox button if($p->fb_field) { $fieldset->addClass('has-checkbox'); } } }); In admin-custom.css (via AdminCustomFiles) /* Special repeater rows */ .Inputfield_service_rows .header-row > label { background:#29a5aa !important; } .Inputfield_service_rows .has-checkbox > label .InputfieldRepeaterItemLabel:before { font-family:'FontAwesome'; color:#73cc31; content:"\f058"; display:inline-block; margin-right:6px; } Result

Current behavior can be confusing (at least I tripped over it), see: This is the proposed behavior:

I haven't really read all of this thread, but just wanted to chime in with a brief overview of a help desk system I built. I can only show you screen shots from the test server — since the real one has sensitive data — but I think you get the idea. Unfortunately it's all pretty specific to our environment here, and was never intended to be released. Ticket List This is pretty small in the test environment. The lighting bolt icons open a modal that shows some "quick look" information for admins. Last comment, ticket history, etc... It's just a way to quickly peek into a ticket without opening it. Ticket View Many of these test tickets are filled with a ton of content, but here's one that shows some of the features. It's conversation based. You can attach specific equipment (we have several equipment databases managed in other PW modules). You can add files/images to any reply. Typical help desk stuff really. Reply options This is at the bottom of the discussion, a lot like it is here in the discussion forum. Agents can reply or create an internal note.

Run "php -i" from the command line. It will list all installed modules, and even more, it will give you the location of the php.ini file used by the php cli - it's not neccessarily the same as your webserver module uses. So on linux, running php -i | grep php.ini or on windows php -i | findstr php.ini will give you a line reading "Loaded Configuration File => PATH/TO/php.ini". Make sure that this file also loads all required modules. It might also be worth it to make sure that the php executable you start in fact belongs to the same installation as the library loaded into the webserver. With the popularity of bundles like [X|W|L|M]AMP I've often seen the path still pointing to outdated older php installations while the server used a far newer version.