Leaderboard

Recently @Wanze starred a free app on Github, just awesome : https://github.com/responsively-org/responsively-app It's a browser modified that show how a website work in all selected devices. I think a lot of people will fall in love for this soft - give them a star on github ?

The PW core comes with many great classes such as WireData, WireArray and so on. Sometimes I'm developing stuff without a running PW instance and I'd love to have the great PW api available there as well. I've mentioned that in the PW Roadmap 2021 thread and Ryan stated: https://processwire.com/talk/topic/24897-weekly-update-– 8-january-2021/?do=findComment&comment=209891 That sounded interesting, so I've tried how that works and created a repo for quick and easy testing so that everybody can try what works and share their findings so that everybody can learn. https://github.com/baumrock/PwStandalone PwStandalone The ProcessWire core has many great classes such as WireData, WireArray, WireRandom etc.; Many of them can be used without a running PW installation! This repo helps testing those features and hopefully will motivate others to share their findings (as PRs). It's as simple as creating a new file in the examples folder! I'd appreciate any help regarding the examples throwing an error! PRs for other examples that you've tried very welcome!

Shetland.org is a website run by Promote Shetland which inspires people to visit Shetland, encourages people to move to Shetland to live, work and study, and attracts people to invest in commercial activities in the isles. We (NB Communication) have run the Promote Shetland service on behalf of the Shetland Islands Council since 2017, and as part of the contract undertook a project to redevelop the existing Shetland.org website. In this showcase we’ll highlight a selection of modules we used and what they helped us achieve. Visit the site: www.shetland.org Pro Modules ProCache We use this on almost every site we build. Indispensable. The cache settings used are pretty simple – most templates are set to 1 week, with the entire cache being cleared on save. We use ProCache’s CDN functionality to serve assets from CloudFront via c.shetland.org. We also use the API provided by ProCache to compile (SCSS), minify and collate our styles and scripts via $procache->css() and $procache->js(). We then use the URLs returned to preload the assets, making the site even faster! ProFields: Repeater Matrix Again, we use this on almost every site we build. Another must have Pro module. This module allows us to create a really powerful page builder field (we call it ‘blocks’) that handles the majority of the content on the site. On a simple development, we just use two block types - Content and Images - the latter displaying as a gallery or a slideshow. On this site we have 13 different types, including ‘Quotes’, ‘Video’, ‘Accordion’, and ‘Links’. Additionally many of these are configurable in different ways, and some render in different ways depending on the template and context. Have a look at the links below for some examples: https://www.shetland.org/visit/do/outdoors/walk https://www.shetland.org/blog/how-shetland-inspires-me-artist-ruth-brownlee https://www.shetland.org/life/why/teach-shetland-school NB Modules We also used a number of modules we've authored: Instagram Basic Display API Used to retrieve the 6 latest images from instagram.com/promoteshetland. Markup Content Security Policy Used to implement a CSP for the site. Currently scoring a C on observatory.mozilla.org – not the best score possible but significantly better than all the other destination marketing websites I tested (all got an F but one which was a D-). Pageimage Srcset Used throughout to generate and serve images of different sizes via the srcset and sizes attributes. This module is really useful if you are looking to optimise the serving of images to improve page speed times/scores. Video markup for YouTube/Vimeo This module was developed specifically for use on this website, as we wanted more control over the rendering of the oEmbed data. In the example below, the video thumbnail is displayed with a text overlay – when clicked the video (YouTube embed) opens in a lightbox. And a big shout out to… Page Path History The previous site was also built by us in ProcessWire, but a number of years ago now. The new site has significant changes to the sitemap, but 1000+ blog posts were also migrated. Instead of an .htaccess file with thousands of 301 redirects, we were able to use the functionality provided by this module to implement redirects where required, and in the case of the blog posts which were migrated via an import script, implement the redirects via the API - $page->addUrl(). ... The above is just a fragment of the features present on this site, and the development just a part of a much larger project itself. We're really proud of what we've achieved, and we couldn't have done it without ProcessWire. Cheers, Chris (NB Communication)

I think it might be helpful to have a thread dedicated to css fiexes/improvements? Could the bd() dump at the bottom be single line only with a css text-overflow ellipsis? https://developer.mozilla.org/de/docs/Web/CSS/text-overflow This is what I tried as a quickfix in devtools on the <a> tag: element.style { text-overflow: ellipsis; white-space: nowrap; display: block !important; width: 90%; overflow: hidden; }

