Leaderboard

We recently finished a relaunch of our agency website: https://www.meuter.de/ Features: Minimalistic and modern design Page transitions and preloading for a really fast browsing expierence Custom content builder for blog posts, references and subpages Content is king: Many case studies and blog posts Under the hood: Webpack with ES6 and SCSS LQIP with Base64 Images Lazy loading with lazysizes Automatic generation of scrset images, Base64 placeholder images and background positions Page transitions with barba.js Preload pages when user hover over link Interactive components which reacts on scroll events. Built with ScrollMagic Handwritten template Modules used: ProFields Markup Sitemap XML Video embed for YouTube/Vimeo Our Content Builder for a reference: Clean page structure: The code for the image generator: <?php // ------------------------------ // Image modifications // ------------------------------ /** * Responsive Image Options */ class imageModifier { // Responsive Sizes from lowest to highest private $responsiveSizes = array(320,640,768,1024,1366,1600,1920,2560); private $base64ImageWidth = 20; private $imageOptions = array( 'upscaling' => true ); // Return a string with the srcset information public function getSrcSet($image){ // Create an emptry output string $srcSetOutputString = ''; // Create each image for each size foreach ($this->responsiveSizes as $responsiveSizeId => $responsiveSizeWidth) { // Check if the image is bigger then the final size if($image->width >= $responsiveSizeWidth){ // Create the image and put the url into the output string $srcSetOutputString .= $image->width($responsiveSizeWidth, $this->imageOptions)->url; // Put the width in the output string $srcSetOutputString .= ' ' . $responsiveSizeWidth . 'w' . ','; } } //When the original image is smaller then the highest quality if($image->width < $this->responsiveSizes[count($this->responsiveSizes) - 1]){ // Create the image and put the url into the output string $srcSetOutputString .= $image->width($image->width)->url; // Put the width in the output string $srcSetOutputString .= ' ' . $image->width . 'w' . ','; } // Remove last commata $srcSetOutputString = rtrim($srcSetOutputString, ','); // Return the srcSet information return $srcSetOutputString; } //Returns the lowest quality image public function getLowestQuality($image){ return $image->width($this->responsiveSizes[0]); } //Returns the highest quality image public function getHighestQuality($image){ // if image is bigger or same than max quality if($image->width >= $this->responsiveSizes[count($this->responsiveSizes) - 1]){ return $image->width($this->responsiveSizes[count($this->responsiveSizes) - 1]); } // When image is smaller then the highest quality else { return $image; } } // Returns the base64 data string public function getBase64($image){ // Get the image path $imagePath = $image->width($this->base64ImageWidth)->filename; // Get the image extension $imageType = pathinfo($imagePath, PATHINFO_EXTENSION); // Get the data of the image $imageData = file_get_contents($imagePath); // Create the base64 Code $base64Code = 'data:image/' . $imageType . ';base64,' . base64_encode($imageData); // Return the code return $base64Code; } // Returns the position point public function getPosition($image){ // Get distance from top $distanceTop = '' . intval($image->focus()['top']); // Get distance from left $distanceLeft = '' . intval($image->focus()['left']); // Return the position with percent return $distanceLeft . '% ' . $distanceTop . '%'; } } Thanks for the community and Processwire. It is a joy to use ?

