Leaderboard

After a long time of concept work and a (not) so long time of development I launched a new website: https://www.marvin-wieckhorst.de Beware: German Language ? The whole site consists of 5 pages only. But the pages on this one are huge and full of different design elements. I'm trying to split it into interesting screenshots here but I think it's best if you visit the site and have a look at it by yourself. Here are some pictures, the tech talk section is below. Introduction with large images and catchy headlines on each page: Different teaser elements: Rocket animation with some vector images: Custom build ajax forms for the booking of the different training packages. These forms are presented in a modal. These forms are feeded directly from the backend via my custom form solution: Tech Talk: Well first a bit of design talk. Concept and design was the greater challenge than the later development. The customer had very clear expectations of what the different design elements should look like. So the real challenge was to get all the ideas right and put into a working design that does not look too overwhelming and convoluted in the end. PLUS it had to be responsive of course. Fitting giant design elements full of content that look awesome on a 2560 x 1440 display are difficult to handle on an iPphone display. Used Modules: I always try to use at few modules as possible. No pro fields were used on this one. Everything you see was build with the tools that Processwire offers out-of-the box or which is are in the core ? However some modules are just a must have in my opinion and there is what I used (and use in all my other projects aswell): - AOIM+ for bundling and compressing of JS+CSS - WireMail SMTP for all mail work - SEOMaestro - PageImageSource for WEBP image support - TracyDebugger For the frontend work I am using good ol' Bootstrap 4. Basically because of the excellent grid system / frontend forms and form validation / modals. Most else Bootstrap offers is not included in my build. All other frontend elements are custom. Plugins i used: - aos.js for all animations - lazysizes.js - owl carousel - masonry.js - niceselect for the custom dropdown menus inside the modal form There is also a video player included the the videos for this site are not produced yet. All together I get a really nice lighthouse score for the site: That's it for now. Have a nice week!

