Images not scaling

Hello, my friend,

Indeed the Adaptive Images plugin is not yet completely configured in your website. Since you are using NginX, I suspect that the NginX code block is not in the correct place. If it were, then all the image requests should be routed to the Adaptive Images script inside the plugins directory.

I can tell this by checking image urls like this: https://ja.seoartgallery.com/wp-content/uploads/2018/06/0001234.jpg?debug=true. The “?debug=true” at the end of the url should produce a debugging text output and not the image itself!

So, do you have any ideas why the code block in NginX is not yet working correctly? Do you think you could contact your host or admin about this? NginX can be indeed a bit tricky in such cases, I’m afraid. and there is no uniform solution like the htaccess file in Apache.

Let me know how it goes!

Cheers,
Takis

@nevma

Hi, Thanks for answering!

I am currently running a website on VPS and I have the authorities of an administrator.

I made a couple changes in the settings in the server block and the Debug is properly working now.

However, I am still unable to adjust the image size. Could I kindly ask you to check it one more time?

Hello, my friend,

I did take a look at your images once again, but it seems that the “debug” url parameter is still not working. Perhaps now it is a caching issue or something similar? For instance, the image url https://ja.seoartgallery.com/wp-content/uploads/2018/06/0001234.jpg?debug=true is still sending the image and not the debugging text it is expected to.

My best guess is that the NginX server block is still not configured properly, so that image requests are routed to the adaptive-images-script.php file of the plugin.

Cheers,
Takis

@nevma

Hi, Thanks for answering.

I found the problem is compatible with wp-rocket plugin.

