Search the Community

Hi there, I was wondering if PW is mobile friendly or do I need to add some css? If so, where to find and how to implement? I am thinking of making an index for products (like the demo Skyscrapers) but each product is linking to an external cart program since I did not see that possibility in PW. Thanks, Martin

For a while now, I've wanted to expand my skills into mobile app development. Having done some Googling and watched several YouTube videos regarding native versus hybrid apps, I decided to go native. I did my homework regarding React, Ionic, etc and decided to go native. I settled on the NativeScript + TypeScript combo although it seems most tutorials are about Angular. Anyway, after watching quite a number of videos, just when I was about to dive into things, someone turned off the lights! Progressive what? PWA? Haven't you heard about this? No, I haven't! Where have you been? Let's not go there... OK, so I don't know much about mobile apps as you can tell (or even much about frontend development as my personal websites do tell, ). At first, I dismissed Progressive Web Apps as another Google tech that is bound to fail....until I read that Twitter, Blah Blah, have joined the bandwagon and the thing is gaining serious traction. It was back to more Googling. I now know (I think) what Progressive Web Apps are (or are meant to be). Naturally, my first question was Progressive Web Apps versus Native apps. So, I asked Google. Google told me to stop asking that question. To be precise, it told me (at least with the first couple of results) that that was the wrong question to ask! I tried finding out why, but the answer was hidden down some deep mobile rabbit hole that I didn't have time to fully descend into. It seems I am back to where I started. Native apps seem to be promising first class citizenship (who doesn't want that?). On the other hand, I am being told, Progressive Web Apps are the bright shiny future that will solve all our problems (and maybe even shutdown the Play Store! ). Please be gentle with my ignorant self. I have asked Google but she hasn't bothered or cannot be bothered to reply or I am asking her the wrong questions. I simply want to know if Progressive Web Apps can or will one day be able to be used to: Build apps like WhatsApp, etc? Build games like Candy Crush (what?)? Build premium apps (how would that work?) Or...are Progressive Web Apps just a replacement for mobile.domain.com? Should I ditch my NativeScript?? If someone could help me out here (once you're done laughing at my silly questions ) and/or point me to resources that will answer my questions, I'll be forever grateful . Thanks

I can't find anything about this in the forums or anything, but I have a file field that accepts mp3 files. Trying to upload from an Android phone (I've tried from two) the files aren't accepted, it says they must be mp3 files, but they are, so it's not reading the file extensions I guess... The error names the file name without the extension saying it's missing the extension. Has anyone come across this? Thanks.

Google today announced it's competitor to Facebooks "Instant Articles": "AMP"(Accelerared Mobile Pages)HTML. Based on open source technologies (Basically it's a set of Web Components and a JS-Framework that loads and caches resources) it seems very promising. As far as I understand media is cached, served and proxied by google (and some tech partners). Btw: processwire as a system could benefit from/partner with it, too: https://www.ampproject.org/faq/#accelerated-mobile-pages-9 I'm really looking forward to playing around with it. Anyone else already fired up his editor and started fiddling around?

Hi guys / gals. Rimaa deals with logistics and moving products around. They needed an interface for their clients to check the status on their orders and that's where I came in. Not much you can see just by visiting the site, because this is actually a private mobile oriented web-app. But see some screenshots below. This project features some cool things under the hood: First, the content is managed from a Google Spreadsheet. PW connects to the spreadsheet on an interval (that can be configured), parses the sheet and updates the orders list. So the various people that share that spreadsheet and keep it updated for internal control, are also maintaining this platform without even knowing it. PW users templates was modified to allow for this platform's different roles: Client : only sees his orders Agent : has a set of clients he can overview Super-agent : sees all clients Updated orders visual cue: Comparing the current version of an order (by $page->modified) with last viewed version's date (stored in an repeater on each client), the app turns on a visual cue that the order has been updated since it was last seen. Viewing an order is an accordion-style CSS toggle, so at that point an Ajax call tells PW to update the last version viewed by the current user. All in all, a very little project that once more shows the flexibility we get from this awesome API. Being able to modify users to have the fields we need to get something like this working is a beautiful thing.