A Fieldtype for dynamic options that are generated at runtime via a hook. Configuration Inputfield type You can choose from a range of inputfield types on the Details tab of a Dynamic Options field. Your field will return a string or an array depending on if the selected input field type is for "single item selection" or "multiple item selection". Maximum number of items You can define a maximum number of items the field is allowed to contain. The core inputfields supported by this module will become disabled once the limit is reached. This option is only applicable if you have selected an inputfield type that is for multiple item selection. Format as Pagefile/Pageimage object(s) If the field will store paths/URLs to Pagefiles/Pageimages then you can enable this option to have the formatted value be a Pagefile/Pageimage object for "single" fields or an array of Pagefile/Pageimage objects for "multiple" fields. There is a related Select Images inputfield module that allows you to visually select image thumbnails. Defining selectable options Selectable options for a Dynamic Options field should be set in a FieldtypeDynamicOptions::getSelectableOptions hook in /site/ready.php. The hook should return an array of options as 'value' => 'label'. An example hook is shown on the Details tab of a Dynamic Options field: $wire->addHookAfter('FieldtypeDynamicOptions::getSelectableOptions', function(HookEvent $event) { // The page being edited $page = $event->arguments(0); // The Dynamic Options field $field = $event->arguments(1); if($field->name === 'your_field_name') { $event->return = [ 'red' => 'Red', 'green' => 'Green', 'blue' => 'Blue', ]; } }); Formatted value If a Dynamic Options field uses a "single" input type then its formatted value is a string, and if it uses a "multiple" input type then its formatted value is an array. The unformatted value of a Dynamic Options field is always an array. Also see the Configuration section above for description of an option to have the formatted value be Pagefile/Pageimage object(s). Examples of possible uses $wire->addHookAfter('FieldtypeDynamicOptions::getSelectableOptions', function(HookEvent $event) { // The page being edited $page = $event->arguments(0); // The Dynamic Options field $field = $event->arguments(1); // Select from the "files" field on the page if($field->name === 'select_files') { $options = []; foreach($page->files as $file) { // Value is basename, label is description if one exists $options[$file->basename] = $file->get('description|basename'); } $event->return = $options; } // Select from files in a folder if($field->name === 'select_folder_files') { $options = []; $path = $event->wire()->config->paths->root . 'my-folder/'; $files = $event->wire()->files->find($path); foreach($files as $file) { // Value is full path, label is basename $options[$file] = str_replace($path, '', $file); } $event->return = $options; } // Select from non-system templates if($field->name === 'select_template') { $options = []; foreach($event->wire()->templates as $template) { if($template->flags & Template::flagSystem) continue; $options[$template->id] = $template->name; } $event->return = $options; } // Select from non-system fields if($field->name === 'select_field') { $options = []; foreach($event->wire()->fields as $field) { if($field->flags & Field::flagSystem) continue; $options[$field->id] = $field->name; } $event->return = $options; } // Select from FormBuilder forms if($field->name === 'select_formbuilder_form') { $form_names = $event->wire()->forms->getFormNames(); // Use form names as both keys and values $event->return = array_combine($form_names, $form_names); } }); https://github.com/Toutouwai/FieldtypeDynamicOptions https://processwire.com/modules/fieldtype-dynamic-options/

This was probably discussed and maybe I'm just searching wrong, so apologies if I'm spamming. In a scenario where we have a production website with a ton of content, and a local dev version with less stuff for tests and sanity. We make structural changes like adding a new page template on the local, adding a couple of fields in an existing one, changing settings on a field and whatnot, and in the end want to publish those changes to production. Any good approaches for doing such a thing without moving the whole content around or breaking it? I mean, personally I've been doing that with DB backups and I have to lock my client out of the CMS while I'm working on updates. No likey. Thanks, H

I know your feelings now, I've been there. In my experience PW is great for creation, but very bad for maintenance. The fact that the entire site configuration is dynamic based on the database tables is a big deal. One piece of advice, if you are going to use the Export/Import pages option, never think of using the ID of the pages in functions and logic in general.

There a pros and cons for each and every possible way you can think of. I personally prefer combining and inlining my CSS to have it right away. In case the amount of CSS is way too much to inline, I only inline critical/base and page specific CSS, while loading CSS for cookie banners or the footer in a separate file. In terms of multiple separate files HTTP/2 allows parallel downloads so there shouldn't be any render blocking issues that throw off your page speed in a dramatic way. At least not with custom CSS. Bootstrap and UIKIT might be a different story. For those with ProCache there is a minify option that allows combining multiple CSS files (only files in the <head>) which is a great way to reduce some overhead. While it depends on how much CSS is generated through your module you might want to run a few tests against https://web.dev/measure/ to check for the best option. At the end of the day we talk about text files that run through Gzip or brotli and shrink way down in size. Well... In case you really want to optimize each and every page down to the bare minimum absolute perfection this would be the way to go. Combining everything into one file would be way more of an overhead. At least in my opinion.

No. Not right now. Everything works but that part is missing.

Sorry for the delay — Combo field is now supported in SearchEngine 0.31.0. The end result should be very similar to that generated by @xportde modification to Indexer, but I decided to implement it in a slightly different way. Let me know if you run into any issues with this solution, though. Just trying to figure out an approach that would/could work for other, yet unforeseen fieldtypes in the future ?

Just created a PR in case you don't get notifications ? https://github.com/adrianbj/TracyDebugger/pull/77

Nothing serious - I use it on several sites without any real problems. I guess I just don't really like the inheritance / defaults setup. It's also a shame that Wanze isn't really around here much anymore.

ProcessWire's core comes with a lot of helpful debugging tools and capabilities built-in. In this post we'll cover some of these useful tools and how to use them— https://processwire.com/blog/posts/debugging-tools-built-in/

Did a quick test:

This would be some kind of a dream for me to have in ProcessWire. ?‍♂️