Mobile images have not changed at all!?

Hello, my friend,

Well, first of all it seems that the plugin is actually working in the background. However when images are requested in smaller screens they are not resized!

Now, if we debug an image like this https://dolancustomguitars.co.uk/wp-content/uploads/2016/11/cropped-IMG_2066.jpg?debug=true or like this https://dolancustomguitars.co.uk/wp-content/uploads/2016/11/cropped-IMG_2066.jpg?resolution=320,1 we get the expected output.

In the first case it is the debug output and in the second case it is the “forced-resized” image.

So, what causes your images to not be resized in the regular requests? Have you disabled cookies on images or are you perhaps using some kind of CDN or caching server?

If you have disabled cookies on images then it is impossible for the plugin to work because it depends on these cookies.

If you are using a CDN or a caching server then the case is a little different, because the actual image delivery is not done by your WordPress installation directly. For this we have a special “CDN support” option, but this function is still a bi experimental.

Let me know how it goes and if you need any more help!

Cheers,
Takis

PS: Grrreat guitars indeed!

• This reply was modified 7 years, 11 months ago by Takis Bouyouris.
• This reply was modified 7 years, 11 months ago by Takis Bouyouris.
• This reply was modified 7 years, 11 months ago by Takis Bouyouris.

Hello Takis,

Thanks for the reply and the compliment.

Firstly I’m quite new to website design, so forgive the stupid questions.

I have managed to alter the top image on my home page. I had to select an option so it would re size. But still got issues with the bottom image, I can’t seem to do the same with this image.

I’m not sure on the cookies to be honest, I haven’t done it personally that I know of. Not even sure how I would check it or enable cookies? Is it something/a plugin I need to add or a setting within WordPress?

With regards CDN, I’m not sure what that even is? My site goes through Siteground server, and my site and images have been made with the Boldgrid plugin if that means anything.

Sorry for all the questions.

Cheers,

Adam

Hi Adam,

No problem, there is no such think as stupid questions!

Perhaps you could help me out a bit by sending me the output of the “Print debug” and “Print diagnostics” buttons in the plugin settings page. If there are any plugins that have to do with the cookies or with the CDN, then it will probably be easy to find out.

Other than that, we might have to contact the administrators of Siteground to help us out with their setup.

Since you are a beginner, I would like to point out that our plugin does now resize the original images you upload to your WordPress installation. It only resizes them on the fly, temporarily, when they are requested by a device with a smaller screen!

Cheers,
Takis

That is very true! Thanks for the help, I really appreciate it. I’ve been amazed at the help I’ve received since start this site.

Here is the info you asked for, I hope you can make sense of it!?

If this doesn’t help let me know and I can find out info you need from SiteGround. They have 24 hr web chat, which is very handy.

Thanks,

Adam

Debug;

PHP GD library is installed.
? Image cache directory has been created.
/home/dolancus/public_html/wp-content/cache/adaptive-images => drwxr-xr-x
? Installation .htaccess file is setup OK.
/home/dolancus/public_html/.htaccess => -rw-r–r–
? Adaptive images settings dump:
array(12) {
[“resolutions”]=>
array(3) {
[0]=>
int(1024)
[1]=>
int(640)
[2]=>
int(480)
}
[“landscape”]=>
bool(true)
[“hidpi”]=>
bool(true)
[“cdn-support”]=>
bool(true)
[“cache-directory”]=>
string(21) “cache/adaptive-images”
[“watched-directories”]=>
array(2) {
[0]=>
string(18) “wp-content/uploads”
[1]=>
string(17) “wp-content/themes”
}
[“jpeg-quality”]=>
int(75)
[“sharpen-images”]=>
bool(true)
[“watch-cache”]=>
bool(true)
[“browser-cache”]=>
float(180)
[“version”]=>
string(6) “0.6.60”
[“sanitized”]=>
bool(true)
}

Diagnostics;

System information
Web Server
Apache
Document Root
/home/dolancus/public_html
PHP
5.6.28
PHP Time Limit
120
PHP Memory Limit
768M
PHP Post Max Size
128M
PHP Upload Max Size
128M
PHP Max Input Vars
3000
PHP Display Errors
Yes
PHP Error Log
php_errorlog
MySQL
5.6.28-76.1-log
MySQL Ext/mysqli
Yes
MySQL Table Prefix
wp_
MySQL DB Charset
utf8mb4
WP
4.6.1
WP Multisite
No
WP Debug Mode
No
WP Site url
https://dolancustomguitars.co.uk
WP WP Home url
https://dolancustomguitars.co.uk
WP Permalinks
/%year%/%monthnum%/%day%/%postname%/
WP home path
/home/dolancus/public_html/
WP content dir
/home/dolancus/public_html/wp-content
WP plugin dir
/home/dolancus/public_html/wp-content/plugins
WP content url
https://dolancustomguitars.co.uk/wp-content
WP plugin url
https://dolancustomguitars.co.uk/wp-content/plugins
WP Locale
en_US
WP Memory Limit
128M
WP Max Upload Size
128mb
WP Active plugins
Adaptive Images for WordPress v.0.6.60 by Nevma
BoldGrid Editor v.1.3 by BoldGrid.com
BoldGrid Gallery v.1.3 by BoldGrid.com
BoldGrid Inspirations v.1.3 by BoldGrid.com
BoldGrid Ninja Forms v.1.3 by BoldGrid.com
BoldGrid SEO v.1.3 by BoldGrid.com
BoldGrid Staging v.1.3.0.1 by BoldGrid.com
Custom Facebook Feed v.2.4.5 by Smash Balloon
FameTheme Demo Importer v.1.0.2 by famethemes
Instagram Feed v.1.4.8 by Smash Balloon
Jetpack by WordPress.com v.4.4.1 by Automattic
Yoast SEO v.3.9 by Team Yoast
WP Statistics v.11.0.2 by Greg Ross & Mostafa Soufi
WP MU plugins

