Search the Community

Admin Theme Canvas A minimal admin theme with optimised page editor UI, based on Uikit 3. Currently this is close to stable, but users are advised to be cautious and test thoroughly. This theme is tested in all major Browsers including IE 11, Edge (>85), Chrome (>85), Firefox (>81), Safari (>11). If you find any bugs or have ideas for improvements, feel free to post your feedback. Download from Github Download from Modules Page Features Minimal black and white admin theme Fixed masthead navigation Direct access to page tree navigation inside page dropdown Less distraction for editors (when editing a page, the tabs are displayed as a dropdown menu inside the main navigation) Options to customise the ui Less distraction for editors Direct access to page tree navigation inside dropdown Page tree Options to customise the ui Login (inspired by AdminThemeBoss) Requirements Process Wire 3.0.100 or greater Installation Go to “Modules > Site > Add New“ Paste the Module Class Name “AdminThemeCanvas“ into the field “Add Module From Directory“ Click “Download And Install“ On the overview, click “Download And Install“ again… On the following screen, click “Install Now“ Go to your user profile page and change the theme to Admin Theme Canvas

Hi all ? I made this searchable UIkit 3.x documentation site to share with everyone. The official doc is great but you can't search across the whole doc. Anyway, here is the URL: https://uikitdocs.netlify.app/ What's missing is the live examples. Perhaps some of you can contribute? Github repo link is on the website as well. Cheers

https://github.com/chrisbennett-Bene/AdminThemeTweaker Inspired by @bernhard's excellent work on the new customisable LESS CSS getting rolled into the core soon, I thought I would offer up the module for beta testing, if it is of interest to anyone. It takes a different approach to admin styling, basically using the Cascade part of CSS to over-ride default UiKit values. Values are stored in ModuleConfig Module creates a separate AdminThemeTweaker Folder at root, so it can link to AdminThemeTweaker.php as CSS AdminThemeTweaker.php reads the module values, constructs the CSS variables then includes the CSS framework Can be switched on and off with a click. Uninstall removes everything, thanks to bernhard's wonderful remove dir & contents function. It won't touch your core. It won't care if stuff is upgraded. You won't need to compile anything and you don't need to touch CSS unless you want to. It won't do much at all apart from read some values from your module config, work out the right CSS variables to use (auto contrast based on selected backgrounds) and throw it on your screen. You can configure a lot of stuff, leave it as it comes (dark and curvy), change two main colors (background and content background) or delve deep to configure custom margins, height of mastheads, and all manner of silly stuff I never use. Have been developing it for somewhere around 2 years now. It has been (and will continue to be) constantly tweaked over that time, as I click on something and find something else to do. That said, it is pretty solid and has been in constant use as my sole Admin styling option for all of those 2 years. If nothing else, it would be great if it can provide any assistance to @bernhard or other contributor's who may be looking to solve some of the quirkier UiKit behavior. Has (in my opinion) more robust and predictable handling of hidden Inputfields, data-colwidths and showIf wrappers. I am very keen to help out with that stuff in any way I can, though LESS (and any css frameworks/tools basically) are not my go. I love CSS variables and banging-rocks-together, no-dependency CSS you can write with notepad.

could someone help me find the javascript bug? https://codepen.io/bbblgmsp/pen/LYxWJJa or here: https://foobar.roofaccess.org/carousell/ I want it to be NOT draggable on desktop but draggable on mobile devices. Also, on mobile, the element that I drag into focus should automatically be active, but on desktop, only when I click it. It works fine on desktop, but when you drag on mobile, after the dragged element is active and you click it, it switches back and forth between this and the previous element (assigns the active class to the previous element). I already tried to find help elsewhere, since this is not directly PW related but only frontend, but it's hard to find support or a community for uikit. PW seems to be using it quite a lot though… Thanks for help