I know you already rest your case, but still wanted to point out that Uikit is actually very configurable, meaning that you can pick and choose the components you need. You don't have to include the full framework, and when using SASS or LESS you can easily recompile the framework at any time. There's also another thing that in my opinion makes it a great fit for ProcessWire: Uikit also includes the concept of hooks. You quite literally modify it the same way as you'd modify ProcessWire. The point behind front-end frameworks is that you don't have to reinvent the wheel every single time. In most cases our grids, carousels, cards, and whatnot are not really that different from project to project. Sure, they are styled differently, and may even behave differently, but the basic structure and function is similar. So, why write a new component every single time when you can reuse the old structure/behaviour and just give it a brand new bespoke look and feel? What you're essentially claiming is that every Uikit site looks the same (or requires a lot of hacks to not), yet I disagree. Again if you take an out-of-the-box version of Uikit and use the ready-made default theme (you did notice that using it is completely optional, right?) then yes, it's going to look like... well, an out-of-the-box Uikit with a ready-made theme. Just don't do that, and you'll be fine. Yes, with a framework there will always be some amount of configuration and hooking/overwriting involved, but that's a small price for the benefits you reap. For arguments sake: if we thought that all pre-made components were pure evil, we shouldn't be using ProcessWire either. ProcessWire doesn't dictate your sites look and feel, but it sets a baseline for how it'll work behind the scenes. Uikit does the same for the front-end. Both are easily configurable and modifiable. One might even go as far as say that they are natural allies – two parts of a whole. For the record, before writing this post I was not fully convinced of Uikit: I've been using Foundation, which in my opinion is superior in many ways, and has a rather different method of modification – essentially a massive config file for modifying pretty much every single thing you can imagine. But diving into the Uikit docs made me like it a lot more, and not least so because it really does have certain similarities with ProcessWire itself. In short: Uikit is a great choice for the new processwire.com.

It's still popular even in 2018.

My interest in using Uikit for this particular site is largely for the collaborative aspect. Having a common, already-known, well documented and tested framework for the front-end just seems better for collaboration here. I know a lot of people here are already familiar with it as well. There's also the aspect of being able to develop the site without necessarily knowing the final look of it. Uikit is designed for this kind of prototyping and gives us a result that can be tailored using already known/documented means (collaboration again). That there's a lot of crossover between Uikit's components and what we will need for this site is also helpful, and will no doubt save time. The current site was also a collaborative one, but it didn't use a framework. Instead it used various strategies that may be quite good and efficient, but I've never understood as well as I would have liked. So when it comes to making updates on the code side, I feel like I'm working around things rather than with them. Since I've got to ultimately maintain the site for the long term, I like having the familiarity and consistency of an established and documented framework behind it. In the context of the ProcessWire site, these aspects are more important to me than size of the eventual css files. If I was developing a different site the considerations might be different—I might still use Uikit, or I might go a different route, or go sans framework, all depending on the context and needs of the site. So I'm not suggesting that everyone should be using Uikit, just suggesting it seems like a good fit for this particular project, as it has been for some others.

Hi @mke Thanks for the clarification and example. That fits into the planned separate pro frontend module. As stated, those who want to build custom frontend will have the full API at their disposal. Something like this (pseudo code, although some API is ready) // assuming user is logged in, they are redirected to My Account area $out = "<span>$user->name</span>"; // your Orders Table [orders API in the works] $orders = $pages->find("template=orders,order.customer_id=$user->id,limit=10"); foreach($orders as $o) { $order = $o->order; /* Date: $order->date; Status: $order->status; etc... */ } // Addresses [customer API 95% done] $customer = $user->customer; /* First Name: $customer->firstName; Last Name: $customer->lastName; Email: $user->email; Address: $customer->address; City: $customer->city; Postal/Zip Code: $customer->code; Region: $customer->region; Country: $customer->country; Phone: $customer->phone; // etc...including if customer is tax exemp and whethey they accept marketing. // Any custom properties added are also available, e.g. $customer->company, etc. */

Sehr schön! Could you tell us a bit more about the page transitions and preloading? It looks really smooth.

First of all I want to say that learning PHP is crucial to get going with ProcessWire. You should understand the basic syntax and concepts and how to iterate over items. Please also read http://processwire.com/docs/tutorials/but-what-if-i-dont-know-how-to-code/ However, you should create a template file "authordetails.php" in site/templates/ directory, then in ProcessWire admin also create a template with the same name (but without the .php suffix). Then assign this template to each author and editor. In the authordetails.php file enter the following code to get all publications for this author/editor: $publications = $pages->find("template=publication, authors|editors={$page->id}"); Please note the double-quotes, that are required for {$page->id} to work!!! If you are using a more recent version (3.0.107) of ProcessWire you could instead use $publications = $page->references(); please read http://processwire.com/blog/posts/processwire-3.0.107-core-updates/#page-gt-references about this. Then iterate over the publications foreach ($publications as $publication){ echo $publication->title; } All this is completely untested and comes directly from my brain, so I hope everything works.