If anyone else is interested, I started researching different ways to try to solve this problem(not just with Processwire.) You can view the Google doc here. Feel free to copy/edit or whatever. I wonder if we can simplify things? Do we really want a layout editor in the Processwire backend where you can adjust the grid widths and so on, or do we just need some UI modifications to the tools we already have? Here's an example where I think the backend page editor is too complex. from:https://getkirby.com/ and https://modmore.com/contentblocks/ The page editor could slow down and be clunky from trying to render all the DOM elements? Too complex to work on mobile Content editing gets smushed into small columns Dragging and dropping across layout regions requires a lot of dexterity for the end users - think accessibility. requires taking up the whole page for editing A page/layout editor will have to somehow visually represent your frontend layout in the backend. That seems problematic to me. Instead of having a complex page/layout editor where the user has to drag and drop columns, how about we simplify the interface so that it works on mobile as well? While the YooTheme demo looks cool, I don't think it would work good on mobile? I think the YooTheme UI is still too complex. How about we just allow the user to choose from prebuilt sections or components? Those prebuilt sections/components could then be edited in the Processwire sidebar panel like the Processwire ProDrafts sidebar editing. It would be cool if the RepeaterMatrix, Page Reference, Page Table, Repeater fields got rid of all the cluttered "Add New" type links and instead had one "Add new" button/link that would give the option to choose a template visually in a Processwire Sidebar Panel. Maybe also add another option to RepeaterMatrix, Page Reference, Page Table, Repeater fields to edit pages in the Processwire Sidebar Panel instead of the inline expand/dropdown editing? Just like the Processwire ProDrafts module does with Live Preview? This is how Godaddy.com's website builder works. You can try it for free. When you click the plus icon to add a new section, it shows this selector in the sidebar. This is also how https://froont.com/ sidebar works. A user selects a prebuilt section or component/widget. Also http://cards2.webflow.io/ and https://froala.com/design-blocks and https://www.brizy.io/brizy-design-kit-2/ you can see how a page is built from these widgets/components that stack on top of each other. Imagine if I were to create a Processwire "Landing Page" template. It would probably only have 3 fields: Page Header - Single Select - to override the default site header Page Sections - Allow Multi Select - to add layout rows Page Footer - Single Select - to override the default site footer That would give a lot flexibility of the page design without allowing a user to screw up the design. When looking at the processwire page editor, it could show the three fields each containing a preview graphic of the element that was selected. Maybe @bernhard 's module would allow the visual selection of the templates somehow or maybe @ryan could add a representative/template preview image option to all the templates? The Sections field would allow multiple selections. Those selections would display in a single column like the Page Table field that allows you to move the preview graphic of the element that was selected up or down in the list. Maybe Page Table Extended could be used to show that preview graphic from the TemplatePreviewImages module? I haven't tried. If you click the preview graphic, it will open that element in the Processwire Sidebar Panel for editing. Here is a rough mockup of what it could look like: That way the page editing is nice and simple, no need to worry about messing with the indentation of nested elements like in this example: Indentation is too easy for editors to mess up IMHO. Now what happens if you click on the "Three Column" item above? It would open for editing in Processwire Sidebar Panel on the right. Now that "Three Column" page has other Page Reference fields to components/widgets: Column 1 - contains a RTE Editor widget using a limited/restricted CKeditor or a markdown editor? Column 2 - contains an Art Directed Responsive Image widget Column 3 - contains a Accordion widget with other types of referenced widgets like a Editorjs.io widget or a file downloads listing widget So that is where I'm not clear on. Do we need some mechanism to allow us to "Drill down" to edit other referenced pages in the sidebar? How do we go deeper? Could there be some kind of breadcrumbs or back button like on an iphone? The SilverStripe CMS has drill down editing as seen in this video at the https://youtu.be/IKGUd2dq8XI?t=1022 although it doesn't use sidebar editing. Technically, I'm not sure how they achieve that? Anyways, I don't have the solution, but I thought I would share those concepts as rough as they are. ? I also like Bernhard's concept of defining these widget/components in code so they can be shared across sites. Creating all these fields and templates by clicking in the admin would not be fun. No disrespect to Processwire. (I love Processwire and it's admin theme btw) I love hearing all the discussion on this. It's one huge problem that definitely needs solving. I need to able to give non technical users the ability to create customized landing pages without them knowing html. They like to be able to switch out a whole section just to see what it would look like. That's why I would prefer to give them the ability to select prebuilt responsive components instead of allowing them the ability to create grids with rows with margins and paddings and so much other htmly stuff.