We're currently working on a few sites that have some users with very limited access; most importantly, some users can only edit their own profile and nothing else in the backend. We're using AdminThemeUiKit, so the CMS navbar only contains the site logo and the username for those users. The problem is that the crucial "View site" link that gets you back to the frontend is hidden in the dropdown behind the username. This isn't immediately obvious (and TBH it does feel out of place there, even when you know it's there). I'm looking for ways to make the "back to site" link more visible – and I also think this is worth a discussion for AdminThemeUiKit in general. Here's what I have considered: Ideally, clicking the logo would take you back to the frontend (currently, you just get a blank page with nothing but an 'edit profile' button). I checked the settings, but the Uikit theme only has options to open the site tree or open a side navigation. Maybe a new option to go back to the frontend could be added? Or maybe the method that gets the logo link should be made hookable, so I could retain the default behaviour for editors, but change the link for users with limited access. An additional link in the menu would also work. But the only way I can think of to add this would be a Process module that just redirects to the homepage. But that's a bit overcomplicated, and I would like to do this without the additional redirect. Of course, copying the theme and modifying it manually or inserting a prominent link with JavaScript would work, but both options are sort of hacky and require some upkeep. Is there a better way? Have you come across this problem yet, and how did you solve it? I'm looking forward to suggestions!

Admin Theme Boss A light and clear theme based on Uikit 3 Features Five unique color options Beautifully redesigned login screens Modern typography using Roboto Condensed Extended breadcrumb with edit links Extends AdminThemeUikit, so you can continue using all current and future AdminThemeUikit features Option to activate theme for all users Compatibility with AdminOnStreoids and other third party modules Updated and Releases There is a shiny new release page where you can subscribe to updates for new releases of AdminThemeBoss. Color Variants: ProcessWire Blue Dark Black Vibrant Blue Happy Pink Smooth Green *new with 0.6.1* Requirements Requires a current ProcessWire version with AdminThemeUikit installed and activated. Installation Make sure AdminThemeUikit is activated Go to “Modules > Site > Add New“ Paste the Module Class Name “AdminThemeBoss“ into the field “Add Module From Directory“ Click “Download And Install“ On the overview, click “Download And Install“ again… On the following screen, click “Install Now“ Manual Installation Make sure the above requirements are met Download the theme files from GitHub or the ProcessWire Modules Repository. Copy all of the files for this module into /site/modules/AdminThemeBoss/ Go to “Modules > Refresh” in your admin Click “Install“ on the “AdminThemeBoss“ Module

Small annoyance: I get a horizontal scrollbar in UIkit admin area - or actually Admin Theme Boss based on Uikit 3. I tried to fix it with CSS, but had trouble isolating/targeting it and don't want to mess with module or core files. I think this issue has been reported before. Is there a recommended fix?

I have been searching a while for pre-made UIkit 3 themes that I can download in some form and use. But I have not found much. I work with variables and compile most times, but sometimes I would prefer working with a "finished" theme as a starting point I have found the following resources: https://github.com/zzseba78/Kick-Off https://github.com/uikit/awesome-uikit Do anyone else know of UIkit 3 themes that you could list?

Hello ? I have set up pagination on a mulitlanguage site. I've done this before, but this time I have a problem I can't solve. Pagination is activated on 'parent-template' and 'child-template' just to be sure ? This is my code: $children = $page->children('limit=1'); foreach($children as $child) { $title = $child->title; echo $title; } echo $children->renderPager(); The navigation is output correctly and the link look correct as well 'parent-page/page2/'. But when I click the link, the site seems to redirect back to 'parent-page/ Any help would be greatly appreciated ? - Peter

Hi guys I know some of you are UIKit fans like me. I built a site recently using UIKit 3 and I'm having some layout issues on IE 11 and largest breakpoints. You have to set quite a big resolution or have a large monitor to experience this as it only happens on largest breakpoints. The main column in the above URL is successfully centered in most browsers except IE11. On IE 11, it shifts to the right. Basically it's a DIV using the uk-width-expand selector and then I have a custom max width and a margin in there to centre the content horizontally. Here's a simple CodeKit and JSFiddle of the issue https://codepen.io/edenstudios/pen/qvWpGo https://jsfiddle.net/EdenSt/auekfgqt/8/ Thanks P

This is a website for the musical area of the protestant town church Pforzheim, Germany. Our agency designconcepts developed a website that provides informations about the choirs, ensembles and orchestras as well as dates for their rehearsals, services and concerts. The website was build with help of the framework UIkit. www.musik.stadtkirche-pforzheim.de Features: Events Download dates Events The events for rehearsals, services and concerts were created in Microsoft Excel and then imported as pages from CSV. For better organization, events are cross-referenced with choirs, ensembles and orchestras. Services and concerts are displayed in a events list, but rehearsals are only displayed on the page of the choir, ensemble or orchestra, to make the events list more compact. Download dates It is possible to download every event date as ICS file, which will be generated on clicking the download button. You can then add this event easily to your calendar app and stay up-to-date. Modules used: Email Obfuscation (EMO) Front-End Page Editor Import Pages from CSV Markup Sitemap XML ProCache Tracy Debugger Upgrades Wire Mail SMTP Regards, Andreas

