Leaderboard

As some of you might have noticed recently there has been a large "Frontend Performance Talks Offensive" (not only) by Google Engineers. Here are some high quality (regarding content) Videos which i enjoyed very much and thought you also might be interested in. A Rendering Performance Guide for Developers by Paul Lewis: Performance Tooling by Paul Irish Your browser is talking behind your back by Jake Archibald Gone In 60fps – Making A Site Jank-Free by Addy Osmani http://addyosmani.com/blog/making-a-site-jank-free/ Any suggestions for more interesting performance related stuff are welcome!

I'm a bit hesitant to post this site but here we go: http://wereldburgersgroningen.nl/ For the non-dutch: a site for a soon to be opened hamburger restaurant in Groningen, the Netherlands. The interior has a clean/industrial look with some Mediterranean elements/colors. For this small site I was on a real time-crunch so it's still a work in progress. There's no caching or other optimizations (i don't think this will be necessary for this small scale site). It should be mobile friendly but haven't had time to test it on a lot of devices. The most important part, the menu, is still missing. Also, if you're looking for some nice imagery of the place and/or burgers you are out of luck. This needs to be incorporated when stuff becomes available. For me this is a new hosting provider so i'm curious how the performance is for you guys. For me it works pretty fast. It runs on the DEV branch. I'm quite enjoying the new admin theme. edit I've had some discussion about whether there should be an explicit home link in the navigation or not. For me it's second nature to click/tap the logo but i'm wondering if this is intuitive for most people?

Well. Even if no one seems to be interested i'll keep updating this if i stumble upon interesting links. Maybe this will help someone in the future Here we go. How to prioritize visible content: http://www.feedthebot.com/pagespeed/prioritize-visible-content.html

Ok, I think I nailed both of those bugs. In my tests this new ajaxified Fredi (available from dev branch) works great on FF, Chrome and Safari. Should work on IE10 too, but will test other IE:s later.

It's a quick mokup. What I posted might be not very practical because if one of the last entries in the nav is active we would have to hide some from the left. Maybe this would be more realistic? Would be quite easy to do with javascript. making the nav inline or inline-block, we can measure it and hide all the elements as soon as the browser window is smaller than the nav. The active page link would stay visible and all the others would go on a dropdown under the + sign.

The setMarkup() is just for adjusting the markup of Inputfield lists, not the markup of individual Inputfields. That markup is not currently changeable programatically. Your best bet would be to either: 1) the clean way would be to make a copy of InputfieldRadios => InputfieldRadiosCustom, install as a new module and make it produce the markup you want. 2) the quick n' dirty way would be to replace the <li>'s with <div>'s by hooking after InputfieldRadios::render wire()->addHookAfter('InputfieldRadios::render', function(HookEvent $e) { $e->return = str_replace( array('<li ', '</li>'), array('<div ', '</div>'), $e->return); });

Hi ozznixon, The settings for TinyMCE are located in the field settings for whichever field you want to add this capability to. So, for the body field, go into Setup > Fields > body. Then go to the "INPUT" tab and click on "TinyMCE Advanced Configuration Options". You'll want to edit the valid_elements to allow for iframes. I don't know off the top of my head how to do this... but if you're okay with allowing ALL elements, you can replace everything in the field with *[*] and that will allow iframes along with everything else. I usually do this although some people would caution against it... It really depends on how much power you want to give your editors.

Welcome ozznixon ! why not add a field to your template an name it iframe_url or something. Then in your template file: if($page->iframe_url) { echo "<iframe src='{$page->iframe_url}' class='my-iframe'></iframe>"; }