This is one of the rare cases where using global variables might be appropriate: $currentImageIndex = $GLOBALS['current_image'] ?? 0; // access the current image ... $GLOBALS['current_image'] = ++$currentImageIndex; Globals are accessible from everywhere and will stay available for the remainder of the current request.

Maybe saving it as a property of the page instance? $page->hanna_counter = $page->hanna_count + 1

Here is the first very early concept of a Page Builder. As per the conversation in the 'ProcessWire beyond 2021' conversation, I set myself a challenge to make a clone of YOOtheme Pro's Page Builder. This was mainly spurred by @Jonathan Lahijani's excellent overview of ideas of a page builder for ProcessWire. This is still in very early stages and I am not really sure where it is headed. I would like to hear the thoughts of like-minded persons ?. I would especially love to hear from @Jonathan Lahijani, @szabesz, @AndZyk and @flydev ?? please. Concept The page builder in its current state is a Fieldtype + Inputfield supported by other behind-the-scenes Fieldtypes without Inputfields. There are no hidden or extra pages in contrast to Repeater Matrix. All values are stored in the Page Builder fields for the page being edited. The fields do not store values as JSON. Definitions for elements, rows, grids, etc as stored as JSON. Currently, for storage purposes, 4 datatypes are supported - Text (HTML), images, plain text and headlines. From a storage perspective, the latter two are one and the same. Just texts with different 'schemas/definitions'. More on this below. The fields are multitype fields. This means one page can hold multiple texts, allowing for repeatability. Similar datatypes are stored together in one field/table. For instance, there is no reason why a (future) URL element (datatype) should not be stored in the same table as plain text. At the database level, they are both just texts with similar requirements. At the processing level, URLs vs other plain texts (headlines, etc) are handled differently (validation, sanitisation, etc). Each 'element' represents a row in a table for most types (e.g. slideshows are slightly different). Querying and access of field values is via the main Fieldtype - FieldtypePageBuilder. However, the supporting Fieldtypes can be also be accessed and queried individually, if one wishes, using normal ProcessWire selectors. The supporting Fieldtypes, if such need arises could easily become custom tables instead (but best to keep them as Fieldtypes - easier querying with selectors, etc). It is totally CSS-agnostic in relation to frontend output. You bring your own CSS. In the preview, you can also use your own CSS. In the frontend, you can choose to output raw values as you wish or use inbuilt render methods to render the whole layout for you or to render the value of an element as per its tag definition (e.g. headlines as h2, h4, etc) where applicable. Fully multilingual (although the editing UI not yet implemented). Issues The main issue is the real estate needed for InputfieldPageBuilder. Any such page builder would require the whole width of the window. As you can see from the screenshot below, this obviously throws things out of kilter with respect to the ProcessWire page edit UI, in any theme (I believe). I am not a designer so would love to hear from you about possible solutions. My current thoughts are: Modal Open the page builder in a modal for editing. Pros Would allow for use of whole real estate. Title and other fields would not be in the way. Cons Editing in modals can be tricky? Other..? Process Module Pros Solves the real estate issue. Cons Disconnect between the page being edited/created and the page tree. Screenshot No attempt has been made to theme it as per any current ProcessWire theme (that I know of). This was a quick and dirty-ish clone of YTPB. As stated, however, the current ui is not acceptable as an Inputfield for, mainly, real estate reasons. Video Demo This is a demo for the Page Builder app outside ProcessWire. Thoughts? Thanks. PS: I currently have no time to continue working on this (Padloper, etc..)