Gallery Claeys is a art gallery in Freiburg, Germany, with focus on exhibitions of female artists. Our agency designconcepts developed a website that features the latest exhibitions of the gallery as well as an archive of previous exhibitions. Every artist has its own page with an excerpt of their works and a vita of the artist. The website was build with help of the framework UIkit and Barba.js for smooth transitions between pages. www.galerie-claeys.de Features: Exhibitions Page transitions Exhibitions On the homepage you can find a preview of upcoming or current exhibitions as well as an archive of previous exhibitions. Based on the date the exhibitions get automatically sorted in one of the three categories (preview, current or archive). Each category has its own deep-link with URL segment. Page transitions The smooth fading page transitions are made with Barba.js. Modules used: Front-End Page Editor Markup Sitemap XML ProCache Tracy Debugger Upgrades Regards, Andreas

Not sure where I originally saw it while lurking around the forums, but someone, somewhere at some time was asking about styling Uikit checkboxes as toggle-style switches, much like the ones at the bottom of this post asking me if I want to be notified of replies. So here is my humble offering, rough and ready, which can be thrown in at the bottom of your Uikit css as a starting point. Everything is based on ems and rems, so you can increase size as you desire by altering the single instance of font-size. It only targets single instances of labels within a specific field to a) try to limit unintended consequences and b) because in those cases it often seems more user-friendly to have an on/off binary switch rather than a checkbox. It's still totally a checkbox, just styled differently. .uk-form-controls-text label:only-of-type input.uk-checkbox { font-size:.8rem; margin-top:0; position:relative; -webkit-appearance:none; outline:none; width:4em; height:2.4em; border:2px solid #D6D6D6; border-radius: 3em; box-shadow:inset 5em 0 0 0 #DDD; flex-shrink: 0; } .uk-form-controls-text label:only-of-type input.uk-checkbox:after { content:""; position:absolute; top:.25em; left:.25em; background:#FFF; width:1.6em; height:1.6em; border-radius:50%; transition:all 250ms ease 20ms; box-shadow:.05em .25em .5em rgba(0,0,0,0.2); } .uk-form-controls-text label:only-of-type input.uk-checkbox:checked { background-color: transparent; box-shadow:inset 5em 0 0 0 #4ed164; border-color:#67bba5; } .uk-form-controls-text label:only-of-type input.uk-checkbox:checked:after { left:1.85em; box-shadow:0 0 1em rgba(0,0,0,0.2); } label:only-of-type input.uk-checkbox:checked + span { color:#008a00; transition:all 250ms ease 20ms; } .InputfieldCheckbox .InputfieldContent label:only-of-type {display:flex;} label:only-of-type input.uk-checkbox + span { color:#c3c3c3; display:flex; align-items:center; line-height:1.1; } /* Below is only necessary if you want the optional "tick" after items when selected */ label:only-of-type input.uk-checkbox + span:after { flex-shrink:0; margin-left:.5em;width:2em; opacity:0; content:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 250 250'%3E%3Ccircle cx='125' cy='125' r='125' fill='%23231F20' opacity='.1'/%3E%3Cpath fill='%230B8B44' d='M95.823 139.432l-32.492-32.56-31.872 31.883-.008-.008 63.72 63.732L218.549 79.116 187.494 47.52z'/%3E%3C/svg%3E"); } label:only-of-type input.uk-checkbox:checked + span:after { opacity:1; transition: opacity 250ms ease 150ms; }

