Leaderboard

Thank you @Werner Pilnei. I am excited because I like using ProcessWire . I try to do my best in introducing this module to the community. GraphQL is very young standard and is not mainstream yet. I intentionally started this thread in the Pub section, to make sure this is not a module support page but more a discussion on GraphQL (as this new api standard by facebook) and ProcessWire. To talk about how they could fit with each other, what ways we could use it, the new ways to use ProcessWire and so on. I personally never think about ProcessWire as a CMS. Though it is in fact a true CMS in its literal meaning, it is best at managing your content. But when people are introduced to ProcessWire it is presented as CMS and since the web is cursed by WordPress, people start using ProcessWire with wrong assumptions in their minds which result in negative impressions. I am generalizing here but when an average web developer hears CMS, she thinks it is a ready website with bunch of functionality baked in like tags, searching, blogging, commenting and so on. Those functionalities become the evaluation criteria and when they see that there is no tags in ProcessWire they count that as one of the things ProcessWire is missing. They don't understand that tags are something ProcessWire shouldn't have, because they are used to see tags in a CMS. I don't think that I am telling something new here. The community is well aware of this problem and the release of new site profile states that these problems are being addressed. But it doesn't have to be the only way. The modular architecture of ProcessWire allows us to extend it anyway we want, and this module is one of those attempts in presenting ProcessWire in different perspective. Even if it won't make much difference, I think we should keep trying and experimenting. Who knows what could come up along the way. I was only thinking about SPAs when creating this module. Never thought of PWA and usage with service workers like you approached it. Which is, by the way is great to hear. I hope there will be bunch of other ways people use it.

I have just added a "Config" section to the Debug Mode panel. This returns a nicely formatted table of all the properties of $config - this includes those set in /wire/config.php and /site/config.php, as well as many other derived system settings. To make this visible you will either need to add 'config' to the $config->debugTools array in /site/config.php, or uncheck "Respect the PW $config->debugTools config option" in the Tracy config settings. It shows way too many things to list here, but I think it makes a nice additional resource, so please be sure to check it out. Of course all arrays are expandable.

Hey guys, Here is our latest creation, a website for a landscape architecture studio in Freiburg, south of Germany. http://freisign.eu/ As you can see this is a very simple site. The most complex pages are the project pages since here we wanted to give the editors flexibility to construct the content at their will. Because we had a decent amount of different content blocks the obvious choice was to use the "Repeater Matrix" ProField. We also used the oldie "Page List Image Label" by Soma, which works pretty well for organising the admin of this kind of sites. For the slideshows we used the excellent Slick Carousel jQuery plugin. It still amazes me how flexible and easy to use it is The site is responsive, of course. As always, opinions and suggestions are welcome!

just made a little fiddle for you: https://jsfiddle.net/px0pa6uf/3/, hope the code will help you out. I don't know what image you use, so i put the optional @media code for the iPad pro. There you can set a background that is exactly matched for the device width and height. You don't need the JS example for this, I just added it because I don't know how you get the iosVersion value, and maybe it comes helpful for you, but no, it is not needed for this CSS fix. Fixing CSS problems on devices feels like IE fixes all over again...

Mmm the module itself will be, but updating the SDKs with ProcessWireUpgrade (if that what you mean) will be hard if I am not missing something with this module. What I am thinking after some tests, and in particular about shared hosting, its to put on Github the vendor directory and let the user download and upload it to the their server if they want to use third party service storage. This approach only work (as the module itself) for ProcessWire 2.8 and 3.x. And if some people want simplicity on their virtual/private server, they just have to run a simple command line - composer update - in the root directory. Really, composer is nothing more than a tool to manage dependencies, and installing/using it require only one command line or a simple exe setup on Windows. Anyway, I will try to find a compromise and/or to figure how to manage theses dependencies in the module directory itself. If I can manage this, the module will be compatible with ProcessWire 2.7.

You could do this in admin.php (above the line that brings in controller.php): $wire->addHookAfter('AdminTheme::getExtraMarkup', function($event) { $extras = $event->return; $extras['head'] .= '<link rel="shortcut icon" href="'.wire('config')->urls->templates.'favicon.png">'; $event->return = $extras; });

