|
| 1 | +--- |
| 2 | +myst: |
| 3 | + html_meta: |
| 4 | + description: Learn how to configure the "Converter for Media – Optimize images |
| 5 | + | Convert WebP & AVIF" plugin on your Hypernode server. Follow step-by-step |
| 6 | + instructions to verify your VHOST type, update NGINX configuration, and test |
| 7 | + the plugin for optimal performance and compatibility with WordPress/WooCommerce. |
| 8 | + title: How to Configure "Converter for Media – Optimize images | Convert WebP |
| 9 | + & AVIF" Plugin on Hypernode |
| 10 | +--- |
| 11 | + |
| 12 | +# How to Configure Converter for Media – Optimize images Convert WebP & AVIF Plugin on Hypernode |
| 13 | + |
| 14 | +For the WordPress/WooCommerce plugin [Converter for Media – Optimize images | Convert WebP & AVIF](https://nl.wordpress.org/plugins/webp-converter-for-media/), an adjustment is required in your Hypernode NGINX configuration. To make it easier for you, follow the instructions below to get the plugin working correctly on Hypernode. |
| 15 | + |
| 16 | +## Verify your VHOST type |
| 17 | + |
| 18 | +First, check if your VHOSTS has the correct type by running the following command: |
| 19 | + |
| 20 | +```bash |
| 21 | +app@abcdef-example-magweb-cmbl ~ $ hmv --list |
| 22 | +``` |
| 23 | + |
| 24 | +Running this command will give you an output like this: |
| 25 | + |
| 26 | +```console |
| 27 | ++-------------------+----------+----------------+-------+-------------+---------+--------------+ |
| 28 | +| servername | type | default_server | https | force_https | varnish | ssl_config | |
| 29 | ++-------------------+----------+----------------+-------+-------------+---------+--------------+ |
| 30 | +| test.hypernode.io | magento2 | True | True | True | False | intermediate | |
| 31 | ++-------------------+----------+----------------+-------+-------------+---------+--------------+ |
| 32 | +``` |
| 33 | + |
| 34 | +As you can see, the type is incorrect because it needs to be set to WordPress. To change this, use the following command: |
| 35 | + |
| 36 | +```bash |
| 37 | +app@abcdef-example-magweb-cmbl ~ $ hmv --type wordpress --https test.hypernode.io |
| 38 | +``` |
| 39 | + |
| 40 | +After running this command, your VHOSTS will be set to WordPress. Make sure to replace `test.hypernode.io` with your actual domain name. |
| 41 | + |
| 42 | +## Update NGINX configuration for the plugin |
| 43 | + |
| 44 | +To ensure that "Converter for Media – Optimize images | Convert WebP & AVIF" works correctly, apply the following configuration: |
| 45 | + |
| 46 | +```nginx |
| 47 | +# BEGIN Converter for Media |
| 48 | +set $ext_avif ".avif"; |
| 49 | +if ($http_accept !~* "image/avif") { |
| 50 | + set $ext_avif ""; |
| 51 | +} |
| 52 | +
|
| 53 | +set $ext_webp ".webp"; |
| 54 | +if ($http_accept !~* "image/webp") { |
| 55 | + set $ext_webp ""; |
| 56 | +} |
| 57 | +
|
| 58 | +location ~ /wp-content/(?<path>.+)\.(?<ext>jpe?g|png|gif|webp)$ { |
| 59 | + add_header Vary Accept; |
| 60 | + add_header Cache-Control "private"; |
| 61 | + expires 365d; |
| 62 | + try_files |
| 63 | + /wp-content/uploads-webpc/$path.$ext$ext_avif |
| 64 | + /wp-content/uploads-webpc/$path.$ext$ext_webp |
| 65 | + $uri =404; |
| 66 | +} |
| 67 | +# END Converter for Media |
| 68 | +``` |
| 69 | + |
| 70 | +Place the above configuration in `/data/web/server.media.conf.` Once you save the file, NGINX will automatically reload, and if something goes wrong, you will be notified. |
| 71 | + |
| 72 | +## Test the Configuration |
| 73 | + |
| 74 | +To test the configuration, you can use the following command: |
| 75 | + |
| 76 | +```bash |
| 77 | +$ curl -IL -H "Accept: image/webp" https://test.hypernode.io/wp-content/upload/test.jpg |
| 78 | + |
| 79 | +HTTP/2 200 |
| 80 | +server: nginx |
| 81 | +date: Mon, 13 May 2024 08:49:44 GMT |
| 82 | +content-type: image/webp |
| 83 | +content-length: 53624 |
| 84 | +last-modified: Wed, 08 May 2024 13:34:25 GMT |
| 85 | +etag: "663b7f61-d178" |
| 86 | +expires: Tue, 13 May 2025 08:49:44 GMT |
| 87 | +cache-control: max-age=31536000 |
| 88 | +vary: Accept |
| 89 | +cache-control: private |
| 90 | +accept-ranges: bytes |
| 91 | +``` |
| 92 | + |
| 93 | +By following these instructions, you should be able to configure and test the "Converter for Media – Optimize images | Convert WebP & AVIF" plugin to work correctly on your Hypernode server. |
0 commit comments