Leaderboard

Repeater Easy Sort Adds a compact "easy-sort" mode to Repeater and Repeater Matrix, making those fields easier to sort when there are a large number of items. The module also enhances Repeater Matrix by allowing a colour to be set for each matrix type. This colour is used in the item headers and in the "add new" links, to help visually distinguish different matrix types in the inputfield. Screencasts A Repeater field A Repeater Matrix field with custom header colours Easy-sort mode There are two ways to enter easy-sort mode. 1. Click the double-arrow in a Repeater item header. This activates easy-sort mode and also highlights the item with a black background so it's easier to find it in easy-sort mode. 2. Click the horizontal ellipsis icon in the Repeater field header to activate easy-sort mode. To return to normal mode click the vertical ellipsis icon. While in easy-sort mode: The items will reduce in width so that more items can be shown on the screen at once. The minimum width is configurable in the field settings. Any items that were in an open state are collapsed, but when you exit easy-sort mode the previously open items will be reopened. You can drag an item left/right/up/down to sort it within the items. You can click an item header to open the item. An "Exit easy-sort mode" button appears at the bottom of the inputfield. Configuration In the field settings for Repeater and Repeater Matrix fields you can define a minimum width in pixels for items in easy-sort mode. While in easy-sort mode the items will be sized to neatly fill the available width on any screen size but will never be narrower than the width you set here. If desired you can enable easy-sort mode for a field by default. Since easy-sort is then the default mode for the field no "Exit easy-sort mode" button is shown. Use the mode buttons in the field header to change between easy-sort and normal mode when needed. In the field settings for Repeater Matrix you can define a custom header colour for each matrix type using an HTML "color" type input. The default colour for this type of input is black, so when black is selected in the input it means that no custom colour will be applied to the header. Exclusions The easy-sort mode is only possible on Repeater/Matrix fields that do not use the "item depth" option. https://github.com/Toutouwai/RepeaterEasySort https://processwire.com/modules/repeater-easy-sort/

I'm with you in that I like the look of Tailwind but I've never quite found the right project to justify using it. These days I rarely use a framework at all. Support for flexbox and grid has meant that a lot of the advantages of using a framework don't apply any more. Browsers are a lot more consistent these days as well, so there's not as much need for polyfills and resets and vendor specific tweaks that might have been baked in to a framework. My starting point for a project is a single CSS file that has some minimal styles and utilities in that I'm pretty sure I'll always need. Originally that was based on Wing css but I've tweaked and added to it over the years. I then have other css files for components that I've used over the years - so if I need an off screen menu for example I have one that I can reuse and adapt. The same applies to javascript; In the old days (a couple of years ago anyway) I would have just included jQuery by default in a project but now I just have a few native javascript functions I can include when I need to. Most of the work we do is pretty bespoke stuff so this works better for us. I imagine that if you were doing lots of sites that were fairly similar then a framework might be useful. One situation we would use a framework for is when we need to do an admin interface (we a did a great project that had a SMS bot the client could manage for example). For that we've used ModularAdmin which is based on Bootstrap 4 (and which hasn't been updated for a few years so probably not that useful a link). Now I'm essentially a solo dev, so bespoke code is easy to manage. If you're part of a larger team (or looking for a job) then I bet having decent documentation and consistency is much more important so learning a framework is probably a smart move.

Nice! I'm not an UI expert but personally I'd find it more intuitive to have a grid/list switch in the inputfield header similar to the image field: Not sure, just wanted to share that idea ?

That's quite an old version of ProcessWire. ready.php and the likes were introduced in ProcessWire 2.6.7, so you cannot use ready.php in your version. You can still use the API to change your password. You will need to add the code to a template file. Pick one template file from your /site/templates folder, edit it, and add the following code. The steps are: Pick a template file. Open it for editing. Depending on your server, you might have to download it to edit it locally the upload the edited version. Add the code below. The code needs to be added within php code blocks within that template file. Do not delete your templates existing code. Visit a page on your website (frontend) that uses that template file (e.g. an about page that uses a template called basic-page, etc). Your password (and optionally user name) will be changed. Edit the template file in #1 and #2 above. Remove the password change code. Reupload the edited template file if it was edited locally. Go to your admin URL and login with your new password (and new name if you changed it as well). PHP code <?php namespace ProcessWire; #### DON'T ADD ABOVE TO YOUR TEMPLATE FILE. IT IS JUST FOR SYNTAX HIGHLIGHTING HERE #### ################# COPY CODE STARTS HERE ################# // get the default ProcessWire admin superuser $admin = $users->get(41); // turn output formatting off $admin->of(false); // change the password $admin->pass = "YOUR_VERY_STRONG_PASSWORD_HERE"; // change the user name (optional: comment out code if you know and want to use the existing user name) $admin->name = "YOUR_USER_NAME_HERE"; // SAVE YOUR CHANGES $admin->save(); ################# COPY CODE END HERE #################

