Jonathan Lahijani

I have a field that uses the Files fieldtype. Images and videos are being uploaded to it. Because it is not an Image fieldtype, I can't get an image width or height. I believe there is a way with the Pageimages class, but I'm a bit rusty on how to do this. There was a post on here that discussed how to do it but I can't find it. Any help would be appreciated.

I originally developed and launched Real SF Properties in 2015 and did a complete design and programming refresh in 2022: https://realsfproperties.com/ The site was designed by BuzzCandy.Design: http://buzzcandy.design/ This was my first time using Tailwind CSS and it was a great fit for this project. I wish it existed back in 2015 because while UIkit has been my go-to CSS framework for several years now, there are some site designs (and designers) that I work with that simply need a higher level of precision to slice correctly and be maintainable. Sure, I could have used vanilla CSS and done it the classic way (separation of concerns), but Tailwind CSS and doing everything with utility classes (locality of behavior) does come with major benefits, even if the markup is not so easy on the eyes. This site does not use a matrix page builder or anything fancy. The sections are hardcoded but with the ability to add data using the various page data structures that feed in accordingly. It has also has an accessibility score that is extremely high. It's a quick loading site even though ProCache or CDN is not yet enabled. Other frontend libraries include Flickity and Headroom.js. More details on my personal website: https://jonathanlahijani.com/projects/real-sf-properties/

Tracy's interface in the frontend seems to fall apart when using HTMX boosted links: https://htmx.org/docs/#boosting Has anyone had experience with this and know how to fix it?

I wanted to share this tip which I'm going to implement on Transferware Collectors Club Database. That site has a form which is a set of filters. It takes many queries to build that form and all of its options and as a result, it takes over 5 seconds to load the page. ProCache is out of the question because using a full page cache on a site like that doesn't make sense, but caching various areas with WireCache $cache does. The form is developed in a way where it will automatically populate/select the various form fields based on what it reads from the URL. So going to /?color=123 will automatically check the appropriate radio button for that color. Therefore, when using $cache to cache the form (or parts of the form), we need to cache the form in a clean, unpopulated state. The problem then becomes how do we use the cached form but also populate the fields accordingly based on the URL variables? Markup regions can do this. Assuming we had a set of radio options coming from our WireCache'd form like this: ... <input type="radio" name="color" id="color-123" value="123"> Red <input type="radio" name="color" id="color-124" value="124"> Blue ... We could devise some code that also outputs this on our page: <region pw-replace="color-123" checked></region> Markup regions will then "check" that radio. Perhaps this isn't mind blowing, but I've never thought of using Markup Regions in this way.

I should clarify that php 7.4.3 was fpm and php 8.1 was non-fpm. Not sure if php-fpm played a role.

OK I figured it out but don't know the exact reason. Upgrading from php 7.4.3 to php 8.1 resolved the issue. I noticed in 7.4.3, the http headers of the request are in lowercase, but in php 8.1, they are in the more proper case. Also, the headers are listed a little bit differently in 7.4 vs 8.1. That's probably where the issue is.

I'm getting the same 500 errors as well in my particular case. To clarify my situation: occurs on live site (Ubuntu 20.04, Apache 2.4.41, php 7.4.3), but not dev site (Ubuntu 22.04, Apache 2.4.52, php 8.1.2); i mirrored live to dev database as well enable live preview = on (not sse) While it 500 errors, the field technically does get autosaved (I can refresh the page without hitting the save button and the updated value is still there). I wonder if the Apache or PHP version matters. Will have to check. @adrian Did you ever find a solution to this?

Is it possible to set $config->sessionExpireSeconds for different users? What would be the best way to go about this?

If I remember correctly, there was a way to move the Users page to be somewhere else in the page tree. It involved changing some special settings. I can't seem to find it on the ProcessWire website. Does anyone remember the guide / blog post / whatever documentation was created for it?

While I'm not using it in real world project yet, the Combo field works well for a "link" field. For example, you could link something to a page (page field), a external website (url field) or a modal (page field), or a page + url parameters. Also, what about absolute vs relative URLs? Here's an export of that field you can import and play around with: https://pastebin.com/N8UuiFKQ Somewhat related is this module:

I've looked at it but since it uses '@apply' quite a bit, that goes against what the creator of Tailwind recommends:

Very cool Ryan. I built something very similar for my own purposes in ProcessWire as well (invoices, clients, projects, proposals, expenses). It's similar to FreshBooks but with my own needs. It uses the Table field (profields) and ListerPro to make things more convenient.

I have a page field that I am hooking into and providing the custom dropdown values like this: $this->addHookAfter('InputfieldPage::getSelectablePages', function(HookEvent $event) { if($event->object->hasField == 'my_page_field') { $ids = []; foreach(wire('pages')->find("...") as $p) { $ids[] = $p; } $event->return = $ids; } }); Due to the nature of my site, the amount of items that will populate in that dropdown field will be quite high (over 2000 pages). Due to this high amount of pages in that dropdown, the PW admin slows down quite a bit (extra 2 seconds) on edit pages that utilize that field. To counteract this, I have made that field have the Visibility Presentation of Closed + Load when opened (AJAX), however because I am using the hook described above, it will still load the pages even if the field has not yet been opened. So my question is, how do I improve the the hook above to execute only after the field has been opened?

If anyone is thinking of using MediaTemple and their latest Grid (shared) plan, please reconsider. You will hit this issue and they will not disable mod_security. MediaTemple is owned by GoDaddy, so you should just avoid them all together because GoDaddy is garbage in my opinion anyway.

Works great as an alternative to repeaters. Way fewer pages. For example I use it on my ecommerce site to hold what items are in a person's cart.

Example: $finds = []; $finds[0] = $pages->find("title*=foo", ['findIDs' => 1]); $finds[1] = $pages->find("title*=bar,id!=".implode("|", $finds[0]), ['findIDs' => 1]); $finds[2] = $pages->find("title*=baz,id!=".implode("|", array_merge($finds[0],$finds[1])), ['findIDs' => 1]); // etc... // final query that gets ids from 0, then 1, then 2 $final = $pages->find("id.sort=".implode("|", array_merge($finds[0],$finds[1],$finds[2])));

@formulate Refer to my post here, specifically under the search section which contains a link to a commit that should be here. In short, that minor change opens up the possibility to do multiple $pages->find and stack them one after another, while maintaining pagination. This means you can use multiple finds and effectively build search results that are ranked. I used this technique very successfully for the site I showcased and if I'm understanding your post, I think that's what you're ultimately looking to do.

Slightly off-topic, but what is the correct way to manage frontend packages without a Node-based method (grunt/bower/webpack)? Does a formal way to do this even exist? Composer is not meant for frontend packages (right?), but I see that you can get Bootstrap and UIkit from there (but not HTMX or Alpine.js for example) wget into your themes folder? Make a ProcessWire module for each frontend package (that you as a module maintainer manage the versions of yourself)? This is more WordPress / non-developer like for those that consume the package as opposed to the module maintainer. I'm really trying to become Node free... not because it's causing me problems, but just because I feel I barely need it except for package management.

Reviving this old thread... I've been deeply thinking about a simplified build process in addition to a more standard, non-NPM/Webpack/etc. way of loading CSS and JS. I agree with @Nuwanda in that the way WordPress does it is well thought out. It's pretty straight-forward, but I wonder if ProcessWire could standardize something like wp_enqueue_scripts/styles in the core. Right now there's no standardization, but that's probably by design (ie, ProcessWire doesn't dictate markup / not a theming CMS).

I'll mention Quill: https://quilljs.com/

Yes, but the module is still in deep development. It's kind of never ending, but I have put a lot of consistent time into it over the last month. I'm at mostly the refactoring stage now as I have gotten in most of the features I want. I am stripping out experimental ideas that just didn't feel right, such as the 3rd approach in my video (too overcomplicated). Page builders are... not difficult to develop but easy to overcomplicate. To be clear, my module is not going to be just a page builder (although that is a large part of it). It's essentially my vision of a highly opinionated, modularized starting point that works well with a CSS framework of your choosing (UIkit3, Bootstrap5, Tailwind, CodyFrame or no CSS framework). Whichever CSS framework one uses, a page builder (ie, the 'Blocks' field), would be provided that's built around the chosen CSS framework. UIkit3 would be the most flexible in page building capability (since UIkit is designed for page building scenarios and it's easy to replicate the logic and thought process of how YOOtheme did their builder), but the page builders for others would work well too as they would be inspired by YOOtheme's approach but just adapted for the respective CSS framework. I'm taking great care to make it as easy to use as possible. A goal of this is to make ProcessWire easy to use for those who are just starting to use it and not sure how to structure things. This is where the heavily opinionated decisions I made come in.