This week I've had to work on a client project (and that continues for the next week or two), but also have some good progress in the next development branch version of ProcessWire (v3.0.171), which includes the addition to two feature requests: The Repeater Fieldtype (and likewise RepeaterMatrix) was updated to improve support for the "depth" option by introducing something called "family friendly mode". This makes the "depth" setting behave in a manner where items with more indent are considered children of items with less indent (parents). So when you click and drag to move a parent item, it brings along the children too. This works whether changing the location or the indent of the parent. In addition, it enforces the parent/child relationship so that there can't be more than one level of indent between parent and child. So you couldn't (for example) have a parent-to-grandchild relationship in the repeater items. A useful case for this is when using repeaters in page builder contexts, like those Jonathan Lahijani demonstrated with RepeaterMatrix. In fact, the settings in this "family friendly" mode were his idea. More to come here too. To enable "family friendly mode", go to your Repeater or RepeaterMatrix field settings and make sure the "depth" setting is greater than 1. When greater than 1, the family-friendly option will appear as a toggle you can enable. The other thing added to the core this week was a FieldtypeDecimal module that has been requested for awhile. I was planning on making it a setting of FieldtypeFloat, largely to avoid interfering with the existing 3rd party FieldtypeDecimal module. But a few people indicated they'd prefer it to be separate. After testing on an installation that already had the 3rd party FieldtypeDecimal installed, I found it didn't cause any problems, so that alleviated my concern. To be safe, the new core FieldtypeDecimal module uses the same exact setting names as the 3rd party one, so that hopefully they should remain compatible. In my case, I found that deleting my /site/modules/FieldtypeDecimal directory, and then doing a “Modules > Refresh” enabled the core one to take over with any existing decimal fields. However, until we have reports that the same works well for others, I would suggest backing up and confirming it yourself to be safe. It's not often we intentionally introduce module name collisions, and I don't think we've ever done it in the direction where a new core module overlaps with an established 3rd party one. But in this case, it does seem to facilitate the transition a bit. That's all for this week. I've been enjoying and am looking forward to continuing with our roadmap discussions hopefully next week. Have a great weekend!

CloudFlare has just launched a privacy-respecting analytics solution that is basic but free: https://www.cloudflare.com/web-analytics/ Great site, congrats!

I think Hanna Code is not a good candidate for solving this need. For a couple of reasons: 1. The Hanna Code textformatter does not necessarily only execute once when are outputting the field value in your template. It executes whenever the formatted value of the field is accessed. In practice I think you'll find this happens (or can happen) more than once in the same request (Ryan has pointed this out somewhere, and you can test it with Tracy Debugger) and so your counter incrementation is not going to be reliable. 2. You will be using the exact same tag [[nextimage]] multiple times within the field value. The Hanna Code textformatter uses a str_replace() to replace all matching tags in the field value. So it doesn't matter how you increment a counter within the Hanna tag code - all identical tags will get the same replacement value. Instead I think you should use your own placeholder and then do your own replacement (either in a template file or in a custom textformatter module). Example... In your field value, use the text {{nextimage}} inside a paragraph by itself. So the resulting markup would be <p>{{nextimage}}</p>. In your template file you can use preg_replace_callback(): $body = $page->body; $images = $page->images; $pattern = '/<p>{{nextimage}}<\/p>/'; $count = 0; $callback = function($matches) use (&$count, $images) { $out = ''; $image = $images->eq($count); if($image) { $out = "<img src='$image->url' alt='$image->title' title='$image->title'>"; } $count++; return $out; }; $body = preg_replace_callback($pattern, $callback, $body);

I've been using Sizzy and want to try this to see how it compares!

Holy cow! This is freakin' awesome! Thanks @Wanze and @flydev ??

Weird, adding a long comment and calling from the Console still breaks things for me: It is truncating somewhat - you can see the ... in the middle, but it's still overflowing. I don't have a pure Tracy instance running anywhere - maybe I should install your PW standalone and try it there. It might be hard to post this as Tracy core issue at the moment - I'll test more and see exactly why it's failing.

In the parent page you have to set the sorting to manually drag. DO NOT set any hard sort order there. Then you can use the add new childs first method from AOS. This results into the following behave: Everytime you add a new child to that parent page, it is added on top of the list, as first child under the parent. From there on, you can drag and sort this and all other pages manually as you like.

@fruid That error indicates that your PHP version doesn't support the null coalescing operator (??) which was introduced in PHP 7.0. Are you still using PHP 5.X? I would strongly recommend you upgrade to 7.3 or 7.4, the last 5.6 release has been end of life for over two years now! See the supported versions list on PHP.net. In the meantime, you can use the ternary operator instead: // get current image index from global variable, or start with zero on the first iteration $next = isset($GLOBALS['next_image']) ? $GLOBALS['next_image'] : 0; But again, please update to a supported PHP version ASAP.

