preload_replace with conditional body tag

#1 / Oct 09, 2011 9:07am

benwellby

17 posts

I’m not too sure if this is the correct forum for this post, please move if it isn’t.

I am trying to attach a class to the “body” tag that is time dependent. For example:

Between 04:00 - 12:00

<body class="morning">

Between 12:00 - 20:00

<body class="day">

Between 20:00 - 04:00

<body class="night">

The code I have so far is (imediately after “</head>”):

<!DOCTYPE html>

<html lang="en">
<head>

</head>

<!-- format HHMM -->
{preload_replace:MORNING='0400'}
{preload_replace:DAY='1200'}
{preload_replace:NIGHT='2000'}

{if '{current_time format="%H%i"}' >= '{MORNING}'}
 <body class="morning">
{if:elseif '{current_time format="%H%i"}' >= '{DAY}'}
 <body class="day">
{if:else '{current_time format="%H%i"}' >= '{NIGHT}'}
 <body class="night">
{/if}
 <!-- page content -->
 <div id="container">
  Test
 </div><!-- end page content -->
</body>
</html>

The result is a blank page. Does anyone know why this is not working or is there a more elegant way to achieve this with EE?

Regards

#2 / Oct 09, 2011 7:08pm

benwellby

17 posts

Okay, got it! After some thorough reading of the EE Docs I’ve got my head around Standard Global Variables, Preload Text Replacements and Conditionals.

The first part of the Conditional outputs the default body:

<body>

The second outputs:

<body class="day">

And the third outputs:

<body class="night">

<!DOCTYPE html>

<html lang="en">
<head>

</head>

<!-- format HHMM -->
{preload_replace:MORNING="0200"}
{preload_replace:DAY="1200"}
{preload_replace:NIGHT="1800"}

{if "{current_time format="%H%i"}" >= "{MORNING}" AND "{current_time format="%H%i"}" <= "{DAY}"}
  <body>
{if:elseif "{current_time format="%H%i"}" >= "{DAY}" AND "{current_time format="%H%i"}" <= "{NIGHT}"}
  <body class="day">
{if:else}
  <body class="night">
{/if}
 <!-- page content -->
 <div id="container">
  Test
 </div><!-- end page content -->
</body>
</html>

Yet again if anyone can think of a more elegant solution then please feel free to comment.

#3 / Oct 10, 2011 7:22am

Sue Crocker
26054 posts

I’d probably use global variables instead of preload_replace, but other than that, glad you found a solution. Would you like me to keep this open a bit longer for others to add their comments?
#4 / Oct 10, 2011 7:39am

benwellby
17 posts

Thanks Sue, I’ll look into that.

It would be great if you could keep this post alive for a little longer, I’d like to see what others suggest.

Regards
#5 / Oct 10, 2011 7:46am

Sue Crocker
26054 posts

Sounds good. When someone replies we’ll both be notified. 😊
#6 / Oct 10, 2011 6:59pm
benwellby
17 posts
As suggested, I have created three global variables; {morning} - 0200, {day} - 1200 and {night} - 1800. And I am using the following code:
```
{if "{current_time format="%H%i"}" >= "{morning}" AND "{current_time format="%H%i"}" <= "{day}"}<body>
{if:elseif "{current_time format="%H%i"}" >= "{day}" AND "{current_time format="%H%i"}" <= "{night}"}<body class="day">
{if:else}<body class="night">{/if}
```
And the result is (obviously wrong):
```
" AND "2253" <= "1200"}
```
What am I doing wrong, I’m sure it’s something simple, but I just can’t my head around the solution.

#7 / Oct 11, 2011 11:14am

Mark Bowen

12637 posts

Hi Ben,

Could you give this a go for me please :

{if '{current_time format="%H%i"}' >= '0200' AND '{current_time format="%H%i"}' <= '1200'}
<body>
{if:elseif "{current_time format='%H%i'}" >= '1200' AND "{current_time format='%H%i'}" <= '1800'}
<body class="day">
{if:else}
<body class="night">
{/if}

See if that works for you here.

Thanks,

Mark

#8 / Oct 11, 2011 1:16pm

benwellby
17 posts

Hi Mark thanks for the response. The code you supplied works as expected. Does this mean there’s a problem with my global variables?
#9 / Oct 12, 2011 1:41am

John Henry Donovan
12339 posts

benwellby,

Can you pop back in your global variables now using the syntax Mark used making sure you have all the correct single and double quotes.

#10 / Oct 12, 2011 3:37am

benwellby

17 posts

Thanks. I should have made it clear that was the first thing I tried. I used the following code:

<!DOCTYPE html>

<html lang="en">
<head>

</head>

{if '{current_time format="%H%i"}' >= '{morning}' AND '{current_time format="%H%i"}' <= '{day}'}
<body>
{if:elseif "{current_time format='%H%i'}" >= '{day}' AND "{current_time format='%H%i'}" <= '{night}'}
<body class="day">
{if:else}
<body class="night">
{/if}  

 <!-- page content -->
 <div id="container">
  Test
 </div><!-- end page content -->
</body>
</html>

which in the browser is still outputting:

’ AND ‘0735’ <= ‘1200’}

#11 / Oct 12, 2011 11:10am

Mark Bowen
12637 posts

Hi Ben,

I believe this may just be a parse order problem here. Global Variables are one of the last things to be parsed in a template and I believe that because of this they are not available to the conditionals when required.

I believe if you use Snippets instead of Global Variables though then this should fix it up for you.

Could you give that a try for me?

Thanks,

Mark
#12 / Oct 12, 2011 3:39pm

benwellby
17 posts

Nice one, Mark. Snippets solved the issue. After trying all options we got there in the end. This has been a great lesson.

Many thanks to you all.
#13 / Oct 13, 2011 2:28am

John Henry Donovan
12339 posts

Glad you are up and running in the end. Feel free to start a new thread if you have any more questions.

Thread

benwellby

benwellby

Sue Crocker

benwellby

Sue Crocker

benwellby

Mark Bowen

benwellby

John Henry Donovan

benwellby

Mark Bowen

benwellby

John Henry Donovan

Username

Password

Thread