GitHub: https://github.com/adrianbj/ProcessMigrator This module has gone through lots of iterations with lots of new functionality each time. It is now a fully fledged content migration tool. *** Please be sure to read the GitHub ReadMe to find out what it can do now as most of the posts in this thread are no longer correct regarding its functionality Once it is release worthy, I'll create a fresh thread with all the details. This modules allows export, sharing, and import of page lists via JSON files. It takes care of replicating all the pages, as well as creating any templates and fields that are needed. I have defined "Page Lists" as page trees (parent and children) that store selector values for a Page fieldtype. An example would be a list of countries that would be used to populate a countries drop-down select field. The fields might include: Country Name, 2-digit code, 3-digit code, number code. I would like to suggest a place where we can post json files to be shared and updated - maybe a dedicated github repository? Start of a repo of lists ready to import is now available: https://github.com/adrianbj/ProcessWirePageLists It might handle migrating other simple pages trees as well, but it should not be considered a tool for migrating general pages as it does not handle associated files, nor does it handle fields which store arrays. Probably lots of other things it doesn't handle either It now handles migrating all (I think) field types, including repeater fields, page fields, all Profields fields, multi-language versions of fields etc. The only omission is the actual uploaded files and images in file/image fields. WARNING: This should be considered an Alpha module - please don't use this on a live site at the moment and be sure to back everything up before testing. Would appreciate any feedback on the concept, the code, and the idea of a shared and community edited resource of these files. Also, would love to hear what page lists would be good to share. Here are a few quick ideas: States (separate files for each country) Measurement units Languages Religions Race Academic subjects (chemistry, biology etc) Publication types (book, journal article, newspaper article, newsletter, thesis etc) Car makes and models Anyone have a better idea for a name, or how to better describe "Page Lists"?

A quick tutorial how to create file downloads using pages You will be able to create a new page using template "PDF" (or any you setup), upload a pdf file. You then can select this page using page fields, or links in Wysiwyg. The url will be to the page and NOT the file itself. This will allow to keep a readable permanent unique url (as you define it), unlike /site/assets/files/1239/download-1.pdf, and you'll be able to update/replace the uploaded file without worring about its filename. Further more the file will also have an id, the one of the page where it lives. Clicking those links will download or open the file (when target="_blank") like it would be a real file on server with a path like /downloads/project/yourfile.pdf. You'll be also able to use the "view" action directly in the page list tree to view the file. Further more you'll be able to esaily track downloads simply by adding a counter integer field to the template and increase it every time the page is viewed. Since the file is basicly a page. This all works very well and requires only minimal setup, no modules and best of it it works in the same way for multi-language fields: Just create the language alternative fields like "pdf, pdf_de, pdf_es" and it will work without modifying any code! Still with me? ok PW setup Download folder: Create a template "folder" or "download-folder" with only a title needed. Create pages in the root like /downloads/project/ using this template. Setup the template for the pdf files 1. Create a new template in PW. Name it pdf 2. Goto template -> URLs tab and set the URL end with slash to no. (So we can have /path/myfile.pdf as the URL) 3. Create a new custom file field, name it pdf. Set its maximal count to 1 under -> Details tab. 4. Add the pdf field created to the pdf template. Easy. 5. Create a new "pdf" page using the pdf template under a download folder you created earlier. 6. Give it the title and in the name field add ".pdf" to the end (could also leave as is) Template PHP file for the pdf files 1. Create the template file pdf.php in your /site/templates folder 2. add the following code: <?php // pdf.php if($page->pdf){ wireSendFile($page->pdf->filename); } Done. To see the options you have with PW's wireSendFile() you can also overwrite defaults <?php // pdf.php if($page->pdf){ $options = array( // boolean: halt program execution after file send 'exit' => true, // boolean|null: whether file should force download (null=let content-type header decide) 'forceDownload' => false, // string: filename you want the download to show on the user's computer, or blank to use existing. 'downloadFilename' => '', ); wireSendFile($page->pdf->filename, $options); } Simple and powerful isn't it? Try it out. Some thoughts advanced Create as many file types as you like. It might also be possible to use one "filedownload" template that isn't restricted to one field type but evaluate it when being output using $page->file->ext, or save the file extension to the page name after uploading using a hook. One last thing. You can add other meta fields or preview images to the template and use those to create lists or detail pages. It's all open to goodness. Again all without "coding" and third-party modules. Further more you can use the excellent TemplateDecorator to add icons per template and have a nice pdf icon for those pages. This as a base one could also easily create a simple admin page for mass uploading files in a simple manner, and create the pages for the files automaticly. ImagesManager work in the same way. Cheers

