Join the community today
Become a Member

Wordpress Images not loading in Safari due to webP ?

Discussion in 'Blogs & CMS usage' started by ImAProfessional, Dec 12, 2019.

  1. ImAProfessional

    ImAProfessional New Member

    2
    0
    1
    Dec 2, 2019
    Ratings:
    +0
    Local Time:
    3:50 PM
    Since migrating over to Centmin Mod (which included a move from php 5.4 to php 7.3), images are inconsistently not displaying in Safari. All is well in Chrome.

    I noticed similar issue on https://servermanager.guide/ . The images also won't load in Preview on macOS, yet they'll open without issue in Affinity Designer. I've added the image from servermanager.guide below:

    [​IMG]

    Do you have any thoughts on where to begin looking in my server configuration?

    Thanks,
    David
     
  2. eva2000

    eva2000 Administrator Staff Member

    42,798
    9,693
    113
    May 24, 2014
    Brisbane, Australia
    Ratings:
    +14,956
    Local Time:
    6:50 AM
    Nginx 1.17.x
    MariaDB 5.5/10.x
    Not a Apple/Mac/Safari user so limits my troubleshooting on my end. So not sure what Affinity Designer is ?

    Are you using Cloudflare in front of your Centmin Mod Nginx server ? Cloudflare free or pro plan ?

    For https://servermanager.guide/ it's behind Cloudflare free plan with webP express wordpress plugin to convert png images to webP format for web browsers that support it. What version of macOS and Safari you using ? maybe it doesn't support webP ?
     
    • Winner Winner x 1
  3. eva2000

    eva2000 Administrator Staff Member

    42,798
    9,693
    113
    May 24, 2014
    Brisbane, Australia
    Ratings:
    +14,956
    Local Time:
    6:50 AM
    Nginx 1.17.x
    MariaDB 5.5/10.x
    ok seems you found a bug in my centmin.sh menu option 22 wordpress setup in your generated /usr/local/nginx/conf/wpincludes/domain.com/wpsecure_domain.com.conf

    find the webp location context for
    Code (Text):
    # WebP extension support if you are converting /uploads images to webp
    location ~ ^/wp-content/uploads/ {
      #pagespeed off;
      #pagespeed unplugged;
      #autoindex on;
      #add_header X-Robots-Tag "noindex, nofollow";
      location ~* ^/wp-content/uploads/(.+/)?(.+)\.(png|jpe?g)$ {
        expires 30d;
        add_header Vary "Accept-Encoding";
        add_header Cache-Control "public, no-transform";
        try_files $uri$webp_extension $uri =404;
      }

    change the add_header line for Vary from add_header Vary "Accept-Encoding"; to add_header Vary "Accept";
    Code (Text):
    # WebP extension support if you are converting /uploads images to webp
    location ~ ^/wp-content/uploads/ {
      #pagespeed off;
      #pagespeed unplugged;
      #autoindex on;
      #add_header X-Robots-Tag "noindex, nofollow";
      location ~* ^/wp-content/uploads/(.+/)?(.+)\.(png|jpe?g)$ {
        expires 30d;
        add_header Vary "Accept";
        add_header Cache-Control "public, no-transform";
        try_files $uri$webp_extension $uri =404;
      }

    then restart nginx/php-fpm and clear Cloudflare cache
    Code (Text):
    nprestart