nebraskauser

I think I just solved my own problem. When I went back to the plugin and went to the Advanced Settings tab and then to the bottom, right above the Start Bulk Optimization button it said 73% of my files were converted. Below the Start Bulk Optimization button it says “This process can take anywhere from a few minutes to several hours. During this process please do not close your browser window.” That’s probably what I did. I just clicked the Start Bulk Optimization button again and waited roughly 30 to 40 minutes until it said 100% converted to WEBP with a complete green circle around it. Now the pictures that didn’t get converted the first time are there. If I have any more problems, I’ll let you know, but I think problem is solved.

I think I just solved my own problem. When I went back to the plugin and went to the Advanced Settings tab and then to the bottom, right above the Start Bulk Optimization button it said 73% of my files were converted. Below the Start Bulk Optimization button it says “This process can take anywhere from a few minutes to several hours. During this process please do not close your browser window.” That’s probably what I did. I just clicked the Start Bulk Optimization button again and waited roughly 30 to 40 minutes until it said 100% converted to WEBP with a complete green circle around it. Now the pictures that didn’t get converted the first time are there. If I have any more problems, I’ll let you know, but I think problem is solved.

I’m still waiting for an answer.

Thanks! After copying the files from uploads-webpc to images and then doing a “git status”, it looked like only one of 19 files changed. When I went back to uploads-webpc, the files were gone. I’m positive I did a copy/paste, not a cut/paste. They are in the images directory, but the Type column says they’re still jpeg and jpg files, not webp files.

The files are still in the original uploads directory. If I rerun the plugin, will it put new copies in uploads-webpc? How do I get them to show as changed files, so a “git push” will move them to my github repository and to the staging website?

The images directory:
C:\Users\Owner\Local Sites\clockdoc-richard\app\public\wp-content\themes\clock-doc-custom-theme\images

I should add I made absolutely no changes to this CSS grid. The only change was the Convert to Media plugin. Also in the images directory I don’t see images with the webp nor avif suffixes. They all still say jpg or jpeg.

Good news. Lighthouse performance rating is back in the 80s, but I’m unsure how I did it. I’ve been working on other things. However, now I have a new problem. On my CSS grid on my iphone 13 I should see 2 images per row. I’m only seeing one image per row. When I make my laptop simulate an iphone 12 pro, I see two images. If you go to staging2.clockdocs.com and click Products and Hodgepodge, this is the CSS grid I’m talking about. On a large laptop it looks fine even when the large laptop simulates a smaller device. But on the actual smaller device I see just one image per row, and it looks bad.

It worked! Updating site.conf didn’t cause problems. But the plugin didn’t improve the performance of my website that much. Yes, I remembered to click Start Bulk Optimization. Then I waited for all the files to convert. Afterward, I went to the website’s slideshow page. I opened dev tools, clicked Lighthouse tab and the button Analyze Page Load. Performance improved from 53 to 57. That’s still disappointing. This website’s performance was in the 80’s and as high as an 88. That was before I added the slideshow with a dozen images and the Convert to Media plugin.

I don’t have a directory called /etc/nginx/sites-available. What I do have are 3 directories called app, conf and logs. Under the conf directory is a sub-directory called nginx. In the nginx subdirectory are two files nginx.conf and site.conf plus a directory called includes. The includes directory contains 5 files:
gzip.conf
mime-types.conf
restrictions.conf
wordpress-multi.conf
wordpress-single.conf.

Hey! I think I just found it! I looked at the code in site.conf. It has a block called server {} and there are several blocks called location, but I won’t update site.conf unless you say it’s ok. Please tell me exactly where to put the “converter to media” code. Here’s the code in site.conf:

upstream php {
  {{#each fastcgi_servers}}
  server {{this}};
  {{/each}}
}

server {
	listen {{port}};
    root   "{{root}}";

    index index.php index.html index.htm;

    #
    # Generic restrictions for things like PHP files in uploads
    #
	include includes/restrictions.conf;

    #
	# Gzip rules
	#
	include includes/gzip.conf;

    #
	# WordPress Rules
	#
    {{#unless site.multiSite}}
    include includes/wordpress-single.conf;
    {{else}}
    include includes/wordpress-multi.conf;
    {{/unless}}

	#
	# Forward 404's to WordPress
	#
	error_page 404 = @wperror;
	location @wperror {
		rewrite ^/(.*)$ /index.php?q=$1 last;
	}

    #
	# Static file rules
	#
	location ~* \.(?:css|js)$ {
        access_log        off;
        log_not_found     off;
        add_header        Cache-Control "no-cache, public, must-revalidate, proxy-revalidate";
    }

    location ~* \.(?:jpg|jpeg|gif|png|ico|xml)$ {
        access_log        off;
        log_not_found     off;
        expires           5m;
        add_header        Cache-Control "public";
    }

    location ~* \.(?:eot|woff|woff2|ttf|svg|otf) {
        access_log        off;
        log_not_found     off;

        expires           5m;
        add_header        Cache-Control "public";

        # allow CORS requests
        add_header        Access-Control-Allow-Origin *;
    }

    #
    # PHP-FPM
    #
	location ~ \.php$ {
		try_files $uri =404;

		fastcgi_split_path_info ^(.+\.php)(/.+)$;

		fastcgi_param   QUERY_STRING            $query_string;
		fastcgi_param   REQUEST_METHOD          $request_method;
		fastcgi_param   CONTENT_TYPE            $content_type;
		fastcgi_param   CONTENT_LENGTH          $content_length;

		fastcgi_param   SCRIPT_FILENAME         $document_root$fastcgi_script_name;
		fastcgi_param   SCRIPT_NAME             $fastcgi_script_name;
		fastcgi_param   PATH_INFO               $fastcgi_path_info;
		fastcgi_param   PATH_TRANSLATED         $document_root$fastcgi_path_info;
		fastcgi_param   REQUEST_URI             $request_uri;
		fastcgi_param   DOCUMENT_URI            $document_uri;
		fastcgi_param   DOCUMENT_ROOT           $document_root;
		fastcgi_param   SERVER_PROTOCOL         $server_protocol;

		fastcgi_param   GATEWAY_INTERFACE       CGI/1.1;
		fastcgi_param   SERVER_SOFTWARE         nginx/$nginx_version;

		fastcgi_param   REMOTE_ADDR             $remote_addr;
		fastcgi_param   REMOTE_PORT             $remote_port;
		fastcgi_param   SERVER_ADDR             $server_addr;
		fastcgi_param   SERVER_PORT             $server_port;
		fastcgi_param   SERVER_NAME             $host;

		fastcgi_param   HTTPS                   $fastcgi_https;

		fastcgi_param   REDIRECT_STATUS         200;

		fastcgi_index index.php;
		fastcgi_param SCRIPT_FILENAME $document_root$fastcgi_script_name;

		fastcgi_pass php;
		fastcgi_buffer_size      64k;
		fastcgi_buffers          32 32k;
		fastcgi_read_timeout	 1200s;

		proxy_buffer_size        64k;
		proxy_buffers            32 32k;
		proxy_busy_buffers_size  256k;
	}
}

Mateusz – I installed the plugin Converter for Media. However, I got “server configuration error” followed by these instructions:

If you are using Nginx server, please contact your hosting support (or server administrator) and send them the following message:
"I am trying to configure Converter for Media plugin with WebP and AVIF support. In order to do this, I have been asked to contact you for help adding required rules to Nginx configuration of my website - https://clockdoc-richard.local. More information in the plugin FAQ: https://www.ads-software.com/plugins/webp-converter-for-media/faq/ (in the question: Configuration for Nginx)"

I did go to the “Configuration for nginx” page. I had no problem adding these 2 lines of code to my mime.types:
image/webp webp;
image/avif avif;
However, I can’t figure out where to put the following code:

# BEGIN Converter for Media
set $ext_avif ".avif";
if ($http_accept !~* "image/avif") {
    set $ext_avif "";
}

set $ext_webp ".webp";
if ($http_accept !~* "image/webp") {
    set $ext_webp "";
}

location ~ /wp-content/(?<path>.+)\.(?<ext>jpe?g|png|gif|webp)$ {
    add_header Vary Accept;
    expires 365d;
    try_files
        /wp-content/uploads-webpc/$path.$ext$ext_avif
        /wp-content/uploads-webpc/$path.$ext$ext_webp
        $uri =404;
}
# END Converter for Media

I found a file called nginx.conf. I tried putting it in two places, but when I try to open my site, it won’t open. I keep getting a 502 request error. Can you please tell me where exactly I need to copy that code? The directions say at the beginning of the server block, but it isn’t clear where that is.

I finally got this tough problem resolved! It required deleting and reinstalling the Jetpack plugin. Now I’m seeing the green icons in the staging environment.

Thanks a lot. I had never used Tools -> Site Health before. I noticed something when using it just now, but it wasn’t the plugins. I had already compared the list of plugins in development with what’s in staging. Under “media handling” things are different. In development it says “Active Editor – WP_Image_Editor_Imagick”. It then has values next to ImageMagick version number, ImageMagick version string and ImageMagick version. In staging it has “Active Editor – WP_Image_Editor_GD”. Then it has “not available” for those next 3 values. Now the question is how do I get WP_Image_Editor_Imagick for my active editor?
The solution to my problem may be to create my own custom CSS grid. But I wish I could figure out this mystery anyway.