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?

  • 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
up vote 6 down vote accepted

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.

  • @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. – Robson Sobral Dec 5 '13 at 21:31

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.

Your Answer

 
discard

By clicking "Post Your Answer", you acknowledge that you have read our updated terms of service, privacy policy and cookie policy, and that your continued use of the website is subject to these policies.

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