Hello.

I am part of the senior technical support team at SiteGround. I’ll be glad to help you with resolving the case @dolancustomguitars – please provide me with the ticket ID related to the case in your SiteGorund account (please open one if you haven’t done that:))

@nevma, let me know if you need any specific information – I am also available in WordPress slack channel – @ ivan.y so you can contact me there too:)

• This reply was modified 7 years, 11 months ago by Ivan Yordanov.

Hello, @ivanyordanov-1,

Thank you for helping out! Actually, there has been no problem per se so far, so I don’t think there was a need for a ticket. However, since you are here after all, maybe you could help us decipher our situation.

So, if I may ask, do you strip cookies on image requests? Also, are you using some kind of caching server, like Varnish, or a CDN that intervenes between the WordPress installation and the browser? I am asking this because our plugin is using cookies on images in order to know from what kind of device each request originated from. This way it can serve different image dimensions to different devices according to their screen size.

@dolancustomguitars, so you know, there is no problem with your setup and all the debugging output you sent is OK. I was going to suggest that you contacted your host, but, hey, here they are already!

Cheers,
Takis

We are using Nginx with our SuperCacher but you shouldn’t have any issues with your cookie mechanism, as we don’t strip them. There are a lot of plugins that are setting different cookies, so I doubt that this is the issue in this case.

Hello, @ivanyordanov-1 and @dolancustomguitars,

I do not know what might have changed, but now the plugin seems to be working pretty nicely! Perhaps, I missed something before?

You can check the results by debugging the plugin like this:

• https://dolancustomguitars.co.uk/wp-content/uploads/2016/11/IMG_2061.jpg?debug=true
• https://dolancustomguitars.co.uk/wp-content/uploads/2016/11/IMG_2061.jpg?resolution=360,1
• https://dolancustomguitars.co.uk/wp-content/uploads/2016/11/IMG_2061.jpg?resolution=640,1

You can see that the different image sizes are actually produced correctly. Of course they also depend on the breakpoint sizes that the admin has set in the plugin settings page.

You can also check it out either by visiting the website from a mobile device or via the Firefox/Chrome Web developer tools > Responsive design mode.

Cheers,
Takis

Hello, I’ve only just been able to reply as i’ve been at work. But thanks to Ivan for getting involved, saves me being the middle man.

The plugin does seem to working on most of it, but the image right at the bottom still isn’t being affected. If you look at my site on a laptop and then on a phone you will see what I mean.

Here is a link to a screenshot of the issue on my phone;

https://i917.photobucket.com/albums/ad17/DolanCustomGuitars/30CBE75D-2A29-48B3-A310-243AFE410834_zpsccpozqda.png

And here’s the same bit on my computer;

https://i917.photobucket.com/albums/ad17/DolanCustomGuitars/Screen%20Shot%202016-12-07%20at%2019.02.37_zpspu6ja7wf.png

Do either of you know how to make this image not looked zoomed in and re-size? The header image had an option that meant it would resize, so that with your plugin works like a charm, I’m just struggling to make the image in the pictures work.

Thanks again,

Adam

Hello, Adam,

OK, now I see! I think your problem is CSS related. This means that the problem has nothing to do with what our plugin does, but how the browser is instructed to render the image by the page’s CSS.

Although I am quite positive that this is indeed a CSS issue, I do not see exactly what you see in my mobile version. This is what I see: https://prntscr.com/dgm67m and I see that the guitar head image is visible alright. Of course, as you can see in my screenshot, the guitar head image is a bit stretched outside the screen, but it is still there, as expected.

I am afraid that what you see is due to your phone’s OS and/or browser. Have you tested your website with other browsers and/or other phones?

Also, I do not think it can be very easily fixed. I mean there is a CSS declaration backround-size: contain; versus your current backround-size: cover; but I do not know if you can override it in your theme and I do not believe it would produce a very beautiful result even if you did!

I wish I could be of more help…

Cheers,
Takis

Hello, That’s really odd that you see that! I’ve tried on an iPhone on chrome and safari and both see that.

Really sorry you can’t help and sorry to have waisted you time a little! What you see still isn’t ideal as I’d like to see the whole image like the very top image.

Yea that looks like that could get complicated and I wouldn’t even know where to start! I just want the image to be sized to the screen…is that too much to ask!? haha

Thanks again for the help.

Adam

Hello, Adam,

No, of course that is not too much to ask, it is just how your theme is designed to show that particular image!

Cheers,
Takis

Hello, Sorry for the late reply. I’ve had a go with coding and google, and I got close, but it either repeated, or looked how i wanted on mobile, but then was in the middle and too small on a laptop. haha.

I don’t understand coding so it’s very much copy paste and see what happens…

Any way cheers for all the help. Really appreciate the time and effort.

Regards,

Adam

Yeap, it does require some CSS coding and perhaps even some tweaks in your theme to make it work.

I am glad to have been of help in any way.

Best,
Takis

Hi Takis,

I might have a similar problem like dolancustomguitars and there is probaly no easy solution for it too but I still like to give it a chance and asking you if you could have a look at my page https://www.travelister.de? The picture still has the same size on mobile displays. Maybe you have an idea if there is a chance to change it. But I fear the problem comes with my Theme…Thanks a lot! Timm