FYI, you can add multiple templates in one go via the admin interface:

Templates need to be coupled to fieldgroups (which need to be created first). I see that your module is an autoload module...was that intentional? Anyway, what the others said. If you need to look at a complete example, here's some code from the Blog module installer.

This is sooo art direction. Please make it optional

You could just use Tracy Debugger's Console Panel to create templates. I often use it for creating fields and assign to templates.

Ok, sorry - I've defined a button by the RuntimeMarkup module which opens the page by "window.open(...)". The page I open by this way has an own template and template file; there is the script located. Regards Sebastian PS: Now I use "pwModalWindow(...)" instead of "window.open"; the only needed change in the script above is "top.opener" to "window.parent".

Haha, "Menü" is 100% the same in Hungarian too I did understand it of course but if I land on a page I browse the entire page and don't look in the menü at once. Something like Latest Projects section should do no harm imho Btw the menü should stay in place even if you mouse the mouse off of it. Now it disappears when you move the mouse to the right (where menuitems reside). I'm also not sure it's a good decision to have the menu toggle on the right and menu items on the left. I would surely move items to the right, or use a full-screen menu with centered items.

No, there's not. Imho it's better to leave out that extra 5 file check on every admin page load. This might be a nuissance for existing users but on the long run it's better this way. FYI, v124 is uploaded, containging fewer files and with overall module files weighing 1.7MB. The Modules Directory doesn't contain the documentation anymore as it was moved to GitHub Wiki. I just tested AOS on a new install and so far so good but please report if you find something.

This might be a bit off topic, but this problem has come up a few times. Maybe the modules directory could proxy downloads of modules and add the vendor folder on demand (to the module itself) if a composer.json is present. So users can choose if they do a composer install some/module or install it via the backend – without the benefits of a global dependency management tool in the latter case.

Solved! The properties which can be added by the InputfieldPage have a hierachical structure (page with subpages with subpages and so on) - that's why I can't use checkboxes directly. But at last it was very easy to solve the problem:-) First step: In the PageListSelectMultiple element you can find a hidden list item with the class "itemTemplate". This element can be cloned, prepared with the new data (id, label) and apended to its parent element. Second step: In the PageListSelectMultiple element you can find an input element with the id "Inputfield_YOUR_FIELD_NAME"; its value hold the ID's of the selected pages as a comma separated string. This value must also be updated. That's all:-) Here are my script to do the steps above: // get the selected properties for my page via ajax $.post("my_ajax_file", {"page_id": "my_page_id"}, function(success){ if(success){ var json = JSON.parse(success); // create json from string var id_string = ""; // holds the id's for field value var ol = top.opener.document.getElementById("Inputfield_MY_FIELD_NAME_items"); // get the list with the selected page items $(ol).find("li").not("li.itemTemplate").remove(); // remove all items except the template item for(var i in json){ // loop through json elements var prop = json[i]; var li = $(ol).find("li.itemTemplate").first().clone(true); // get the template item and clone it li.removeClass("itemTemplate"); li.find("span.itemValue").text(prop['prop_id']); // set new id li.find("span.itemLabel").text(prop['prop_title']); // set new label $(ol).append(li); // append to parent element id_string+= prop['prop_id'] + ","; // add id to comma separated string } id_string = id_string.substr(0, id_string.length - 1); // remove last "," var input = top.opener.document.getElementById("Inputfield_MY_FIELD_NAME"); // get the field with the id string value $(input).val(id_string); // set the new/updated id's } });

Just been playing around with a quick visual indicator to let you know if you are on the local or live version of a site. It's done by IP address using the same code that Tracy uses for its DETECT module to switch between DEV and PRODUCTION. Not sure how useful this is, but I do know that I sometimes have the local and live versions of a site open in separate browser tabs and occasionally I'll accidentally edit content in the wrong one. I am usually very careful, but we all make mistakes and just thought this might help as an additional visual indicator (without having to look at the address bar). Of course it could be taken further with customizable colors and customizable ways of defining what is dev vs staging vs production if they are all on live servers. Any thoughts on whether you guys would make use of this? Local Live

