Multisite Compatible?

Hello @jkdev,

Thanks for your message.

Yes, of course.

Best,
Mateusz

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.

@nebraskauser Find the appropriate host configuration file in the /etc/nginx/sites-available directory that is responsible for your site. Then remember to restart your Nginx server.

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;
	}
}

Thanks for your answer @nebraskauser,

In this file you have a “WordPress Rules” section. I suggest that you add a section of my plugin above the WordPress section.

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.

@nebraskauser I am glad that the plugin is already working for you. Please remember that the website performance tester tests multiple areas of the website. Image optimization is one of these areas.

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.

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.

@nebraskauser Where are you looking for WebP and AVIF files, in what directory?

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

@nebraskauser WebP and AVIF files are saved in the directory:
/wp-content/uploads-webpc

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?

I’m still waiting for an answer.

@nebraskauser Sorry for the waiting time. Please send me a screenshot of the Help Center tab in the plugin settings. Then I will try to tell you more.