Modify Baota Panel nginx configuration to support Converter for Media Plugin

Converter for Media is a popular Plugin on the WordPress platform that converts images to webp format for free. By default, when weuse Baota Panel for website buildingthe server software is usually nginx. In this case, manual configuration of nginx is required to make Converter for Media work properly. Beginners may not understand the official documentation, so in this article, 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 functions correctly.

1. Open the website settings interface in Baota Panel

In the website list of 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/(?.+)\.(?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 operation. The specific location requirements are as follows:

• 在server { ... }Inside the block
• Before otherlocation { ... }directives
• Before allincludedirectives

You can refer to the screenshot information above; add it approximately after 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 it 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 then return to the plugin settings interface to see if there are any configuration prompts remaining. If there are no prompts and you can normally set the plugin's options or batch process previous images, then it proves the plugin is working correctly.

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

When you view image addresses 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 viewing 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's 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: The URL structure remains unchanged, not affecting search engine optimization.
• Compatibility: Older browsers that do not support the new formats can still receive images in the original format.
• Non-intrusive: No need to modify theme templates or page content.
• Automated: Users are unaware; it's fully automatic background processing.

How to verify:

To confirm if the plugin is working correctly, 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. Should seeimage/webp或image/avifInstead ofimage/jpeg

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