Popular Content

Showing content with the highest reputation since 10/15/2018 in all areas

  1. 18 points
    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
  2. 11 points
    We used http://barbajs.org/ for the transitions. This was for me the best tool to create good transitions. It also includes a preloading/prefetch option: http://barbajs.org/prefetch.html. When the user hovers over a link, it preloads the page. The time difference between hover and click is about 250ms to 750ms in our tests. This is in the most cases enough to load the full .html document. Here is an interesting website to test it yourself: http://instantclick.io/click-test This is how a transition works: The user hovers over a link The browser prefetches the site (Including Base64 placeholder images) The user clicks the link (The time difference between hover and click is long enough to load the document) The actual page transition out The loading screen transition in (In most cases it will skip this step because the page is already loaded) The new page transition in We can change the direction of the transition with data-attributes: <a href="/arbeit/" class="button-enter introduction-button" data-transition-direction="left">Arbeit</a> When you have other questions please feel free to ask
  3. 11 points
    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.
  4. 8 points
    It's still popular even in 2018.
  5. 7 points
  6. 6 points
    Hi all - I've just committed a pretty major update to the Console and File Editor panels. 1) Adds all ACE editor themes with a config setting to choose the theme 2) Options to set the font size and line height 3) I have refactored the sizing of various divs in both these panels that should solve lots of minor layout bugs especially when resizing the panels. *Be sure to do a hard reload to get the latest CSS/JS files. 4) Updated the core SplitJS library which now adds support for dragging by fixed increments which lock to the code line height - before I was hacking this on and it wasn't anywhere near as nice. 5) Various bug fixes for the keyboard shortcuts for resizing the console panes. Also, just a quick note to say that this version doesn't yet include the PW variables code completion. That will come in the next version. I am on a semi-vacation at the moment so haven't had any dedicated blocks of time to get that quite as I want yet. Please let me know how this new version goes for you!
  7. 5 points
    I don't know if popular is the right word. I have never came accross another person who knew ProcessWire here in The Netherlands. Ofcourse people use it and I got a feeling there is growth. Most people who have used ProcessWire definately keep using it or at least they want to use it. That is on itself a great accomplishment only achieveable by a few people. Same for the good community and such loyal users while the development is solid with great pro modules. I guess it is really hard to break through a next level. Just keep promoting it .
  8. 5 points
    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.
  9. 4 points
    So I was planning on doing a full write up a while back to compare the different CMS systems: Craft, Processwire, Silverstripe Since I'm here I will just focus on my experiences with ProcessWire. With some experience with developing websites in Silverstripe I figured it would be good for me to have a look at some other options which brought me here. I do have some features which I really want to have with websites which I deliver to my customers: Must haves: Version management -> if a client screws something up I don't want to waste too much time to get things back in working condition. Easy editing of pages for customers. Extensibility with extra content fields in the CMS. Nice to haves: Inline editing. Easy Multilanguage setup. Easy upgrades. First Impressions: The good: Processwire looks pretty good from a power user point of view. I love the fact that you can just use PHP in templates and also the obvious active development is a big plus and it seems to be very extensible. The bad: No support for IIS out of the box. I did find a web.config on the forum but needed to sign up to the forum to download this. Signing up to the forum lists facebook as a sign in option -> doesn't actually work. The first impressions on the look and feel of the admin. Implementing Actually porting a site template over to processwire with the functionality I needed to add: This process went pretty smoothly I loved the pw-append way of working with templates, templates felt really easy to port and set up. Creating menu's etc. was easy. I loved the way that there are multiple ways of doing things which are available with the templates which can be installed. I also loved how easy it was setting up inline editing and adding an edit link to a page. I think my main problems with settings things up where the way processwire handles images. The problems I had with version control plugin + images. Usability testing After having set up the basics I had 2 lovely lady friends do some usability testing by letting them perform some small tasks on the website. Edit some pages -> add an image Swap the position of 2 pages in the menu. Both smart ladies 1 of them had been actively maintaining a magento shop. And their conclusion was unanimous, they both heavily preferred the Silverstripe backend. For me this meant that I continued to work on the Silverstripe version of the website. I didn't continue to complete all the functionality in the Processwire version of the website. Conclusion For me the conclusion of this experiment was that although I loved building the basic website with Processwire the admin experience just doesn't seem user friendly enough to justify the switch.
  10. 4 points
    Thanks to all who got in touch. I have found a developer to take this one on now.
  11. 3 points
  12. 3 points
    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.
  13. 3 points
    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. */
  14. 2 points
    UX wise the best would probably be opening the folder after some time hovering over it.
  15. 2 points
    Agree. @tpr maybe an idea for AOS to add some hints to the tree when moving items around? I have no specific idea yet
  16. 2 points
    Since PW >= 3.0.105 you can easily use the following hook. $wire->addHookBefore('InputfieldSelect::render', function($e) { if ($e->object->name != 'myfield') return; // quick exit if fieldname doesn't match $restrictedIDs = array(); // array of option values to be modified, page IDs in case of pagefield $optionAttributes = array_fill_keys($restrictedIDs, array('disabled' => 'disabled')); $e->object->addOptionAttributes($optionAttributes); }); Related commit: https://github.com/processwire/processwire/commit/07ab8ef9fcefff6a97c688599fb08fb0d462332e#diff-79808b1661a74c0668ee6157537ae478R390
  17. 2 points
    The error is caused by the code you entered in the field settings. The eval line above just executes the configured code. So if you show us that code, it might be possible to pinpoint the exact issue.
  18. 2 points
    Sehr schön! Could you tell us a bit more about the page transitions and preloading? It looks really smooth.
  19. 2 points
    Make sure to "open" the new parent page before moving stuff there. It needs to be highlighted to receive a page as child no matter if there are already children or not.
  20. 1 point
    Latest Chrome/Safari/Firefox on macOS 10.14 show all the same problem. The weird thing is it creates the correct amount of pages in the PDF, they’re just blank. Calling `$mpdf->Output($filename, \Mpdf\Output\Destination::DOWNLOAD);` directly results in the same error.
  21. 1 point
    Yep, it works fine. I'll see if I can come up with something for the php linting and the compatibility error (but am not in a hurry). Ah, and now I notice my syntax error for the httpHosts, should have just been a string with the hosts separated by newlines like in your defaults: $hosts = "www.".ltrim($this->host, 'www.')."\n".ltrim($this->host, 'www.'); Cheers.
  22. 1 point
    Thanks for this module, I am just getting into it - the long way I will explain what I needed to hack in order to make this work with my three-container Docker setup. First, I want to ask something: How can I set 'timezone' and 'httpHosts'? I saw in the example kickstartfile you had a numeric ID for Vienna, but that seems very odd (and how to find out the ID)!? I tried with these, but they didn't make it into the config.php 'timezone' => 'Europe/Helsinki' 'httpHosts' => ['','','localhost:2015','localhost'] Now some interesting notes from my Docker adventure. These are hacks to the kickstart.php file. - I had to change the checkPHP function to always return true, because it wanted to run 'php -l', but php binary does not exist in my web server container! I can always validate the syntax of my recipe myself, so it's fine. - I learned I need to specify in my Caddyfile instead of localhost, because otherwise curl will get connection refused. This was helpful in debugging: https://blog.kettle.io/debugging-curl-requests-in-php/ Then in the postToPW function I gave the container address: $url = 'http://caddy:2015/install.php'; - because Caddy is not Apache, I always get the Apache mod_rewrite on PW's compatibility check. So I silenced the error: // do all the pw installation steps if($this->postToPW(['step'=>1], ['stepname' => 'Check compatibility', 'errors' => [], 'quiet' => true])) { During the testing phase I benefited from commenting out the zip download and deletion: //$this->downloadAndSave($this->config['pw'], 'pw.zip'); and //if($delete) unlink($zipfile);
  23. 1 point
    Hello, there is also one "alternate" solution, using Node.js and Puppeteer with headless browser. In this case, export to PDF is only one segment what can be done with that tools (remote login, automated processing, deep testing, etc...). If you have Node.js on your machine, here is example (Windows) where project directory "printer" is in C partition (C:\printer). C:\> mkdir printer cd printer npm i puppeteer easy-pdf-merge After this, inside project directory are all required node modules (Puppeteer, Chromium browser, Easy PDF). Last step is to create index.js file and place it inside project directory ( C:\printer ) // index.js const puppeteer = require('puppeteer'); const merge = require('easy-pdf-merge'); // configuration // *** EDIT THIS: var admin_url = "http://my_site.com/admin_url"; var user = '*****'; var pasw = '*****'; // desired pages // *** EDIT THIS: var pdfUrls = [ "/page/edit/?id=1054&modal=1", "/page/edit/?id=1016&modal=1", "/page/edit/?id=1019&modal=1", "/setup/field/edit?id=1#inputfieldConfig", "/setup/field/edit?id=1&modal=1#inputfieldConfig" ]; var pdfFiles = []; // START async function main(){ const browser = await puppeteer.launch({headless: true, args:['--start-maximized']}); const page = await browser.newPage(); await page.setViewport({width: 1366, height: 768}); // login await page.goto(admin_url, { waitUntil: 'networkidle0' }); await page.type('#login_name', user); await page.type('#login_pass', pasw); // login submit await Promise.all([ page.click('#Inputfield_login_submit'), page.waitForNavigation({ waitUntil: 'networkidle0' }) ]); for(var i = 0; i < pdfUrls.length; i++){ await page.goto(admin_url + pdfUrls[i], {waitUntil: 'networkidle0'}); var pdfFileName = 'page' + (i + 1) + '.pdf'; pdfFiles.push(pdfFileName); await page.pdf({ path: pdfFileName, format: 'A4', printBackground: true,margin: {top: 0, right: 0, bottom: 0, left: 0}}); } await browser.close(); await mergeMultiplePDF(pdfFiles); }; const mergeMultiplePDF = (pdfFiles) => { return new Promise((resolve, reject) => { merge(pdfFiles,'processwire.pdf',function(err){ if(err){ console.log(err); reject(err) } console.log('Success'); resolve() }); }); }; // run all this and exit main().then(process.exit); *** Note: edit this script and write your login parameters and desired urls. After all, run script (inside C:\printer>) node index.js After a while (for this example, ~10 sec.) you will find PDF files in project folder (partials and 1 merged with all). As example here is attachment. Regards. processwire.pdf
  24. 1 point
    I'd say develop locally (use local database). To me, having a permanent ~70x2=140ms round-trip delay at every operation would be a frustrating experience. Using custom git hooks you can export & import sql databases from local <-> remote setups. Once the template & field infrastructure is complete you can utilize page import export feature to exchange pages between local & remote as well.
  25. 1 point
    Just a quick note: remove the hints in the function, otherwise it won't work: function getFieldsetOf($context, $fieldsetName, $collectValues = false, $fieldsetCloseIdentifier = '_END'); // this will work function getFieldsetOf($context, String $fieldsetName, bool $collectValues = false, $fieldsetCloseIdentifier = '_END'); // this won't at least not with the latest PW dev on PHP 7.0.9 example function call: $fieldSet_import = getFieldsetOf($templates->get('project'), 'import_only', false, $fieldsetCloseIdentifier = '_END');