Some context: I want to use PHP variables in my CSS (more info below) and found a solution on CSS-tricks that looks fairly elegant and somewhat solid to me. It's pretty simple, I created a file style.css.php inside the site/templates/ directory and load that in my page head. In style.css.php is the following:
<?php
header("Content-type: text/css; charset: UTF-8");
header("Charset:utf-8");
if ($homepage->hero_image) {
echo <<<CSS
.hero {
background: url($homepage->hero_image->url) no-repeat;
}
CSS;
}
?>
Because of the following RewriteCond (line 373) in the htaccess file the server sends a 403 error back when the file is requested:
# Block access to any PHP or markup files in /site/templates/ or /site-*/templates/
RewriteCond %{REQUEST_URI} (^|/)(site|site-[^/]+)/templates($|/|/.*\.(php|html?|tpl|inc))($|/) [NC,OR]
(My htaccess file is @version 3.0 and @htaccessVersion 301)
This is how I thought I could fix that (based on these answers on stack overflow) but it does not work:
# Block access to any PHP or markup files in /site/templates/ or /site-*/templates/
RewriteCond %{REQUEST_URI} (^|/)(site|site-[^/]+)/templates($|/|/((?!style\.css).)*\.(php|html?|tpl|inc))($|/) [NC,OR]
I tested the rule with htacess tester and htaccess check and both worked for me, but on my site I still get a 403 instead of the file.
I'm working on localhost, using MAMP (not sure if that's relevant).
A bit more about what I want to do achieve specifically:
I want to use an image as a background-image for an element, not place it as an image. This image is provided by the user via a field and can therefore change. I know I can achieve this like this:
echo "<section class='hero' style='background-image: url($page->hero_image->url)'></section>";
But I would prefer a method other than inlining because of scalability and cleanliness. (I admit the extra link in the page head is not ideal either)
P.s. this is my first post here, I hope it's submitted in the right forum and my explanation is clear.
