Jump to content


Popular Content

Showing content with the highest reputation since 05/26/2019 in all areas

  1. 30 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. 18 points
    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.
  3. 17 points
    MarkupMenu is a markup module for generating menu trees. When provided a root page as a starting point, it generates a navigation tree (by default as a HTML "<ul>" element wrapped by a "<nav>" element) from that point onwards. If you've also provided it with current (active) page, the menu will be rendered accordingly, with current item highlighted and items rendered up to that item and its children (unless you disable the "collapsed" option, in which case the full page tree will be rendered instead). Modules directory: https://modules.processwire.com/modules/markup-menu/ GitHub repository: https://github.com/teppokoivula/MarkupMenu Usage As a markup module, MarkupMenu is intended for front-end use, but you can of course use it in a module as well. Typically you'll only need the render() method, which takes an array of options as its only argument: echo $modules->get('MarkupMenu')->render([ 'root_page' => $pages->get(1), 'current_page' => $page, ]); Note: if you omit root_page, site root page is used by default. If you omit current_page, the menu will be rendered, but current (active) page won't be highlighted etc. A slightly more complex example, based on what I'm using on one of my own sites to render a (single-level) top menu: echo $modules->get('MarkupMenu')->render([ 'current_page' => $page, 'templates' => [ 'nav' => '<nav class="{classes} menu--{menu_class_modifier}" aria-label="{aria_label}">%s</nav>', 'item_current' => '<a class="menu__item menu__item--current" href="{item.url}" tabindex="0" aria-label="Current page: {item.title}">{item.title}</a>', ], 'placeholders' => [ 'menu_class_modifier' => 'top', 'aria_label' => 'Main navigation', ], 'include' => [ 'root_page' => true, ], 'exclude' => [ 'level_greater_than' => 1, ], ]); Note: some things you see above may not be entirely sensible, such as the use of {menu_class_modifier} and {aria_label} placeholders. On the actual site the "nav" template is defined in site config, so I can define just these parts on a case-by-case basis while actual nav markup is maintained in one place. Please check out the README file for available render options. I'd very much prefer not to keep this list up to date in multiple places. Basically there are settings for defining "templates" for different parts of the menu (list, item, etc.), include array for defining rules for including in the menu and exclude array for the opposite effect, classes and placeholders arrays for overriding default classes and injecting custom placeholders, etc. MarkupMenu vs. MarkupSimpleNavigation TL;DR: this is another take on the same concept. There are many similarities, but also some differences – especially when it comes to the supported options and syntax. If you're currently using MarkupSimpleNavigation then there's probably no reason to switch over. I'd be surprised if anyone didn't draw lines between this module and Soma's awesome MarkupSimpleNavigation. Simply put, I've been using MSN (...) for a number of years, and it's been great – but there have been some smallish issues with it, particularly with the markup generation part, and it's also doing some things in a way that just doesn't work for me – the xtemplates thing being one of these. In many ways it's less about features, and more about style. In MarkupMenu I've tried to correct these little hiccups, modernise the default markup, and allow for more flexibility with placeholder variables and additional / different options. MarkupMenu was built for ProcessWire 3.0.112+ and PHP 7.1+, it's installable with Composer, and I have a few additional ideas (such as conditional placeholders) on my todo list. One smallish and rather specific difference is that MarkupMenu supports overriding default options via $config->MarkupMenu. I find myself redefining the default markup for every site, which until now meant that each site has a wrapper function for MarkupSimpleNavigation (to avoid code / config repetition), and this way I've been able to omit that Requirements ProcessWire >= 3.0.112 PHP >= 7.1.0 If you're working on an earlier version of ProcessWire or PHP, use MarkupSimpleNavigation instead.
  4. 17 points
    Repeater Images Adds options to modify Repeater fields to make them convenient for "page-per-image" usage. Using a page-per-image approach allows for additional fields to be associated with each image, to record things such as photographer, date, license, links, etc. When Repeater Images is enabled for a Repeater field the module changes the appearance of the Repeater inputfield to be similar (but not identical) to an Images field. The collapsed view shows a thumbnail for each Repeater item, and items can be expanded for field editing. Screencast Installation Install the Repeater Images module. Setup Create an image field to use in the Repeater field. Recommended settings for the image field are "Maximum files allowed" set to 1 and "Formatted value" set to "Single item (null if empty)". Create a Repeater field. Add the image field to the Repeater. If you want additional fields in the Repeater create and add these also. Repeater Images configuration Tick the "Activate Repeater Images for this Repeater field" checkbox. In the "Image field within Repeater" dropdown select the single image field. You must save the Repeater field settings to see any newly added Image fields in the dropdown. Adjust the image thumbnail height if you want (unlike the core Images field there is no slider to change thumbnail height within Page Edit). Note: the depth option for Repeater fields is not compatible with the Repeater Images module. Image uploads feature There is a checkbox to activate image uploads. This feature allows users to quickly and easily add images to the Repeater Images field by uploading them to an adjacent "upload" field. To use this feature you must add the image field selected in the Repeater Images config to the template of the page containing the Repeater Images field - immediately above or below the Repeater Images field would be a good position. It's recommended to set the label for this field in template context to "Upload images" or similar, and set the visibility of the field to "Closed" so that it takes up less room when it's not being used. Note that when you drag images to a closed Images field it will automatically open. You don't need to worry about the "Maximum files allowed" setting because the Repeater Images module overrides this for the upload field. New Repeater items will be created from the images uploaded to the upload field when the page is saved. The user can add descriptions and tags to the images while they are still in the upload field and these will be retained in the Repeater items. Images are automatically deleted from the upload field when the page is saved. Tips The "Use accordion mode?" option in the Repeater field settings is useful for keeping the inputfield compact, with only one image item open for editing at a time. The "Repeater item labels" setting determines what is shown in the thumbnail overlay on hover. Example for an image field named "image": {image.basename} ({image.width}x{image.height}) https://github.com/Toutouwai/RepeaterImages https://modules.processwire.com/modules/repeater-images/
  5. 15 points
    This week I've been working on core 3.0.134 but am going to keep the version number at 3.0.133 for another week while I continue with updates there. Commit log. One of the updates already present that I'm finding quite useful is a nice upgrade to InputfieldSelector (like used by Lister and ListerPro) which simplifies the field selection process as there are no longer separate "Field" and "Field…" selections for fields that have subfields, and they are now bundled into one. This reduces the number of selectable fields and likewise speeds up the selecting/filtering process. I'll have more details on that next week, along with other updates. I'm going to be working remotely next week (not vacation) and do not yet know what the internet situation is going to be yet, so on the chance that I don't have good internet access, I may not have an update next week, but hopefully will. Have a great weekend!
  6. 15 points
    This week we’ll take a look at 3 different WEBP image strategies that you can use in ProcessWire 3.0.132+. Then we’ll dive into a major update for the Google Client API module, and finish up by outlining some useful new updates in FormBuilder— https://processwire.com/blog/posts/webp-images-and-more/
  7. 15 points
    ProcessWire 3.0.133 adds a useful new $page->meta() method for a new type of page-specific persistent data storage, adds the ability for users to create their own bookmarks in Lister, and has a handy and time saving update for the asmSelect input type. Read on for all the details, examples and screenshots— https://processwire.com/blog/posts/pw-3.0.133/
  8. 13 points
    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
  9. 12 points
    Or you could just use a RuntimeMarkup field with WireHttp() and $cache. I'd never heard of SmugMug before . Here's a demo for how this could be done in RM. We are mimicking a ProcessWire image field by using similar markup and including Image field's JS and CSS. Please see the notes in the code. We are also caching the response for 1 hour so we don't hit SM limits. I created a free 14-day trial account for this. Here it is...I couldn't think of a better name for it . As you can see in the demo video, we are pulling the exact images. The code could be improved. You could get all fancy and even push changes to SM using Ajax, for instance. Please see the examples in RM docs. This code goes into the file you are rendering. <?php namespace ProcessWire; // set PW image assets $url = $config->urls->InputfieldImage; $config->styles->add($url . "InputfieldImage.css"); // @note: JS just in case you need it but in that case, you will also need Magnific, etc $config->scripts->add($url . "InputfieldImage.js"); // get cache only if it’s less than or equal to 1 hour old (3600 seconds) // @note: cache is unique for this page $cacheName = "smugmug_{$page->id}"; $images = $cache->get($cacheName, 3600); // no cache or expired, request data from smugmug if(is_null($images)) { // Get an instance of WireHttp $http = new WireHttp(); // we want JSON, so set headers accordingly $headers = array('Accept'=>'application/json'); $http->setHeaders($headers); // an example public album $url = 'https://www.smugmug.com/api/v2/album/xxxxxx!images'; $data = array('APIKey'=>'12345678900987654321');// API key $response = $http->getJSON($url, true, $data); $images = $response['Response']['AlbumImage']; // cache the response, and expire after 1 hour (3600 seconds) // @note: only caching the albmum! $cache->save($cacheName, $images, 3600); } // outer list markup for images (c & p from PW with slight modifications) $out = "<ul class='gridImages ui-helper-clearfix ui-sortable'>"; // iterate through response. // @todo: You might want to do some error checking first foreach($images as $image) { // file size to kB $fileSize = ceil($image['OriginalSize'] / 1000); $out .= " <li id='file_{$image['UploadKey']}' class='ImageOuter gridImage ui-widget'> <div class='gridImage__tooltip'> <table> <tbody> <tr> <th>Dimensions</th> <td>{$image['OriginalWidth']}x{$image['OriginalHeight']}</td> </tr> <tr> <th>Filesize</th> <td>{$fileSize} kB</td> </tr> <tr> <th>Description</th> <td><small>{$image['Title']}</small></td> </tr> </tbody> </table> </div> <div class='gridImage__overflow' style='width: 130px; height: 130px;'> <img src='{$image['ThumbnailUrl']}' alt='{$image['Caption']}' data-w='{{$image['OriginalWidth']}}}' data-h='{{$image['OriginalHeight']}}' data-original='' style='max-height: 100%; max-width: none; top: 50%; left: 50%; transform: translate3d(-50%, -50%, 0px);'> </div> <div class='gridImage__hover'> <div class='gridImage__inner'> <label for='' class='gridImage__trash'> <input class='gridImage__deletebox' type='checkbox' name='delete_images_{$image['UploadKey']}' value='1' title='Delete'> <span class='fa fa-trash-o'></span> </label> <a class='gridImage__edit' style='line-height: 130px;'> <span>Edit</span> </a> </div> </div> </li> "; } $out .= '</ul>'; $out = "<div id='my_album'>{$out}</div>"; return $out; Screenshot Video Demo
  10. 9 points
    Also, there is a counter option built into PW for all textarea fields:
  11. 9 points
    Version 0.8.0 has been released: Adds facebook share preview for content editors when editing Opengraph meta data Adds support to extend the rendered meta title with additional information such as the domain or site name (#11) Renders structured data (JSON-LD) for breadcrumbs via new group "structuredData" (#10) Adds new meta group "structuredData" which will handle more types of structured data in the future Happy weekend everyone! Cheers
  12. 9 points
    A year or so later, I have seen the future. Actually, I just stumbled upon it. Just when I was diving into Angular + TypeScript + NativeScript for mobile apps, I recently came across this thing, Flutter. I have been totally blown away! The last time I was this excited was when I discovered ProcessWire :-). Long story short, before I ended up here, I was looking at Kivy and BeeWare. I managed to pick up Python along the way. Kivy looks promising. I am interested in both mobile and desktop apps and it ticks those boxes. Then along comes Flutter and wow! Cross platform, write once deploy everywhere (iOS, Android, Embedded, Windows, Mac). It's still early days but I am totally convinced. I was a bit hesitant because it is a Google project (you know, their history of killing off projects...) but since it is open source and there are some big players already involved, I am sold. Flutter compiles to machine code! It comes with lots of widgets out of the box, both for iOS and Android. You can also ask it to compile to JavaScript (like TypeScript can and does). To program in Flutter you use Dart, a language developed by Google. I came across Dart a while back. Back then, it was considered a dead language. It has made a resurgence, thanks to Flutter. If you know your OOP and JavaScript, it is very easy to pick up, in an hour or so. If looking at Flutter, have a look at Hummingbird as well. What do you folks think? Anyone used Flutter before?
  13. 8 points
    Chaining is based on the idea that your method returns a self-reference, i.e. "return $this", after which you can access another method from the returned object. In your example when you leave $value param of the text() method empty (so that it defaults to "null"), the method returns "$this->text" (which is a string or null) instead of an object – and you cannot use a string for chaining (it doesn't have any methods). In other words: even if "$this->text" had a non-null value, you still couldn't use it chaining, 'cause it would return a string and not a self-reference to the containing object Based on your code it looks like text() without a $value is supposed to work like a getter, returning the text (string), so technically this is how it's supposed to work. The most obvious option would be defining another method – perhaps something like setText(string $value = null) – that sets the value but always returns $this, and never the value itself. Or you could just modify the text() method so that it cannot be used as a getter for the value, i.e. make that always return $this. Hope this helps a bit
  14. 8 points
    Hi all, Stumbled upon this recently: https://frontendmasters.com/books/front-end-handbook/2019/ ( https://github.com/FrontendMasters/front-end-handbook-2019 ) Quote: "This is a guide that anyone could use to learn about the practice of front-end development. It broadly outlines and discusses the practice of front-end engineering: how to learn it and what tools are used when practicing it in 2019. It is specifically written with the intention of being a professional resource for potential and currently practicing front-end developers to equip themselves with learning materials and development tools. Secondarily, it can be used by managers, CTOs, instructors, and head hunters to gain insights into the practice of front-end development." Plenty to explore! I've warned you
  15. 8 points
    www.kentvitrini.com - It is a City Portal of Corlu (Turkey) , our hometown. After using TYPO3 CMS for more than 10 years for our projects, this is our first PW project. With PW less effort, less stress but much more fun. I am impressed. For Mobile Chrome Users : The site is a PWA (Progressive Web App), so it can be downloaded to the homescreen of the phone for future visits. As it is in turkish let me describe it: It has 3 main data groups - "Haberler" are News - "Firma Rehberi" is a Company Directory - "Etkinlik" are Events As there will be more and more information on the site a Live Search will help the visitors to find everything they need. For trying type "corlu" as search word, after 3 letters the search will be loading results. The Top Menu is "Mega Menu" enabled. Looks pretty good on hover On top (under the main menu) there is mix of all content. It looks like a billboard. Below are "Featured Companies" in random order, so the order of the companies changes with every load of the page. Below (Left) News Below (Left) nearest Events. And below (Sidebar) A summery of all content, Weather, pharmacy on duty. We will add Classified ads and "Who is Who" sections in near future.
  16. 8 points
    It's possible, but not as simple as it should be because it seems that the option() method of Datepicker (and Timepicker) is not working for the stepMinute option. Instead it seems you have to destroy and re-init the datepicker if you change stepMinute. In some custom admin JS, for a field named "date"... // For a Datetime field named "date" with time enabled $('#Inputfield_date').on('focus', function() { // Get the existing options for the Datetimepicker var options = $(this).datetimepicker('option', 'all'); // If the picker has the default stepMinute setting... if(options.stepMinute === 1) { // Set custom stepMinute setting options.stepMinute = 15; // Destroy picker $(this).datetimepicker('destroy'); // Re-initialise picker $(this).datetimepicker(options); } });
  17. 7 points
    UPDATE 2019-06-15 The taxes repeater field in module config editor was updated: changed to a grid view for more flexibility added field validation prepared the taxes-repeater field code to become a standalone flexible Inputfield module for general use (Array/JSON repeater input field which stores its values in a single text field) The taxes handling is completed! SnipWire now acts as a full flexible taxes-provider for Snipcart (we use Webhooks for this). No configuration needed in Snipcart dashboard. SnipCart orders are now fully working (except shipping handling). The sample shop templates got an update: customer login/logout customer dashboard link/button to view orders history and subscriptions editing of customer profile Other updates and fixes: The SnipWire Dashboard was updated (Charts, Orders, Customers, ...) --> see screenshot below. The Dashboard fetches its data from Snipcart via CURL multi - the response time for a fresh load is now under 2 seconds The Webhooks handler now supports all Snipcart events via hookable methods. Snipwire now supports all major Admin themes (Uikit, Reno and Default) All module classes/files are more structured (e.g. separate helper and service classes) Under the hood many bugs are fixed and code is updated to prevent unexpected errors. Added a crispy SVG logo for all SnipCart back-end pages Screen-recording of updated taxes-repeater: Screenshot of SnipWire Dashboard:
  18. 7 points
    Why I'm still using jQuery in 2019
  19. 7 points
    v0.2.1 released. This is a fairly major update in that there has been quite a bit of refactoring. Please be alert for and report any issues. ProcessWire >= v3.0.0 is now required. This release adds a new hookable HannaCodeDialog::buildForm() method that lets you build the dialog form in the hook rather than setting inputfield options as pseudo-attributes in the Hanna Code tag settings. From the readme... Build entire dialog form in a hook You can hook after HannaCodeDialog::buildForm to add inputfields to the dialog form. You can define options for the inputfields when you add them. Using a hook like this can be useful if you prefer to configure inputfield type/options/descriptions/notes in your IDE rather than as extra attributes in the Hanna tag settings. It's also useful if you want to use inputfield settings such as showIf. When you add the inputfields you must set both the name and the id of the inputfield to match the attribute name. You only need to set an inputfield value in the hook if you want to force the value - otherwise the current values from the tag are automatically applied. To use this hook you only have to define the essential attributes (the "fields" for the tag) in the Hanna Code settings and then all the other inputfield settings can be set in the hook. Example buildForm() hook The Hanna Code attributes defined for tag "meal" (a default value is defined for "vegetables"): vegetables=Carrot meat cooking_style comments The hook code in /site/ready.php: $wire->addHookAfter('HannaCodeDialog::buildForm', function(HookEvent $event) { // The Hanna tag that is being opened in the dialog $tag_name = $event->arguments(0); // Other arguments if you need them /* @var Page $edited_page */ $edited_page = $event->arguments(1); // The page open in Page Edit $current_attributes = $event->arguments(2); // The current attribute values $default_attributes = $event->arguments(3); // The default attribute values // The form rendered in the dialog /* @var InputfieldForm $form */ $form = $event->return; if($tag_name === 'meal') { $modules = $event->wire('modules'); /* @var InputfieldCheckboxes $f */ $f = $modules->InputfieldCheckboxes; $f->name = 'vegetables'; // Set name to match attribute $f->id = 'vegetables'; // Set id to match attribute $f->label = 'Vegetables'; $f->description = 'Please select some vegetables.'; $f->notes = "If you don't eat your vegetables you can't have any pudding."; $f->addOptions(['Carrot', 'Cabbage', 'Celery'], false); $form->add($f); /* @var InputfieldRadios $f */ $f = $modules->InputfieldRadios; $f->name = 'meat'; $f->id = 'meat'; $f->label = 'Meat'; $f->addOptions(['Pork', 'Beef', 'Chicken', 'Lamb'], false); $form->add($f); /* @var InputfieldSelect $f */ $f = $modules->InputfieldSelect; $f->name = 'cooking_style'; $f->id = 'cooking_style'; $f->label = 'How would you like it cooked?'; $f->addOptions(['Fried', 'Boiled', 'Baked'], false); $form->add($f); /* @var InputfieldText $f */ $f = $modules->InputfieldText; $f->name = 'comments'; $f->id = 'comments'; $f->label = 'Comments for the chef'; $f->showIf = 'cooking_style=Fried'; $form->add($f); } });
  20. 7 points
  21. 6 points
    @BitPoet's groupBy() hook is nice for this sort of thing. As with @teppo's suggestion, you'd have to do a bit more to get it working with infinite scroll (the limit might fall in the middle of a day, in which case you wouldn't want the day heading added again on the next pagination).
  22. 6 points
    I have no experience with this Tribe events thing, so can't speak for that, but for the bulk of the content I'd recommend skipping the database export idea and going with the built-in REST API. While the REST API has its quirks, going directly to database for exports is going to be a major pain in the a*s in comparison. Not entirely unlike exporting ProcessWire content with raw SQL... It would be best to have a separate copy of the site at hand first, but after that it's basically as simple as installing the ACF to REST API plugin (which adds ACF field data to the REST API results) – and of course making sure that the REST API is enabled in the first place. You should be able to query and export all your pages, articles, and any custom post types with this method. Once you have the data, importing it to ProcessWire is going to be a breeze. (Note: based on some quick googling the Tribe events plugin also provides REST API support. I haven't used this, but it looks promising.) Also, in case that idea won't pan out, you can always rely on existing solutions, such as WP All Export (which provides a GUI for exporting content, including ACF data). Admittedly I haven't worked with this plugin before, but it's the companion plugin for WP All Import, the de facto standard plugin solution for complex imports. WP All Import is a bit of a monster and can feel clunky (hence devs often prefer custom imports for long-running, often-used, scheduled stuff), but for one-off cases it's a really handy tool. -- Edit: in case anyone is wondering, the WP REST API was first announced on June 17th 2013, which would be a week or so after Ryan started this thread. It didn't make it's way into the core until 2015, and even then it was for a very long time considered "a work in progress". It's been more than five years since this thread was started, so it shouldn't come as a big surprise that some things have changed
  23. 6 points
    @ryan, thanks for the new features! In the past I've worked on modules that needed to store data for some pages and I had to create a custom DB table for that - the new page meta feature will avoid this and make module development easier. Regarding the Lister bookmarks feature, it would be nice if bookmarks were able to store filter rows where the value is empty. This is so that a bookmark could include rows that don't affect the results until a user enters a value, but are sitting there ready to use when needed. At the moment any rows without a value are not stored in the bookmark. I know that achieving a setup like this is possible with a Lister Pro instance or with a hook for the core Lister but it would be nice to have the option in Lister bookmarks too.
  24. 6 points
    In regards to dev vs live htaccess, you can also use htaccess's "if" conditional for blocks of code you want to selectively enable/disable depending on the site being loaded. By doing so, you don't need two separate htaccess files to maintain. When using ProCache combined with it's htaccess recommendations at the top, I wrap it inside a conditional like this: ################################################################################################# # ProcessWire ProCache recommended .htaccess tweaks for expires and gzip performance settings. # PWPC-3.0 Keep this line here for ProCache identification purposes. ################################################################################################# <If "%{HTTP_HOST} == 'my-live-website.com'"> ...the code here... </If>
  25. 6 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.
  26. 6 points
    ANOTHER UPDATE SnipWires Taxes (VAT) configurator is ready! I added a new custom Fieldtype FieldtypeSnipWireTaxSelector based on an idea of @BitPoet - thanks for that! Also I created a full featured repeater for module config editor including drag&drop handling. Have a look at the animated GIF below. The taxes you configure here will be available as select option list in product page editor. The first tax in the configured list will be used a s the default tax in the custom field.
  27. 6 points
    I just submitted a pull request with fixes for the overflow positioning, offset when CKEditor is in inline mode, and overrides for the <ul> padding and margin coming from AdminThemeUikit. https://github.com/BitPoet/ProcessCKInlineComplete/pull/4
  28. 6 points
    The most simple approach I can think of right now is hook into after InputfieldText::render: Put this code in site/ready.php: $wire->addHookAfter("InputfieldText::render", function($event){ $field = $event->object; if($field->name == "text_field_name" && $field->value){ $markup = $event->return; $url = "https://somedomain.com"; $markup .= "<img width='100' src='". $url . $field->value ."'>"; $event->return = $markup; } }); I'm assuming $url is whatever you need to append to complete the url with the ID in place. This should render the image right below the text input. If you want to dig a bit more, check the code in the link I pasted and debug with a $log->save() the $markup variable which basically gets it's content from the $event->return property which matches the return value of the render function in the Inpufield code.
  29. 6 points
    @ryan thank you very much for all the additions you implemented in such a short time on top of my github pullrequest. It seems that there currently nothing is left in regard of webp support in ProcessWire. But I already have one or two points for future updates to the image rendering engines, that should be implemented when all browsers will support webp and we don't need fallback jpegs or pngs anymore.
  30. 5 points
    Perhaps I'm missing the point, but this should be the easy part. Maybe something along these lines: <?php $current_date = null; $items = $pages->find('template=news-item, sort=date_field, start=0, limit=20'); if ($items->count()) { foreach ($items as $item) { $date = date('j.n.', $item->getUnformatted('date_field')); if ($date !== $current_date) { if ($current_date !== null) echo "</ul>"; echo "<h3>{$date}</h3><ul>"; $current_date = $date; } echo "<li>{$item->title}</li>"; } echo "<ul>"; } It's a bit crude and probably wouldn't work as-is with your infinite scroll approach, but that's the basic idea anyway
  31. 5 points
    Here now some details how we use ElasticsearchFeeder on www.blue-tomato.com: Our main webshop technology is Java / SAP Hybris which is mostly developed by an external developer team. Hybris is good for multichannel webshops but not the best tool for general content management or for creating quick new content. So we use ProcessWire for our editoral content like blogs, landing pages, buyers guides etc. since 2 years. We created a RestAPI where SAP Hybris gets the content from ProcessWire. So ProcessWire prerenders the main-body and gives it with some metadata to Hybris which puts them between the webshop header and footer. This works great with following page sections: https://www.blue-tomato.com/blue-world/ https://www.blue-tomato.com/team/ https://www.blue-tomato.com/buyers-guides/skateboard/skateboard-decks/ Since this are kind of static pages it worked very well but we want to integrate also our content dynamicly on other high traffic pages like the homepage or product detail pages. This is why we decided to put our content into ElasticSearch. In front of ElasticSearch we created an GraphQL / Node.js Server, because we mashup our ProcessWire data with product data from other (REST) sources. For the first step we created two kind of widgets, which run on the Blue Tomato Homepage: Blue World News (latest news from our blog) Shop The Look The Shop The Look Widget is our first try to mix and show data from different sources. The Editor of a "Look" has to create the look in the ProcessWire Admin panel. He uploads the look photo and has to put product IDs into a Table. No product price, title or image. All of the product data will be fetched by GraphQL from our other database during the request. All widgets are rendered with React. I hope I could give you a short overview of what we do with ProcessWire and ElasticsearchFeeder.
  32. 5 points
    Hi everyone, a year ago we had put online a first version of our website, which didn't satisfy me much and had several bugs. This year I started working on a complete restyling, both in terms of functionality and graphic. I am very happy with the result obtained. Finally, last week we put this version online that I am proud to show you! Site EU: https://www.playwood.it/ Site USA: https://www.us.playwood.it/ It is an eCommerce for a small StartUp, the PlayWood, based in Reggio Emilia, Italy. The site is multilingual, has two areas of purchase and has two levels of registration. Redirectory based on the source IP for the USA customer and preferred language in the browser for the others countries. It has systems for use registration and sending emails dependent on specific actions, like: registration, purchase, request for quotes, information request, etc. Through the API the site communicates with external platforms such as the management software, Mailchimp and other systems to support marketing and company operations. The site is constantly evolving, in the future we intend to add new features. The site was created with these modules: Padloper Login/register Media Library ProCache PayPal Checkout Subscribe to Mailchimp Tracy Debugger Cookie Management Banner Continent and country names ImagePicker Field Map Marker External libraries: Spectre, scss framework Swiper slideshow verlok/lazyload fancybox Creating this site with ProcessWire represented a moment of strong professional growth. When I started I had little knowledge of some types of language, but Processwire and its APIs give me the ability to easily build pages, manipulate data and integrate any external library easily. Thus, I was able to deepen my knowledge more and more. So I wanted to thank the creators of the cms, who keeps it and who implements it, obviously all the people in the forum for the help they gave me, was very important. Thank you!
  33. 5 points
    Not sure if you have in mind a site profile for generally sharing with the community, or something that is made available only to some specific users/clients. If it's the former I would think option 1 would be necessary if you want the profile to be usable by a wide audience. I expect there are many here who are not running Git or Composer. And as you say you would update the profile from time to time (not really different in that regard from a module you have authored). If it's the latter then another option could be @bernhard's Kickstart tool: You would provide users with Kickstart settings that point to a remote profile zip that does not include any third-party modules within it, and then add the third-party modules in the "recipe". That way a user who is installing the profile always gets the latest module versions. I suppose you could use the Kickstart approach for a generally shared site profile too but it comes back to the audience thing again. If PW beginners should also be able to use the profile then it's probably best if the profile can be installed as per the standard procedure without them needing to learn any additional tools.
  34. 5 points
    I wrote a script a while back to search for this kind of thing, though it doesn't spider Gitlab, PW gists or forum code yet. I've made a start at putting it online at pwgeeks.com. Currently only has about 60 items of over 1300 it has found to date - but as I massage it back to life, the directory will fill up.
  35. 5 points
    Here's some JS for that, for a Table field named "table_select_once". Add the JS any way that suits you - with AdminOnSteroids, a hook before Page Edit execute, etc. $(function() { // Disable options already selected in another table row function disableSelectedOptions() { var $selects = $('.Inputfield_table_select_once select'); $selects.find('option').prop('disabled', false); $selects.each(function() { var $selected = $(this).find('option[value!=""]:selected'); if($selected.length) { $selects.not(this).find('option[value="' + $selected.val() + '"]').prop('disabled', true); } }); } // Disable selected options on DOM ready disableSelectedOptions(); // Disable selected options when select changes $(document).on('change', '.Inputfield_table_select_once select', disableSelectedOptions); });
  36. 5 points
    Repeaters are a PageArray (or i think a class that inherits from it, called RepeaterPageArray), so you have all the methods from a WireArray such as: https://processwire.com/api/ref/wire-array/get/ https://processwire.com/api/ref/wire-array/find/ $page->repeater_field->get('FieldA=2')->FieldC
  37. 5 points
    With ProcessWire you don't generally want to perform your own SQL queries. It's possible, but generally I'd consider that a bad practice. If your content is stored as ProcessWire objects (basically Pages), you should always use the Selector engine for that sort of stuff. Not only does this provide the benefits of a great API (such as $pages->find('template=mailbox, owner=[some_user_field=whatever_value]') or $pages->get('parent=some-parent, name=page-name')->setAndSave('field', 'value')), there's also zero chance of accidentally running into nasty SQL injection vulnerabilities. Of course you can always create custom database tables and perform queries on them using the $database API variable (which is essentially a wrapper for PHP's own PDO class), but in such cases the content won't be editable within ProcessWire's admin, so you're missing a pretty important benefit there. Another alternative would be using RockFinder, which kind of provides the best of both worlds: easy to use syntax for queries combined with the performance of raw SQL and lightweight PHP arrays/objects. So, long story short: if you want a nice GUI and an easy-to-use API for managing your content, ProcessWire is a great choice. If you ultimately just want to use your custom database tables, write a few SQL clauses to update a few rows here and there, and there's no need for a web based interface for managing said items – then perhaps you should just build it from scratch (or use something like Laravel instead).
  38. 5 points
    It will be free, open-source, like other starter tools out there.
  39. 5 points
    Regarding Site Profiles: what is really missing is a system which turns one into an updatable "theme". Especially when targeting beginners, it would be preferable to provide a way to keep those profiles updated via the admin, like Ryan's module updater. Also, using UIkit 3 as the bases of it would be appealing to beginners and also some experienced devs, for the usual reasons: a popular and documented css "framework" is easy to use, extend and update. The site profile could provide "hooks" so that it can be modified and extended without changing the "core theme". Sure, I did not provide any new ideas at all, it is just a quick summary of what have been sought after dozens and dozens of times here, in the forums. @bernhard might even be working on something like this maybe?
  40. 5 points
    I just released version 0.7.0 of the module: It fixes the ugly label being showed above the "inhterit" checkbox for newer Processwire versions. I think there is a bug in core, because ProcessWire ignores the fact that the label is marked as "hidden". I had to fix it via CSS for now. Added the possibility to resize the Opengraph image when referencing a page image by specifying a width and/or height. Opengraph image: If the referenced image field is empty and pulls the image from another page (default value), the module now substitutes the default image as well. Other than that the readme now contains a chapter for the various hooks provided by SeoMaestro. This might be interesting if you need to customize the behaviour of the module. Please let me know if you find any issues! Cheers
  41. 5 points
    A more complex approach would be a new fieldtype which allow to browse and select through the SmugMug API. Edit: just found this, which may help to go that way: http://phpsmug.com/
  42. 5 points
    RepeaterMatrix is going to be the best choice for any type of page builder in ProcessWire (at least at this time). The recent updates to the module improve its flexibility further, such as being able to change the matrix-type of an item that's already been added to a page (this is similar to Gutenberg functionality of being able to change block-types... nice). After using RepeaterMatrix and its equivalents in other CMSes over the years (such as WordPress ACF Flexible Content field), my suggestion is you're better off NOT providing fully customizable layout functionality within your builder (that is, avoid the capability of allowing users to add things like containers, rows, columns). I've personally found that even other CMSes that do this well and are built around that concept are just too clunky. It's the nature of the beast. The better approach in my opinion is to provide a good set (5-10) of matrix-types/blocks that can instead achieve this. Once again, the recent feature addition whereby matrix types can be changed is going to help here since switching a matrix-type retains its content as long as the matrix-type you are switching to uses the same fields.
  43. 5 points
    if($config->ajax) { header('Content-Type: application/json'); echo $json; $this->halt(); // like die(); } else throw new Wire404Exception();
  44. 5 points
    UPDATE OK, after I've faced that for and against again, I've decided to make the module freely available. If you are interested, you can test the current state of development. I already put the module on GitHub. Please note that the software is not yet intended for use in a production system. (Alpha version). For example, the configuration and handling of the VAT rates are still missing. Also the dashboard is still incomplete. And many other things needs to be improved and implemented... If you like, you can also submit feature requests and suggestions for improvement. I also accept pull requests. https://github.com/gadgetto/SnipWire
  45. 4 points
    I know from a trusted source that some of you use Laragon as their prefered Windows DEV solution. Due to a recent conversation I noticed that there might be a nice little feature some of you may not know about. Laragon offers the Quick app option with some tools already predefined. In order to have ProcessWire there as well you just have to add one (two with a comment) line to your Laragon configuration. # ProcessWire ProcessWire=composer create-project processwire/processwire %s Just in case you want to start your next project a little bit faster.
  46. 4 points
    That's quite strange. Running this through decoder suggests that this include is trying to load file from /wire/modules/System/.db9f7664.ico. Is this a path that exists on your site, and if so, what's in that file? /wire/modules/System/ is a path where SystemUpdater and SystemNotifications live, but I'm not aware of anything that should create a file like that. Combined with files suddenly being removed and this file getting modified, it doesn't sound good. The first thing to do would be to check the server, i.e. is it possible that someone has gained illegitimate access to it. Is this a shared host, a VPS, or something else entirely? Were both sites on the same host? I'm not aware of any security issues with ProcessWire itself, but ProcessWire isn't immune to problems caused by someone gaining access to the server, directly or through another application (such as a WordPress installation – which has actually happened before).
  47. 4 points
    From what I can tell, some might have gained access to your server/account . I have seen this before with wordpress sites. Has anything with your server changed lately? Also, I would check with your host to check if this is not just effecting you. Just in the short term, I would change your ftp credentials.
  48. 4 points
    Thanks for the feedback everyone, I just made some updates to the app! You may have to fully clear the cache to see the changes immediately, as with the service worker the caching is pretty aggressive. @bernhard I have tweaked the functionality of the back button. The app now keeps track of the page history independently of the browser history API and only displays the back button if there are at least to items in the history stack. So you shouldn't see the back button on the first page visit, regardless of which route you're on. @tpr @bernhard For now, I have just disabled scroll wheel zoom for most of the embedded maps; this way, the map won't interfere with the normal page scrolling. The map can still be zoomed with the buttons to the left, and scrool zooming activates after clicking inside the map. Pinch zooming on touch devices should also work as normal. The only exception is the map page (architekturfuehrer.koeln/karte) which can always be zoomed with the scroll wheel; but that page should always fill the entire viewport with nothing to scroll below that, so it shouldn't be an issue there.
  49. 4 points
  50. 4 points
    Hi @Autofahrn, thx for that suggestion. I did not try that. But I'm not sure how I should/could do that to get a helpful output? I've found the issue, but would still be interested in a way to show a backtrace of all executed hooks I've added a file_put_contents(... FILE_APPEND) to WireHooks::runHooks() to dump all executed hooks to a file called hooks.txt. That could be a first step in the direction that I wish would exist already. The issue in my case was that my CRM module was loaded twice, so all methods added via hooks actually ran twice. I found that by inspecting the debug mode tools, where my cloneInvoice() method showed up twice (and so did all other CRM hook methods). The solution was to make the module "singular" (and do a module refresh). But still I think it would be great to have a chronological list of all executed hooks so that one can instantly see which hook fired when (and after/before what other hooks).
  • Create New...