Hello, I just want to point out this framework for making html apps https://onsen.io/ it's compatible with jquery, angular, vue, react or any other js framework. So far I made an app using this and bootstrap with https://propeller.in/ for the desing and some libs like jquery and lodash for the app logic I prefer this to other alternatives like ionic since it does not bound you to angular or react. Cheers

Hi there, I'm experiencing a real weird caching issue with Safari (Desktop) and all mobile browsers where it is loading the old version of the site and refusing to reload the website. I don't seem to have the problem with Chrome where a reload did correctly reload the latest version of the website. Has anyone come across this issue before? Things I have tried (and failed) : 1) I've replaced our .htaccess file with the standard one that comes with Processswire 2.8 2) Everything here https://stackoverflow.com/questions/1922910/force-browser-to-clear-cache 3) Deleted everything under /assets/pwpc folder. 4) Deleted all local wesbite data on laptop/mobile and reloaded. Much appreciate if anyone can help me

Hi all. I need to change $config->paths->data['templates'] value from "templates" to "m_templates" for example. I think this wil be more easy to use specific folder for mobile view. How to change depending on some actions? (detecting if site viewing on mobile browser) Thanks

Here my friends at Jumpitt Labs used Processwire as the Main Framework for their website (because I recommend it to them) http://labs.jumpitt.com They are nice folks and make mobile apps and applications in Valparaíso, Chile. I didn´t make their website, I´m just post it to show it here Verification http://isit.pw/?url=http%3A%2F%2Flabs.jumpitt.com Image

A client requested for website required mobile friendly. Instead of using responsive design, I want a separate theme for mobile devices. I'm thinking of, if a user visit the website e.g. http://www.mydomain.com When the website detected a mobile users (How ?), the user will be redirect to a mobile site http://m.mydomain.com , and of course it is using a theme designed for mobile Any how and what ingredients to make it happen ?

Hi, i work on a new start with my webpage on Processwire and have build a new Design with Bootstrap. Now i wonted to look it on my Phone and i saw that it looks like on Desktop. I can not find the problem! On my dummypage all works fine on Desktop and Phone. On processwire the Design works fine on Desktop, it scale perfekt but on my phone it doesn't work! Is there any what i must do in Processwire to scale on phones? http://dummy.mta-r.de http://processwire.mta-r.de What am I doing wrong?

Has anyone had difficulty entering or editing image description text while on an iOS device? In my experience today the input box very occasionally accepts a tap to bring up the keyboard and cursor, but mostly behaves as if the field is uneditable. Standard text and textarea fields have been working as expected, as have text and textarea fields within repeaters. It's been a problem on a 2.5.28 and a 2.5.22 site. Nic

