Tom.

I'm seeing this trend more often. I feel like it's bridging the gap between prototyping and production. When prototyping, using a lot of divs and a lot of classes doesn't really matter. It's about getting the job done quick. But now it seems this way of thinking is making it's way into websites. Things like TailwindCSS (https://tailwindcss.com) is making strides because you can easily tweak margins, paddings, without having to create loads of classes to manage. It falls down however when you have to make global tweaks or responsive tweaks, but you have to go though every element and replace the classes. This means it's better to use Vue as you can create components, but then you run into things like trying to do server side rendering and SEO issues. Sometimes the solution is worse than the problem. Bigger companies have the man power to manage something like this. Don't get me wrong I love TailwindCSS, but for me it's fallen down later in a project where I've found it's just taken me too much time to tweak and keep track of everything. I personally still use UIKit, as it comes with a lot of tools at my disposal (Parallax, Sliders, Models, Tooltips) something I would otherwise have to use an amalgamation of different modules. People at Statamic (https://statamic.com) are doing a great job at keeping on top of emerging technologies and I do hope that ProcessWire eventually finds the time to update it's admin interface, things like jQuery UI should be dropped now as well as the use of jQuery in my opinion. AirB&B was a company I always looked up to, they were doing great things like setting Javascript Guidelines that companies could use so they didn't have to create their own, but even their website is now looking like Twitter (https://www.airbnb.co.uk). It seems to be this the "modern web", but it just looks scary to me.

This will not work as @horst correctly pointed out, it will not work with ProCache. I'm looking at the .htaccess method however, it doesn't seem to work if it is running in a subdirectory # Output WEBP image URLs from ProcessWire, but redirect them to the # JPEG or PNG when the browser does not support WEBP. RewriteCond %{HTTP_ACCEPT} !image/webp [OR] RewriteCond %{REQUEST_FILENAME} !-f RewriteCond %{DOCUMENT_ROOT}/$1$2$3/$4.jpg -f RewriteRule ^(.*?)(site/assets/files/)([0-9]+)/(.*)\.webp(.*)$ /$1$2$3/$4.jpg [R=307,L] RewriteCond %{HTTP_ACCEPT} !image/webp [OR] RewriteCond %{REQUEST_FILENAME} !-f RewriteCond %{DOCUMENT_ROOT}/$1$2$3/$4.png -f RewriteRule ^(.*?)(site/assets/files/)([0-9]+)/(.*)\.webp(.*)$ /$1$2$3/$4.png [R=307,L] .htaccess rules are definitely not my strong point. Though I've noticed %{REQUEST_URI} mentioned. What is the correct way of getting it to work in a subdirectory?

Hey @ryan, Just wondering if you saw my update to the WebP functionality? https://github.com/processwire/processwire/pull/145

Another good WebP strategy would be to use: if( strpos( $_SERVER['HTTP_ACCEPT'], 'image/webp' ) !== false ) { // webp is supported! } This would be good paired with webp->url, so it will fallback to the default image if it isn't supported. EDIT: Pull Request - https://github.com/processwire/processwire/pull/145

Confusing one, $page->index() works, but in a repeater item, looping through them and getting $item->index() returns fatal error too few arguments passed. It's using WireArray index rather than PageArray index. It's the first time I've come across this, and it's the first time I've seen an inconsistency in the API. You would imagine that both return an index value if empty. But I always thought a repeater returned a PageArray anyway? It might be worth I'm using the render method, so I'm unsure whether that makes it come through as a WireArray? either way, anyone know how to get the item index for a WireArray?

I got it working using a different file - strange one - there must have been something wrong with the original file, but what that is I don't know as it works otherwise. I've attached the file. SampleVideo_1280x720_1mb.mp4

@wbmnfktr I added another field with the same settings to see if it was mod security, but the same issue happened. Spoke to the hosting company and they said no firewall rules are being hit. The files have extensions and it's not working for the client either. I'm using Chrome ?

I'm having an issue where I can't upload an MP4 or WebM on v. 3.0.132 in a repeater. It's only uploading 10kb then giving the error "/tw/login/page/edit/…utfieldFileAjax=1:1 Failed to load resource: net::ERR_CONNECTION_ABORTED" I thought it might be hitting the max upload, but it's not, I tried a 1MB MP4 it still failed at 10kb. Anyone come across this before? EDIT: Doesn't need to be in a repeater, just isn't working

@ryan I can't seem to get this implementation working correctly? webpUrl returns the webp image but webp->url returns the jpg.

Hi @ryan do you have any plans on implementing @horst webP support? I'm usually updating every Friday, but this is now preventing me.

Thanks Robin, it seems to be the Gamma correction causing the issue here. Thank you ?

Hi @horst Following your guides complete and having set quality to 100 every step of the way. Imagick is set to no sharpening and 100 output. I'm getting really bad banding in dark areas when an image is being resized. I can't imagine anything more I can do my side for this? Everything is at 100 quality so it shouldn't degrade. This is the original image: https://www.dropbox.com/s/0qh0fvg8ldfqxn5/060618-peter_paul00667-luke-hayes-edit.jpg?dl=0 Here is the image resized to 3840 x 2160 (for retina 4k displays): https://www.dropbox.com/s/gjtcl9vxtzmekp9/060618-peter_paul00667-luke-hayes-edit.3840x2160.jpg?dl=0 And here are where things get bad, resized to 1920 x 1080: https://www.dropbox.com/s/ihgwmp20gn2yvze/060618-peter_paul00667-luke-hayes-edit.1920x1080.jpg?dl=0 You can really start to see banding in the darker areas. Do you have any suggestions for this? I've done the correct photoshop formatting as said in your previous post. EDIT: Example 2 Original image: https://www.dropbox.com/s/rokphzpd1s225as/No_Bounds_Image_Large.jpg?dl=0 ProcessWire resize at 100 quality: https://www.dropbox.com/s/8phrl60fzjfmvnq/no_bounds_image_large.1920x1080.jpg?dl=0

@horst Thank you so much, I'm playing with this now - I'll let you know if I come across anything. Appreciate the hard work. Edit: Looking good! Edit: One thing I've noticed is let's say you set the quality of the jpeg to 50 on resize, WebP will use the resized jpeg at 50 quality. Does this mean that using also webpQuality 50 would compress it twice? @horst

Thank you very much for the explanation, this is really useful information. I provided the images provided to me by the designers and forward their complains on image quality. However, this has always been a difficult argument for me as I only look at it technically. I can now pass this information on to them and make sure they are outputting images correctly. Thanks again, I've worked on a small webP converter in the meantime, until we see something implemented into the core.

@jens.martsch This is the example: https://www.dropbox.com/sh/ayqubd4b5o78i41/AAAm8eNmgBizOqfcG2YdT0Qta?dl=0 This is using quality 100, maxSize so no upscaling and sharpening none.

Any news on WebP? There is a lot of convocation in the studio currently on image quality. The general thing is the built in resizing of images (Imagick) leaves images soft, however adding any sort of sharpening and it over sharpens around text leaving it with halos. Some people in the studio have been talking about changing CMS due to how ProcessWire manipulates images leaving them soft or over sharpened losing detail. It's a big discussion at the moment and generally we have found Statamic & CraftCMS much better at resizing images and keeping quality (Statamic uses Glide - https://glide.thephpleague.com/) But WebP will be massively important also.

@jens.martsch Thank you, It seems to be not only the colour but even at 100% you get a lot of artefacts on the image. Another example: Original above Output through the API at 100%. EDIT: Just realised that the forum is compressing images so they look the exact same ??? I'll try get them up on Dropbox

I'm getting really bad image results when using API resizing. I'm using Imagick, at no softening and 100% quality. Above is the original This is the resized. The colours seem off and the image appears to be over sharpened causing a halo effect. In which sharpening is set to none? Anyone else experienced this?

It would be impossible for us to give a time scale on your speed of learning. For the entrance fee if you use https://www.foxy.io/ - you could have something like this built in two weeks (judging that your learning as you go along). I would also encourage you to learn AJAX if you don't already know it as it would help improve the user experience for this.

We have used ProcessWire for exactly this many times. It's VERY straight forward using the API. Now, if you don't feel confident in PHP then I would still suggest using WordPress and a plugin, but if you are willing to learn, it will be absolutely worth it as you can built it exactly how you want it and you can use the skills you have learnt for building other things in future. The ProcessWire API is very versatile and consistent, this means learning a way to do one thing such as using hooks gives you worlds of knowledge to do other things. It doesn't take long to pick up the entire API as it's very straight forward. If you need any help, let me know.

https://github.com/TomS-/processwire-fieldtype-assisted-url This will work like you want, it will let you select a page or use an external link.

As far as I know there are these: https://yootheme.com/themes They are built for WordPress but I'm sure you could extract the CSS.

Ask your hosting provider to see if a mod_security rule is being hit.

Ah strange usually if you have double quotes using { } is fine to escape PHP. Unsure to why this isn't working - maybe has_parent only works on an Page object not ID. Does the following work for you? "template=product, limit=10, (categories=$page), (categories.has_parent=$page), sort=categories.sort, sort=$sort_results"

Hi @JoshoB, Trying my hardest to understand this - from what I can tell, `$page` is category.php template? I believe you need: $selector = "template=product, limit=10, categories=[has_parent|id={$page->id}], sort=$sort_results";