Leaderboard

I'm really happy with InputfieldTinyMCE so far. And as threatened to in reply to an earlier core updates post, I took a stab at migrating my autocomplete module over from InputfieldCKEditor. All in all, it was quite a pleasant experience and the JS side was really straight forward. The change also involved a lot of refactoring, and in the aftermath of that there's still a good bit of house cleaning to do, but for anybody willing to toy around with it, there's an alpha release of InlineCompleteTinyMCE on GitHub. A snapshot of InlineCompleteTinyMCEActionUsers in action: And the corresponding configuration in the field's "Input" tab (added to the TinyMCE config section): I haven't tested it with lazy loading or the inline editor yet.

Wow nice work @BitPoet!

@fruid I looked for a solution on the forum. I couldn't find it. I had to write an answer for future generations.

@fruid can you confirm that your data is urlencoded? You might want to have a read over at MDN https://developer.mozilla.org/en-US/docs/Learn/Forms/Sending_forms_through_JavaScript . Especially the part where they are using encodeURIComponent() to encode the data. What do you mean by broken HTML. Do you have an example? Passing an email, do you mean the HTML or text content of an email or an email address? In your code you are taking all form fields, putting them into an object, then converting that object into a JSON string and assign that string to a property 'content' of a formData object and send that object via XHR. To me it looks like what you actually want to do is send JSON data to the server. If this is the case, you could omit the step of assigning your JSON string to a formData object and use request header content-type 'application/json' instead. No need for url encoding the data then. Simplified example: // create an object const content = { formfield1: 'value', formfield2: 'value' } // open request xhr.open('POST', 'yourURL') // set Content-Type header xhr.setRequestHeader('Content-Type', 'application/json') // send rquest with JSON payload xhr.send(JSON.stringify(content)) On the PHP side where you receive the request, you can get the JSON data like this: // Takes raw data from the request $json = file_get_contents('php://input'); // Converts it into a PHP object $data = json_decode($json);

@Stefanowitsch thanks a lot! Regarding to your question about animations - there is no extra animation engine involved in here - these are basic CSS3 transitions and animations triggered by JS via the class change (on the elements or on the parents) + there are few 'ontransitionend' JS listners to control animation state or for example to move focus to correct place after animation end. This apporach has it's pross and cons - animations/transitions triggered via class change could cause unnecessary browser rendering repaints and affect performance, but if done right are great as you can control almost everything straight from the CSS - timings, easing etc. I was trying to optimize all of this quite a bit to not affect performance - animating mostly CSS transforms - translateXYZ(not top/right properties or others that cause repaints), using animations not transitions where possible, continuous transitions like mouse cursor are triggered with requestAnimationFrame to avoid drops in frame rate ... 'On scroll' animations are controled by native js Intersection Observer API, I'm using only basics here but this API is amazing and you can do a lot of great things with it. I guess that it all depends on the project, I'm not plannig to support IE11 here so I choosed native JS. Animations are still quite simple so this approach works well here. On the other side if you will have many complicated animations running at the same, going with something like GSAP could give a much better results from performance perspective ?

Tailwind CSS Framework, a utility-first CSS framework for rapidly building custom designs This thread is a place for ProcessWire developers who use (or would like to use) Tailwind CSS to share their experience, tips, frustrations , solutions, code snippets and generally discuss all things tailwind. From the creators of Tailwind CSS Moderator note: the first few posts in this topic were split from this thread. ########################## Thanks, @apeisa! Yes, Tailwind is awesome! Responsive classes are a clever idea indeed, much easier to work with. The authors did an excellent job and keep improving it. Some people may feel a little sceptical, but I fell in love with it the moment I built my first project. Although nowadays I work alone, I believe that Tailwind makes work between a frontend and backend developers much easier because it makes the HTML more declarative and you can grasp what the classes mean in a glimpse.

Hi everyone, I would like to showcase a small micro site of own studio - 7studio.eu Personally I don't like to design anything for myself (as most projects lands in the trash or on the shelf), but I needed something new and simple quite fast before building a fully fledged portfolio, so I thought to built a small "starting point". This is more like a work in progress, than a finished site, it contains only basic info, screenshots of some of the latest works and that's it - as for now ? Technically, on the front end we have a simple custom HTML5/CSS3/JS code, on the back end site uses only core PW features (there is more features already built in on both backend and frontend but not published yet). Any comments, suggestions are welcome, hope you will like it and have a great weekend everyone! P.s. Sorry - there is no english translation yet, PW multilingual features will land in the upcomming weeks ?