Howdey! Over the last weeks, I had some critical thoughts about processwires ui/ux feeling (relative sizing, overflow-x, hover-states, word-wrap:break-word) but also its stability. Last night I had the time to setup some new things. Good point for me to fiddle a bit around, with issues I've seen over the last months... ...short break: A lot of bugs, I've noticed earlier, are gone... @allcontributors I ♥ you! However, someone left over some bugs, for me ;-) I just ended up with an ugly and unstructured markdown file. No issues or pull-requests via git. The biggest reason, most things are between "bug" and "enhancement" or are just too platform specific. I think, it's better to talk about those stumbling blocks first. Ok, enough for now. As I said, it's markdown, to see the compiled thing, take this: https://gist.github.com/yckart/62b7b2ed9d0e3845cc4b # Bugs - Mobile (iOS 8) ## Navigation closes immediately **Description** Menu opens (for less than ~100ms) and closes immediately again. **Reproduce** Click on the upper left menu icon, scroll a bit down (~10px), click menu icon again. Try to open the menu. ## "Add New"-menu unclosable **Description** Shortcut-menu to add new pages, can not closed again with "Add Menu"-button. **Reproduce** Click on "Add New" (is open), click again to close (is still open). **Solution** It's something about the hover-state in mobile safari. Adding `ontouchstart` to `<body>` could help. Better, listen for events and change states via javascript. ## ProcessLister not reachable **Description** Lister (filter/related) is not "reachable". **Reproduce** 1. Open backend on iOS. 2. Try to find/reach "lister" and "recent-pages" **Solution** Add a dropdown-menu with infinite levels of nesting. See also [#show-fullpage](#show-fullpage) ## <a name="input-auto-zoom-bug">#</a> Input auto zoom bug **Description** If an input gets the focus, the page will zoomed in a bit. Causes horizontal scrollbars. See also [#horizontal-overflow](#horizontal-overflow) **Reproduce** Focus a text input element in the backend. **Solution** `html { text-size-adjust: 100%; }` **References** - http://stevenosloan.com/articles/2013/prevent-zooming-on-forms/ - http://stackoverflow.com/questions/2989263/disable-auto-zoom-in-input-text-tag-safari-on-iphone ## <a name="horizontal-overflow">#</a> Horizontal overflow **Description** Causes horizontal overflow on some pages, mostly because of long words/text. See also [#input-auto-zoom-bug](#input-auto-zoom-bug) **Reproduce** View "ProcessPageEditImageSelect"-configuration page **Solution** `word-wrap: break-word` ## SystemNotifications ghost doesn't break words **Description** Ghosts do not break long text on iOS. **Solution 1** It's something with `position: fixed; width: 100%` and `position: fixed; left: 0; right: 0;`. **Solution 2** I've seen some problems with `word-wrap: break-word`, I think there are some bugs related to this topic. See also [#horizontal-overflow](#horizontal-overflow) ## ProcessPageSearchForm too small **Description** Input field is a bit too small, for my eyes. --- # UI/UX ## ProcessPageEditImageSelect image not scaled **Description** The currently edited image in modal is not scaled down. We are able to define dimensions (e.g. 800x600), it seems that the image will get exactly this pixel-values as dimension-properties, makes the thing feel not that responsive as it could/should. **Reproduce** 1. Open page with image field attached 2. Click an image (larger than the device viewport) to open modal. **Solution** Haven't looked deep in it, but something like this should help: `img { max-width: 100% ...` ## PageTable ### Drag breaks layout **Description** Dragged item is not longer in box-model (due `position:absolute`) and visually breaks the table. **Reproduce** Move cursor over table item > hold mousedown and drag ~1px. **Solution 1** Create clone and move this instead of original PageTableField. **Solution 2** Save offset, before the PageTableField gets `position: absolute`. ### PageTable optional sorting **Description** Sorting via drag-and-drop should be optional. Currently we can say that items added to PageTable are "pre-sorted" with `Inputfield_sortfields`, but they are furthermore sortable via drag-and-drop. **Solution** Add "Sortable via drag-and-drop"-option to PageTable ## NotificationBug alignment/position **Description** It's annoying to have the NotificationMenu-toggler move always up/down (and it looks a bit too "floaty" in my eyes). **Solution** Move the NotificationBug right to search form and "fix" (not `fixed`) it at the top. --- # Feature requests ## <a name="show-fullpage">#</a> Show fullpage **Description** It could be helpful to be able to switch (on mobiel devices) between mobile- and desktop version. **Solution** Add "Show fullpage"-link to footer ## Inline time picker on datetime field **Description** If the date picker is inlined (always visible) theres no time picker available. ## <a name="line-trough-draft-pages-asmselect">#</a> Line trough draft pages AsmSelect **Description** In PageLister a page with status "draft" is striked (~~line-through~~), should be the same in asmSelect (if "Allow unpublished pages" is enabled). See also [#asm-page-state](#asm-page-state) **Reproduce** 1. Enable draft pages on PageTable. 2. Change page status to draft. 3. Open the referenced page and view select-field item. ## <a name="asm-page-state">#</a> Indicate page-states in asmSelect **Description** Each state could visualized with different styles. See also [#line-trough-draft-pages-asmselect](#line-trough-draft-pages-asmselect) **Solution** - draft > ~~line-through~~ - hidden > opacity - locked > *italic* ## Image-reference selection **Description** Selecting already uploaded images, from any page, is a must have! **Solution** Indri is one great tool for this, https://github.com/ikayzo/indri ## Create page once **Description** It should be a possibility to create pages (one the same tree-level) just once, instead of renaming to "duplicate-page-name-1". **Reproduce** 1. Create new page with name "foo". 2. Create another page with name "foo". 3. Now you have "foo" and "foo-1". **Solution** Add "Singular"-option to templates to let us decide what we want. If this option-field is ticked later, on page edition show notification if page with name "foo" already exists and don't save, or ask what todo. ## Pre-select site-profile **Description** If there's just one site-profile to install, use it. ## Show full version number on installation **Description** During installation the version in footer-section is trimmed e.g. 2.5.29 => 2.5 ## Dynamically enable field deletion **Description** Ajax-check to enable "Delete field" after valid change on "Action"-tab.