when i use Rocket-Nginx script with Wp-rocket and Adaptive Images plugin, debug url can`t access.

if I deleted Rocket-Nginx script in my server block, i can access debug url but Adaptive Images plugin not work collectly (not changed configuration in Adaptive Images plugin)

Finally, I disabled Rocket plugin and Delete Rocket-Nginx script but Adaptive Images plugin still not work.

Please check

For the record, Rocket-Nginx does not alter images in any way. It simply serves HTML faster and changes HTTP headers to enable browser caching. If images are not loading correctly, it has nothing to do with Rocket-Nginx.

Did you reload your configuration with something like service nginx reload after deactivating Rocket-Nginx? Nginx does not work like Apache and needs the configuration to be manually reloaded when changed.

Hello, guys,

As far as I know @satellitewp must be right. Actually most caching solutions do not tamper with the delivery of images (unless we are talking about a CDN, of course). However, for some reason now your images @cheonmu seem to be forwarded internally to the Adaptive Images script indeed. Anybody can check the debugging url https://ja.seoartgallery.com/wp-content/uploads/2018/06/0001234.jpg?debug=true.

So, firstly, the resolution cookie that the Adaptive Images plugin sets is set up correctly (https://prntscr.com/niqmb5/) and, secondly, the final downloaded image is resized according to the device size as expected. Happy times for all then!

Perhaps you could share with us exactly what is the serve block code that worked for you and where exactly you have put it? It might help other users as well in the future! Thanks in advance!

Cheers,
Takis

@satellitewp @nevma

Hi, Thanks for answering.

I tried to access to Debug url again , original image is displayed, not the debug information.

Since WP ROCKET is still disabled, it does not seem to be a plug-in problem.

I am checking the configuration of my server block, but I have not found any problems.

This is my server block and i will test again what is problem.

I am using nginx 1.10.3 + Ubuntu 16.04 + mariadb 10.1.38 + php7.0

Thank you

server{
	listen 80;
	server_name ja.seoartgallery.com www.ja.seoartgallery.com static.ja.seoartgallery.com www.static.ja.seoartgallery.com img.ja.seoartgallery.com www.img.ja.seoartgallery.com;

	location /{
            return 301 https://$host$request_uri;
        }

}

server {

    server_name ja.seoartgallery.com www.ja.seoartgallery.com static.ja.seoartgallery.com www.static.ja.seoartgallery.com img.ja.seoartgallery.com www.img.ja.seoartgallery.com;

    error_log /var/log/nginx/ja.seoartgallery.com.error.log;

    root /var/www/ja.seoartgallery.com/htdocs;

	location ~* \.(eot|ttf|woff|woff2|png)$ {
		add_header Access-Control-Allow-Origin *;
		expires 365d;
		}    

		location ~* \.(js|css|pdf|html|swf)$ {
		expires 30d;
		add_header Cache-Control "public, no-transform";
	}

    index index.php index.html index.htm;
    include  common/php7-seo.conf; 
    include /var/www/ja.seoartgallery.com/conf/nginx/*.conf;
}

php7-seo.conf

location / {
  try_files $uri $uri/ /index.php?$args;
  rewrite \.(?:jpe?g|gif|png)$ /wp-content/plugins/adaptive-images/adaptive-images-script.php;

}
location ~ \.php$ {
  try_files $uri =404;
  include fastcgi_params;
  fastcgi_pass php7;
}

# FastCGI cache settings
fastcgi_cache_path /var/run/nginx-cache levels=1:2 keys_zone=WORDPRESS:50m inactive=60m;
fastcgi_cache_key "$scheme$request_method$host$request_uri";
fastcgi_cache_use_stale error timeout invalid_header updating http_500 http_503;
fastcgi_cache_valid 200 301 302 404 1h;
fastcgi_buffers 16 16k;
fastcgi_buffer_size 32k;
fastcgi_param SERVER_NAME $http_host;
fastcgi_ignore_headers Cache-Control Expires Set-Cookie;
fastcgi_keep_conn on;

#SSL
listen 443 ssl http2;
ssl on;
ssl_certificate     /etc/letsencrypt/live/ja.seoartgallery.com-0001/fullchain.pem;
ssl_certificate_key     /etc/letsencrypt/live/ja.seoartgallery.com-0001/privkey.pem;
ssl_dhparam "/etc/ssl/certs/dhparam.pem";

# Set caches, protocols, and accepted ciphers. This config will merit an A+ SSL Labs score.
ssl_session_tickets off;
ssl_ecdh_curve secp384r1;
ssl_session_cache shared:SSL:20m;
ssl_session_timeout 10m;
ssl_stapling on;
ssl_stapling_verify on;
ssl_trusted_certificate /etc/letsencrypt/live/ja.seoartgallery.com/chain.pem;
resolver 8.8.8.8 8.8.4.4 valid=300s;
resolver_timeout 5s;
ssl_buffer_size 4k;
ssl_protocols TLSv1.1 TLSv1.2;
ssl_prefer_server_ciphers on;
# ssl_ciphers 'ECDH+AESGCM:ECDH+AES256:ECDH+AES128:DH+3DES:!ADH:!AECDH:!MD5';
ssl_ciphers 'EECDH+AESGCM:EDH+AESGCM:AES256+EECDH:AES256+EDH';

add_header Strict-Transport-Security 'max-age=31536000'; 

• This reply was modified 5 years, 10 months ago by cheonmu.

Hello, @cheonmu,

Perhaps, you are seeing a cached version of the debugging url? Could you clean up your browser cache and try again or hit a hard refresh (Win+F5, Cmd+R)? Because I do still see the text debugging output and actually all the other images are being delivered resized wherever necessary, as expected (see the screenshots in my previous comment).

Now, your NginX configuration seems correct (and thank you for sharing it with us). The only thing I might do differently would be to put the “location” directive inside the “server” directive, but this is not very important. It is possible to have many different working combinations in NginX.

Cheers,
Takis

@nevma

Hi, Thanks for answering.

I’m still not sure if Adaptive Images for WordPress plug-in is working normally from my website.

I checked the download capacity of the whole image by changing resolutionby using Chrome developer tool, but there is no difference.

If Resolution is marked as 320.1..v.v as shown in the screenshot you have uploaded above(https://prnt.sc/niqmb5), does it mean that it’s working normally?

And is it possible to use with WebP Express plugin both?

Thank you.

• This reply was modified 5 years, 10 months ago by cheonmu.

Hello, my friend,

I am afraid we are now back to our original problem. When I checked your website in my previous comment and took the screenshot https://prnt.sc/niqmb5/ the Adaptive Images plugin was working correctly and the images were being resized.

Now I checked again and it isn’t working. Even the debug urls like https://ja.seoartgallery.com/wp-content/uploads/2018/06/0001234.jpg?debug=true are not working, exactly as it was happening in the beginning.

Is it possible that something changed in your NginX configuration in the meantime. I an pretty sure it is all a matter of setting a correct NginX configuration. I am sorry I cannot provide the correct configuration, because it really depends on your setup. The general idea is adding the bit of code that you see after you save the Adaptive Images settings in the correct place of your NginX configuration.

Cheers,
Takis

@nevma

Hi, I really appreciate your kind reply despite a lot of questions.

I really want to use your Plugin so I migrated to new Nginx server by referring to https://websiteforstudents.com/setup-wordpress-woocommerce-with-nginx-mariadb-and-php-7-2-on-ubuntu-16-04-18-04/ tutorial.

My server is currently using the code below.

server {
    listen       80;
    server_name   ja.seoartgallery.com www.ja.seoartgallery.com static.ja.seoartgallery.com www.static.ja.seoartgallery.com;
 
    return       301 https://$server_name$request_uri;
}

server {
    listen       443 ssl http2;
    server_name  ja.seoartgallery.com www.ja.seoartgallery.com static.ja.seoartgallery.com www.static.ja.seoartgallery.com;
    root /var/www/ja.seoartgallery.com/htdocs;
 
    index  index.php index.html index.htm;

	ssl_certificate "/etc/letsencrypt/live/ja.seoartgallery.com/fullchain.pem";
	ssl_certificate_key "/etc/letsencrypt/live/ja.seoartgallery.com/privkey.pem";
    ssl_dhparam "/etc/ssl/certs/dhparam.pem";
	
    # Set caches, protocols, and accepted ciphers. This config will merit an A+ SSL Labs score.
    ssl_session_cache shared:SSL:20m;
    ssl_session_timeout 10m;
    ssl_protocols TLSv1 TLSv1.1 TLSv1.2;
    ssl_prefer_server_ciphers on;
    ssl_ciphers 'ECDH+AESGCM:ECDH+AES256:ECDH+AES128:DH+3DES:!ADH:!AECDH:!MD5';
	
    access_log /var/log/nginx/ja.seoartgallery.com.access.log;
    error_log  /var/log/nginx/ja.seoartgallery.com.error.log warn;

    # Block dot file (.htaccess .htpasswd .svn .git .env and so on.)
    location ~ /\. {
        deny all;
    }
 
    # Block (log file, binary, certificate, shell script, sql dump file) access.
    location ~* \.(log|binary|pem|enc|crt|conf|cnf|sql|sh|key|yml|lock)$ {
        deny all;
    }
 
    # Block access
    location ~* (composer\.json|composer\.lock|composer\.phar|contributing\.md|license\.txt|readme\.rst|readme\.md|readme\.txt|copyright|artisan|gulpfile\.js|package\.json|phpunit\.xml|access_log|error_log|gruntfile\.js)$ {
        deny all;
    }
 
    location = /favicon.ico {
        log_not_found off;
        access_log off;
    }
 
    location = /robots.txt {
        log_not_found off;
        access_log off;
    }
 
    # Block .php file inside upload folder. uploads(wp), files(drupal), data(gnuboard).
    location ~* /(?:uploads|default/files|data)/.*\.php$ {
        deny all;
    }
 
 
     client_max_body_size 100M;

    location / {
        try_files $uri $uri/ /index.php?$args;        
		rewrite \.(?:jpe?g|gif|png)$ /wp-content/plugins/adaptive-images/adaptive-images-script.php;

    }

    # Allow Lets Encrypt Domain Validation Program
    location ^~ /.well-known/acme-challenge/ {
        allow all;
    }

    location ~ \.php$ {
    include snippets/fastcgi-php.conf;
    fastcgi_pass      unix:/var/run/php/php7.2-fpm.sock;
    fastcgi_param   SCRIPT_FILENAME $document_root$fastcgi_script_name;
    }

	
}

Could you check if your plugin is working normally now?

Thank you.

Hello, my friend,

No worries, I want this to work for you. Thank you for your efforts, too, and for sharing your configuration with me.

Right now the Adaptive Images plugin seems to be working as expected. Take a look at this screenshot https://prntscr.com/nmslpn/, where I am inspecting an image with my browser’s Developer Tools in Responsive web design mode. (Bear in mind that you might need to clear your browser cache first or hit a hard refresh with Ctrl+F5 or Cmd+R.)

In addition, the debugging urls on images are working as expected, too: https://ja.seoartgallery.com/wp-content/uploads/2019/05/0001234-1600×494.jpg?debug=true.

It was all a matter of NginX being configured properly and at the correct point after all!

Cheers,
Takis

@nevma

Thanks for answering.

I think i found what was my problem.

the problem is Nginx-Rocket when i told firstly.

When i open Default.conf form Nginx-rocket, I can find below code and i just remove jpeg, png, gif.

# BROWSER MEDIA CACHE
#
location ~* \.(ico|gif|jpe?g|png|svg|eot|otf|woff|woff2|ttf|ogg)$ {
	etag on;
	expires 30d;
	
}

I guess Broswer cache from Adaptive Images and Rocket-nginx was crashed maybe.

Thanks you.

• This reply was modified 5 years, 10 months ago by cheonmu.

You are welcome, my friend!

So, is everything OK with you installation now?