Two days ago, an idea about a new admin theme came to my mind. Some hours later, I've crafted a first concept in Adobe Fireworks.... The look and feel of the admin is important Two months ago, I've introduced some teachers into ProcessWire. They were none-technically people. At the end, they knew how to use the admin panel to create content or update a gallery on their new page. However at some points, they got confused with parts of the admin theme -beside the problems with our concept on how to use fields and templates for creating content. I think one factor why Wordpress became so large, was the great Adminpanel. It works well and easy (as long as you have a blog and not a twenty-plugins-for-text-pages-site). Editing content on a daily basis is the main task of my customer. I've to take this aspect serious. Problems I wanted to solve Have the page tree always visible. If I do not click the right link, it will be closed after I've finished editing my site More visuals like icons. Simplify some workflows. Creating 3 or 4 pages can result in multiple unnecessary clicks. More focus on important links like the tabs. Guide my customer through some action. Help them to repeat simple tasks. The concept First: Nothing is perfect and its not possible to find one single solution for everything. This was just done in a couple of hours and it's only the first iteration. Quick action button Next to the ProcessWire logo is the quick "Quick Actions" button. It should be possible, to configure it like: "Create a new Page with Template X with page Y as a parent". Use it for skyscrapers, news or galleries. (Yes i know, the arrow is pointing upwards. This is wrong) Two column layout The page tree is always visible (as long as we are in the pages view). It can be navigated as the normal page-tree. If you click "edit" it will become highlighted. Every action that would take you to a new page, would be displayed in the other half of the monitor. Speaking of a "half monitor" - I think that most people use a screen resolution of atleast 1300px. The sidebar should take up to 1/3 of this. On smaller screens, it will become hidden by default or we just simply step back to single pages for each view. If the content is to long, the sidebar becomes scrollable. Page tree I like the Template Decorator made by mindplay.dk. It fits the concept well with black outline icons for every type of template. The same icons could be used in the Quick action menu. I'm note sure what to do with the "move" action. To Do list Think more about the behavior of the elements. Design the modules view. Rework the search and the top menu. Options to "brand" the panel for agencies while keeping the ProcessWire logos. What happens if we are on mobile (small screen) devices? Listen to your feedback.

