Leaderboard

Looks fine to me ! And take a look at Soma's site. He has a post on flexible downloads

Menu Builder As of 29 December 2017 ProcessWire versions earlier than 3.x are not supported Modules Directory Project Page Read Me (How to install, use, etc..) For highly customisable menus, please see this post. If you want a navigation that mirrors your ProcessWire page tree, the system allows you to easily create recursive menus using either vanilla PHP or Soma's great MarkupSimpleNavigation. In some cases, however, you may wish to create menus that: 1. Do not mirror you site's page tree (hirarchies and ancestry); and 2. You can add custom links (external to your site) to. That is primarily where Menu Builder comes in. It is also helpful if you: 3. Prefer creating menus via drag and drop 4. Have a need for menus (or other listings) that will be changing regularly or that you want to allow your admin users to edit. The issue of custom menus is not new here in the forums. The difference is that this module allows you to easily create such menus via drag and drop in the Admin. Actually, you can even use it to just create some list if you wanted to. In the backend, the module uses the jQueryUI plugin nestedSortable by Manuele J Sarfatti for the drag and drop and is inspired in part by the WP Custom Menu feature. Please read the Read Me completely before using this module. For Complex or highly-customised menus, it is recommended to use the getMenuItems() method as detailed in this post. Features Ability to create menus that do not mirror your ProcessWire Page Tree hierarchy/structure Menus can contain both ProcessWire pages and custom links Create menu hierarchies and nesting via drag and drop Easily add CSS IDs and Classes to each menu item on creating the menu items (both custom and from ProcessWire pages) or post creation. Optionally set custom links to open in a new tab Change menu item titles built from ProcessWire pages (without affecting the original page). E.g. if you have a page titled 'About Us' but you want the menu item title to be 'About' Readily view the structure and settings for each menu item Menus stored as pages (note: just the menu, not the items!) Menu items stored as JSON in a field in the menu pages (empty values not stored) Add menu items from ProcessWire pages using page fields (option to choose between PageAutocomplete and AsmSelect [default]) or a Selector (e.g. template=basic-page, limit=20, sort=title). For page fields, you can specify a selector to return only those specified pages for selection in the page field (i.e. asm and autocomplete) For superusers, optionally allow markup in your menu titles, e.g. <span>About</span> Menu settings for nestedSortable - e.g. maxLevels (limit nesting levels) Advanced features (e.g. add pages via selector, menu settings) currently permissible to superadmins only (may change to be permission-based) Delete single or all menu items without deleting the menu itself Lock down menus for editing Highly configurable MarkupMenuBuilder - e.g. can pass menu id, title, name or array to render(); Passing an array means you can conditionally manipulate it before rendering, e.g. make certain menu branches visible only to certain users [the code is up to you!] Optionally grab menu items only (as a Menu object WireArray or a normal array) and use your own code to create custom highly complex menus to meet any need. More... In the backend, ProcessMenuBuilder does the menu creation. For the frontend, menus are displayed using MarkupMenuBuilder. Credits In this module's infancy (way back!), I wanted to know more about ProcessWire modules as well as improve my PHP skills. As they say, what better way to learn than to actually create something? So, I developed this module (instead of writing PW tutorials as promised, tsk, tsk, naughty, naughty!) in my own summer of code . Props to Wanze, Soma, Pete, Antti and Ryan whose modules I studied (read copied ) to help in my module development and to Teppo for his wonderful write-up on the "Anatomy of fields in ProcessWire" that vastly improved my knowledge and understanding of how PW works. Diogo and marcus for idea about using pages (rather than a custom db table), onjegolders for his helpful UI comments, Martijn Geerts, OrganizedFellow, dazzyweb and Mike Anthony for 'pushing me' to complete this module and netcarver for help with the code. Screens

