New to the community? Start here

Images urls changes when applied Asset Optimization Inline css in style.css

This website has worked well for months until today when I noticed that suddenly all images that are called in the style.css of the theme have the wrong URL in the front-end.

e.g. on Home Page there is a play button in the hero section. The URL should be:

https://a***********e.com/wp-content/themes/a*******e/assets/images/a********r_play_white.svg

But for some reason now it’s this:

https://a***********e.com/assets/images/a********r_play_white.svg

What I’ve done so far to narrow it down:
– disable caching in Hummingbird
– clear asset cache in Hummingbird
– disable Optimal image optimization plugin

URLls are set in style.css like this

background-image: url(“assets/images/a****************p.svg”:wink:;

It was like this earlier but not working from yesterday.

Tue, 14 Jan 2020 13:14:05
More Hummingbird Pro discussions
Hummingbird Pro
  • Adam Czajczyk
    • Support Gorilla

    Hi Ocean Diveloper

    I hope you’re well today!

    Hummingbird will attempt to replace/update paths from relative to absolute if it’s set to push CSS to WPMU DEV CDN. It will apply the path based on a physical location of the file.

    However, if CSS is set to be inlined it’s simply “dequeued” and instead “injected” into page source “as is” so if there are any “relative” references to files (e.g. images) they’ll stay “relative” but the ‘relation” will change – simply browser will look in a different location (in this case related to the URL of the page into which such CSS is injected).

    That’s one of the reasons why this option can be separately enabled/disabled for each of the files and why it’s separate from “compress”, “combine” and “move to footer” options. The way to deal with that is to either make sure that the “inline” option is not enabled for the CSS/JS files that include images that way or to update image references so they would use absolute URLs instead of relative paths (as with absolute URLs it doesn’t matter where the CSS is located and where it’s fetched from).

    Kind regards,
    Adam

  • Ocean Diveloper
    • Site Builder, Child of Zeus

    Hello Adam,

    thank you for the explanation. This makes sense. But I’m still confused because it worked for weeks without any problems and the suddenly it didn’t. I haven’t changed anything in Hummingbird for a while and then suddenly it “broke”. Do you have an explanation for that?

    I need this inline option because that’s apparently the only way I get the background images included in the style.css to work with Optimole Image CDN. That’s the only reason why I want it inline.

    Smush CDN doesn’t seem to have the capacity yet to recognize those exact background images in my style.css at all. If I knew that Smush can deal with that I would neither need the styles inline nor would I need Optimole CDN instead of Smush CDN.

  • Predrag Dubajic
    • Support

    Hi Ocean Diveloper ,

    I see that both Astra theme and your image optimization plugin had an update in last week or so, it’s possible that one of those updates affected how the images are added and caused the issue.

    Do you have a backup before the issue started to check how the page structure looked at that point and to see if any specific updates after that are the cause of the issue?

    Best regards,
    Predrag