0

I'm using a css file that uses channel entries tags so clients can update a background-image. However, I have embed variables setup on my template that I want to pass into the css file, but it doesn't seem to work. This is what I'm trying to do:

{exp:channel:entries channel="contact"}
    .{embed:body_class} #wrapper { background-image: url("{contact_header_photo:1920x425}"); }
{/exp:channel:entries}

where, in theory, .{embed:body_class} would output .contact

Anyone have any suggestions?

Improve this question
2
  • Is the embed that you show above a standard EE page template or a EE CSS template? – Nathan Pitman Dec 5 '13 at 12:58
  • @NathanPitman: It's an EE CSS template. – Patrick Dec 5 '13 at 15:45
6

I've been done this sometimes.

Since this code is used just on some pages, I suggest you to not use a CSS file, but the <style> tag on the head of the HTML. This situation doesn't even worth the download of the CSS: it's one single rule to be used just on one single page.

This can be an snippet:

{exp:channel:entries channel="{pr_channel}"}
<style>
    #wrapper { background-image: url("{{pr_channel}_header_photo:1920x425}"); }
</style>
{/exp:channel:entries}

On every page, you can use a preload_replace, like:

{preload_replace:pr_channel="contact"}

There are some variations of this technique you can use.

By the way, you can use the {path} variable to parse EE variables on the css:

<link rel="stylesheet" type="text/css" media="all" href="{path='channel/channel_css'}" />

This article talks about this. But the CSS will not be an embed. An embed template is intended to be part of the current final file.

Improve this answer
3
  • @RobsonSobria: What I ended up doing to solve this was just add a <style> tag within the <head> tag as suggested. From there I didn't even need to use Preload Text Replacements...I just used the embed variables setup on each template and it worked fine. After thinking through this after your response and the one below, it doesn't make sense to use a css file just for this small bit off css. – Patrick Dec 5 '13 at 20:20
  • For cases like background images, I generally just do inline style on the element itself. No need for embeds or preload_replace that way. – Tyssen Dec 5 '13 at 20:39
  • @Tyssen, I don't use the embed or the preload_replace either. My process is a little simpler. I just tried to fit Patrick's code. – Sobral Dec 5 '13 at 21:31
1

You can if you are using an EE CSS template but the question is, do you really need to?

If it's just a small bit of CSS there really is no harm in including it in the head of your HTML or even inline. The extra bit of code in your template is probably going to be much less a performance hit than shoving an entire CSS file through EE's parser.

Improve this answer

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.