Thanks for the suggestion. I'll keep it in mind but for now will leave the interface as it is for a couple of reasons: The intention with this module is just to create a temporary mode to activate when doing a drag sort, and leaving the repeater interface as per the core default at other times. At this point I don't want to get into making broader changes to the repeater interface: hacking controls into the inputfield header (the core doesn't make this easy to do), setting a default view mode, storing the view mode in a cookie, etc, like what is done with image fields. I'm predicting that users will first identify the item they want to drag with the repeater field in its normal mode. When easy-sort mode is activated the repeater items move quite a bit from their original position, and it's a feature of this module that the item you want to drag gets identified with a black background so it's easier to locate. This requires a button per repeater item rather than a single button per repeater field. Fixed in v0.1.1. Although personally speaking I gotta say... I wish @ryan would drop those ancient legacy themes from the core because it's a real hassle for module developers to support multiple themes. The Uikit theme has been the default standard for several years at this point and it's the only theme that's likely to get attention and further development going forward, so PW users should get on board with it. I only test my modules in AdminThemeUikit but will consider compatibility fixes for legacy themes on a case-by-case basis.

@Robin S This is great! I noticed that the grid only works with UIkit theme. It just shorten the width but not wrapped around.

You can use the urlSegments to choose which html code to output in the template file, it can be with the code directly or with file include. https://processwire.com/docs/front-end/how-to-use-url-segments/

I finally managed to get this working. The mod rewrite for the Apache server had to be enabled and I could then log into the admin panel. Thanks a lot everyone for all the help. PW has an amazing community!

I got it fixed. I had found this thread a bit related to my issue and had hence posted it here as well. Thanks.

Do you know the "Combo" ProField? https://processwire.com/store/pro-fields/combo/ I'm not sure, but I think this might be just the right thing for you ?

Guys, I found the method that I meant. It is not the field=fieldname URL that Bernhard mentioned. A long time ago I also tried to tackle a similar task, where I wanted to remember and focus the last edited field after you saved a page. I opened a github issue for this and later Ryan added some methods that he mentioned in a reply, that achieve the behaviour I and @Peter Falkenberg Brown want. Just add a #focus-field_name to the URL when the page is saved and the redirect is executed and the field gets focused. An example URL looks like https://domain.com/processwire/page/edit/?id=1056#focus-subheadline and would focus the field named "subheadline". I am a fan of using native methods that ProcessWire offers, over custom ones. But what the others wrote is also viable. I will provide a hook, just have to test it out, but it goes somewhat like this: <?php namespace ProcessWire; $this->addHookBefore('ProcessPageEdit::processSaveRedirect', function (HookEvent $event) { $url = $event->arguments(0); $page = $event->object->getPage(); if ($page->template == "book_sales" && !$page->isTrash()) { if ($url !== "../") { $goto =$page->url . '#focus-list_price"; $event->arguments = array($goto); } }

I've been using Bootstrap 4 all the time, but I didn't want to take the step to version 5. I'm making my first, successful steps with Tailwind and I'm currently very satisfied. But you have to learn a lot of new things, because it's still a bit more complicated than Bootstrap, but you also have a lot more freedom. I also use Htmx and Alpine.JS with TailwindCSS ? many nice new things ?

just curious, how many of you like/work on https://alpinejs.dev/ ?

@Siddhi Jagtap u.file perms is no write. /site/assets/* need tobe readerable/writedable to.apache sound like apache .run as account that.not you - mabe find new web host that less truble or u.can find out.user what apache run as - "apache", "nobody", "buldnog", etc. if user "apache": https://processwire.com/docs/security/file-permissions/#determining-what-user-apache-runs-as chgrp -R apache /site/assets find /site/assets -type d -exec chmod 775 {} \; find /site/assets -type f -exec chmod 664 {} \; https://processwire.com/docs/security/file-permissions/#how-to-change-permissions-of-existing-files but also visitarlos cont'la lachpud may helper - https://processwire.com/docs/security/file-permissions/

Great additions - many of these are things that we have setup our own solutions when hitting performance issues on large scale (10 000+ pages with lots of fields) so it is great to see core supporting this kind of things. Thank you Ryan! Quick note on findRaw - it looks like it doesn't support parent? It would be very powerful to be using parent just like any normal field based page relation.

@Robin S is a genius! ? Based on his posts in the github issue I did the following and finally got the bug fixed (it seems): For Server Side Resizing: Search for "$corrections = array(" in all your files. You should find 3 files: Replace those arrays with this one: $corrections = array( '1' => array(0, 0), '2' => array(0, 1), '3' => array(180, 0), '4' => array(0, 2), '5' => array(90, 1), '6' => array(90, 0), '7' => array(270, 1), '8' => array(270, 0) ); This did already fix my issue. Client Side: Replace PWImageResizer.js with this file created by @Robin S and delete the old minified version PWImageResizer.min.js to make sure that the new version is loaded: https://github.com/processwire/processwire-issues/files/4660217/PWImageResizer.zip Would be great to hear if that also fixed your issue @Mikael ? Thx again @Robin S for the great work!!

For anyone who is interested in integrating tailwind inside a processwire project here is a little walktrough based on my workflow. This little guide is based on Tailwind 1.9.6 (latest before 2.0 release) because some PostCSS library I use are still not compatible with 2.0 version (not a big deal, really). You can find the necessary files here. - Place package.json, tailwind.config.js, postcss.config.js inside your template folder. - Create a "pcss" folder, and make a structure like this: pcss ├── inc │ ├── colors.pcss │ ├── fonts.pcss │ ├── media_queries │ │ ├── lg.pcss │ │ ├── md.pcss │ │ ├── sm.pcss │ │ └── xl.pcss │ └── sitewide.pcss └── kickstart.pcss Now you got everything to get started, let's have a look at the files: package.json Inside "package.json" you have different dependencies I've installed to mimick my "old" scss workflow (importing, nesting, etc..), the important part however is the script section: "start": "npx tailwindcss build pcss/kickstart.pcss -o css/dist.css", "watch": "npx postcss pcss/kickstart.pcss -o css/dist.css --watch", "build": "cross-env NODE_ENV=production npx postcss pcss/kickstart.pcss -o css/dist.css" "start" is the bootstrap script you have to run at first, to let node compile tailwind as a whole. Do it at the beginning of the project or everytime you make some changes to "tailwind.config.js" Change the name of your pcss files accordingly (I've used pcss as an extension, but css would work perfectly fine) "watch" is the next script you have to run in order to have live reload of your stylesheets. "build" is the script you have to invoke once you are ready to deploy to production (you need to specify your purge rules inside postcss.config.js, keep reading.) tailwind.config.js Here you can specify your tailwind configurations, read the docs here. One thing to notice inside mine is that I've set purge: false because I prefer to configure the purge part inside a dedicated file, which is: postcss.config.js This file is responsible to handle postcss options, and purge is one of them. The paths you declare inside the content array are the ones whom will be scanned and purged eventually. Mine could be different than yours, so pay attention. The whitelistPattern array is useful when you want to exclude some classes from the purge phase, below I'm excluding the ones whom starts with "fff-". ... content: [ './*.php', './inc/*.php', './fields/*/*.php' // etc. ], whitelistPatterns: [ // Pattern to exclude during extraction /^(fff-)/ ], ... The other settings are pretty explanatory (cssnano is used in production for minification). As a final note you'll notice that every pcss file I use starts (and ends) with: /* purgecss start ignore */ css... /* purgecss end ignore */ Those tell purgecss to ignore completely the file, since I know I want to retain every rule/class I write in there. If you got everything setup correctly you can start having fun ? Run: npm install then: npm run start and finally: npm run watch Hope this little "guide" could enlighten in using Tailwind ?