With around 3,400 employees worldwide, IMS Gear develops and produces specific drive solutions for international customers. In addition to the focus on the automotive industry, the focus is on applications for industry and e-mobility concepts. Finding new employees is important for the day-to-day business of IMS Gear. For this reason our agency designconcepts developed a job portal, where potential employees can easily inform themselves about the company, the application process and find the job they are looking for. The website was build with help of the framework UIkit. jobs.imsgear.com Features: Job finder Job offer PDF Newsletter Fly-in information pages Job finder Core of the website is the job exchange with the job finder. Here you get a list of all available jobs which you can filter by three main areas (categories, task areas and locations). Or you can type in anything in the search field and filter by various keys (for example ID, title, country and hidden tags). The job finder was build with jQuery Typeahead, which was really helpful in building this complex logic. If you want to know which job is the closest to you, you can sort them by distance. Job offer PDF Every job offer has a printable PDF version for newspapers or other job platforms. The job offer PDF can be created by checking a checkbox in the back-end and saving the page. The PDF will then be created with all needed fields of that page and DocRaptor. This workflow is really easy for editors and guarantees a consistent layout for all created PDFs. Newsletter If there is no job for you available at the moment, you can subscribe to a newsletter with your areas of interest. Then you will be notified daily if a job is available with your interests. Instead of using a separate newsletter tool, the nice module Newsletter Subscription was used to manage subscribers. The newsletter will be send via a shell script executed by a daily cron job. Modules used: Continents and Countries Front-End Page Editor Functional Fields Markup Sitemap XML Newsletter Subscription ProCache Repeater Matrix Tracy Debugger Upgrades Wire Mail SMTP Regards, Andreas

S. Siedle & Söhne Telefon- und Telegrafenwerke OHG is one of the leading manufacturers of building communications technology in Germany and Europe. For a company of this size it is important to have a solid brand communication. For this reason our agency designconcepts developed a portal where the employees of the company as well as others who work with or have interest in their brand can find everything that is important for the brand Siedle. The website introduces the brand, provides informations for different topics (for example logos, typography, colors etc.) and has a large Media-Center with images, videos and documents. The website was build with the framework UIkit. brand.siedle.com Features: Repeater Matrix Protected Content Media-Center Cart Auotcomplete Search Repeater Matrix The information pages are build with a Repeater Matrix field and have a two columns layout. To be even more flexible, a section is a content element containing two Repeater Matrix fields for each column. This maybe sound crazy at first but was no problem and made complex layouts possible. ? Protected Content Not all of the informations are meant for guests, so we made it possible to protect each page, section and content element with a checkbox. If this checkbox is checked, the content will only be visible for logged-in users. Media-Center The core of the brand portal is the Media-Center. The Media-Center is actually a mirror of a separate digital assets management database where the client can manage images, videos and documents with a nice interface in a protected environment. All new assets will be synced via a shell script containing PHP and curl commands calling the API of the database. This script will be executed every 15 minutes via cron job. This way all of the assets are saved as pages in ProcessWire and we can expand them with our own logic and fields. Also for the unlikely case that the database is not available, the Media-Center would still work. Cart Inside the Media-Center you can add assets to your cart. This cart is for downloading selected assets or sharing them with others. A cart will be accessible for 30 days. Modules used: Admin Custom Files Continents and Countries Email Obfuscation (EMO) Front-End Page Editor Functional Fields Markup Sitemap XML ProCache Repeater Matrix Tracy Debugger Upgrades Regards, Andreas

The Katharinenhöhe is a rehabilitation clinic in the Black Forest (Germany) for teenagers, young adults and families with children who suffer from cancer. Our agency designconcepts was lucky to relaunch their website. Our goal was to unify the previous separated areas (families and teenagers/young adults) and provide a clear structure for potential patients. Also we wanted to show that the clinic is a nice place to live, despite the circumstances. We rebuild the website from scratch with the framework UIkit and used large images as well as videos. www.katharinenhoehe.de Features: Repeater Matrix Tour Contrast Theme Glossary Autocomplete Search Facebook Repeater Matrix Most of the pages use a basic page template which have one Repeater Matrix field. This field has around 15 different content elements, so it is easy to build a page with different elements in various amounts. Tour On the site tour we build a image map with markers showing interesting places of the clinic. For this task the nice module Image Marker and the Marker component of UIkit came in handy. The tour is available on every page containing a marker. Contrast Theme For a better reading experience you can switch to a more contrasting theme of the website by clicking the theme switcher (on the top right). This is a separate stylesheet with darker color variables. The choice will be saved in a session variable and stays as long as the browser is opened. Glossary To explain complicated medical terms better, we highlight a set of terms in every textarea they occur and explain them with a tooltip. For this task we wrote a simple Textformatter module which looks for the terms in a page and replaces the terms with the tooltip. This tutorial by @benbyf helped me. Thank you! ? Modules used: Color Email Obfuscation (EMO) Front-End Page Editor Functional Fields Image Marker Markup Sitemap XML Phone ProCache Repeater Matrix Tracy Debugger Upgrades Regards, Andreas

Is the UIKit admin theme supposed to look like this when editing fields and templates? It seems like I did something wrong.