ProcessWire does not use a favicon in the admin backend. I usually insert a PNG-based one of the ProcessWire P logo to differentiate the frontend and backend of a site, however I upgraded my technique to use an SVG-based one, which has the added benefit of being able to quickly set the fill color. This is a nice trick, especially if you're working in multiple admin backends of different sites and want to be able to quickly identify which tab belongs to which site by the ProcessWire favicon color alone. Insert this in /site/templates/admin.php: wire('adminTheme')->addExtraMarkup('head', "<link type=\"image/svg+xml\" rel=\"shortcut icon\" href=\"data:image/svg+xml,%3Csvg width='256' height='256' viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='#EB1D61' fill-rule='nonzero' d='M234.02346,56.2065308 C226.258185,44.611679 213.340949,31.3634673 200.370381,22.7873303 C173.426584,4.33370224 142.216153,-2.21573572 114.611028,0.642976614 C85.8219124,3.7470262 61.1714319,14.5951995 40.9049183,32.6861551 C22.1317268,49.454423 9.73715371,69.9560838 4.27586162,89.5083961 C-1.24942998,109.060708 -0.513435538,127.162331 1.45988289,140.794549 C3.53986718,154.629436 10.4304818,172.037714 10.4304818,172.037714 C11.8384712,175.376434 13.7904564,176.731123 14.8037821,177.296465 C19.8384108,180.048509 28.105015,177.627137 34.4516337,170.50169 C34.7716313,170.06435 34.9422967,169.45634 34.7716313,168.944332 C33.000978,162.128223 32.3609828,156.997474 31.7316543,153.029411 C30.2916651,145.178619 29.65167,132.026409 30.6116627,119.866214 C31.0916591,113.284776 32.3716494,106.244663 34.6116325,98.8632122 C38.9422665,84.281646 48.0728642,69.0600695 62.3447564,56.4092007 C77.715307,42.7876498 97.4271581,34.3715154 116.16835,32.1954806 C122.738967,31.4061347 135.240206,30.6487893 150.290759,34.3608485 C153.501401,35.1608613 167.282631,38.7555854 182.023853,48.7397449 C192.754438,56.0358614 201.394373,65.0386719 207.346328,73.9454809 C213.404949,82.44695 219.986232,96.783179 221.916885,107.279347 C224.647531,119.226204 224.647531,131.88774 222.706212,144.218603 C220.30623,156.570801 215.975596,168.581659 209.24498,179.152495 C204.605015,187.344626 194.983755,198.171465 183.613174,206.299595 C173.362585,213.510377 161.66134,218.715793 149.650764,221.595839 C143.57081,223.035862 137.469522,223.95321 131.218903,224.15588 C125.661612,224.32655 118.291001,224.15588 113.117706,223.2812 C105.427098,222.054513 103.82711,220.091815 102.067123,217.425106 C102.067123,217.425106 100.840466,215.505075 100.499135,210.36366 C100.616467,163.376243 100.595134,175.920443 100.595134,151.525387 C100.595134,144.63461 100.371136,138.383844 100.435135,132.709086 C100.755133,123.396937 101.54446,116.996835 108.20041,110.063391 C113.01104,104.953976 119.741656,101.87126 127.154934,101.87126 C129.405583,101.87126 137.160191,101.977929 143.97614,107.642019 C151.282751,113.74345 152.509409,122.084916 152.797407,124.314285 C154.461394,137.359827 145.842792,147.077316 142.536151,149.541355 C138.440182,152.613404 134.760209,154.106761 132.274895,154.981442 C126.984268,156.752137 121.170979,157.264145 115.944352,156.922806 C115.144358,156.869472 114.41903,157.392147 114.259031,158.19216 L112.499044,167.322972 C110.781724,174.256417 114.632361,176.795124 116.872345,177.691138 C124.029624,179.899173 130.376243,180.816521 137.896186,180.251179 C149.426765,179.440499 160.797346,174.896427 170.450607,165.893616 C178.663878,158.085492 183.346509,148.453338 184.946497,137.679832 C186.546485,125.722308 184.466501,112.847436 179.015875,101.945928 C173.021254,89.9244028 162.674665,79.8869091 149.042768,74.393488 C135.272206,68.9747348 124.317622,68.7827317 110.195062,72.3881226 L110.035063,72.4414568 C100.861799,75.5988406 93.0111915,79.4922361 84.8405865,87.9297042 C79.2406288,93.7537973 74.6539968,100.804577 71.8593512,108.762037 C69.0860388,116.783498 68.3393778,122.767594 68.2113788,132.069076 C68.0407134,138.959853 68.3713775,145.359955 68.3713775,151.354717 L68.3713775,190.832681 C68.3713775,203.462216 67.9447141,205.648918 68.3713775,212.145022 C68.6060424,216.454424 69.2033713,221.329168 71.091357,226.566585 C73.0326757,232.337344 77.1073116,238.257439 79.9019571,240.988149 C83.8165942,245.158882 88.7978899,248.508269 93.693853,250.588302 C104.904435,255.569715 120.125653,256.359061 132.466893,255.879054 C140.637498,255.569715 148.85077,254.439031 156.904042,252.529667 C173.010587,248.700272 188.477137,241.734828 202.077034,232.070673 C216.658258,221.798509 229.330162,207.782285 236.327442,195.878095 C245.298041,181.733869 251.100664,165.861616 254.119308,149.552022 C256.839287,133.210428 256.711288,116.452827 253.063316,100.356569 C250.183338,85.4229975 242.492729,69.0387358 233.61813,55.8118579 L234.02346,56.2065308 Z'%3E%3C/path%3E%3C/svg%3E%0A\">"); Replace the fill color (#EB1D61 -- the PW pink color) with your own brand color if needed. Note: this is not tested on Safari (doesn't support svg favicons) so make sure to implement a proper fallback if that's important to you.

