Jump to content


Popular Content

Showing content with the highest reputation on 06/06/2019 in all areas

  1. 4 points
    We recently rebuilt the Architekturführer Köln (architectural guide Cologne) as a mobile-first JavaScript web app, powered by VueJS in the frontend and ProcessWire in the backend. Concept, design and implementation by schwarzdesign! The Architekturführer Köln is a guidebook and now a web application about architectural highlights in Cologne, Germany. It contains detailled information about around 100 objects (architectural landmarks) in Cologne. The web app offers multiple ways to search through all available objects, including: An interactive live map A list of object near the user's location Filtering based on architect, district and category Favourites saved by the user The frontend is written entirely in JavaScript, with the data coming from a ProcessWire-powered API-first backend. Frontend The app is built with the Vue framework and compiled with Webpack 4. As a learning exercise and for greater customizability we opted to not use Vue CLI, and instead wrote our own Webpack config with individually defined dependencies. The site is a SPA (Single Page Application), which means all internal links are intercepted by the Vue app and the corresponding routes (pages) are generated by the framework directly in the browser, using data retrieved from the API. It's also a PWA (Progressive Web App), the main feature of which is that you can install it to your home screen on your phone and launch it from there like a regular app. It also includes a service worker which catches requests to the API and returns cached responses when the network is not available. The Architekturführer is supposed to be taken with you on a walk through the city, and will keep working even if you are completely offline. Notable mentions from the tech stack: Vue Vue Router for the SPA functionality VueX for state management and storage / caching of the data returned through the API Leaflet (with Mapbox tiles) for the interactive maps Webpack 4 for compilation of the app into a single distributable Babel for transpilation of ES6+ SASS & PostCSS with Autoprefixer as a convenience for SASS in SFCs Google Workbox to generate the service worker instead of writing lots of boilerplate code Bootstrap 4 is barely used here, but we still included it's reboot and grid system Backend The ProcessWire backend is API-only, there are no server-side rendered templates, which means the only PHP template is the one used for the API. For this API, we used a single content type (template) with a couple of pre-defined endpoints (url segments); most importantly we built entdpoints to get a list of all objects (either including the full data, or only the data necessary to show teaser tiles), as well as individual objects and taxonomies. The API template which acts as a controller contains all the necessary switches and selectors to serve the correct response in <100 lines of code. Since we wanted some flexibility regarding the format in which different fields were transmitted over the api, we wrote a function to extract arbitrary page fields from ProcessWire pages and return them as serializable standard objects. There's also a function that takes a Pageimage object, creates multiple variants in different sizes and returns an object containing their base path and an array of variants (identified by their basename and width). We use that one to generate responsive images in the frontend. Check out the code for both functions in this gist. We used native ProcessWire data wherever possible, so as to not duplicate that work in the frontend app. For example: Page names from the backend translate to URLs in the frontend in the form of route parameters for the Vue Router Page IDs from ProcessWire are included in the API responses, we use those to identify objects across the app, for example to store the user's favourites, and as render keys for object lists Taxonomies have their own API endpoints, and objects contain their taxonomies only as IDs (in the same way ProcessWire uses Page References) Finally, the raw JSON data is cached using the cache API and this handy trick by @LostKobrakai to store raw JSON strings over the cache API. Screenshots
  2. 4 points
    @bernhard It's a little trick you can do with Google Chrome: In the responsive view mode, select one of the iPhone models in the responsive mode settings bar. In the flyout menu on the upper right, there's an option "show device frame". Only works with some of the devices, I've used "iPhone 6/7/8 Plus". If you take a screenshot (via the same flyout menu) while in responsive design mode with the show device frame option turned on, the device frame will be included in the screenshot.
  3. 3 points
    Hey everyone- We recently had a need come up for a website. After launching our website the company hired an SEO specialist who is doing some significant work revising and optimizing content. To help enhance this process I wrote a very simple module that automatically submits the website's sitemap.xml file to Bing and Google when a page is published, or when a page is saved that was already published. As for our reasoning- there's a lot of information available as to why submitting your sitemap regularly can be beneficial. In classic Google style their official documentation says that there "is no guarantee" that submitting a sitemap alone will trigger a re-indexing by Google's bots. That said, devs have done tests where there is a strong coincidence between a sitemap submission and activity by Google bots on that website. Google has stated that there is no limit or cap on the number of times you can submit a sitemap so there is no penalty for triggering this for every change. For more details and the hard science visit this excellent article https://trevorfox.com/2018/09/ping-sitemaps-search-engines/ This module does the following: Hooks into save/publish Checks that the sitemap.xml URL is valid and a sitemap is available. This is done through a cURL request instead of file checking to account for plugins such as MarkupSitemapXML that generate the sitemap dynamically on demand. Submits sitemap ping to Google and Bing Logs activity Shows a warning if the sitemap was not submitted after a page save/publish. Which could help a user notify the site developer if something isn't working. My primary question is quality of code and using hooks correctly. I used two addHookAfter published and saved to trigger pings in the init() function. Is there a better way to hook into multiple events or is defining the hooks separately the way to go? I haven't created a lot of modules and wanted to give the community a chance to critique it before considering adding it to the module directory. Source is located at: https://github.com/skylundy/ProcessAutoSitemapSubmit Thanks for any feedback or critique!
  4. 3 points
    Why I'm still using jQuery in 2019
  5. 2 points
    Something like this? <?php // Page sub-select - find pages based on previous selected pages // example: find all brand based on products // https://processwire.com/talk/topic/3553-handling-categories-on-a-product-catalogue/?do=findComment&comment=37833 // define array for brands $brands = new PageArray(); foreach($pages->find("template=productTemplate") as $product) { // add brand from product page to brands array $brands->add($product->brandField); };
  6. 2 points
    Nice site, the only issue I came across is scrolling over the map is impossible with the mouse (the map gets zoomed instead).
  7. 2 points
    https://github.com/processwire/processwire/blob/649d2569abc10bac43e98ca98db474dd3d6603ca/wire/core/ProcessWire.php#L182-L217 This will point you to anything happening at startup. Most of the important stuff is part of ProcessWire::load, which triggers the initialization of most common api variables.
  8. 2 points
    So I think I got it. I had to add this to package.json under globs. "critical": [ { "url": "", "template": "home" }, { "url": "url-using-this-template", "template": "basic-page" }, { "url": "blog", "template": "blog" }, { "url": "blog/blog-post-url", "template": "blog-item" }, { "url": "contact", "template": "contact" } ],
  9. 2 points
    This looks absolutely brilliant! Congratulations for this great work and thanks for sharing it with us! I've also tried it on my phone and everything just worked 🙂 One thing that was counter intuitive for me was the left arrow icon on the top left corner of the frontpage. On all other pages this icon means "back", on the frontpage there is no "back" of course, but I didn't realize that I was on the frontpage, so it might make sense to remove the icon there? Another thing: I wanted to share the app with a friend, but the share icon is only available on sub-pages.
  10. 1 point
    Mystique Module for ProcessWire CMS/CMF Github repo : https://github.com/trk/Mystique Mystique module allow you to create dynamic fields and store dynamic fields data on database by using a config file. Requirements ProcessWire 3.0 or newer PHP 7.0 or newer FieldtypeMystique InputfieldMystique Installation Install the module from the modules directory: Via Composer: composer require trk/mystique Via git clone: cd your-processwire-project-folder/ cd site/modules/ git clone https://github.com/trk/Mystique.git Module in live reaction with your Mystique config file This mean if you remove a field from your config file, field will be removed from edit screen. As you see on youtube video. Using Mystique with your module or use different configs path, autoload need to be true for modules Default configs path is site/templates/configs/, and your config file name need to start with Mystique. and need to end with .php extension. // Add your custom path inside ready or init function, didn't tested outside Mystique::add('your-configs-path'); All config files need to return a php array like examples. Same as ProcessWire Inputfield Api, only difference is set and showIf usage <?php namespace ProcessWire; /** * Resource : testing-mystique */ return [ 'title' => __('Testing Mystique'), 'fields' => [ 'text_field' => [ 'label' => __('You can use short named types'), 'description' => __('In file showIf working like example'), 'notes' => __('Also you can use $input->set() method'), 'type' => 'text', 'showIf' => [ 'another_text' => "=''" ], 'set' => [ 'showCount' => InputfieldText::showCountChars, 'maxlength' => 255 ], 'attr' => [ 'attr-foo' => 'bar', 'attr-bar' => 'foo' ] ], 'another_text' => [ 'label' => __('Another text field (default type is text)') ] ] ]; Example: site/templates/configs/Mystique.seo-fields.php <?php namespace ProcessWire; /** * Resource : seo-fields */ return [ 'title' => __('Seo fields'), 'fields' => [ 'window_title' => [ 'label' => __('Window title'), 'type' => Mystique::TEXT, // or InputfieldText 'useLanguages' => true, 'attr' => [ 'placeholder' => __('Enter a window title') ] ], 'navigation_title' => [ 'label' => __('Navigation title'), 'type' => Mystique::TEXT, // or InputfieldText 'useLanguages' => true, 'showIf' => [ 'window_title' => "!=''" ], 'attr' => [ 'placeholder' => __('Enter a navigation title') ] ], 'description' => [ 'label' => __('Description for search engines'), 'type' => Mystique::TEXTAREA, 'useLanguages' => true ], 'page_tpye' => [ 'label' => __('Type'), 'type' => Mystique::SELECT, 'options' => [ 'basic' => __('Basic page'), 'gallery' => __('Gallery'), 'blog' => __('Blog') ] ], 'show_on_nav' => [ 'label' => __('Display this page on navigation'), 'type' => Mystique::CHECKBOX ] ] ]; Searching data on Mystique field is limited. Because, Mystique saving data to database in json format. When you make search for Mystique field, operator not important. Operator will be changed with %= operator. Search example $navigationPages = pages()->find('my_mystique_field.show_on_nav=1'); $navigationPages = pages()->find('my_mystique_field.page_tpye=gallery');
  11. 1 point
    This is the topic for the new module, TextInputAwesomeplete. Github: https://github.com/outflux3/TextInputAwesomplete Modules Directory: https://modules.processwire.com/modules/text-input-awesomplete/ Text Input Awesomplete Key Points: Uses Awesomplete JS library for instantiating autocomplete suggestions on text input fields in Processwire CMS. Supports any text field, including Page Title (FieldtypePageTitle). Allows admins to configure a list of suggestions (textarea input), or pull suggestions from Processwire pages, by configuring which pages to pull from and which field's value to use. About Awesomplete https://leaverou.github.io/awesomplete/ https://github.com/LeaVerou/awesomplete Benefits & Uses Can be helpful for fields where users may need to enter the same text in the same field on multiple pages, and you can't or don't want to use a Page Reference field. One example could be a site where you send emails using various boilerplate subjects; Another place to use this would be if you had an existing site with a text field that has some inconsistency when same values are added. The autocomplete would help editors to always use the same format as the other pages with the same value. Installation Upload or install from Modules directory. Usage & Configuration Once installed, on any text input field (including Page Title), you will see an option to enable autocomplete. Once enabled you will have the option to type a list of items for autocomplete suggestions, or enable the module to search pages for suggestions. Note that if you enter any items in the Items List field, those will always be part of the autocomplete suggestions, in addition to pages if configured. If you elect to use pages for the suggestions, you have these options: Choose a template to limit by (adds a template=sometemplate to the pages find selector). Override which field to pull suggestions from (by default it will use the field you are configuring). Sets the $field!= in the selector. Setup a Selector for finding the pages for the autocomplete suggestions. This overrides the template selected. Note that the selector needs to return pages that use the field being configured, or the field selected for override. Screenshots: (1) Examples of in-use: Module Configuration Screen
  12. 1 point
    Hi all, I thought that you'd be interested to know we've now launched our third ProcessWire site, called Home of the Blizzard - The Australasian Antarctic Expedition. It's about Douglas Mawson's famous expedition of 1911-1914. As a part of the move to ProcessWire from our previous CMS it has undergone a redesign as well. It has been done completely in-house. https://mawsonshuts.antarctica.gov.au/ It uses Fancybox for the image galleries and modal menu, Plyr for video, and Modernizr (primarily to check for CSS Grid compatibility). It was actually the first PW site we started working on, but then the SCAR COMNAP and Antarctic Jobs sites became priorities so it got pushed back. It's great to have it live at last. The next PW site we launch should be our main site (http://www.antarctica.gov.au)! That's still a work in progress. 🙂
  13. 1 point
    See the selectors documentation for sub-selectors: https://processwire.com/docs/selectors/#sub-selectors There are two syntaxes available: square brackets and dot, with the dot syntax being shorter and arguably easier to read, but having some limitations. It's not quite clear to me how many levels of nesting exist in your case but your selectors would look something like this with two levels of nesting: // Square brackets syntax $results = $pages->find("page_reference_1=[page_reference_2=[text|headline%=pencil]]"); // Dot syntax - probably not as useful in your case because pipe OR conditions are not allowed in the field portion of the selector $results = $pages->find("page_reference_1.page_reference_2.text%=pencil");
  14. 1 point
    I went down this road for a couple months - tried it out but I wasn't making much headway with the learning curve (steep). Reluctantly, I decided to come back to PW... 😏
  15. 1 point
    Thank you, guys! Thanks for your feedback, thoughts and preview on your upcoming ideas and projects here and in my inbox. I will sort my thoughts and mix them with your input now. I'll keep you posted on this.
  16. 1 point
    I understand, thx for the explanation 🙂 What program did you use for the mobile screenshots?
  17. 1 point
    @netcarver Thanks! @bernhard Thank you for the QA 😀 Regarding the "back" button, I tried to make it more intelligent, but I got stuck on the history API not having a reliable way to check the last items. I thought about turning it off only on the homepage, but I wanted to have a way to go back to the last page if you go e.g. from an object detail page to the homepage and want back to the object. I'd have to track the last history states manually, since the Vue Router just wraps around the history API and doesn't keep a memory of itself. I'll put that back on the to do list! As for the share button, we only have that on the object pages in the subnavigation; it would take up to much space too have it on the bottom all the time. Maybe we can put it at the end of every page, or in the navigation. Though it's only supported in Chrome on Android and Safari at the moment, and most browsers have their own native sharing button, so it wasn't the most important feature to us. @pwired Thank you so much! 🙂
  18. 1 point
    Beautiful color contrasts and switching between them Responsive made with proportional resizing Pictures going out of focus into the background The first not irritating popups I have ever seen -- Einfach WoW --
  19. 1 point
  20. 1 point
    For the last couple months, I've been working on a module that does exactly this. It's not a site profile, it's not a theme. I don't know what term would accurately describe it, but its a ProcessWire module that's an opinionated, update-able starting point, oriented towards developers, and brings in a bunch of boilerplate like: an installer that will create fields, templates, pages, hannacodes; it runs through a thorough check before doing anything that may result in an error (module installation errors are aggravating; i'm testing it very thoroughly) the installer will rename your 'templates' dir to something temporary, and then copy a starting 'templates' folder that's prepped for the module (you should only do this on dev) if you try to add it to an existing site with a bunch of data, it will work as long as there are not collisions in some fields and templates; if there are, the module won't install and tell you what you need to change around to allow it to install establishes some new $config variables ('env', 'disableTemplateCache', a few others) built with UIkit 3 in mind, but not hardcoded to it a menu builder based on Repeaters with its own Process Module has its own seo+og+twitter+sitemap metadata fields and uses Profields FieldGroup since that is the best module for handling such a grouping has it's own templates inside the module which can be used, or overridden in /site/templates/; this includes blog sitemap.xml maintenance search in addition to template files being able to be overridden, partial files can be overridden too! some module configuration fields (site_name, maintenance, etc.) the module has documentation and other statistics built into it for easy reference takes full advantage of setting() and markup regions; applies attributes like UIkit 'uk-grid' and other data attributes without "touching" the html; keeps the module flexible and easily allows you to rip out UIkit and swap it for another CSS framework (Bootstrap 4); you'll never need to touch edit the _main.php file because of how regions has been set up has it's on RepeaterMatrix fields with boilerplate matrix-types (headline, text, slideshow, etc. etc.); if the user makes new custom matrix types and a later version of my module brings in a new matrix-type, it will update the RepeaterMatrix field and merge it correctly (tricky to do!); the matrix types use many of the same base fields, thereby allowing you to switch from one matrix type to another without data being destroyed (this was only possible as of 2 weeks ago with the new matrix update) to avoid creating a bunch of 1-off fields for the matrix field for block configuration, it uses the new and quite amazing Mystique fieldtype in a unique way (this was tricky to do); this module is critical to establishing a page-builder that is clean (this was only possible as of April 2019 since the module is brand new) brings in PW's debugger to the frontend (brings in jQuery UI); can be disabled all field and template names don't use any prefixes; this would allow you to dump the module one day in the future if you don't like it, without having a bunch of field and template names that sound too specific to the module Laravel Mix based asset compiler pre-configured with UIkit works with FormBuilder and other modules I often use; works and may require certain Pro modules; eliminates the need for any modules that do blogging, menu building, sitemap, maintenance or seo since this module does it using native ProcessWire login/logout/account/register templates it may include a 'collection' generator for common things like events, products, people, properties, along with some templates for those. don't like the templates my module provides? then just create your own template file in /site/templates/the-template-file.php which will override /site/modules/my-module-name/templates/the-template-file.php Right now I just started building a few sites with it (spent the last 2 months developing it) which will hammer it out further. I will release it late summer, early fall.
  21. 1 point
  22. 1 point
    @NorbertH - thanks for the screenshot - nothing out of the ordinary there. There is no need to deactivate the RequestInfo panel, just uncheck the "Field List & Values" option from its settings: That will reduce the size and time of that panel considerably. The API Explorer and Captain Hook panels are naturally going to be large in size, but the time should be significantly lower the next time you load it because the content gets cached - for me it's 79ms. Hope that helps a little.
  23. 1 point
    ...couldn't resist to fork it and clean the code of this framework a little bit if i get the time...
  24. 1 point
    ugh-ugh, so many bored developers trying to cheer up themselves...
  • Create New...