Hi Everyone, the last days i read a lot about the ongoing process of "modernizing" the admin theme, adding some features and getting some marketing buzz from people who aren't currently aware of processwires awesomeness due to the fact they didn't like the current admin theme. I must admit that at first was one of those "design oriented" guys and didn't dig deeper into the system because i didn't liked it's look & feel (or at least i thought it doesn't look "professional" enough to present it to our customers). Fortunately a colleague of mine finally managed to convice me giving pw a second try. After digging deeper i started to really like the concepts behind it. I tried different admin themes and git stuck with "ergo" which we currently are using on several pw instances. Although i weren't completely happy with it's look and feel on several details (but that's just me: i never heard one of our customers complaining ). The Idea of doing a theme by myself started to grow in my mind. After doing several layouts that "just beautified processwire to my taste" (i can post a "design evolution summary" if anyone is interested) i took a step back and started doing some more conceptual work and research. Specifically i thought about which "personas" are using processwire and for what reasons they are using it. Also i tried or looked at screenshots of some more "hyped" systems (ghost, anchor, craft...), asked out some (dev) co-workers and others who are content editors (which are the two main "groups" of personas imo) what parts of processwire could be done better or used in a more efficient way. The good (but not surprising) news is: There were almost no complaints about the current features. Long story short: With the "benchmark" in mind and some feedback i again started layouting. I rearranged some buttons, menus and tried to give processwire a more modern, clean and "up to date" look. But before i'm going to code all of this i wanted feedback from a broader audience so i can propably fix or correct things that you as everyday users aren't happy with. Here we go: I used the "w" of the processwire logo as a "picture mark" as it is pretty unique and can easily be recognized and remembered (You could also use this as a favicon). I kept using "processwire colors" for brand/product recognition (i know ryan stated people are complaing about them) but also tried to use them in a very minimalistic way so there is nothing that distracts editors from the content. I chose the menu to be positioned right for two reasons:1) Content first! The most part of work in processwire is editing and creating content. So why shouldn't content "rule" and be the first and most important thing (at least for LTR Readers)? 2) With the buttons and the menu both at the right side there is a "cluster of functionality" which makes it more efficient: Shorter ways for eye- and mouse movement, less things to "overlook" when actually editing content. The pages options within the tree are hidden (again: reduce visual complexity) into a dropdown with only the most commonly used one (edit) beeing shown (this should be configurable). The Font is the beautiful Fira from Mozilla <3 The messages are displayed "growl style" and can easily be closed by the user (or close themselves after a certain amount of time) I chose to use the content of ryans "new theme" example screenshots to make it easier comparing them in terms of visual hierachy. As you scroll, the buttons on the top will pin and scroll with you. This way it's always possible to save or view the page at any scroll position (the save/publish buttons are part of a module that's currently in devlopment here). The bar at the bottom will contain some shortcuts as well as less frequently used / system related stuff (i.e: user profile and logout). "Zen Mode" with closed menu. Just you and your content For those who like it bright: An example of an alternate version which is even more minimalistic.From my point of view there are some things still missing. I thought a lot about including a possibility to open the page tree from everywhere (as in Nico Knolls Dark Business and the ongoing Discussion in the Two column admin theme concept). I think this might be more effective to just test it from a ux perspective when actually coding the theme. My Idea is to build a static clickdummy and put it on github before actually releasing a "real" theme (with all the logic / js work to be done) to do some usability testing. Thanks for reading and i hope there will be some feedback! Best regards, Felix

Here is our website using ProcessWire, still work in progress: http://www.mokkivertailu.fi/ The site is a search engine for rental cottages in Finland. Cottage owners can register and add their information while users can search and browse the database.

Dear Adrian, and All, I believe it was one of the load balancers. I had two, one for HTTP, and one for HTTPS. Rackspace just told me that the HTTPS load balancer doesn't support cookie based session persistence. When I was logged into the admin, I wasn't using SSL, which is why it worked. After repointing the domain to the server directly, and bypassing the load balancers, the front end app worked. I'm using SSL on the entire app because it's a business app that needs to be secure. So now I have to work with Rackspace to see if I can use a load balancer with SSL and cookie persistence. If I can't... well, there goes the load balancer. It was just an "IP" convenience anyway, since I wasn't load balancing the logged in sessions. Very interesting... one learns more every day, one hopes. Peter

I can replicate this using the latest dev from a couple of days ago.

When you are in the modal and can select an alignment, first select something other than the No Alignment option. Then, immediately change your selection to No Alignment and insert the image. The No Alignment class appears in the code. So it looks like it only appears when the alignment option is changed to No Alignment from one of the other options.

Hey horst - I guess I am a bit confused about how the img tag is being generated. I just looked at Joe's code again and see that he is not replacing existing width and height attributes, but inserting them regardless. What if they are already in the img tag? Tinymce is producing the tag in this format <img src width height />. In CkEditor it actually looks like it is not adding the width and height at all. Not sure if this is a bug in PW's enhancement of the insert image, or a problem in CK itself. Either way, if you are relying on code generated by an RTE, I don't think you can assume that there will be no width/height or the placement of them in the tag. Maybe I am not understanding how the img tag is being generated in the first place

If I get this to work I'll post it back here. Many thanks Nik

Glad I could help! Depending on the application, hard coding the iframe into the template or using Martijn's suggestion of adding a new field just for the iframe html could also be a good/better solution. That's the fun part about PW

