Changing htaccess RewriteCond to allow access to specific file in otherwise blocked directory to use php variables in css

[wwwouter]

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.

[BillH]

Welcome to the forums!

If you don't want to use inline CSS, would you be happy with including the CSS in the template file's head section? Something along the lines of:

<style>.hero{background: url(<?=$page->hero_image->url?>) no-repeat;}</style>

Or you could build the style line in a separate PHP file and include the file. I may be missing something, but I'm not sure that placing the PHP getting the image URL in a linked CSS file would be more scalable or cleaner than placing it in an included PHP file. And you could avoid having to wrestle with htaccess!

[horst]

On 2/27/2021 at 6:23 PM, wwwouter said:

P.s. this is my first post here, I hope it's submitted in the right forum and my explanation is clear.

Looks fine to me 🙂

Hi @wwwouter, welcome to the forums.

To your question about generating a dynamic CSS file via PHP, I would do it like this:

1) create a php file for example called "dyncss.php" and copy it under site/templates/ (look that it starts with a namespace signature "<?php namespace ProcessWire;"

2) in pw admin under setup > templates > addNew create a new template and select dyncss as its template file

3) in your site/config.php create a appropriate content header for css files, according to the advice "To add more content types see contentTypes in /wire/config.php (and add them in /site/config.php)."

// in site/config.php merge our custom types into the existing core ones
$config->contentTypes = array_merge($config->contentTypes,
    array(
        'css' => 'text/css'
    )
);

4) now open the template in backend under setup > templates > dyncss and adjust some settings:
     a) under family tab set "no, may not have children" and  for example "can be used for new pages = one", if you only want to have one unique page of this type
     b) under the files tab disable the compiler, under content type select css, and if you use delayed output with prepend and append files you have to disable this here for this content type
     c) adjust others as you may like or need and save and close the template

5) create a page in your page tree that has this template, give the page a page name that you want to call as url for your dynamic css file for example "mycss"

6) put all your php/css magic into the php file under site/templates and add the URL of your generated page where ever you need it in your generated html

If you later on want to use more than one dynamic css file, you can decide to allow more than one page with that template, or go the root with url-segments and a single page what I would prefer.

But first I hope this can be a good starting point to get you going. If questions arise, come back here into this thread again and ask. 🙂
Happy exploring and coding.

Edited March 2, 2021 by horst
corrected typos

[wwwouter]

Thank you both! @horst your solution works great for me. Configuring content types is a part of PW I was not yet familiar with.
It's so cool to discover new ways in which PW is such a powerfull and customizable product.

This solves my problem, but I'm still curious why my altered RewriteCond didn't work, if anyone knows the answer to that I'd love to know!