Hi guys, I have a jquery mobile $session problem : Some background : The system itself is a mix between CodeIgniter and PW - customer login, business logic calculations are done via CI; however some static pages are displayed via PW. CI sets $_SESSIONS on login, which are then used from processwire; furthermore PW API is used by CI to create new pages, add text images, etc. All of the above works fine on a desktop/tablet The problem : That's where jQuery mobile comes. To detect mobile devices I've used this logic inside site/config.php: if( check_user_agent('mobile') ) { $config->urls->templates = '/site-mobile/templates/'; $config->paths->templates = $rootPath . $config->urls->templates; } It all works good - I get redirected accordingly; Sadly there is a but - On the mobile version after I (user) manually refresh the page or open another page the $session goes from this array(6) { ["Session"]=> array(0) { } ["username"]=> string(19) "my_email@gmail.com" ["firstname"]=> string(5) "Boris" ["lastname"]=> string(7) "Processwire" ["usertime"]=> int(1406733793) } to nothing: array(1) { ["Session"]=> array(0) { } } The original idea was for the mobile to sit on m.mysite.com ,but for cross domain requests, session and seo issues this is not an option. What have I tried with jQuery Mobile so far : disable ajax globally / page specifically force full urls e.g. from /page to www.mysite.com/page 'a' tags data-ajax=false pass sessions from $_SESSION to PW $session->varname - it goes empty on refresh As mentioned it all works fine on the desktop version, so I'm pretty sure that has something to do with jQuery mobile. Any ideas. suggestions, notes, topics or anything on the subject is highly appreciated! Please let me know if you want me to display more code samples.

Hi Guys, i've search the forum via g* and found some interesting stuff on building apps with PW - but i've nothing found on some specific tasks for better performance and other issues...may someone like to share some hints or tipps? - using text/cache-manifest and setting it up via .htaccess like AddType text/cache-manifest .manifest ->are there any problems or other relevant things that i've have to keep in mind - i'm not very experienced in using much .htaccess "magic" on my former systems this was not needed - and the PW .htaccess looks quit complex.... - any experience on using a CACHE MANIFEST f.e. to cache js, jquery and css that is used by the webapp? or is there even more possibilitys with PW i've read about a setup where a Manifest is used to output different while the user is online or offline like this example code: CACHE MANIFEST # 2010-06-18:v2 # Explicitly cached 'master entries'. CACHE: /favicon.ico index.html stylesheet.css images/logo.png scripts/main.js # Resources that require the user to be online. NETWORK: login.php /myapi http://api.twitter.com # static.html will be served if main.py is inaccessible # offline.jpg will be served in place of all images in images/large/ # offline.html will be served in place of all other .html files FALLBACK: /main.py /static.html images/large/ images/offline.jpg *.html /offline.html My App (Website) will perform two things - listing things (could done via JSON and the great Module from Ryan PageServices) and some forms to push new items on the Website so my idea is - that if the user is offline only provide the listings and pulled content and hide the formpart until he have a connection. For a real offline-first App (save the data in local database or using tools like hood.ie or pouchDB) there is no "real" budget to hire a dev - so this would be a mobilefirst "Website" no real App - and my effort is now to give just some functionality get working in the "offline" mode. Any hints, tricks, tipps, links or warnings are appreciated... Best Regards mr-fan