What build tools do people use with processwire? Most build tools I have tried are either solely designed for single-page applications or don't support bundling npm packages. So far, I have been downloading third-party libraries and including them in my html. While this works, it isn't great when you want to update to a newer version. It also involves committing often hundreds of files not associated with the project when using git. For this reason, I would like to use a package manager to handle all of the updating for me and keeping my git directory nice and clean. After doing some research, it seems that npm is by far the most popular package manager. I find this strange considering it was designed for ndoe.js which is server side software but I can look past that. I have had some experience with webpack when I was learning how to use Vue.js for making single page applications. For that purpose, it worked pretty well but was also extremely confusing at first. Everywhere I go I see webpack being recommended as the number one build tool for front-end web applications. However, I have struggled to get it working with anything that isn't a single-page application. It seems to be designed to bundle everything into one or two js files. This doesn't really work in a setup like processwire. I would like to be able to import certain css and js into pages only as needed. For instance, if I only need a slideshow on one page, it doesn't make sense to include the code that does that on every page. That's not to say you won't have some global css and js. I additionally don't like how complicated it is to setup a webpack project and how webpack imports css inside js files. I decided to try Brunch which boasts being simpler than other build tools, including webpack. I must say, I am fairly impressed with it so far with it's ease of use. But I once again ran into the problem of it being designed for single-page applications. For example, I wanted to use lightbox on a few pages. After installing it from npm, I couldn't figure out a good way to include it's css. Brunch has a setting that let's you include styles from npm packages but it includes them globally. This means every single processwire page would have css for displaying lightboxes even when I don't need them. This would work but seems to go against the whole idea of being modular. I am also trying to use uikit as an npm package to no avail. I found somebody else with similar issues but was never answered: I noticed that ryan opted to just include a static version of uikit in AdminThemeUikit. Is this the recommended way of doing things? Have I got it all wrong? Doesn't this introduce pains whenever uikit needs updating? All I want is a better way to handle all my dependencies. I have been looking for the correct way to do this and it's beginning to drive me insane

Lets discuss the new admin theme, there has been very little talk about it, a few questions about its status and some simple designs by a few users. Have you played with it? Do you like it? Do you dislike it? Of course I'm not talking about its design, but the way its structured, how it works and the features it offers so far. ------------------------------ I'm working on a purple color scheme for it and it turned out quite well (imo), but one thing I dislike is the use of iframes. I haven't used iframes before so it might be just me, but I'm struggling with them when it comes to javascript. When iframes are used all scripts are loaded in every frame, which can lead to unexpected results. Javascript is an easy way to add, remove, move etc. elements in the admin, but the iframes complicate things. What are your thoughts? Is it just me? Here's a screenshot of the purple theme:

I would like every new Site Profile like new REGULAR Profile to have modern support for quick creation like browser sync, minify css, js . Something on the style below: https://foundationpress.olefredrik.com/ https://understrap.com/ One profile that does not have any CSS frontend attached but has the features needed to quickly add eg pagination, comment form, or site menu something like: https://roots.io/sage/ OR https://laravel.com/docs/5.5/mix I'm not very godd with js but webpack.js meybe is good for this solution ... I would like to know what advanced users in the front end think about this combination and what would be the best ...