Hi yckart, I guess you are using the basic siteprofile that comes with PW per default. Following is the code of the home-template file. It is located under /site/templates/ and is named home.php. I have added a check for the url segment and the code you need to output a user page, whereas the original code of the home-template completly goes into the else-part: <?php /** * Home template * */ // first lets check if we have a urlSegment1 if( ! empty($input->urlSegment1) ) { // we have a url segment and want to get the page for it // we use ->get() for this, because get returns a single page, whereas ->find() returns an array of pages // but as we use the unique name of the users pages, there only can exist one page with that name $userpage = $pages->get("/users/{$input->urlSegment1}/"); // lets check if we have got a valid page // if PW hasn't found a page, it returns a nullPage and that has always a id 0 if($userpage->id == 0) { // we have no valid page, lets throw a 404 exception throw new Wire404Exception(); } else { // we have a valid page, so lets output the complete users page echo $userpage->render(); } } else { // if there is no url segment, output the homepage include("./head.inc"); echo $page->body; include("./foot.inc"); } This template will work if you use links like "/userpagename/" userpagename is the content of the namefield of your user page. If you have a page /users/foo-bar/, you can call it /foo-bar/ and it will be rendered, if you use /fooBaz/ you will be redirected to a 404 page, and if you call / you go to the homepage. But you also can access the user pages with there native urls: /users/foo-bar/. Hope that helps.

Being able to link to hidden pages is important. Often times we make pages hidden specifically because we'd rather make our own contextual links in text rather than have them in the site's navigation. As for unpublished pages, there are situations where we may be working on a group of pages that get published together, so not sure it's good to prevent linking. I think the best thing to do here is inform the client what it means when a page has a strikethrough. If it's a strong need there, I can show you how to accomplish it now with a hook. I don't know if it's a bug in CKEditor or not, but I couldn't find another way around it. DIVs aren't acceptable replacements for <p> tags, so that's why I put in that fix. Hackish I know, but solved the issue here. I'm always on the hunt for a better solution though.

Hello ProcessWire community At first I like to thank and congratulate Ryan for this wonderful work and I wished that I knew Ryan a long time ago And by the way you look awesome in the overview video Ryan And now a little bet about me: My name is Faisal Halwan from Saudi Arabia. I work in web development over 14 years now, and have dealt with various content management systems and PHP scripts in general. I was always dreamed of a flexible content management system for use in almost anything or what is now called CMF or allow me to say ProcessWire Thank you Ryan, you make my dream came true Yet I couldn't find any result in for any Arabic article talking about ProcessWire I will do my best to present ProcessWire and provide support in Arabic as soon as possible. Thank you and keep up the good work

You can copy the entire ProcessPageEditImageSelect module to your own directory in /site/modules/, but make sure you rename it to something of your own, like ProcessPageEditImageSelectCustom (or whatever you want). You'll have to rename not only the files, but the class name in the module file as well. Modify the module as you'd like, then in your admin: 1. Install your new module from the Modules menu. 2. Go to Pages > Admin > Page > Image Select. Edit that page, and select our new module as the "process" rather than ProcessPageEditImageSelect.

Marco, your module is already approved in the directory. Once approved, your updates go in right away. You probably just saw the effect of a 1-day cache on the directory. However, the modules manager should pick it up more quickly than that since it's not on the same cache. Also, you don't have to update the version number manually. The modules directory picks this up automatically once per day by going to GitHub and looking at your module file. No need to edit your module listing unless you already need to change something else.

Thanks a lot ryan! I can't wait to hear more details. It's 2013. What do you think? Sure it will be responsive! For a "normal" (consumer) website i most certanly would have done a "mobile first" design. But for me processwire is a software that is used by "professionals" as part of their work (either developing or creating content). So i created it with "desktop first" usage in mind as most people are using some sort of desktop computer for their daily work. "Mobile optimization" will be done while actually coding the theme (though i did think of several things performance wise while designing... if you're interested in some really cool videos and links i'll open up a topic in "Dev Talk" as this is a little bit off topic). Thanks!

Beautiful work! I'm currently over my head on client work, but just wanted to quickly drop in and thank you for your great work and thinking here. I'll come back with a better reply (and catch up with the rest of the forums) once I get through this marathon work week. I've been working on admin theme stuff a lot lately (before this week at least), so it's very fresh on the mind and I'd be happy to collaborate on the back-end side too.