Hi, I've come across this issue for the first time and am wondering if anyone else has a better solution than what I've come up with. I have a site that uses PHP to sniff the user agent and redirect if it finds one that matches with mobile. Like this: $iphone = strpos($_SERVER['HTTP_USER_AGENT'],"iPhone"); $ipad = strpos($_SERVER['HTTP_USER_AGENT'],"iPad"); $ipod = strpos($_SERVER['HTTP_USER_AGENT'],"iPod"); $winmo = strpos($_SERVER['HTTP_USER_AGENT'],"Windows Phone"); $opera_mini = strpos($_SERVER['HTTP_USER_AGENT'],"Opera Mini"); $android_mobile = false; if(stripos($_SERVER['HTTP_USER_AGENT'],"Android") && stripos($_SERVER['HTTP_USER_AGENT'],"mobile")){ $android_mobile = true; } $is_mobile = 0; if($iphone || $ipod || $android_mobile || $winmo || $opera_mini) { $is_mobile = 1; } $is_ipad = 0; if($ipad) { $is_ipad = 1; } if($is_mobile) { header("location: m/"); } However, I'd like to use caching on templates that have this detection and have found (not surprisingly of course) that the redirection doesn't happen when caching is enabled - everyone gets served the desktop content. I could use a JavaScript based solution, but that would not be ideal as part of the page would render before the user would be redirected. Just wondering if anybody has any other ways to solve this problem. Would ProCache solve this? Thanks.

Parse.com It's a platform for mobile applications. you have other options like stackmob or kinvey. Basically you got an SDK for different platforms that enables communication, data storage and push notifications. Currently I´m Looking foward integrating Processwire with Parse.com using the php wrapper https://github.com/apotropaic/parse.com-php-library

For best practice best-of-scotland.co.uk redirects to www.best-of-scotland.co.uk and this was done by adding these lines to the core htaccess file: RewriteCond %{HTTP_HOST} !^www\. [NC] RewriteRule ^(.*)$ http://www.%{HTTP_HOST}/$1 [R=301,L] However, we also have a mobile site working on a parked domain using this method: index.php has the following lines changed to make sure the site directory is hard coded instead on a variable $config->urls->siteModules = "site/modules/"; $assetsDir = "site/assets"; $config->urls->adminTemplates = is_dir("site/$adminTplDir") ? "site/$adminTplDir/" : "$wireDir/$adminTplDir/"; I copied index.config.php from wire to the root and added these line: function ProcessWireHostSiteConfig() { return array( 'mobile.best-of-scotland.co.uk' => 'site-mobile', 'best-of-scotland.co.uk' => 'site', 'www.best-of-scotland.co.uk' => 'site', ); } The problem is that I can't get the two to work together. If I remove the www redirect from the htaccess file the mobile site works. Adding it in stops it working. Can anyone help here please? Or is there a better method for delivering mobile sites? Thanks Mike

Hi all Ryan have you planned to make your ProcessWire forum avaliable on Tapatalk? It would be great! Thanks and greets from Germany

Is the following concept possible using ProcessWire? 1. The mobile version of a site would reside at m.exampledomain.com and the desktop version at exampledomain.com 2. The mobile version would use responsive web design, and the desktop version would not. 3. The mobile version would have a limited experience, displaying less content and functionality than the desktop version of the site. 4. Both sites would use a single database, maintained using only one ProcessWire Admin. There wouldn't be a set of separate fields for each site; instead both sites would use the same set of fields from the same single database. 5. Each site would use a different set of ProcessWire templates. The concept here is that the client maintains the desktop version and the content is used in two sets of templates (mobile and desktop). This is different than using responsive web design and presenting the same set of templates differently for both mobile and desktop.

Hi all, I was thinking what's the best approach for a multi-themed website. The point of this is to build a website that has a simple website for mobile within a subdomain (m.domain.com, for example). How can this be achieved? I assume everything would be easy if there would be another "/site" folder. Is this it? If so, how can that be achieved? Many thanks in advance! Cheers