Just have a look at this Module ? https://processwire.com/modules/admin-restrict-branch/ I think this is the right approach for it ?

RockFrontend does really not care what you output. But if you have troubles with latte files you can still include PHP files from your latte templates: {$rockfrontend->render('forms/yourform.php')} The only thing necessary might be to add the |noescape filter when rendering HTML markup in latte files

If a user has the permission to edit the page, the edit link is also displayed. You should check the permissions first ? I use the module myself with users who do not have superuser rights.

I don't know where your input comes from. I would take care at the source that there is no broken HTML in the first place. I already provided some sample code how you can do this above

Hi. I have several sites on which I periodically get this exception SQLSTATE[23000]: Integrity constraint violation: 1062 Duplicate entry '41-0' for key 'PRIMARY' (in /wire/core/FieldtypeMulti.php line 295) All exceptions go from URLs http404 or 404. I understand what this exception means, but can't found out what is causing it. Do you have any suggestions?

I don't even remember this issue ? but thanks @Andy

Make a static page 404.html Fix the line in the .htaccess file From ErrorDocument 404 /index.php to ErrorDocument 404 /404.html Also, it would be useful to read the article "Optimizing 404 requests in Processwire"

thanks for all the details, I will keep an eye on it, please let me know if that will happen again ?

Annoyingly I've just revisited the website and it's no-longer doing it! I'll check it again later. The GPU is a GTX750, and the display is low pixel density, with no scaling involved.

On Chrome (and Firefox) on Win10 I do notice that with the browser window wider than about 1,000 pixels my mouse cursor slows down. The wider the window, the slower it gets. At 2560px wide, the mouse is at about half speed. This is with a modern CPU and also a GPU.

I think the best solution would be to ask Ryan to add an option "copyFiles" to the clone method. It would be very easy to add and I think everything that can help with performance is a welcome addition to Ryan ?

Headers are fine. So is your request content actually urlencoded?

Hi @snck, Thanks for the feedback and the great example! Unfortunately the issue you've raised is more of an issue with how Pageimage::render() is implemented. Adding 'width' or 'height' options is interpreted as a request to resize the Pageimage, which is not what we want in PageimageSource::render(). The default markup does not include width and height attributes, so the only way to add them without resizing the image is to provide them in a specified markup string. I have a hook in an internal development module which sets a default markup string with these attributes: <?php // Pageimage:render $this->addHookBefore('Pageimage::render', function(HookEvent $event) { $markup = $event->arguments(0); $options = $event->arguments(1); if(!is_string($markup)) { $options = $markup; $markup = '<img src="{url}" alt="{alt}" width="{width}" height="{height}">'; } $event->arguments(0, $markup); $event->arguments(1, $options); }); This means I can generally call render() without any options. If your example is something you are doing repeatedly, you could utilise a similar strategy in site/ready.php: <?php // /site/ready.php $wire->addHookBefore('Pageimage::render', function(HookEvent $event) { $markup = $event->arguments(0); $options = $event->arguments(1); if(!is_string($markup)) $options = $markup; if($options['masonry'] ?? false) { // a custom option $img = $event->object; $thumb = $img->width(480); $markup = "<img src='$thumb->url' alt='{alt}' class='{class}' width='$thumb->width' height='$thumb->height'>"; $options = array_merge([ 'picture' => true, 'srcset' => [360, 480, 640, 800], 'sizes' => '(max-width: 579px) calc(100vw - (2 * 34px)), (min-width: 580px) and (max-width: 767px) calc(50vw - (1.5 * 34px)), (min-width: 768px) and (max-width: 1199px) calc(33.3333vw - (1.33 * 34px)), (min-width: 1200px) and (max-width: 1499px) calc(25vw - (1.25 * 34px)), (min-width: 1500px) calc(20vw - (1.2 * 34px))', 'class' => 'teaser-img proportional', 'alt' => $img->description, ], $options); } $event->arguments(0, $markup); $event->arguments(1, $options); }); // In your code $img->render([ 'masonry' => true, 'class' => 'overriding-the-default-class', 'alt' => __('Overriding the default alt text'), ]); // Not tested!!! Cheers, Chris

