How to with Laravel Valet?

I now understand it won’t show the .webp file, but rather its displaying the .jpg.webp file. That is “magical” yet its awkward when it comes to testing.

When I tried this out on an Apache server using MAMP, this plugin works right out of the box (I think). In devtools, within the Network tab, the jpg shows as a type of webp with Headers as Content-Type: image/webp.

My Valet setup is a bit different besides it running nginx. My projects live on an external SSD. So I don’t know how the paths should be specified within the site’s nginx config. This is the absolute path to uploads-webpc is /Volumes/Evo/Sites/mysite/wp-content/uploads-webpc.

• This reply was modified 3 years, 6 months ago by polyfade.

Regarding my nginx setup, on some images I now see https://mysite.test/wp-content/webpc-passthru.php?src=https://gateway.test/wp-content/uploads/eva-400x400.png&nocache=1

So it must be this configuration:

server {
location ~ /wp-content/(?<path>.+)\.(?<ext>jpe?g|png|gif)$ {
        if ($http_accept !~* "image/webp") {
            break;
        }
        add_header Vary Accept;
        expires 365d;
        try_files /wp-content/uploads-webpc/uploads/$path.$ext.webp $uri =404;
    }

}

In the FAQs, the try_files /wp-content/uploads-webpc/$path.$ext.webp $uri =404; is specified differently. Should it be try_files /wp-content/uploads-webpc/uploads/$path.$ext.webp $uri =404; instead? Or maybe this is specific to my setup?

• This reply was modified 3 years, 6 months ago by polyfade.

Hello @polyfade,

You can change the absolute server path using filters. For more information, see the plugin FAQ.

The configuration for Nginx is correct and has been tested in a Linux environment. The path given in the configuration cannot include the /uploads directory, because then the plugin will not support themes and plugins directories.

If you have a link to the webpc-passthru.php file in your images, it means that you are using the Pass Thru mode, not via .htaccess. Configuration for Nginx is only needed for via .htaccess mode.

If you would like him to be able to help you more widely, please read the plugin FAQ and provide me with all the necessary information, described in the first question.

Best,
Mateusz

@mateuszgbiorczyk ok, I removed that uploads from the path location.

Now it reads try_files /wp-content/uploads-webpc/$path.$ext.webp $uri =404;

if I don’t use the Pass Thru mode, I receive a server configuration error returned by the plugin.

I’m trying to configure using htaccess.

I don’t have any caching enabled via plugin or server-side. Restarted after each test.

In functions, I set to absolute path:

add_filter( 'webpc_site_root', function( $path ) {
  return '/Volumes/Evo/Sites/mysite'; 
} );

Other than that my WP setup is the typical uploads directory location – nothing special.

Absolute path to uploads: /Volumes/Evo/Sites/mysite/wp-content/uploads

Absolute path to uploads-webpc: /Volumes/Evo/Sites/mysite/wp-content/uploads-webpc

Still getting rewrites_not_working.

• This reply was modified 3 years, 6 months ago by polyfade.

Entire nginx config for the site. Much of this stuff is what Valet adds in for SSL, etc.

server {
    location ~ /wp-content/(?<path>.+)\.(?<ext>jpe?g|png|gif)$ {
        if ($http_accept !~* "image/webp") {
            break;
        }
        add_header Vary Accept;
        expires 365d;
        try_files /wp-content/uploads-webpc/$path.$ext.webp $uri =404;
    }
}

server {
    listen 127.0.0.1:80;
    #listen 127.0.0.1:80; # valet loopback
    server_name mysite.test www.mysite.test *.mysite.test;
    return 301 https://$host$request_uri;
}

server {
    listen 127.0.0.1:443 ssl http2;
    #listen 127.0.0.1:443 ssl http2; # valet loopback
    server_name mysite.test www.mysite.test *.mysite.test;
    root /;
    charset utf-8;
    client_max_body_size 512M;
    http2_push_preload on;

    location /41c270e4-5535-4daa-b23e-c269744c2f45/ {
        internal;
        alias /;
        try_files $uri $uri/;
    }

    ssl_certificate "/Users/me/.config/valet/Certificates/mysite.test.crt";
    ssl_certificate_key "/Users/me/.config/valet/Certificates/mysite.test.key";

    location / {
        rewrite ^ "/Users/me/.composer/vendor/laravel/valet/server.php" last;
    }

    location = /favicon.ico { access_log off; log_not_found off; }
    location = /robots.txt  { access_log off; log_not_found off; }

    access_log off;
    error_log "/Users/me/.config/valet/Log/nginx-error.log";

    error_page 404 "/Users/me/.composer/vendor/laravel/valet/server.php";

    location ~ [^/]\.php(/|$) {
        fastcgi_split_path_info ^(.+\.php)(/.+)$;
        fastcgi_pass "unix:/Users/me/.config/valet/valet.sock";
        fastcgi_index "/Users/me/.composer/vendor/laravel/valet/server.php";
        include fastcgi_params;
        fastcgi_param SCRIPT_FILENAME "/Users/me/.composer/vendor/laravel/valet/server.php";
        fastcgi_param PATH_INFO $fastcgi_path_info;
    }

    location ~ /\.ht {
        deny all;
    }
}

server {
    listen 127.0.0.1:60;
    #listen 127.0.0.1:60; # valet loopback
    server_name mysite.test www.mysite.test *.mysite.test;
    root /;
    charset utf-8;
    client_max_body_size 128M;

    add_header X-Robots-Tag 'noindex, nofollow, nosnippet, noarchive';

    location /41c270e4-5535-4daa-b23e-c269744c2f45/ {
        internal;
        alias /;
        try_files $uri $uri/;
    }

    location / {
        rewrite ^ "/Users/me/.composer/vendor/laravel/valet/server.php" last;
    }

    location = /favicon.ico { access_log off; log_not_found off; }
    location = /robots.txt  { access_log off; log_not_found off; }

    access_log off;
    error_log "/Users/me/.config/valet/Log/nginx-error.log";

    error_page 404 "/Users/me/.composer/vendor/laravel/valet/server.php";

    location ~ [^/]\.php(/|$) {
        fastcgi_split_path_info ^(.+\.php)(/.+)$;
        fastcgi_pass "unix:/Users/me/.config/valet/valet.sock";
        fastcgi_index "/Users/me/.composer/vendor/laravel/valet/server.php";
        include fastcgi_params;
        fastcgi_param SCRIPT_FILENAME "/Users/me/.composer/vendor/laravel/valet/server.php";
        fastcgi_param PATH_INFO $fastcgi_path_info;
    }

    location ~ /\.ht {
        deny all;
    }
}

@polyfade Forgive me, but I don’t know your configuration and I can’t tell you any more.

If you manage to fix the server configuration, the error in the plugin settings will disappear.

@mateuszgbiorczyk No worries, thanks.

• This reply was modified 3 years, 6 months ago by polyfade.

@polyfade Nginx does not support .htaccess files, therefore additional configuration is needed.

Exactly, thanks. I was getting confused by this: https://htaccess-for-nginx.com/

• This reply was modified 3 years, 6 months ago by polyfade.