Howdy @darkanglesima(Seema) and welcome to the forum! You'll find this community very active both in development and in strategy. Feel free to ask any questions. There will be many to contribute. As for me, I'm an old-school programmer since the 70s. I currently work primarily as a SaaS developer so I don't design web sites per se as there are many far more skillful people that do a much better job than I. I've contracted with IBM, Strategic Air Comand (B-1B), and various federal financial organizations. I am a diver, pilot, amateur radio operator, fisherman, and drinker of fine scotches. Not necessarily in that order. ? Again, welcome and enjoy!

Sure, here's your first example with a few adjustments and storing the current image index in a global variable: // get current image index from global variable, or start with zero on the first iteration $next = $GLOBALS['next_image'] ?? 0; // get the image for the current index $nextimage = $page->images->eq($next); // only create output if the next image exists (i.e. not all have been output already) if ($nextimage) { echo '<img title="'.$nextimage->title.'" alt="'.$nextimage->title.'" src="'.$nextimage->url.'"/>'; } // increment the image index and store it for the next shortcode occurrence $GLOBALS['next_image'] = ++$next;

I moved to plausible analytics starting this year. Even a cookie-less option for google analytics might not solve the issue given google will likely continue to use the tracked data for own purposes, which affects the classification by the gdpr beyond just the tech. boundries of cookies.

The HTML5 number input should handle that already. For formatting for output I'd suggest looking at NumberFormatter of php / the intl extension. Having worked with a cldr based library elsewhere extensively I can suggest everyone dealing with locales to use a library for all those differences instead of building one-of solutions.

Yep, that would be great! And it would also be great if it was possible to input 1,23 (using comma), because we have , (comma) and not . (dot) on the numpad:

Hi @nbcommunication, I like a lot your project and thank you for sharing your experience. Could I ask you few questions? I really like your map, I haven't been able to figure out what you used to create the map! what did you use? Why you use Google Analytics and also Matomo? Shouldn't Matomo replace what analytics does? Thanks!

Thanks for the addition of Decimal-Field. Do you think it would be easy to add a setting for using a "," instead of a "." as decimal-seperator. (this is the common notation in the german-speaking countries)

Just a heads-up on this, Really strange, when using nested hannacode, each nested hannacode add 100ms to TTFB. I saw old issue on Github and a commit about nested hannacode but I ask myself if it was tested with a lot of content and something than more than 30 hannacode in the same body field. I used RockReplacer from @bernhard and the whole page load in 200ms instead of 1.8s. It was used like: [[tag element="div" class="row"]] [[tag element="div" class="col-6"]] $content [[end-tag]] [[end-tag]]

@Bike welcome on the forum. Use this search/tool : https://cse.google.com/cse?cx=014789015761400632609:fxrf0rj4wr4 Then check theses threads : Then come back here after some read ?

Are you using AOS? (AdminOnSteroids module) It enables to configure a lot in regard of CKE.

This post might help you: Specifically the Page::editable and Page::addable hookable methods.

Your points about this are all completely fair. It's up to you to integrate or reject the changes a PR does. Currently the latter however does not happen in a manner visible to the creator of the PR or anyone else looking at the PR. So they just stack up looking like they were never looked at. If you consider something not possible to be added (or even not possible in the near future) everyone is better off if the PR would be closed with a short note of the reasoning. PRs do not age well and it's better to close them than letting them sit until no longer mergeable. The closed PRs (and issues) are still searchable, so if people to their due diligence they'll see that things were rejected before, find related discussion if attached, …. If you're not happy with the code for a given change you can also help people come to a version you're happy with maintaining without needing to go code it yourself. This does even work for issues. One of the most encouraging responses to issues I know from other OSS projects is "Sounds good. PR welcome.". I rarely see that as a response to bigger feature requests, but on smaller incremental things making parts of the project better it's a good way to move the burden of actually fixing something off of the maintainer themself. If a PR is not of that kind it's totally fair to close it with something like "This is to big a change and needs upfront discussion before consideration.". You don't need to take the time of reviewing PRs in depth, when you already know you'll not merge from just the title/description/amount of changes/…. So in conclusion: Without a response from your side a open PR is dead weight in the context of the community helping you improve processwire. Someone did some work and now it's stuck. Even if the response is negative it'll give anyone involved context either to adjust and be fine with things not being added or next steps to get things integrated either by starting a needed discussion, changing the code or implementation or whatever else needs to be done before it could be merged. Given the fact PRs don't age well I also feel response should be reasonably timely – even if the merge actually happens at a later time. Take a year and the PR creator might have moved on or worked around it, the underlying code changed in the meantime so the PR is no longer easily mergeable, but the issue fixed by the PR might still be present. I know this well given I have two open PRs for processwire from 2017 – one small fix, one not as small feature. I hardly use processwire anymore by now.