Just wanted to thank you @Tom. for that brilliant hint! I'm not that experienced in frontend stuff, so basic tasks like slide-toggling a menu can really be a pain for me ? I've always made it easy for myself and just included jQuery for such things... Today I tried the UIkit JS utils and it's not that hard to do (here I'm using Zepto.js, but that's not a necessity): var util = UIkit.util; $(document).on('click', '.tm-burger', function(e) { e.preventDefault(); var $menu = $('#tm-menu-section'); var element = util.$('#tm-menu-section'); var duration = 700; if($menu.height()) { // hide menu $menu.height(element.scrollHeight); util.Transition.start(element, { 'height': 0, 'overflow': 'hidden', }, duration, 'ease'); } else { // show menu $menu.removeAttr('hidden'); $menu.height(0); $menu.css('overflow', 'hidden'); // trigger window resize to make sure that the menu renders correctly $(window).resize(); util.Transition.start(element, { 'height': element.scrollHeight, 'overflow': 'show', }, duration, 'ease').then(function() { $menu.height('auto'); }); } }); The benefit here is that I don't need any dependencies and I can create any transitions that I need and I'm not limited to jQuery's .slideUp() .slideDown() etc. ?

No problem! When I have some time here I'm planning to build a site profile using Tailwind CSS so more people can see how it can be integrated with PW. Using both the CDN version, which gzipped is around 60kb and using brotli compression goes down to less than 20kb and the webpack installation I mentioned. :)

The easiest way I've found is to use Laravel Mix with two plugins, Laravel Mix Tailwind and Laravel Mix PurgeCSS to reduce file size by going through all php templates. But note, the website is not running the purged version yet, as I'm working on some configs on javascript generated classes and classes set by the user via admin (using RepeaterMatrix). But I also reduced manually Tailwinds output by using just a few colors and removing other pieces. Take a look on my webpack.mix.js file: And here goes Tailwind Config file. Note: I'm using Tailwind earlier version (prior to 1.0). Will upgrade it when possible, but it works just fine.

I created this module a while ago and never got around to publicising it, but it has been outed in the latest PW Weekly so here goes the support thread... Unique Image Variations Ensures that all ImageSizer options and focus settings affect image variation filenames. Background When using methods that produce image variations such as Pageimage::size(), ProcessWire includes some of the ImageSizer settings (height, width, cropping location, etc) in the variation filename. This is useful so that if you change these settings in your size() call a new variation is generated and you see this variation on the front-end. However, ProcessWire does not include several of the other ImageSizer settings in the variation filename: upscaling cropping, when set to false or a blank string interlace sharpening quality hidpi quality focus (whether any saved focus area for an image should affect cropping) focus data (the top/left/zoom data for the focus area) This means that if you change any of these settings, either in $config->imageSizerOptions or in an $options array passed to a method like size(), and you already have variations at the requested size/crop, then ProcessWire will not create new variations and will continue to serve the old variations. In other words you won't see the effect of your changed ImageSizer options on the front-end until you delete the old variations. Features The Unique Image Variations module ensures that any changes to ImageSizer options and any changes to the focus area made in Page Edit are reflected in the variation filename, so new variations will always be generated and displayed on the front-end. Installation Install the Unique Image Variations module. In the module config, set the ImageSizer options that you want to include in image variation filenames. Warnings Installing the module (and keeping one or more of the options selected in the module config) will cause all existing image variations to be regenerated the next time they are requested. If you have an existing website with a large number of images you may not want the performance impact of that. The module is perhaps best suited to new sites where image variations have not yet been generated. Similarly, if you change the module config settings on an existing site then all image variations will be regenerated the next time they are requested. If you think you might want to change an ImageSizer option in the future (I'm thinking here primarily of options such as interlace that are typically set in $config->imageSizerOptions) and would not want that change to cause existing image variations to be regenerated then best to not include that option in the module config after you first install the module. https://github.com/Toutouwai/UniqueImageVariations https://modules.processwire.com/modules/unique-image-variations/