» A more exhaustive version of this article is also available on Medium in English and German « First, we'd like to thank the very helpful community here for the excellent support. In many cases we found guidance or even finished solutions for our problems. So a big THANK YOU!!! We are pleased to introduce you to the new Ladies Lounge 18 website. The next ICF Women’s Conference will take place in Zurich and several satellite locations across Europe. We embarked on bold new directions for the development of the website — in line with the BRAVE theme. Ladies Lounge 18 — ICF Woman’s Conference website on Processwire ICF Church is a European Church Movement that started 20 years ago in Zurich and since experienced tremendous growth. There are already well over 60 ICF churches across Europe and Asia. ICF is a non-denominational church with a biblical foundation that was born out of the vision to build a dynamic, tangible church that is right at the heartbeat of time. With the growth of the Ladies Lounge from a single-site event to a multi-site event, the demands and challenges to the website have also increased. A simple HTML website no longer cuts it. Simplified frontend Our goal with the development of the new site was it to present the different locations — with different languages and partly different content — under once uniform umbrella — while at the same time minimising the administrative effort. In addition to the new bold look and feel, this year’s website is now simpler and easier and the information is accessible with fewer clicks. Some highlights of the new website Thanks to processwire, all contents are maintained in one place only, even if they are displayed several times on the website 100% customised data model for content creators Content can be edited directly inline with a double-click: Multi-language in the frontend and backend Dynamic Rights: Editors can edit their locations in all available languages and the other content only in their own language Easy login with Google account via OAuth2 Plugin Uikit Frontend with SCSS built using PW internal features (find of files…) Custom Frontend Setup with Layout, Components, Partials and Snippets Only about 3 weeks development time from 0 to 100 (never having published a PW before) Despite multi-location multi-language requirement, the site is easy to use for both visitors and editors: The search for a good CMS is over It’s hard to find a system that combines flexibility and scope with simplicity, both in maintainance and development. The search for such a system is difficult. By and large, the open source world offers you the following options: In most cases, the more powerful a CMS, the more complex the maintenance and development It is usually like that; The functionality of a system also increases the training and operating effort — or the system is easy to use, but is powerless, and must be reporposed for high demands beyond its limits. Quite different Processwire : You do not have to learn a new native language, you don’t have to fight plugin hell and mess around with the loop, you don’t have to torment yourself with system-generated front-end code or even learn an entierly new, old PHP framework . All our basic requirements are met: Custom Content Types Flexible and extensible rights-management Multilanguage Intuitive backend Well curated Plugin Directory Actually working front-end editing Simple templating with 100% frontend freedom In addition, Processwire has an exceptionally friendly and helpful community. As a rule of thumb, questions are answered constructively in a few hours . The development progresses in brisk steps , the code is extremely easy to understand and simple. Processwire has a supremely powerful yet simple API , and for important things there are (not 1000) but certainly one module which at least serves as a good starting point for further development. Last but not least, the documentation is easy to understand, extensive and clever . Our experience shows, that you can find a quick and simple solution with Processwire, even for things like extending the rights-management — most of the time a highly complex task with other systems. This is also reflected positively in the user interface. The otherwise so “simple” Wordpress crumbles when coping with more complex tasks. It sumbles over its apparent simplicity and suddenly becomes complex: Old vs. New — Simple and yet complicated vs. easy and hmmm … easy Our experience with Processwire as first-timers Before we found out about Processwire, we found CraftCMS on our hunt for a better CMS. We were frustrated by the likes of Typo3, WP or Drupal like many here. CraftCMS looked very promising but as we were digging deeper into it, we found it did not met our requirements for some big projects in our pipeline that require many different locations, languages and features. Initially we were sceptical about Processwire because; A. CraftCMS Website (and before UiKit also the admin interface) simply locked much nicer and B. because it is built on top of a Framework It was only later, that we found out, that NOT depending on a Framework is actually a very good thing in Processwire's case. Things tend to get big and cumbersome rather then lean and clean. But now we are convinced, that Processwire is far superior to any of the other CMS right now available in most cases. The good Processwire is the first CMS since time immemorial that is really fun to use (almost) from start to finish— whether API, documentation, community, modules or backend interface. Every few hours you will be pleasantly surprised and a sense of achievement is never far away. The learning curve is very flat and you’ll find your way quickly arround the system. Even modules can be created quickly without much experience. Processwire is not over-engineered and uses no-frills PHP code — and that’s where the power steams from: simplicity = easy to understand = less code = save = easy maintanance = faster development … Even complex modules in Processwire usually only consist of a few hundred lines of code — often much less. And if “hooks” cause wordpress-damaged developers a cold shiver, Hooks in Processwire are a powerful tool to expand the core. The main developer Ryan is a child prodigy — active, eloquent and helpful. Processwire modules are stable even across major releases as the code base is so clean, simple and small. There is a GraphQL Plugin — anyone said Headless-CMS?! Image and file handling is a pleasure: echo "<img src='{$speaker->image->size(400, 600)->url}' alt='{$speaker->fullname}' />"; I could go on all day … The not soooo good Separation of Stucture and Data The definition of the fields and templates is stored in the database, so the separation between content and system is not guaranteed. This complicates clean development with separate live- and development-environments. However, there is a migration module that looks promising — another module, which is expected to write these configurations into the file system, unfortunately nuked our system. I'm sure there will be (and maybe we will invest) some clever solutions for this in the future. Some inspiration could also be drawn here, one of the greatest Plugins for WP: https://deliciousbrains.com/wp-migrate-db-pro/ Access rights The Access-Rights where missing some critical features: Editors needed to be able to edit pages in all languages on their own location, and content on the rest of the page only in their respective language. We solved it by a custom field adding a relation between a page the user and a role that we dynamically add to the user to escalate access rights; /** * Initialize the module. * * ProcessWire calls this when the module is loaded. For 'autoload' modules, this will be called * when ProcessWire's API is ready. As a result, this is a good place to attach hooks. */ public function init() { $this->addHookBefore('ProcessPageEdit::execute', $this, 'addDynPermission'); $this->addHookBefore('ProcessPageAdd::execute', $this, 'addDynPermission'); } public function addDynPermission(HookEvent $event) { $message = false; $page = $event->object->getPage(); $root = $page->rootParent; $user = $this->user; if ($user->template->hasField('dynroles')) { if ($message) { $this->message('User has Dynroles: '.$user->dynroles->each('{name} ')); } // for page add hook… if ($page instanceof NullPage) { // click new and it's get, save it's post… $rootid = wire('input')->get->int('parent_id') ? wire('input')->get->int('parent_id') : wire('input')->post->parent_id; if ($message) { $this->message('Searching Root '.$rootid); } $root = wire('pages')->get($rootid)->rootParent; } elseif ($page->template->hasField('dynroles')) { if ($message) { $this->message('Page "'.$page->name.'" has Dynroles: '.$page->dynroles->each('{name} ')); } foreach ($page->get('dynroles') as $role) { if ($role->id && $user->dynroles->has($role)) { if ($message) { $this->message('Add dynamic role "'.$role->name.'" because of page "'.$page->name.'"'); } $user->addRole($role); } } } if (!($root instanceof NullPage) && $root->template->hasField('dynroles')) { if ($message) { $this->message('Root "'.$root->name.'" has dynamic roles: '.$root->dynroles->each('{name} ')); } foreach ($root->get('dynroles') as $role) { if ($role->id && $user->dynroles->has($role)) { if ($message) { $this->message('Add dynamic role "'.$role->name.'" because of root page "'.$root->name.'"'); } $user->addRole($role); } } } } } With the Droles and Access Groups Modules we were not able to find a solution. I thought it was hard to get absolute URLs out of the system — Ha! What a fool I was. So much for the topic of positive surprise. (Maybe you noticed, the point actually belongs to the top.) But while we’re at it — that I thought it would not work, was due to a somewhat incomplete documentation in a few instances. Although it is far better than many others, it still lacks useful hints at one point or another. As in the example above, however, the friendly community quickly helps here. processwire.com looks a bit old-fashioned and could use some marketing love. You notice the high level to moan with Processwire. There is no free Tesla here. Conclusion Processwire is for anyone who is upset about any Typo3, Wordpress and Drupal lunacy — a fresh breeze of air, clear water, a pure joy. It’s great as a CMF and Headless CMS, and we keep asking ourselves — why is it not more widely known? If you value simple but clean code, flexibility, stability, speed, fast development times and maximum freedom, you should definitely take a look at it. You have to like — or at least not hate PHP — and come to terms with the fact that the system is not over-engineerd to excess. If that’s okay with you, everything is possible — with GraphQL you can even build a completely decoupled frontend. We are convinced of the simplicity of Processwire and will implement future sites from now on using it as a foundation. Links & resources we found helpful API documentation and selectors API cheatsheet pretty handy, not quite complete for version 3.0 Captain Hook Overview of Hooks Weekly.PW newsletter a week, exciting Wireshell command line interface for Processwire Nice article about Processwire Plugins & Techniques that we used Custom Frontend Setup with Uikit 3 and SCSS, and Markup Regions Uikit Backend Theme ( github ) Oauth2 login modules In-house development Login with E-Mail Pro Fields for repeater matrix fields (infos, price tables, daily routines) Wire upgrade to update plugins and the core Wire Mail Mandrill to send mails FunctionalFields for translatable front-end texts that are not part of a content type (headings, button labels, etc.) Runtime markup for dynamic backend fields (combination of first and last name) Tracy debugger for fast debugging Textformatter OEmbed to convert Vimeo and Youtube links into embed codes HideUneditablePages thanks to @adrian

Hello everyone, I spend my sunday hacking a playground for the new admin theme together. Unfortunately it took almost the whole sunday, Fortunately it was raining anyway. If you find bugs or annoyances, please feel free to tell me about them. What is it? It is a backend with an integrated skin editor. In this weeks blog post @ryan showed how easily skinnable the new admin theme is. Now that can be done online without having to set up ProcessWire and LESS compilation (I did that for you). Show me http://pwadmin.youbility.de/processwire/ username: admin password: admin123 Why did you do that? I really think the new backend is one of the three key factors for ProcessWires future success (as well as the new website and the documentation; basically the things a user sees first when he's deciding for a CMS). Many many weeks ago, when Ryan introduced the new theme, he said he will need help from the designers in the community to create the best experience possible. As far as I've seen, since then there was not that much input from the community. I hope a ready-to-run theme editor can improve that a bit. How does it work? Right of the search field there's a new icon which opens the editor. Simply create a new skin and start playing with it. The skin will be available throughout all the session, even if you refresh or change to another skin. When you log out or lose your session the skin will be gone, so save your final result somewhere else too!! What other features will come? Probably none, unless there's something heavily requested. I could probably add something to store the skins permanently through LocalStorage. Or I could add more possibilities for customization than just the LESS file. But first I'd like to see if this is used and there's even the need for those features. Can I show my created skin to others? Of course. Right now just "default" and "pw-theme-reno" are public. I would love to show more skins there. Just post the content of your skin in this thread and I will add them to the public skins. I hope you find it useful and it helps making the most efficient and polished CMS backend out there.

Goodbye jQuery, Hello Slideshow! UIkit 3 Beta 31 released !

Hi there! And thanks for Processwire which i like very much. Got a problem while trying to update from 3.0.65 (with admin theme UIkit ) to 3.0.78 . Tried to do it both via ProcessWireUpgrade module and by copying/replacing the files and dirs manually. In every case i got the problem with UIKit admin theme. The first try to reload any admin page after update gives the following errors: Notice: Undefined variable: adminTheme in D:\work\sites\home\sea.dev\webroot\site\modules\AdminThemeUikit\init.php on line 121 Fatal error: Call to a member function get() on null in D:\work\sites\home\sea.dev\webroot\site\modules\AdminThemeUikit\init.php on line 121 It is officially recommended to reload the page several times after update to get the admin interface functional again, but it's not my case. The problem still persists. It's obvious that $adminTheme is not initialized. Reverting back to /wire dir of version 3.0.65 removes the problem. Switching to default admin theme and then updating to 3.0.78 makes the admin interface fully functional -- but switching to UIKit admin theme leads to the error again. Will appreciate any help. Thanks in advance!

Perhaps someone can help me on this. I recently started poking around at uikit (I have used bootstrap and foundation previously) as I liked the admin theme and a few of the components. However, their documentation is a bit confusing and I can never get the desired results. I am sure I am doing something wrong, but I did not want to digg into v2, if things will be changing (for better or worse). I have the following: <div class="uk-section"> <div class="uk-container uk-container-large"> <div class="uk-child-width-1-1@s uk-grid-small uk-grid-match" uk-grid> <div class="uk-width-1-2"> <img src="images/logo.png" alt="" width="1183" height="167" /> </div> </div> </div> </div> <div class="uk-section"> <div class="uk-container uk-container-large"> <h3>Section</h3> <div class="uk-child-width-1-4@m uk-grid-small uk-grid-match" uk-grid> <div class="item"> <div class="uk-card uk-card-default uk-card-body"> <h3 class="uk-card-title">Default</h3> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p> </div> </div> <div class="item"> <div class="uk-card uk-card-default uk-card-body"> <h3 class="uk-card-title">Primary</h3> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p> </div> </div> <div class="item"> <div class="uk-card uk-card-default uk-card-body"> <h3 class="uk-card-title">Secondary</h3> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p> </div> </div> <div class="item"> <div class="uk-card uk-card-default uk-card-body"> <h3 class="uk-card-title">Secondary</h3> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p> </div> </div> </div> </div> </div> The cards at the bottom stack on mobile which is the desired effect. However, the logo at the top is squished and on mobile does not seem to be resizing to take on the .uk-child-width-1-1@s. Is there a way to prevent the logo from squishing, and for it to resize with the browser? I have noticed when I do <div class="uk-section"> <div class="uk-container uk-container-large"> <div class="uk-child-width-1-1@s uk-grid-small uk-grid-match" uk-grid> <div class="uk-width-1-2"> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p> </div> <div class="uk-width-1-2"> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p> </div> </div> </div> </div> that the grid also does not collapse to full width either. I am positive I have just missed something in the documentation, or how uikit is supposed to work. However, for the life of me I can not find it.