@Macrura First of all I love SettingsFactory! I've seen notices before in SettingsFactory when I add new fields but not yet saved the value. In this complicated setup I have here this notice prevents the PageList from being loaded. SettingFactory->getSettings() triggers the notice on line 152. // Locally i have changed the if statemaent on line 151: } else { $newDataArray[$key] = $dataArray[$key]; } // To this: } else if (isset($dataArray[$key])) { $newDataArray[$key] = $dataArray[$key]; } Without looking much in to this, this fixes it for me.

Thank you! Dude, you really have patience ? The source of the problem was the Media Widget plugin , which wraps another figure element on the image element, although now there is an outer figure has the correct class ?‍♂️. I could swear it wasn't there before... Oh well... Didn't need the plugin, so I uninstalled it. To summarize, to have it noted down and to pick the brains of the experts, this is what I did to get the styles working: 1. created /site/assets/css/ckeditor_contents.css (my choice of path) containing some of the framework's styles, like .has-text-danger { color: hsl(348, 100%, 61%); } .is-pulled-left { float: left; } 2. created /site/assets/css/admin.css containing my custom admin styles like /* custom CKEditor styles to have in PW admin interface */ @import url("../../assets/css/ckeditor_contents.css"); /* force a min width for CKEditor combo, so I can read the text */ .cke_combopanel { min-width: 25rem; } 3. imported the same /site/assets/css/ckeditor_contents.css on top of /site/modules/InputfieldCKEditor/contents.css /* custom CKEditor styles to have in PW admin interface */ @import url("../../assets/css/ckeditor_contents.css"); 4. linked /site/assets/css/admin.css on top of /site/templates/admin.php, right at the beginning of the file, before the line requiring the controller $config->styles->add($config->urls->assets.'css/admin.css'); 5. changed classes in the Page Edit Image module settings (the link is /ADMIN_FOLDER/module/edit?name=ProcessPageEditImageSelect) aaaand... I got this (with Bulma classes) ? As you see, I have even the kitchen sink in there, it's because of my condition called what-if-I-ever-need-it-osis ? Thank you!

I can't reproduce that here. If you insert an image without the caption checkbox checked then the plugin inserts an image with the class applied and doesn't insert a wrapping figure element. <p><img alt="" class="align_right" src="/site/assets/files/1/colin-watts-1141600-unsplash.300x0-is.jpg" width="300" />Lorem ipsum dolor sit amet, adipiscing elit. Nullam dignissim convallis est. Quisque aliquam. Donec faucibus. Nunc iaculis suscipit dui.</p> If you insert an image with the caption checkbox checked then the plugin inserts a figure + img + figcaption with the class applied to the figure element. <figure class="align_right"><img alt="" src="/site/assets/files/1/colin-watts-1141600-unsplash.300x0-is.jpg" width="300" /> <figcaption>Your caption text here</figcaption> </figure> <p>Lorem ipsum dolor sit amet, adipiscing elit. Nullam dignissim convallis est. Quisque aliquam. Donec faucibus. Nunc iaculis suscipit dui.</p> Something to be aware of is that if you change the alignment classes for Page Edit Image from their defaults you need to allow those classes in the Extra Allowed Content setting for the CKEditor field. img figure(is-pulled-left,is-pulled-right) It would be better if the class names configured in Page Edit Image were automatically allowed - there's an open issue about this: https://github.com/processwire/processwire-issues/issues/800

The class names are defined in the config for the Page Edit Image module (ProcessPageEditImageSelect).