This looks super clean! Also I think this builds upon PW strengths without trying to "re-invent" everything. If you pull this with same quality code than these UI screens are, I think this would be definitely great candidate as a next default theme. As Ryan has mentioned the current improvements are some "first aid" for the theme challenge, all doors are open to take this to next level.

This may have been answered, but I can't find it. When pasting from Word, CKEditor seems to insert <div> tags where there should be <p> tags. I checked the CKEditor docs and tried to change the enter mode in the config — no luck. I found this comment in InputfieldCKEditor.module // for some reason CKEditor insists on pasting DIVs sometimes when they should be paragraphs // so we attempt to fix that issue here // $value = str_replace(array('<div>', '</div>'), array('<p>', '</p>'), $value); Is this a common problem? A bug?

I hope so too. But I've got a big GitHub issues list to work through, and a few more new things to polish off, so it may be awhile yet. But rather than waiting, I'd encourage folks to use the dev branch. Though I'm wondering if we might benefit from having another "beta" branch, which would be a variation of the dev branch intended more for official presentation and download links, etc.

@arjan, I really don't know if it is a "fix". The field I use is almost completely stripped. I only allow, <strong> <em> and <link> ( the CKEditor one, not the pw ) But so far, no issue anymore.

Thanks for the screencast Antti. Your cat sounds exactly like mine. This definitely helps clarify for me what the issue is. On the other hand, I'm still at a loss to know what is causing it. It's interesting to see the responses all appear successful and no indication of errors. I hope to experiment more with this soon. Correct me if I'm wrong, but doesn't it seem like the bit of code starting here is where it's getting stuck?

I respect Drupal, but strongly dislike using and developing in it. This comes from a couple years of developing sites in it. The problems with Drupal have certainly been a motivation in making ProcessWire happen. Out of the box, ProcessWire is going to be a lot better at the large scale than Drupal. ProcessWire's architecture, foundation and API are far better than Drupal (captain obvious). People may use Drupal at large scale, but I don't believe the product itself was ever truly designed for it. Like with WordPress, being used at the large scale is something that happend to Drupal rather than something it made happen. Drupal is a pig that people have affixed wings to because there wasn't any other way to do it at the time. You see similar things happen with the other big platforms (WordPress, Joomla). As far as pigs go, Drupal is a good one. There are some things to respect (though not necessarily agree with) about Drupal's roots and the original thinking behind it. There's no doubt that it is far better than Joomla, for anyone that cares about this stuff. Beyond that, where it excels is in all the 3rd party stuff written for it, to do just about anything. It's a diesel-powered cuisinart in that respect… whatever you need to blend, it will blend… but it'll be messy. Working at large scale, 3rd parties have built all kinds of caching, CDN and load shifting things to throw on top the pile (and likewise with WordPress). Even a pig can fly if you strap wings on to it. And Drupal has a lot of folks thoroughly invested in it to the point where they are making that pig fly. Drupal is also such a household name that it represents a low-risk position for decision makers (low risk of job loss from choosing Drupal). None of this makes it a good product, just a safe one for people that don't know any better. But for people that do know the difference, we want a panther, not a pig.

Not sure that I know enough about the use case here, but you can get all the fields to edit a page by doing something like this: $page = $pages->get('/'); // get some page // make a form $form = $modules->get('InputfieldForm'); $form->method = 'post'; $form->action = './'; // add the page's fields to the form $form->add($page->getInputfields()); // add a submit button to the form $submit = $modules->get('InputfieldSubmit'); $sumit->name = 'submit'; $form->add($submit); // process the form if it was submitted if($input->post->submit) $form->processInput($input->post); // render the form output echo $form->render(); But I'm not sure how useful this would be on it's own, because it would be lacking all the admin CSS and JS files that make the forms what they are. So these forms may not be all that useful outside of PW's admin side, as many inputfields go well beyond basic form controls.