The author of Alpine.js and Alpine Components (Caleb Porzio) mentioned the following in an email announcement today: So, that will in fact be a fourth option. ? Works for me.

This is something I've been thinking about over the years and I want to hear other people's thoughts on whether custom forms should be built using ProcessWire's form API. For a simple contact form, I'll usually use Form Builder. For something like a complicated signup application (like a university admissions application for example), I've used the ProcessWire admin itself (heavily locked down depending on the user's role) as the "form". However let's take an example of an ecommerce checkout form. Pros It's the "ProcessWire" way to do it. Built-in server-side form validation, CSRF and session related persistence. Cons Requires jQuery (for example when showing/hiding) and jQuery UI if using advanced fields (date picker, ASM Select, etc). Must load the appropriate JS correctly. You can also argue it loosely depends on Font Awesome 4 for icons. Due to some limitations, it doesn't work well with something like Alpine.js; for example this issue. Work-arounds are required to get the correct markup in place. It just feels more difficult even though it's the ProcessWire way to do it. Thoughts?

If you're looking for a JS library that pairs well with Tailwind, might I recommend Preline, which I just found on Hacker News: https://preline.co/ Another option includes Flowbite, but at the time of this writing, Preline's JS goes a bit further and has more components and more options (such as offcanvas, mega menu): https://flowbite.com/ There's also Alpine Components if you're into Alpine, however it's commercial: https://alpinejs.dev/components I like Alpine.js, but the "locality of behavior" approach it takes for these common components is not my style. I do use it elsewhere however. - Lastly, there's Headless UI, but that probably won't fit with a typical ProcessWire frontend unless you are using React or Vue: https://headlessui.com/ I wish Headless UI had a Alpine.js version, but the author of Tailwind ultimately scrapped the idea (it was mentioned in a Tweet thread somewhere). This would have been my go-to approach, assuming it was comprehensive enough. But there's many options as stated above.