From app/uploads to wp-content/uploads - correct path for linking to images in uploads in CSS

I use images from the uploads dir in my stylesheet for backgrounds etc. When working in dev env the path looks like: /app/uploads/2017/12/img.png. But obviously when this doesn’t work on production - uploads are in wp-content, not app.

The production site is on shared hosting, so I am unable to deploy directly to the site. Is this something that is usually resolved when changing the environment from development to production?

So in my case where I am unable to do this, how do I resolve this issue with paths?

Ideally your dev and production environments should match as closely as possible, so if you’re limited by the production environment, you might need to consider changing your dev setup.

Trellis is designed as a full solution but if you can’t take advantage of the complete workflow, it’s more likely to complicate things. Are you unable to use the same directory structure on the production server? For cases like this, I’d use Sage on its own… You can extract the theme even if you’ve already developed it.

Also, it seems like an odd approach to be referencing images in the uploads folder where they could so easily be deleted… Any reason why you don’t include these images in your theme and take advantage of the Sage optimisation and versioning of assets?

PS: If you really want to stick with the current setup, I guess you could just use relative CSS paths, eg. ../../uploads/2017/12/img.png - this should work because the relative location of the stylesheet to the uploads folder is always the same, regardless of whether you use the Trellis structure or the default WP structure.

3 Likes

Hardcoding links to media should be avoided. Using something like https://www.advancedcustomfields.com/resources/image/ is preferred for what you’re trying to accomplish.