I've also just pushed a PW3-only branch which uses namespaces, should anyone want to try it.

Selectors are your friend. $my_special_pages = $pages->find("parent=/, name=foo|bar|baz"); // or match by template, or anything else $my_other_pages = $pages->find("parent=/, id!=$my_special_pages"); // now build your menus from these PageArrays

Hi @Doc I've never done it with ProcessWire, but here are some topics: Huh, that's all for now

i would suggest doing the following: create a new template file for your page that holds the map data with exactly the code from the google example (javascript + html): https://developers.google.com/maps/documentation/javascript/examples/map-simple?hl=de change nothing but your api-key. when you view this page you should see the same map as on the google docs page. replace the fixed values for lat/lng/zoom by those saved in your processwire site. see my example above ($page->map->lat...) view your page, it should show the map at the position that you specified in your backend change your style by adding the styles options (see code below) view your page, you should see the new style if everything works, try to implement your map in your original template file var map; function initMap() { map = new google.maps.Map(document.getElementById('map'), { center: {lat: -34.397, lng: 150.644}, zoom: 8, // add comma here styles: [ { "stylers": [ { "hue": "#c1d72e" } ] } ] }); }

+1 Experienced developers should not have problem learning the basics of Composer, however, using the ProcessWireUpgrade module is easier and even site owners can use it out of the box, so generally I prefer relying on it instead of Composer. This is a module that should support ProcessWireUpgrade as well, I think.

