Leaderboard

This week I've worked through a few minor issue reports in both the core (ProcessWire) and InputfieldTinyMCE repositories. In addition, a new version of InputfieldTinyMCE was released that includes various improvements. We'll likely go through a few minor versions of this module before it is added to the core. I recommend downloading the latest posted version (6.0.3). Thanks to all that have been helping to test and report issues as they come up. I'm going to give the core another week or so of updates before we bump to the next version there. If you've recently launched any new sites, please add them to our sites directory at processwire.com/sites/submit/ when you have a moment. And if you aren't already subscribed to the ProcessWire Weekly updates email be sure to subscribe. Thanks and have a great weekend!

Hello there! I recently updated my own website - I am a frontend developer living in the northern part of germany. https://www.thumann-media.de The old design has been online since five years (time flies...) and I thought that it was time to make things a bit flashier and include a better showcase of my web projects to give the user a more detailed description of the project features. It's a classic one pager design just for the sake of keeping things as short and simple as possible (I hope the image fits inside this thread). The new version of my site includes a "portolio section" where users get a sneak preview of each project I've been working on recently. It features nice fade-in-out animations powered by aos.js (animate on scroll). Also new is that every project gets a dedicated subpage where I describe some of the unique features that this website offers: I like to have some eye-catchers. I always used the animated wave theme on my website, so why not include a message in a bottle? The animation of the bottle is done via the awesome GSAP animation engine (https://greensock.com/gsap/). This is a super powerful library and I just started diving into the possibilities of this one. Tech Talk: Some of the things I used: - ProFields used for this one (repeater matrix, combo) - Frontend framework is Bootstrap 5. I had a hard time of deciding between Bootstrap and UIKit as my new go-to framework (I am bit biased though because I've been always using bootstrap since version 2). But the grid system alone makes bootstrap so flexible and powerful for me, so I will stick with it for another 10 years I think... - https://github.com/nbcommunication/PageimageSource for image srcsets with webp support - Ajax driven contact form with bootstraps frontend validation - AIOM+ for compressing the assets (CSS and JS) https://github.com/matjazpotocnik/ProcessWire-AIOM-All-In-One-Minify - SEO Maestro - WireMail SMTP AOS.js vs GSAP Which animation library you should use? I discovered the GSAP library a bit too late in the development process, tough. So I am still using aos.js for some animations. AOS has a super small footprint considering its filesize (14 kb, minified) and is super easy to use and super reliable. Whereas GSAP is quite large (71kb, minified) and if you want to make use of scroll triggers you have to include a second library which adds another 40kb. AOS has lots of nice animations which come out of the box. GSAP does not offer this, you have to program those transitions yourself. So you need to spent some time, reading the docs and looking for tutorials! GSAP can do all that AOS can and beyond. If you want to have full control over everything I would advice you to give it a try. So that's all for now. I wish all of you a great weekend!

Is it trying to display thousands of pages and timing out? If so maybe an input type such as Page Auto Complete, which doesn't load all of the pages at once might work.

I've been using panels a lot in the past but I switched to using modals as they seem to have more features like the one you are asking for. Maybe it's also possible with panels, but I've done it using modals and adding the "data-autoclose" attribute to the link. This is a link created by RockFrontend's Alfred editor: <a href="/cms/page/edit/?id=1047" class="icon pw-modal alfred-edit" data-barba-prevent="" data-buttons="button.ui-button[type=submit]" data-autoclose="" data-reload=""><img src="/site/modules/RockFrontend/icons/edit.svg"><span class="alfred-cover" title="" uk-tooltip="" aria-describedby="uk-tooltip-34" tabindex="0"></span></a>

Sounds logical. And it works with Page Auto Complete. Thank you, @taotoo ?

Thank you! I was thinking about doing a redesign since quite a time. But you motivated me to keep the look an the structure closer to the original version ?

Absolutely stunning site! Congrats. I'm a little sorry for not choosing UIkit, but in the end the result counts and it looks absolutely great!

Hi, did my hint motivate you in some way or the other ? Anyway it looks even better than before. Thumbs up for the nice work you did on it.

Haha, I think I've never actually used that myself, but I read about it some day in the blog and it sounded really useful and I think it would have been really useful in some of my hooks where I solved it differently (more complicated I guess) ?

You are the man @bernhard! I don't recall ever seeing this API!

Since it seems that all irregular pagination use roads lead to this thread, I just wanted to point out that the following enables pagination for a regular PHP array (all the other examples I saw are for PageFiles or PageImages-type arrays). My context of use here is a search results screen where I needed to dump a PageArray out to process additional ranking criteria, resulting in an array named $listings below. $items_per_page = 10; $start = ($input->pageNum - 1) * $items_per_page; $total = count($listings); $listed = array_slice($listings, $start, $items_per_page); // Key difference $a = new PageArray(); $a->setDuplicateChecking(false); foreach($listed as $listing) $a->add(new Page()); $a->setTotal($total); $a->setLimit($items_per_page); $a->setStart($start); echo $a->renderPager(); If you get a complaint about PageArray, it's likely because you haven't declared the ProcessWire namespace in your template.

I think it should be enough to just remove the hook once it got triggered? It's definitely better to add the script in the renderReady method rather than hooking buildForm or something, because in buildForm() you don't know whether your alpine field will be rendered or not (or you'd have to check that yourself and don't forget about nested fields etc...). <?php $this->addHookAfter('AdminTheme::getExtraMarkup', function ($e) { $parts = $e->return; $parts['head'] .= "<script defer src='https://unpkg.com/alpinejs@3.10.2/dist/cdn.min.js'></script>"; $e->return = $parts; $e->removeHook(null); // add this line });

The latest version of RockMigrations comes with a console on the module's settings page. What does that mean? It is now easier than ever to create custom "site-profile" like installation scripts that you can just copy and paste into that console. Add or remove the lines that you need or don't need, check the checkbox to run code on save and hit the save button!! ?

Basically you can add as much cols inside a row wrapper as you like in bootstrap. You then define the width of each col via class names. I compared both frameworks and this should clear it up it: Bootstrap class names: container -> defines the max width of the content. UIKit equivalent would be uk-container. row -> wrapper for the columns. UIkit equivalent would be uk-grid. col-x -> the column with the specified width. UIkit equivalent would be uk-width-x-x So the bootstrap variant of your code example would look like this: <div class="container"> <div class="row"> <div class="col">foo</div> <div class="col">bar</div> <div class="col">baz</div> <div class="col">foo</div> <div class="col">bar</div> <div class="col">baz</div> </div> </div>

@guy You could try this: if($this->wire()->process == 'ProcessPageEdit') { // save from page editor } If you want to capture other types of page editors, like ListerPro, User Profile, etc. you could do this: if(wireInstanceOf($this->wire()->process, 'WirePageEditor')) { // save from any page editing process }

Thanks, very cool idea. The str_replace() isn't even necessary, if you use basename($ext = false). // Create $image->alt method wire()->addHookProperty('Pageimage::alt', function(HookEvent $event) { /* @var $image Pageimage */ $image = $event->object; $event->return = $image->description ?: $image->basename($ext = false); }); https://processwire.com/api/ref/pagefile/basename/