After switching to HTTPS, image links are broken

  • Resolved charlesoharaphoto

    (@charlesoharaphoto)


    8 years, 4 months ago

    Hi,

    The plugin used to work beatifully, but after doing a few theme and plugins update and switching from HTTP to HTTPS, it doesn’t seem to work anymore.

    I tried pausing (completely bypassing) my CDN, disabling all server-side cache, clean installing the plugin, flushing browser cache and cookies… yet it just does not work properly anymore, and when it does, it does so apparently randomly (a few lightbox images here, a few other there); it won’t load background images anymore at all, and it even likes to break all image links everywhere on the website, including in the library and the page builder. Disabling the plugin or commenting on its entries in the .htaccess file always revert things back to normal.

    All in all, I don’t know what else to try in order to make the plugin work again.

    The page I need help with: [log in to see the link]

Viewing 7 replies - 1 through 7 (of 7 total)
  • Plugin Author Takis Bouyouris

    (@nevma)

    8 years, 4 months ago

    Hello, my friend,

    I did take a look at your website and it seems that HTTPS is not directly the problem. I mean your images are loading correctly and if one request and image via plain HTTP then the iamge cannot be found. (Actually, I would recommend redirecting all your HTTP urls to HTTPS without exceptions in order to avoid, but this is besides our discussion here and it is not a serious issue.)

    One more thing I noticed is that you are using NginX and you are probably using it as a caching server, in front of Apache right? And this is why you have enabled the CDN support flag!

    So, if I am correct, your Apache and WordPress are working fine with Adaptive Images and I can confirm this by checking urls like https://charlesoharaphoto.com/wp-content/uploads/2018/01/20160610-engelvoelkers-452.jpg?debug=true and https://charlesoharaphoto.com/wp-content/uploads/2018/01/20160610-engelvoelkers-452.jpg?resolution=480,1.

    And, if I am still correct, the only images that you cannot see being resized are images which are used in CSS backgrounds! Unfortunately this is expected behaviour, because the Adaptive Images plugin is yet not able to detect images used in CSS backgrounds when in CDN enabled mode.

    I hope the above makes sense to you. Let me know if I can help any further!

    Cheers,
    Takis

    Thread Starter charlesoharaphoto

    (@charlesoharaphoto)

    8 years, 3 months ago

    Hello Takis,

    Thank you very much for your answer.

    I indeed had quite a few issues when converting my website from HTTP to HTTPS but I think you are right that it is not directly related to your plugin. I will check for redirection issues though, thanks for pointing that out.

    Regarding the NginX caching server, I wasn’t aware, but I just read that indeed that’s the case. My website runs on an Apache server but some of the caching is done by the Siteground (my host) Supercacher (a plugin and server combination), and I just read that the server side of caching runs on NginX. Would that be a problem?

    I eventually managed to get Adaptive Images running fine again after flushing every possible kind of server and local cache and then rebuilding image links that I think were actually broken whith a theme update. A lot of changes happened at the same time so I didn’t know exactly where to look at for possible problem sources, but eventually I managed to troubleshoot most of them.

    Right now, almost everything seems to works fine, even the CSS background images! The website you had a look at was just a placeholder page; the main page under development has two CSS images and the two get resized properly, even in CDN enabled mode. However, I put my CDN in “pause mode” until the development is finished, so I’ll have to check again when everything is done and the CDN is doing its caching.

    I only have two problems left:

    – I checked the “Bigger Dimension” checkbox; I don’t know if it works well, because it seems that I always only get the image version according to the closest break point related to the longer side of the screen, regardless of device orientation: e.g. I have break points set at 2560 px and 1440 px, and my phone in portrait mode only feeds me 2560 px wide images.

    – I can’t test as many of of the break points as I’d like, because for some reason Chrome/Opera in Device Preview mode still detect my real screen resolution, which is 2560×1440 (and actually the same as my phone, which restricts my testing even more!). Is this normal? Is there a way to force “false” resolution spoofing?

    Thanks a lot!
    Charles

    Plugin Author Takis Bouyouris

    (@nevma)

    8 years, 3 months ago

    Hello, Charles,

    As far as your second problem is concerned, I can at least confirm that Firefox in responsive web design mode is actually very helpful in debugging Adaptive Images and reports the virtual screen resolution . I have made a lot of tests with it, even today! However, I was under the impression that Chrome and Opera responsive in web design mode are working as expected as well.

    Another way to debug an image is to add the following url parameters at the end of an image url: ?debug=true to see debug information, ?debug=original to see the original size of an image, ?resolution=320,1 to see the image as if it had been accessed by a device with a width of 320px and device pixel ratio of 1.

    As far as your first problem is concerned, the “Bigger dimension” option is a setting that is used in combination with all the other settings. This means that the plugin tries to match the device resolution (based on the bigger or not bigger resolution) and the closest (upwards) of the given breakpoints. I hope this clarifies things a bit!

    Cheers,
    Takis

    Thread Starter charlesoharaphoto

    (@charlesoharaphoto)

    8 years, 3 months ago

    Hi Takis,

    Thanks again for your detailed answer.

    You are right about Firefox in dev mode, it works perfectly.

    As for “Bigger dimension”, I thought it was related to the current (detected) device orientation; I think I may simply disable it.

    About NginX, the info popup in the plugin settings tells me that I should write the following code in my “configuration file”:

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

    Can you tell me exactly what configuration file it is please?

    Plugin Author Takis Bouyouris

    (@nevma)

    8 years, 3 months ago

    Hello, Charles,

    If you are using NginX as a caching server then you do not need this bit of code anywhere. It is only necessary for setups where NginX is the main application server instead of Apache. I believe this is not your case. I have simply put that message there because in the case of NginX we are not able to update the configuration file automatically.

    NginX usually has some .conf file that is up to one’s system administrator to locate and update.

    Hope this helps!

    Cheers,
    Takis

    Thread Starter charlesoharaphoto

    (@charlesoharaphoto)

    8 years, 3 months ago

    Great, thank you!

    Plugin Author Takis Bouyouris

    (@nevma)

    8 years, 3 months ago

    You are welcome!

    Let me know if the setup is working OK for you.

    Cheers,
    Takis

Viewing 7 replies - 1 through 7 (of 7 total)

The topic ‘After switching to HTTPS, image links are broken’ is closed to new replies.