Search the Community

And here's the answer to migrating large sites! Thanks Ryan. https://processwire.com/blog/posts/webp-images-on-an-existing-site/#implementing-the-webp-strategy

If you enable webp, where the easiest way on a legacy site to get a webp version of every image in the CMS?

Apologies, everything I need is here: https://processwire.com/blog/posts/webp-images-and-more/#webp-image-strategies-in-processwire

@nurkka, when I test here DelayedImageVariations is sort of working with webp(), although I'm surprised it works at all because I thought it would be a case like the one mentioned in the readme: I thought the webp() method would need an actual resized variation to be available at the time it is called. But I'm testing like this... foreach($page->images as $image) { $image_url = $image->size(250,250)->webp()->url; bd($image_url, "image_url"); echo "<img src='$image_url' alt=''>"; } ...and what I experience is that on the first page load the webp()->url results in a JPG file... ...and on subsequent page loads it results in a WebP file. I don't get any 404s or broken images, and the only effect is slightly larger file sizes on the first page load, which isn't that big of a deal. But if you experience something different then I don't have a solution within DelayedImageVariations, sorry. My suggestion then would be to pursue a different strategy to pre-generate your image variations rather than use DelayedImageVariations. You could generate the variations on page save. See this post for how you could do it without slowing down page saves in the admin:

Thanks @Robin S for this great module – and all your other great modules, too! I am using really a lot of them, and the number is still growing 🙂 DelayedImageVariations works perfectly with JPEG images. But unfortunately, it does not work in my case, because I am using WEBP images, like so: $image_url = $image_object->size(1200,400)->webp()->url; So I get real 404 pages for the generated WEBP-URLs, which result in empty image frames on my website. Is this the expected behaviour, i.e. is WEBP not supported by DelayedImageVariations? Or am I doing something wrong? Additional Info: I am currently not using the .htaccess WEBP to JPEG fallback stuff, which is described here https://processwire.com/blog/posts/webp-images-and-more/#strategy-2-delivering-webp-and-automatically-falling-back-to-jpg-png , because I am using <picture>-tags with srcset everywhere. And also the webpAdd option in $config->imageSizerOptions is set to `false`, which I believe is the default. My site also doesn't use any caching at all. [ Also I just found out, that the "Render Queued Variations" Feature somehow generates the missing WEBP images, too – even if they are not displayed on the "Render Queued Variations" output page, where only the JPEGs are displayed. Although it once takes a long time to reload the frontend page, after using "Render Queued Variations". So it could also be that the WEBPs are generated only on the frontend. But they won't be generated without hitting "Render Queued Variations" first. ]

Thanks, it is not the problem, it would be cropped from the centre then. Interestingly, if the focus point is not set the images are cropped from North, not centre. No matter what I tried, it doesn't work with percentages in the size options. I ended up setting the focus position for the image and it achieved the results. if (!$image->hasFocus) $image->focus(35,50); $resized = $image->size($w,$h)->webp->url;

$image = $gallery_page->images->first()->size(540, 404, [ "cropping" => ['50%', '35%'], "quality" => 80, "focus" => false ])->webp->url; Maybe it is auto detecting a focus presset. Try disabling it.

The site is displaying a list of full body portraits that I'd like to crop with a focus on the face/shoulders. No focus has been set on the images and it's hundreds of them so I want a sensible default. This is the code below but it still crops from the top of the image, or the actual center (50%,50%). Is it a bug or I'm doing something wrong? $image = $gallery_page->images->first()->size(540,404,array("cropping" => array('50%','35%'), "quality" => 80))->webp->url; It's based on the latest API reference I've found: https://processwire.com/api/ref/pageimage/size/ It's very late but is it something I can't spot here? Should it work?