A small news for this morning, the AmazonS3 feature is implemented on the module (its a pain when you don't know about a SDK). Also please check the name of the final package as it was suggested by @szabesz. Thanks again for the suggestion, its better and easily manageable. Edit: For information, all SDKs are installed via composer. Is it a problem for you ?

Hi all! Major overhaul / refactor just committed. To quote Github: Showing 54 changed files with 1,705 additions and 1,295 deletions. Yes, I haven't slept much lately I have tried to test everything very thoroughly, but with so many changes, there might be new bugs introduced. Please let me know if you find any issues. You'll also noticed that I have bumped the version number to 4.0.0 and am using a string now so that I can start being more semantic with the version numbers. Here's a rough highlight of the changes. New skin - a huge thanks to @tpr for all his efforts on this, not to mention lots of other feedback / bug reports while developing this new version! Captain Hook Improvements - it now shows dynamically added hooks, like Page::viewable in both the core and your site module. Also some general cleanup. More SessionHandlerDB fixes - there were still some outstanding issues with some of the lesser used panels. Hopefully we're closer to this being a non-issue. Improved CSS loading - in particular when opening panels in a popup window. General code updates - various things, including updating wire() and $this calls to $this->wire() where appropriate. Lots of bug fixes - mostly issues with the lesser used panels that had gone unnoticed, but still it's amazing what you find when you do a major refactor. Better code documentation - not my strong point in the past - hopefully this is now on the way to being much better. File / folder restructuring - not really of concern to you guys, but will make life a little easier for me going forward with future enhancements. Captain Hook panel showing new dynamic hookable methods and @tpr's fantastic new skin!

NOTE: This thread originally started in the Pub section of the forum. Since we moved it into the Plugin/Modules section I edited this post to meet the guidelines but also left the original content so that the replies can make sense. ProcessGraphQL ProcessGraphQL seamlessly integrates to your ProcessWire web app and allows you to serve the GraphQL api of your existing content. You don't need to apply changes to your content or it's structure. Just choose what you want to serve via GraphQL and your API is ready. Warning: The module supports PHP version >= 5.5 and ProcessWire version >= 3. Links: Zip Download Github Repo ScreenCast PW modules Page Please refer to the Readme to learn more about how to use the module. Original post starts here... Hi Everyone! I became very interested in this GraphQL thing lately and decided to learn a bit about it. And what is the better way of learning a new thing than making a ProcessWire module out of it! For those who are wondering what GraphQL is, in short, it is an alternative to REST. I couldn't find the thread but I remember that Ryan was not very happy with the REST and did not see much value in it. He offered his own AJAX API instead, but it doesn't seem to be supported much by him, and was never published to official modules directory. While ProcessWire's API is already amazing and allows you to quickly serve your content in any format with less than ten lines of code, I think it might be convenient to install a module and have JSON access to all of your content instantly. Especially this could be useful for developers that use ProcessWire as a framework instead of CMS. GraphQL is much more flexible than REST. In fact you can build queries in GraphQL with the same patterns you do with ProcessWire API. Ok, Ok. Enough talk. Here is what the module does after just installing it into skyscrapers profile. It supports filtering via ProcessWire selectors and complex fields like FieldtypeImage or FieldtypePage. See more demo here The module is ready to be used, but there are lots of things could be added to it. Like supporting any type of fields via third party modules, authentication, permissions on field level, optimization and so on. I would love to continue to develop it further if I would only know that there is an interest in it. It would be great to hear some feedback from you. I did not open a thread in modules section of the forum because I wanted to be sure there is interest in it first. You can install and learn about it more from it's repository. It should work with PHP >=5.5 and ProcessWire 3.x.x. The support for 2.x.x version is not planned yet. Please open an issue if you find bugs or you want some features added in issue tracker. Or you can share your experience with the module here in this thread.

One of PW 3.010's major novelty was the introduction of Horst's new image resizing engine that uses ImageMagick. Now I understand that ImageMagick can convert images to Webp, the image format that Google says can reduce image size up to 34% compared to JPEG. Mozilla is apparently adding support to Firefox, and even the Safari team is playing with it, so it looks like Webp is soon going to be available in most major browsers. If Horst's module can be extended to add Webp conversion, that would be a great addition to PW's already very powerful image manipulation arsenal. I'm currently using the free ImageEngine Lite to serve Webp images to supporting browsers, and the results are impressive. I routinely get images that are between 25 and 60% smaller compared to JPEG, with the same visual quality. I would love to eliminate the need to rely on a third-party service though.

Sounds like you have found a solution that works - nice one. If I understand correctly, your options that may be selected in the Page Reference field are organised into categories according to the hierarchy in the page tree. So for example the hierarchy might be: - colour - red - green - blue - size - small - medium - large But don't you end up with a situation where an editor can ignore your custom button and use PageListSelectMultiple to select the page 'colour' or 'size' instead of one of the actual option pages? To make a more straightforward and foolproof UI you could create a custom inputfield module for the Page Reference field that organises the checkboxes the same as you are doing in the modal front-end page. It's not as difficult as you might think because as you found it's only the value of the hidden input that matters when it comes to submitting the form.

Sure, losing functionality is not good. Elsewhere I proposed a separate button for the cases where you want to add multiple templates. However, in terms of the total amount of convenience for the total number of users, I think the times you want to add fields and other settings immediately after adding a new template much outnumbers the times you want to add multiple empty templates and then end up back at Setup > Templates.

Maybe rarely used by some, however I make use of it. There are many ways to do many things in ProcessWire, i would hate to lose any functionality or convenience. My two cents on this issue.

Not sure if this is the cause of the problem, but this line... if($options['useMarkerSettings'] && (count($pageArray) == 1 || !$lat)) { ...does not ensure that $pageArray exists. The if() condition is passed if $options['useMarkerSettings'] and !$lat, regardless of what $pageArray is.

Nice one - I totally forgot about this

Good catch - it's the double span issue inside the A element. I think it's safe to apply line-through on the inner span too, will update soon.

Inputfield dependencies do only support piped OR selectors like so: field|field2=value or field=value|value2.

@tires - this could actually be a nice AdminActions action. I would use the "Template Fields Batcher" action as a starting point as it will show you how to add fields to templates. If you like this idea and have a go at building an action, please let me know if you need any help.

As long as one can define the color, it doesn't matter

I was wondering about both of these. I actually always have Tracy on in the backend (especially now that we have the "Reference page being edited" option), but I understand that not everyone will. I could pretty easily color the masthead in the backend, eg: It can start looking pretty ugly but I guess since it's only for superusers (and other authorized Tracy users) it doesn't really matter ?

Sorry, wasn't clear. Where, exactly (file) is the script? Did you create a module? Did you edit a core module? Basically, how are you adding the script to your modal page. Thanks.

This would be awesome.

@hansv The admin backend is not working with _main.php. What you mean is to set the favicon in the frontend. Jonathans example looks good for me.

Works as expected for me (gmail, chrome). Just to let you know that Pete is pretty tied up at the moment but he hopes to be back soon to sort out stuff. He is not ignoring these stuff .

That could work but it would add an unnecessary complication imho. In the meantime I managed to reduce the number of files to about 200 and overally module size to 2.1MB. So far so good, but I'll keep click around to see if all goes well.

@microcipcip WireHttp is meant as a replacement for external PHP http client libraries like guzzle etc. You would want to use these when you 'talk' to the REST API that you set up with PW. Don't confuse this with clsource's Rest Helper class that I am using in my tutorial. You would still use that to build your REST API on the PW side. Today, If I wanted to develop a PW application that exposes JSON data through an API I would go with the brandnew GraphQL module by Nurguly. Seems like a much cleaner approach compared to REST.

I don't know is this topic is still alive? Just put this line in the header of _main.php, close your browser and restart or refresh (CTRL-F5) a few times and the favicon appears. <link rel="icon" href="<?=urls()->templates?>styles/images/favicon.ico">

Interesting layout but it works However, at first I was stuck because I didn't know where to click. Finally I found the Projekte in the Menu - I think there should be at least a link or a button on the Home page linking there. Also the images seem too heavy.

v2.8.0 is out. It's a trivial fix for a problem with the PW3 FileCompiler (it was inserting the Processwire namespace into PHP-generated js code used on the front end). NB: The js class now used in the code is jsMarkupLeafletMap instead of MarkupLeafletMap. You may need to adjust your js code to allow for this. I've also taken the opportunity to bump the field numbers to bring some continuity across the files.

I guess it's safe to set the defaults to "templates/admin/...", I don't want to use so many file_exists(). Is this template structure what you need? Btw until the update you can just replace the string "cke.js" with "admin/cke.js" in AdminOnSteroids.module (and do this with all 5 assets).

Thanks for your work => it looks very good! Will this work together with ProcessWireUpgrade? This will make updates through more easily I presume.

I have already started to build upon the new site profile: http://szabesz.hu/ I replaced uikit.min.css and uikit.min.js with their currently up-to-date counterparts (3.0.0 beta 9, February 3, 2017) so it looks OK in IE and Edge too.

Just to clarify: background-attachment is not working well on iOS Safary: http://caniuse.com/#feat=background-attachment Here the CSS that can work for the container (did not tried it out, but should work): .background { background-size: 100%; background-image: url('your_background.jpg'); background-attachment: fixed; background-repeat: no-repeat; position: fixed; top: 0; left: 0; height: 100%; width: 100%; z-index: -1; } Additional you can add "bottom: 0;" and "right: 0;" if something is not working. At the end it would look like this in your HTML structure: <body> <div class="background"></div> ... </body> I don't really get why it is not possible with media queries, because you can get the device really easy by some width and height (and other parameter) values that are mostly used for iPad or other devices. Here a link for possibilities: https://css-tricks.com/snippets/css/media-queries-for-standard-devices/ Here is a script from codePen to check the Version of the iOS version (I don't know if you already have this for your iosVersion): and use it in your JS code for variable iosVersion. Then do some JS+CSS ~magic~. Try CSS only (keep it simple), if it is not working (or get too complex for you) combine it with JS if it makes sense. BUT: Please, do not run the scroll position on every scroll to change the position in your inline CSS code. On not so powerful hardware it can hurt the experience of your site. The CSS code should do better. Hope this helps.

A small preview of uploading package to Dropbox and GoogleDrive at the same time : In this screencast I am using my own connection, thus the upload process is a bit slow.

Sometimes I also add a loader icon next to the submit button.