Modifying Baota Panel nginx configuration to support Converter for Media plugin

Converter for Media is a popular free plugin on the WordPress platform for converting images to WebP format. By default, when weuse Baota Panel for website buildingthe server software selected is usually nginx. In this case, manual configuration of nginx is required for Converter for Media to function properly. Beginners might find the official documentation difficult to understand, so this article by Naiba will guide you step-by-step on how to modify the nginx configuration file for your website in Baota Panel to ensure Converter for Media works correctly.

1. Open the website settings interface in Baota Panel

In the website list within Baota Panel, select the website you need to configure, switch to the configuration file interface, and first copy the default content locally for backup.

2. Modify the configuration file

Code to be added

# 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;
        add_header Cache-Control "private";
        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

Add to the correct location

The configuration file for Converter for Media needs to be added to the correct location to ensure proper functionality. The specific location requirements are as follows:

• 在server { ... }Inside the block
• Otherlocation { ... }Before the command
• In allincludeBefore the command

You can refer to the screenshot information above and add it after approximately line 14.

Modify existing image processing rules

Find the following content in the original configuration file:

location ~ .*\.(gif|jpg|jpeg|png|bmp|swf)$
{
    expires      30d;
    error_log /dev/null;
    access_log /dev/null;
}

Modify to the following content:

location ~ .*\.(bmp|swf)$
{
    expires      30d;
    error_log /dev/null;
    access_log /dev/null;
}

Then click Save. If there are no errors, it proves the modification is correct.

3. Test if the plugin is working properly

After completing the configuration modifications above, as long as the Baota Panel shows no errors, the plugin should work normally. You can now return to the plugin settings interface to see if there are any configuration prompts left. If there are no more prompts and you can normally set the plugin's options or batch process previous images, then it proves the plugin is working properly.

4. How to check if images have been converted to WebP format

If you view the image address or save images from the website frontend, they are still in the previous format and have not changed to WebP. This situation is normal. The plugin author specificallypublished an articleexplaining the reason:This plugin does not change the image URLs, so when you view the website source code, you will always see the default image URLs. The plugin creates redirects to output files in WebP and AVIF formats, changes the MIME types of these images, but does not change the URLs.

The plugin workflow is as follows:

浏览器请求: GET /wp-content/uploads/photo.jpg
↓
插件检测浏览器支持WebP格式
↓
服务器内部重定向到: /wp-content/uploads-webpc/photo.jpg.webp
↓
浏览器收到WebP格式图片，但地址栏仍显示photo.jpg

Advantages of this design

• SEO Friendly: URL structure remains unchanged, does not affect SEO
• Compatibility: Older browsers that do not support the new formats can still receive the original format images
• Non-intrusive: No need to modify theme templates or page content
• Automation: Users are unaware, fully automatic background processing

How to verify:

To confirm if the plugin is working properly, do not view the webpage source code, but instead:

1. Browser Developer Tools (right-click mouse or shortcut key F12) → Network tab
2. Refresh the page to view image requests
3. Check theContent-Typefield in the response headers
4. You should seeimage/webp或image/avifinstead ofimage/jpeg

When you find that a certain image is still in the old format, it proves that the converted image is larger than the original, so the plugin discarded the processing of that image.