Here's the full vhost file for one of my PW sites that uses ProCache. (Note that I've changed the real domain to example.com, and the ProCache string to "ProCache-xxxxxxxxxxxxx".) server { listen 80; listen [::]:80; listen 443 ssl http2; listen [::]:443 ssl http2; {{ssl_certificate_key}} {{ssl_certificate}} server_name example.com; return 301 https://www.example.com$request_uri; } server { listen 8080; listen [::]:8080; server_name www.example.com www1.example.com; {{root}} index index.php index.html; } server { listen 80; listen [::]:80; listen 443 ssl http2; listen [::]:443 ssl http2; {{ssl_certificate_key}} {{ssl_certificate}} server_name www.example.com www1.example.com; {{root}} index index.php index.html; {{nginx_access_log}} {{nginx_error_log}} if ($scheme != "https") { rewrite ^ https://$host$uri permanent; } location ~ /.well-known { auth_basic off; allow all; } {{settings}} location ~* ^.+\.(css|js|jpg|jpeg|gif|png|ico|gz|svg|svgz|ttf|otf|woff|woff2|eot|mp4|ogg|ogv|webm|webp|zip|swf|map)$ { add_header Access-Control-Allow-Origin "*"; expires 48h; access_log off; try_files $uri $uri/ /index.php?it=$uri&$args; } # Block access to ProcessWire system files location ~ \.(inc|info|module|sh|sql)$ { deny all; } # Block access to protected assets directories location ~ ^/(site|site-[^/]+)/assets/(cache|logs|backups|sessions|config|install|tmp)($|/.*$) { deny all; } # Block acceess to the /site/install/ directory location ~ ^/(site|site-[^/]+)/install($|/.*$) { deny all; } # Block dirs in /site/assets/ dirs that start with a hyphen location ~ ^/(site|site-[^/]+)/assets.*/-.+/.* { deny all; } # Block access to /wire/config.php, /site/config.php, /site/config-dev.php, and /wire/index.config.php location ~ ^/(wire|site|site-[^/]+)/(config|index\.config|config-dev)\.php$ { deny all; } # Block access to any PHP-based files in /templates-admin/ location ~ ^/(wire|site|site-[^/]+)/templates-admin($|/|/.*\.(php|html?|tpl|inc))$ { deny all; } # Block access to any PHP or markup files in /site/templates/ location ~ ^/(site|site-[^/]+)/templates($|/|/.*\.(php|html?|tpl|inc))$ { deny all; } # Block access to any PHP files in /site/assets/ location ~ ^/(site|site-[^/]+)/assets($|/|/.*\.php)$ { deny all; } # Block access to any PHP files in core or core module directories location ~ ^/wire/(core|modules)/.*\.(php|inc|tpl|module)$ { deny all; } # Block access to any PHP files in /site/modules/ location ~ ^/(site|site-[^/]+)/modules/.*\.(php|inc|tpl|module)$ { deny all; } # Block access to any software identifying txt files location ~ ^/(COPYRIGHT|INSTALL|README|htaccess)\.(txt|md)$ { deny all; } # ProCache Rules set $cache_uri $request_uri; if ($request_method = POST) { set $cache_uri 'nocache'; } if ($request_method = HX_REQUEST) { set $cache_uri 'nocache'; } if ($http_cookie ~* "wires_challenge") { set $cache_uri 'nocache'; } if ($http_cookie ~* "persist") { set $cache_uri 'nocache'; } # ----------------------------------------------------------------------------------------------- # This location processes all other requests. If the request is for a file or directory that # physically exists on the server, then load the file. Else give control to ProcessWire. # ----------------------------------------------------------------------------------------------- location / { expires -1; try_files /site/assets/ProCache-xxxxxxxxxxxxx/$cache_uri/index.html $uri $uri/ /index.php?it=$uri&$args; } location ~ \.php$ { include fastcgi_params; fastcgi_intercept_errors on; fastcgi_index index.php; fastcgi_param SCRIPT_FILENAME $document_root$fastcgi_script_name; try_files $uri =404; fastcgi_read_timeout 3600; fastcgi_send_timeout 3600; fastcgi_param HTTPS "on"; fastcgi_param SERVER_PORT 443; fastcgi_pass 127.0.0.1:{{php_fpm_port}}; fastcgi_param PHP_VALUE "{{php_settings}}"; } if (-f $request_filename) { break; } } Hope this helps.

Thanks @ryan for taking the time and getting back to everybody's suggestions. It's great to see all the ideas and inputs in this thread. There's not much to like or dislike about how composer installs packages, it just happens to be how PHP projects pull in third-party packages these days. This is as much about making newcomers feel at home as it is about making the life of long-time devs easier. Right, WEBP output has been supported for a while. Upload is still limited to JPG/PNG/GIF/SVG, somewhat arbitrarily. JPEG is a lossy format, so why not allow WEBP source images as well — most images on the web today are WEBP, and browsers and operating systems have broad support. Extending the availabe output formats could be as simple as $image->format('webp')->width(200)->url. Semantic versioning is about unintended breaking changes as well — introducing new features brings with it the possibility of introducing new bugs, so even the difference between minor version (features) and patch version (fixes) is meaningful when deciding whether to upgrade a live site or not. That part (fixes vs. features) is probably known when bumping the version. Interesting, I'll need to check that one out, then. Sounds promising!

Elementor is not part of Wordpress, but a plugin developed by someone else to run in WordPress. Maybe this is an opportunity for someone in ProcessWire. And there are already RockPageBuilder and PageGRID in ProcessWire to consider as well. The dominance of WordPress has always been the case, and it will likely continue to be the case. ProcessWire is unique and has always been something completely different from WordPress. The CMS projects that are trying to mirror WordPress never seem to last long because, if you want something like WordPress, then why not just use WordPress? Though I don't know anyone that really knows both well who prefers to develop in WordPress. Instead, WordPress dominance is largely a matter of name familiarity with clients, which is completely understandable. But there are also several things it genuinely does well, and I always believe in using the best tool for the job. If the types of projects you work on are a good match for WordPress, then great, but I hope you also have projects that are a good match for ProcessWire as well. ProcessWire fully supports it. Many (most?) of us is have used exclusively on new installations for years. I don't know what those are. it sounds like another opportunity for modules. But more info needed. Good idea. This is something I think I can do. Can you describe further? In the majority of cases, older modules will still work fine. I'm not aware of anything in the modules directory that does not work, but if any become apparent I will remove them. Maybe it would be a good community effort to identify modules that could be removed from the directory. I think this might turn off as many people as it turns on. I know I wouldn't like it. But if it can be automated as an installation option then sure, why not. ProcessWire already supports WEBP and has for awhile. I was working on core AVIF support, but Robin S. released an AVIF module so I put mine on the back burner. And this may be the sort of thing that is better as a module, or maybe it'll be better in the core at some point, I'm not sure. Right now we don't build core versions in a way that breaks things from one to another. At least not in a way that is known at the time of assigning a version number. When that changes, I think we'll want to adopt semantic versioning, and maybe that's a part of 4.x. Maybe it would benefit 3rd party modules more in the shorter term, so it's worth looking at there first. Sounds interesting but I need more details. If there's anyone that is an nginx expert that wants to step up to have this responsibility I'd welcome it. I've mentioned this before too, but nobody has stepped up. I'm not an nginx expert so don't feel qualified to support it on my own. For real? This is the first I've heard of any chaos. Good to hear. We do have the PageAutosave module which does Live Preview even better than ProDrafts. This module is available in ProDevTools or ProDrafts boards, but maybe it can have a wider release. This is exactly the sort of thing that PW is great at supporting already. But I have been exploring building an everything-SEO module here, as it's something I'd like to use and support, but just not as part of the core. The hard-core SEO experts will still want to do their own SEO stuff like they do now, but for those that want something they can turn-key and have it all ready, a module is ideal. I'll very likely be building one within the next year hopefully.

I tend to agree with some of the previous posts: ProcessWire is doing a lot of things right, but it feels like there's some catching up to do in terms of open issues and general level of polish. Some of these are making ProcessWire look a bit long in the tooth compared to other CMSs — catching up with the ecosystem here would be a great signal that it's a mature and stable project keeping up with the times. Full composer installation: all core files living inside /vendor, any user files and modules outside of it Automated test suite: at least for the critical parts like the selector engine and php version compatibility Extend image format support: WEBP, AVIF, JPEG2000, etc as input and output formats, as well extensibility for future formats without major architectural changes Semantic versioning: there's currently no way of knowing if an upgrade brings bug fixes or new features (and possibly new bugs), they're all patch releases lately Environment variables: read config from .env files to avoid editing/overwriting config files for each environment nginx support: Apache is showing its age somewhat, and a lot of deployment solutions target nginx by default

Just sharing my personal thoughts and what would be incredibly useful for a lot of my projects...: Very basic page builder functionality / WYSIWYG Especially something to build basic layouts with sections, rows, columns. I know there are third party modules and it can be achieved with repeater matrix but it get's unintuitiv very fast. That's actually the main reason to not use processwire for some of my projects.? Additional text fields for images fields alt text, title and caption is something that is actually constantly needed and i personally think that it could be the default (instead of setting up custom fields) Native .avif format support The .avif format would be a great addition and has a better compression compared to .webp full nginx support Have already hosted a projects without any issues but as far as i know it is not fully supported?! field type "date multiple" I guess that's a pretty specific one, but would be really helpful to me so i share it anyways.

Thanks everyone for the feedback. You know how it is with your own websites... they get neglected in favor of everything that can make you money and thus, image optimization wasn't the most important thing to finish because we are only targeting the Swiss market anyway. In Switzerland, load times much better. Nevertheless, I did now finish the optimizations and enabled webp everywhere and so most images are <100k now. The videos remain untouched but will be done at some point.

Ok, so I decided to scratch my own itch on this one... I need to handle WebP's which include transparent regions so I've created a modified version of the @Robin S module (https://processwire.com/modules/webp-to-jpg/) but which allows you to choose between PNG or JPEG as the target format. https://gitlab.com/applab/pw-uploadwebp

Has thinking around this issue changed at all? Support for .webp as an upload format for images would be a game-changer for my current project (and has been requested by several previous clients).

Wohoo! Awesome. // my ready.php if ($page->template != 'admin') { $wire->addHookAfter('Pageimage::url', function ($event) { static $n = 0; // slightly different here if (++$n === 1) { $event->return = $event->object->webp()->url(); } $n--; }); }

Well what can i say... it's resolved, but if anybody comes across the same issue: apart from using this in config.php $config->imageSizerOptions('webpAdd', true); $config->contentTypes('webp', 'image/webp'); i'm also using the function provided here https://processwire.com/blog/posts/webp-images-and-more/ within ready.php if($page->template != 'admin') { $wire->addHookAfter('Pageimage::url', function($event) { static $n = 0; if(++$n === 1) $event->return = $event->object->webp()->url(); $n--; }); } i dont know how, but this function ended up broken (so not like the correct one above) in my code and therefore did not exclude the processwire backoffice part and conflicted with the editors. everything back to normal now. thanks for the input!

thank you very much, this pointed me in the right direction, i would have simply not though about logs for this issue ? I do have this as an issue in "errors" log, will further invesigate, but maybe there is some additional insight unlink: Given filename is not a file or link: /site/assets/cache/WireTempDir/.PFM0.03872100T1715620700RMFKVerOqVFC/0/share-it.1200x0.png-tmp.png my current best guess is something with webp functionality

Yes, it creates files. But it creates from source files and want it to create a square WEBP file based on an existing square JPG file.

Hi @maximus, welcome to the forum. Are any webp image variations actually being generated by ProcessWire? You can check either in the admin interface on the page with the image field, or by looking in the site/assets/file/<page-id>/ folder for .webp variations of any image you saved to the page with id <page-id>

Hello, i have question how to make square images. I am developing an alcohol online storefront and in it I need to implement square images of bottles - so that they visually all look the same. Right now I am using the following code to position and create the images. <div class="fotorama p-4 bg-white w-full lg:w-2/5 lg:pr-4 hidden lg:block pt-16" data-nav="thumbs"> <?php if(count($page->get('images'))): foreach($page->get('images') as $image): $thumbSize = 500; $largeSize = 1000; // If image already 500x500 or less, don't do any scaling if($image->width <= 500 && $image->height <= 500) { continue; } // If image is not square else if($image->width != $image->height) { if($image->height > $image->width) { $thumb = $image->size(0, $thumbSize); $large = $image->size(0, $largeSize); } else { $ratio = $image->width / $image->height; $newWidthThumb = $thumbSize * $ratio; $newWidthLarge = $largeSize * $ratio; $thumb = $image->size($newWidthThumb, $thumbSize); $large = $image->size($newWidthLarge, $largeSize); $differenceThumb = $thumb->width - $thumbSize; $differenceLarge = $large->width - $largeSize; $thumb = $thumb->crop($differenceThumb / 2, 0, $thumbSize, $thumbSize); $large = $large->crop($differenceLarge / 2, 0, $largeSize, $largeSize); } if($thumb->width < 500 || $thumb->height < 500 || $large->width < 1000 || $large->height < 1000) { $imagickSmall = new Imagick($thumb->filename); $imagickLarge = new Imagick($large->filename); $canvasSmall = new Imagick(); $canvasLarge = new Imagick(); $canvasSmall->newImage(500, 500, new ImagickPixel('white')); $canvasLarge->newImage(1000, 1000, new ImagickPixel('white')); $canvasSmall->compositeimage($imagickSmall, Imagick::COMPOSITE_OVER, ($canvasSmall->getImageWidth() - $thumb->width) / 2, ($canvasSmall->getImageHeight() - $thumb->height) / 2); $canvasLarge->compositeimage($imagickLarge, Imagick::COMPOSITE_OVER, ($canvasLarge->getImageWidth() - $large->width) / 2, ($canvasLarge->getImageHeight() - $large->height) / 2); $canvasSmall->writeImage($thumb->filename); $canvasLarge->writeImage($large->filename); } } // The image is square else { $thumb = $image->size($thumbSize, $thumbSize); $large = $image->size($largeSize, $largeSize); } ?> <a href="<?=$large->url?>"><img src="<?=$thumb->url?>" class="pt-2" alt="<?=$page->title?>" width="64" height="64"></a> <?php endforeach; ?> <?php else: ?> <img src="<?=urls()->templates?>images/notfound.png" width="64" height="64" alt=""> <?php endif; ?> </div> The code works great and generates square images. BUT! When I try to add webp support <a href="<?=$large->webp->url?>"><img src="<?=$thumb->webp->url?>" class="pt-2" alt="<?=$page->title?>" width="64" height="64"></a> <?php endforeach; ?> code nothing works. There is a crop image function, but no function to position the image centered with the background added. How to implement this as simple as possible, using core functions and adding webp support ?

OK. More than few I see now :D All In One Minify, Email Obfuscation, Database Backups, Send Mass Email (inactive), Video embed for YouTube, Convert JPG/PNG images to WEBP, and 3 custom (super uber decently coded I guarantee) ones for backend. All modules load on every single template except for Email Obfuscation, which loads only on the contact page.

Thank you @bernhard I appreciate it especially coming from you. Rockfrontend/Latte have been indispensable tools! So the @import in the main custom.less was brought-in from a previous PW codebase I used … I was trying to load fonts locally instead of from external Google Fonts references and it must be there because I remebmer some discussion of that here in the PW forums, but honestly I can't specifically recall why I decided on that. My thinking was that @import was an outdated way of achieving this? CSS variables are used to control the dark-mode/light-mode functionality. I'm interested in what you have in mind for any CSS variables in future Rockfrontend releases. The webp function in ready.php is coming from a ProcessWire documentation post @ryan made about serving webp … specifically under Strategy 2. I'm still unclear exactly what it's doing except that this snippet seemed to be recommended. Good catch pointing out the inaccuracies in README, I will fix those in the next commit. And thank you again for kind feedback on the site itself!

Hey @protro congrats that's a great site!! Really beautiful design and absolutely awesome to also see the code and it looks great as well ? When I read the readme I was confused about how you structured the site (with sections folder inside the layouts folder), but that readme is not showing what you actually did ? --- In custom.less you have this Could you please elaborate on that? --- Also you are using css variables, which I'd also like to see in UIkit and I was thinking about creating a less file with hooks and overrides that provides that in a reusable way. What do you think? --- In ready.php you have this: // webp image support if($page->template != 'admin') { $wire->addHookAfter('Pageimage::url', function($event) { static $n = 0; if(++$n === 1) $event->return = $event->object->webp()->url(); $n--; }); } I'm not sure I understand what this is doing? First I thought it's a clever feature to always request webp on the frontend! But what is the $n for? Isn't it always resetting itself to 0 and on the next call it will again be incremented and if(1 === 1) will again return the webp? --- And I have a special request via PM ?