Oh, I see, I wasn't precise enough. Sorry, I didn't think of that. I meant "Tracy with Force superusers into DEVELOPMENT mode activated instead of just "Tracy enabled". It's Tracy right out of the box (fresh install) with just "Force superusers into DEVELOPMENT mode" setting activated. The slowdown is more or less noticeable on all admin pages, "modules" was just a concrete example. But I do have to say I have some custom modules included in this project, so I will report back after I have done a vanilla install elsewhere and tested again. Thank you.

Everything sounds awesome! ? Maybe that's unnecessary to say, but please also reserve some time to do proper docs. I'm just afraid that things can get quite complex ? thx!

News Update - 10 October 2018 I know many of you are eagerly awaiting the next version of Padloper. I thought I'd give you a couple of updates regarding progress. First, I'd like to thank you for the feature requests and your support. As previously stated, it will not be possible to accommodate all requests and those that may be accommodated may have to wait till other releases. OK, to the update. The following have so far been achieved. FieldtypeProducts A new Fieldtype for storing products including their variants, if any. This allows for easy retrieval and storage of data and and API that makes it easy to filter, search, manipulate, update, etc product details. So..: $foo = $products->find("colour=red,quantity<10"); $bar = $product->first(); echo $bar->size; echo $bar->price; // etc Discounts We have a new discounts class that allows for 4 types of discounts each with generic and specific requirements. Percentage discount Fixed amount discount Free shipping discount Buy X Get Y discount In turn, as applicable, the discounts are subject to generic conditions including customer country,named customers, customers subscribing to your newsletter, global usage, customer usage limits, customers who abandoned carts, start/expiration dates, etc. There are also discount-specific conditions including whether to apply discount to entire order, specific products or specific categories/collections, minimum requirements (purchase amount or quantity of eligible products in cart), etc. Import/Export Products This class allows for importing products into your shop as CSV, JSON or arrays. It is 98% done. It will also allow for exporting products as CSV (and maybe in future, as JSON, if there is demand). MarkupPadloper This is WIP to eventually replace PadRender. This allows for retrieving products, product tags, product categories, etc, either as ready-to-render (i.e. includes the markup) vs retrieving the raw product details so one can use their own markup, anywhere, anyhow, to output products. Other A bit of work on customer notifications (including email templates) and FieldtypeOrders for orders plus some other stuff. I got a lot to do, so I better get cracking! ? Thanks for reading.

Hi Folks, I'm new to this forum, and only recently discovered PW. I'm coming from recently giving October and Craft and WordPress serious goes, but have been very curious to try a flat file approach. I must say for what it is worth, I spent hours and days bouncing around the web trying to find and then compare CMSs generally, and flat file CMSs specifically. PW didn't show up at first at all...which is unfortunate, as this seems like a great CMS and I look forward to giving it a go and following this forum. Most of the buzz seemed to be around Grav and Kirby. As a newbie who just discovered PW, I will point out that one of the things I look at when considering a CMS is what kind of pulse it has in the social media/forums realm. For example, I was surprised to see that you all don't have a Slack channel...or if you do, I can't find it, and it is not listed on the main PW page. That is a great way to find out what is going on within any given community, and addition to forums like this of course. You do have Twitter listed, which is great. I am also surprised that you don't have an introductions section in this forum for newbies. Maybe it's not that critical, but as a new member to a community it is nice to have. You of course can announce your arrival elsewhere in the forum like am I doing here. And yes, first impressions upon landing on the CMS front page makes a big difference. For example, I recently landed on the Razor CMS page and immediately cringed and couldn't get away from it fast enough. I forget now who it was after looking at so many CMSs, but another CMS front page immediately struck me as being corporate 1995 and also made me cringe and I had to leave stat. I know looks aren't everything, but considering what we do, well they kinda are lol. In any case, I thought I would at my 2.5 cents as a newbie who has very recently stumbled upon your community, and ran across this discussion. Cheers