Really struggling getting css images to work with this theme

[pastorryanhayden]

I hate to bug you but I cannot for the life of me figure out how relative images are supposed to work in the css. In my css file in resources I have this:

.dark_pattern {
	background: url('../img/worn_dots.png') repeat;
}

Which is compiling to to this in the /css/theme.css file:

.dark_pattern {
  background: url(/images/worn_dots.png?6f9f26572c7b2bf00a8171a41ab080f0) repeat;
}

But that folder doesn't exist and it isn't showing up on the front end. Any help would be huge. Thanks for the theme setup.

[austenc]

@pastorryanhayden Hello! I'd love to help you get images working with the theme. I recall running into trouble with this on one of my sites too. Pretty sure I ended up putting an inline style in the theme so I could use a Glide asset tag.

Will get back to you with more helpful info soon.

[pastorryanhayden]

Thanks man.  I ended up going to the mix docs and figuring out how to turn image manipulation off and then just using relative paths.  It works for now. Ryan

…

On Dec 23, 2019, 9:55 AM -0500, Austen Cameron ***@***.***>, wrote: @pastorryanhayden Hello! I'd love to help you get images working with the theme. I recall running into trouble with this on one of my sites too. Pretty sure I ended up putting an inline style in the theme so I could use a Glide asset tag. Will get back to you with more helpful info soon. — You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub, or unsubscribe.

[austenc]

Smart! Are you running mix.version in your deploy or build process?

Thought this might have been a mix configuration issue. Hope to have a better fix for you today!

[austenc]

@pastorryanhayden There are actually quite a few approaches, so it will come down to your preference. Since I don't want to assume too much about how people might like to set up Laravel Mix and images, this theme probably shouldn't have a default opinion. I'll be making a new version for Statamic v3 that includes a lot more features/opinions anyway.

Option 1
You can disable URL processing of css files, add this to your webpack.mix.js file:

  .options({
    processCssUrls: false,
   // other options here
  })

This method should allow you to use the relative assets like you mentioned in your issue description. Perhaps this is how you already solved it?

Option 2
You can put your images at a top level (in your whole statamic site) folder like /img. I've used this strategy before in a pinch, but then your theme's assets aren't contained in the theme's folder.

Option 3
You can use absolute URLs in your css. Statamic makes theme files available publicly by default. Your css might look like:

.dark_pattern {
	background: url('/site/themes/freebird/img/worn_dots.png') repeat;
}

Let me know if one of those works better for you! If you would expect something to work differently I'm happy to entertain other options too. Thanks :)