Leaderboard

I have a little home-made pagebuilder that is based on RockFrontend and Tailwind and have a few observations that might (or not) be of interest. Tailwind works really well with Latte. The result is (to my mind) concise and understandable code that is easily encapsulated. I tried some of the plugin components etc. but was generally disappointed. As is usually the case with these things, you get a load of baggage you didn't really want and then you try and customise it slightly and it is not easy. I ended up just building my own components with Latte, Tailwind and a bit of custom vanilla js (with a bit of help from various examples on the www). For example, I built a general-pupose carousel template that can be called via a Latte {include file} with options, e.g.: {include $config->paths->templates . 'motif_layouts/latte_blocks/motif_carousel.latte', imagePages: $page->motif_image_page, modal: true, } and {include $config->paths->templates . 'motif_layouts/latte_blocks/motif_carousel.latte', imagePages: $page->motif_image_page, start: $page->motif_image_page->first, autoCycle: ['speed' => 5000] } My pagebuilder makes extensive use of css grid-area-templates which are not present in Tailwind. I thought this might be a bit of a problem, but was pleasantly surprised that the css file reduced from this: .image-text .has-image { /*grid-area: content;*/ display: grid; grid-template-columns: auto; gap: 20px; grid-template-areas: "image" "text"; } @media (min-width: 500px) { .image-text .has-image:not(.image-right) { /*grid-area: content;*/ display: grid; grid-template-columns: 1fr 5fr; gap: 20px; grid-template-areas: "image text" ".... text"; } .image-text .has-image.image-right { /*grid-area: content;*/ display: grid; grid-template-columns: 5fr 1fr; gap: 20px; grid-template-areas: "text image" "text ...."; } } .image-text .no-image{ /*grid-area: content;*/ display: grid; grid-template-columns: auto; grid-template-areas: "text"; } .image-text img{ grid-area: image; } .image-text div#body{ grid-area: text; } to this: .image-text { --stacked: "image" "text"; --image-left: "image text" ".... text"; --image-right: "text image" "text ...."; --text-only: "text"; } .image-text img{ grid-area: image; } .image-text div[id*='body']{ grid-area: text; } with only a marginal increase in the html (using arbitrary properties and values) and (I think) an increase in clarity: <div n:class= "$imgs > 0 ? '[grid-template-areas:var(--stacked)]' : '[grid-template-areas:var(--text-only)]', ($imgs > 0 && $page->motif_toggle == 0) ? 'sm:[grid-template-areas:var(--image-right)] sm:grid-cols-[5fr_1fr]', ($imgs > 0 && $page->motif_toggle == 1) ? 'sm:[grid-template-areas:var(--image-left)] sm:grid-cols-[1fr_5fr]', grid, gap-5"> Note that you need to include these type of class names in quote marks or Latte gets confused. The bit that worried me most was where I needed styling to be dependent on php variables. Some commentators have said that this presents a problem for Tailwind because it creates the stylesheet before the variables are known. However, the work-round is quite simple, with an in-line style tag to create css vars like this: <style> #gallery-item-{$imgPage->id} { --w: {$imgDisplayWidth|noescape}{$heightArray[1]}; --w2: {$expandWidth|noescape}{$heightArray[1]}; --wh: {$halfWidth|noescape}{$heightArray[1]}; --wq: {$quarterWidth|noescape}{$heightArray[1]}; --h: {$height|noescape}; --h2: {$expandHeight|noescape}; } </style> which then can be used directly: class="w-[var(--w)] hover:w-[var(--w2)]" It may be that there are better ways of doing some of this, but I was pleasantly surprised that each time I looked at a bit of slightly involved css and html and thought 'how the hell am I going to do that in Tailwind?', the answer was much shorter and clearer code. In particular, Latte works well with Tailwind throught the power of the n:class tag.

If you look at that file, you see that in line 35 it calls the count() function and passes it the variable $architects. From the error message we know that $architects is NULL. Before PHP 8.0 I believe this would have been fine, but now it’s a fatal error. Further up in the same file, the $architects variable is assigned: $architects = $page->get('architect'); $page is the skyscraper you’re trying to view, so it’s trying to get the value of that skyscraper’s field called “architect”. It’s a page reference field for multiple pages. That fieldtype always gives you a PageArray, so even if the skyscraper has no architects you should still get an empty PageArray and not NULL. The fatal error would not occur. So how could $page->get('architect') end up being NULL? The most likely possibility is that the template doesn’t have a field called “architect”. Now if you check out install.sql, it looks like there is only a field called “architects”, which makes sense because it’s a multiple page reference field. So I’d say you’ve found a bug in the site profile. The line I quoted above should say architects instead of architect.

The TinyMCE 6 rich text editor opens up a lot of new and useful abilities for ProcessWire users. In this post, we'll take a look at a few of them, and how you can start using them now, with a focus on those that are unique to ProcessWire's implementation of TinyMCE— https://processwire.com/blog/posts/using-tinymce-6-in-processwire/

This isn't the first star rating module for ProcessWire, but I wanted some particular config options and to have the inputfield be usable within FormBuilder. FieldtypeStars The inputfield of FieldtypeStars uses a star rating interface to set a float value. The fieldtype extends FieldtypeFloat. The inputfield has no external dependencies such as jQuery or Font Awesome and can be used in FormBuilder. Config Using InputfieldStars in FormBuilder In order to add a Stars field to a FormBuilder form you must first enable "Stars" in the "Allowed Input Types" field in the FormBuilder module config. https://github.com/Toutouwai/FieldtypeStars https://processwire.com/modules/fieldtype-stars/

Hey @ryan I've managed to find a way to get a minimal tinymce field using this very simple json: { "menubar": false, "toolbar": "bold", "toolbar_sticky": true } Result: This is very nice and what I want! The problem: I need to set the JSON globally for ALL tinymce fields: Would it be possible to add an option to set the defaults.json file on a field level? This would be extremely helpful (necessary) for module development where one wants to ship fields with a custom set of options. It's also a lot easier to create fields where the settings are defined in code (GIT!) rather than via gui. Another benefit would be that the core (or a module) could ship different versions of defaults (eg minimal.json, simple.json, default.json) that a field could use and extend on them rather than on global defaults. Thx!

Fascinating how you figured that out. That was exactly the problem. Only one letter was missing. Everything now works as it should. Many, many thanks for your help and have a nice day. I am very grateful to you. Kind regards Peter

Your textformatter seems like a valid solution. Although I am not sure whether the regex for getting the file URL is 100% reliable. I'm not a regex prof. But in general it is not a good idea to rely on regex for parsing HTML. You could use PHP's SimpleXML to parse and replace the href attributes. Adapt something like this: https://stackoverflow.com/questions/27326066/simplexml-php-change-value-from-any-node But I think you don't even need a textformatter for the task. A simple hook will intercept all URLs to PDF files and return the desired URL under /downloads/. Place this in site/init.php <?php namespace ProcessWire; // intercepts all file URLs and rturns URLs in desired format. wire()->addHookAfter('Pagefile::url', function(HookEvent $event) { /** @var PageFile $pageFile */ $pageFile = $event->object; if(strtolower($pageFile->ext) === 'pdf') { $pageId = $event->page->id; $event->return = '/download/' . $pageId . '/' . $pageFile->basename; } }); Now all URLs to PDF files will have the desired format. Even when you add a link to a file inside CKE editor, the desired URL will inserted.

Thanks @abdus Relating to the topic, there are other code snippets lurking in the Forum, like: Have a different title of a field across multiple templates? Hook to hide inputfield in Admin Custom Field in Page SettingsTab Remove a fieldset tab from specific pages of a template