Hey guys, first, ProcessWire is a great piece of software. Thanks for that and the great community behind that. So, i'm realy new to ProcessWire, but i will present you my first module for SEO- and performance optimizing: AIOM+ (All In One Minify). AIOM+ (All In One Minify) for CSS, LESS, JS and HTML AIOM+ (All In One Minify) is a module to easily improve the performance of your website. By a simple function call Stylesheets, LESS and Javascript files can be parsed, minimized and combined into one single file. This reduces the server requests, loading time and minimizes the traffic. In addition, the generated HTML source code can be minimized and all generated files can be loaded over a cookieless domain (domain sharding). Install AIOM+ Download current release (link below) Extract and copy the files for this module to /site/modules/AllInOneMinify/ Login to PW backend and go to Modules > Check for new modules Install Module > AIOM+ (All In One Minify) for CSS, LESS, JS and HTML Alternative in ProcessWire 2.4 Login to PW backend and go to Modules Click tab "new" and enter Module Class Name: "AllInOneMinify" Click "Download and Install" Features Combining stylesheets / LESS files or JavaScripts Minimize the combined files No change to the .htaccess necessary (except for the domain sharding) Server-side LESS parsing without plugins HTML source code minimization Cookieless domain / domain sharding Automatic cache management (With changes to the source file, the cache is rebuilt) Configurable via the backend Automatic rewriting the paths in the stylesheet and LESS files. No changes are needed Optional developer mode (combining, but no minimize and browser cache prevention) Clear the cache on the backend Conditional loading for CSS, LESS and JS (since Version 3.1.1) How to use Minimize multiple stylesheet or LESS files into one file. You can even mix stylesheet and LESS files in parsing and combining process! <link rel="stylesheet" href="<?php echo AIOM::CSS(array('css/file-1.css', 'css/file-2.less', 'css/file-3.css', 'css/file-4.less')); ?>"> Minimize multiple javascript files into one file. <script src="<?php echo AIOM::JS(array('js/file-1.js', 'js/file-2.js', 'js/file-3.js', 'js/file-4.js')); ?>"></script> Conditional loading (same with Javascripts) <?php $stylesheets = array('css/reset.css', 'css/main.less', array('loadOn' => 'id|template=1002|1004|sitemap', // PW API selector 'files' => array('css/special.css', 'css/special-theme.less'))); ?> <link rel="stylesheet" type="text/css" href="<?php echo AIOM::CSS($stylesheets); ?>" /> More Information, Documentation and Download AIOM+ in ProcessWire repository AIOM+ on GitHub So, I hope you can do something with this module. Dave

I have put together a very basic module for generating images from the pages of uploaded PDFs. It requires imagemagick, ghostscript, and the imagick pecl extension. It could easily be adapted to work without the imagick extension, but I usually like having exec disabled. At the moment it also requires a couple of specific custom fields: document_pdf (file) and document_thumb (image), both with "Maximum files allowed" set to "1". Obviously I will make these more generic, or add the fields on module install once this is closer to being released. There is some commented code that facilitates image resizing before upload to PW if that is what is wanted. I should also make these configurable module options. Currently I am using this for a searchable list of publications to generate a thumbnail of the cover to place with the description, PDF download link etc. I am planning on extending this a fair bit as I want to use it to generate image previews for each page of the PDF so I can use them in a "look inside" modal lightbox. These would all be stored in a standard images field. I think when I start generating images for all the pages I am going to run up against a speed problem. It could potentially take a few minutes to generate all the images for a large PDF. I was thinking of making use of lazycron, but I think I'd rather see some progress indicator. The other issue is if I use lazycron, then it is possible that someone may visit the site and go to use the look inside functionality before the images for all the pages are ready, so maybe this idea is out. Perhaps the best approach would be to hook into the PDF upload. Once the upload is complete, the module would start generating the images before the page is ever saved by the user. Would really appreciate any suggestions on how to set this up. Off the topic a little, but one other minor consideration in all this is RGB vs CMYK colorspace. If the user uploads an RGB PDF then everything is fine, but if someone uploads CMYK PDFs the colors are often terrible, but there is a tweak that can be made to imagemagick to fix it. Here is a good description of the problem and how to fix it: http://www.lassosoft.com/CMYK-Colour-Matching-with-ImageMagick Basically you need to add the command line option ''-dUseCIEColor'' to all of the GhostScript commands in the delegates.xml file, so that they now look like this: <delegate decode="eps" encode="ps" mode="bi" command='"gs" -q -dBATCH -dSAFER -dUseCIEColor -dMaxBitmap=500000000 -dNOPAUSE -dAlignToPixels=0 -sDEVICE="pswrite" -sOutputFile="%o" -f"%i"' /> Would anyone else make use of this module? Also, does anyone have any obvious suggestions for what I have so far. It's my first module, and I don't really have a handle on best practices yet. Thanks! PS I know convention is to attach module files, but this one is so short at the moment, it didn't seem worthwhile. <?php /** * ProcessWire ProcessPDFImageCreator * * Process PDF Image Creator creates images from PDFs. * * @copyright Copyright (c) 2013, Adrian Jones * */ class ProcessPDFImageCreator extends WireData implements Module { /** * Return information about this module (required) * * @return array * */ static public function getModuleInfo() { return array( 'title' => 'PDF Image Creator', 'summary' => 'Creates images from PDFs.', 'version' => 001, 'author' => 'Adrian Jones', 'singular' => true, 'autoload' => true ); } /** * Initialize the module and setup hook */ public function init() { $this->pages->addHookAfter('save', $this, 'createPdfImage'); } /** * If document_pdf field contains a PDF, generate an image from the first page. * * */ public function createPdfImage($event) { $page = $event->arguments[0]; if(count($page->document_pdf)>0){ $src = $page->document_pdf->first()->url; if(count($page->document_thumb)==0){ $pdf_filepath = $page->document_pdf->first()->filename . '[0]'; //the appended [0] refers to the first page of the PDF $jpg_filepath = str_replace('.pdf', '.jpg', $page->document_pdf->first()->filename); $resolution = 288; $im = new imagick(); $im->setOption("pdf:use-cropbox","true"); $im->setColorspace(Imagick::COLORSPACE_RGB); $im->setResolution($resolution,$resolution); $im->readImage($pdf_filepath); $geometry=$im->getImageGeometry(); $width = ceil($geometry['width'] / ($resolution/72)); $height = ceil($geometry['height'] / ($resolution/72)); $im->setImageFormat("jpg"); /*if($width>150){ $width = 150; $height = 0; } $im->scaleImage($width, $height);*/ $im->writeImage($jpg_filepath); $page->of(false); $page->document_thumb->add($jpg_filepath); $page->document_thumb->first()->description = $page->title . ' PDF thumbnail'; $page->save(); } } } }

This is a very basic guide on how to optimize a ProcessWire page for speed. It doesn’t go into the depths of optimization and perfect render paths but will provide you with some proven ProcessWire methods for faster websites. The big problems that are easy to fix are what we aim for. You want quick improvements? Then read on… First let's have a look ath the following graph. Those are the areas, we want to improve. Source: http://httparchive.org/interesting.php?a=All&l=Oct%201%202014 Clean up your HTML Look at your HTML source code. Are there any unnecessary parts? Remove anything that might not be needed and try to keep your markup as clean as possible. Avoid using too many external JS libraries or other tools. It is okay to include jQuery from a CDN, because most visitors will already have cached the file. Too many of those external requests will slow down the page. If possible, try to avoid render-blocking Javascripts and move your script tags to the end of the page, right before the body. In most cases, your Javascript will enhance your content but doesn’t need to fire before the site is rendered. Always think if you need to include another library or the fourth webfont on your site. Minify Markup The next step to save some bytes is to remove all whitespaces from your markup. It doesn’t have to look nice, it has to be loaded fast. We perform this trick with our new super-weapon: The AllInOneMinify module for ProcessWire. Install it like every other module for ProcessWire. Once activated, go to the module settings and tick the checkbox for “Minify HTML” and look at your sites source code. It should be minified. AIOM can handle conditional browser comments. If your layout depends on whitespaces you could “force” them by putting an into the markup. Optimize the CSS Now we’re heading for the next larger part of a usual website. We will combine all CSS files and then remove anything not needed (whitespace,comments) from it. Before we start, make sure your CSS files only contain rules that you really use. Especially if you’re using a framework like Bootstrap, most of the selectors are never used. Remove them carefully. We need the AllIneOneMinify module from the previous step again. After installation, open the template file where your HTML header is generated. We will now replace all stylesheet tags with a single file. AIOM needs to know all CSS (or even LESS) files, relative to your template folder. It will then output a link to a single, compressed CSS file. You might have this in your HTML head: <link href="<? echo $config->urls->templates;?>/css/grid.css "rel="stylesheet" /> <link href="<? echo $config->urls->templates;?>/css/style.css“ rel="stylesheet" /> Replace all links to Stylesheets with the single tag like this: <link href=”<? echo AIOM::CSS(array(‘css/grid.css’,’css/style.css’)));?>” rel=”stylesheet”/> You pass an array with the file names to the AIOM method CSS. It will return a link to the file. AIOM takes care of image urls inside CSS. It will detect changes in the source file and only generate a new file if necessary. While developing, you might want to turn on the “Development” checkbox in the module settings. Make JavaScript tiny Do the same as you do to the CSS to your Javascript files. First, clean up the code. Then install AIOM and compress all JS files into a single file using the AIOM::JS method that works as the AIOM::CSS method. For best results, think about including scripts like jQuery from a CDN and put your scripts below the content, before you close the body tag. Also note that the order on how your throw your JS files into AIOM might be important, depending on the code inside. Get the right image size. ProcessWire comes with great image tools. Use them, to make images exactly the size you need them. You don’t have to serve that little thumbnail with over 3000px length just because the editor wasn’t able to reduce the size. Example: Your designer wants to have a slider image with a maximum size of 600x320 pixel. To output the image with that exact dimensions, use the API accordingly: $sliderImage->size(600,320)->url; An even better way would be to use adaptive images or the new srcset attribute combined with a JS fallback. Then your site only delivers the image size as needed. Hint: Play around with the image quality setting in the config.php. Maybe you don’t need images with a JPG quality of 90+. Compress the images further with minimize.pw To make images even smaller, we can use the minimize.pw service. This service will compress images nearly lossless by using more complicated tools to reduce the size of PNGs and JPEGs. By doing this, you remove bytes from the largest chunk of your website weight. minimize.pw is free for 2000 images. Just enter your E-Mailadress and receive a free key Then you have to install the ProcessImageMinimize module and enter they key. You can now activate the option to automatically compress every image uploaded. It is fail-safe and will compress images in the background. Please note, the automatic mode only works with images uploaded AFTER you have activated the module. You can manually select image fields with the ->mz() API method. Just include it before you output the image in your template file: $myImage->width(300,300)->mz()->url; We've closed the service. You could use something similar like Imgix ( https://www.imgix.com/ ). Activate GZip compression on your site Another method to speed up your site is to activate GZip compression. The server will then send all files compressed to the client. This works with nearly all browsers and the CPU power required is minimal. You can tell your server to do this, by adding those lines to your .htaccess file in your root directory. Please take care, that you do not overwrite the ProcessWire rules in the file! For best results add them on the top of the .htaccess file: <IfModule mod_deflate.c> AddOutputFilter DEFLATE js css AddOutputFilterByType DEFLATE text/html text/plain text/xml application/xml BrowserMatch ^Mozilla/4 gzip-only-text/html BrowserMatch ^Mozilla/4\.0[678] no-gzip BrowserMatch \bMSIE !no-gzip !gzip-only-text/html </IfModule> This was taken from another forum post. Tell the client to cache stuff To make repeating visits faster, we can tell the browser to cache special files for a longer period of time. Again, add this on top of your .htaccess file: <IfModule mod_expires.c> ExpiresActive On ExpiresDefault "access plus 1 seconds" ExpiresByType image/x-icon "access plus 1 year" ExpiresByType image/jpeg "access plus 1 year" ExpiresByType image/png "access plus 1 year" ExpiresByType image/gif "access plus 1 year" ExpiresByType text/css "access plus 1 month" ExpiresByType text/javascript "access plus 1 month" ExpiresByType application/octet-stream "access plus 1 month" ExpiresByType application/x-javascript "access plus 1 month" </IfModule> <IfModule mod_headers.c> <FilesMatch "\\.(ico|jpe?g|png|gif|swf|woff)$"> Header set Cache-Control "max-age=31536000, public" </FilesMatch> <FilesMatch "\\.(css)$"> Header set Cache-Control "max-age=2692000, public" </FilesMatch> <FilesMatch "\\.(js)$"> Header set Cache-Control "max-age=2692000, private" </FilesMatch> <FilesMatch "\.(js|css|xml|gz)$"> Header append Vary: Accept-Encoding </FilesMatch> Header unset ETag Header append Cache-Control "public" </IfModule> Remember, that this caching might be annoying while developing the site. Use the internal cache (or ProCache) Another trick to make the site faster is to use a caching system. This will “store” your rendered site so you don’t have to query the database that often. We can either do this with the internal cache of ProcessWire or use the commercial, official ProCache module. Using the build-in system, you go the the setting page of a template and open the “Cache” register. You can now set the Cache time and what happens if something changes. The settings depend on the content of the site. Mostly static content can be cached longer and you might not need to reset the cache every time. Dynamic sites will need shorter cache times. ProCache (buy here) is even faster because it will bypass PHP and the database. Files are served directly as HTML. Please note, that caching might make the site faster but it can create new problems. Use with care. Summary Keep your code as clean as possible. Remove anything unnecessary and then compress HTML,CSS and JS using the AIOM module. The largest part of your page weight are images. Keep them small by using the appropriate dimensions and consider services like minimize.pw. In the end, use intelligent caching and buy ProCache. Following this guide takes not more than an hour but can speed up your site and make your visitors happy. This was just a quick overview of techniques to optimize your page speed. There is plenty of stuff you can do but the steps above are a good first step. Maybe you can share your favorite methods (or links) to start the discussion.

Hi, i noticed on my sites and also on other processwire sites, that the time to the first byte is quite long (> 500ms). Is there a way to speed up this waiting time, without using plugins like ProCache? i benchmarked some sites from the showcase and from Processwire weekly and nearly all of them perform bad at First Byte Time. is this related to Processwire or just standard behaviour for php/cms sites? Here are the tests: First Byte Time - Grade F URL: http://c-logistic.de/ Test: http://www.webpagetest.org/result/150601_J7_3992e9491b6acf72f73f10441880e6a2/ URL: http://von-bergh.de/ Test: http://www.webpagetest.org/result/150601_8S_cc7abdaa6519aae4904ea067ca5adf3c/ URL: http://www.canton.de/ Test: http://www.webpagetest.org/result/150601_7S_a8d3c3cf3d4f8ad2c3d3048a31864c81/ URL: https://www.maletschek.at/ Test: http://www.webpagetest.org/result/150601_42_8379a987c81ee2b8aa11f50b7a74694c/ URL: http://www.deichtorhallen25.de/ Test: http://www.webpagetest.org/result/150601_SS_90b428db03a86a5a309bd80aec294706/ URL: http://www.orkork.de/ Test: http://www.webpagetest.org/result/150601_VJ_63b76ec1ab9f37a93b9776320059a0a6/ URL: http://www.dojofuckingyeah.de/ Test: http://www.webpagetest.org/result/150601_J5_db3c199ddb74cfae513bbbe775b947c8/ URL: http://www.schloss-marienburg.de/ Test: http://www.webpagetest.org/result/150601_KY_01db3003b66dfad3b91aa40cbfda8f82/ First Byte Time - Grade C URL: http://www.grupoolmos.com/ Test: http://www.webpagetest.org/result/150601_ZH_8b9a2af518a9ac0cb30130e2aa3d3f2d/ URL: http://www.pipistrello.ch/ Test: http://www.webpagetest.org/result/150601_RK_5cf4d97c7fe1d4db3a145c565a84069f/ URL: http://transformationswerk.de/ Test: http://www.webpagetest.org/result/150601_9D_f16e00a262ec9d30b19ff67a290216ca/ URL: http://transformationswerk.de/ Test: http://www.webpagetest.org/result/150601_9D_f16e00a262ec9d30b19ff67a290216ca/ First Byte Time - Grade B URL: http://brakhax2.com/ Test: http://www.webpagetest.org/result/150601_JE_6552783547f8f7b73945a4698af8f231/ First Byte Time - Grade A URL: http://www.1815.ch/ Test: http://www.webpagetest.org/result/150601_Z5_f97b31533f61453aaeefc6cafef20e83/ URL: http://new.korona-licht.de/ Test: http://www.webpagetest.org/result/150601_RD_37ece6079e30ff5858c95db932f91e30/ URL: http://processwire.com Test: http://www.webpagetest.org/result/150601_V0_c812f846f6555e506fbd2b8ba9efe2e6/ Thanks!

.local is a somewhat special tld. http://en.wikipedia.org/wiki/.local

@alan I run PW also with CodeKit and MAMP PRO and I am using an extra long very unique extension: ".tbadev" (6 chars). Have you tried something different than ".local" ? Maybe "local" is reserved and conflicting with something else on the Mac (maybe Bonjour)?

Love ListerPro. Will definitely use it and it would allow me to use columns for last updated, modified by and even short descriptions of files etc

easy as easy - but could you please test it - i'm on the run and some days away this week...just cut the helloworld module down to get this work...attention it is just fast scripted in the browser via github...so if you take the time test it on a site? https://github.com/mr-fan/HelloBrowser and at the end of the week we could contribute to the browser-update.org linklist! best regards mr-fan

Just change the "guest" users language to the one you want to have by default.

Just pushed version 1.1.0 to github. Please let me know how it works. I went pretty closely with Bernhard's original css stuff, I also added options to hide additional tabs. Although I have feature detect for touch, when hovering is not required to see edit links.

Did you know: If you double click on a menu point like "Pages" or "Modules" you directly go to the overview page. Really nice! (@renobird: Btw.: I still would love to get my changes into it if possible and if you like it https://processwire.com/talk/topic/7625-reno-theme/page-3#entry78885 )