• 1561
  • 0
  • Обсудить нана форуме
  • Адаптировал: infinity237
  • Уровень сложности исполнения: нужны навыки css html

Модернизируя городской портал ,решил сделать разный фон из фотографий города по времени суток,утро,день,вечер,ночь.Два дня провозился пробуя варианты с твигом, и функцией date. Решение как всегда подсказал infinity237 .Там оказалось простое условие.

Код:
{% if ((now|date("H")) >= 0) and ((now|date("H")) <= 5) %}123{% endif %}
now|date("H") - текущий выводит час
((now|date("H")) >= 0 - сравниваем текущее время больше или равно 0 то блок появляется
and - присоединения 2 условия
((now|date("H")) <= 5) - сравниваем текущее время меньше или равно 0 то блок исчезает
И так блок появляется у нас в полночь и исчезает в 5 утра

Вот мой вариант с фонами
Код:
{% if ((now|date("H")) >= 22) and ((now|date("H")) <= 24) %}<style type="text/css">body {background: url('{{ tpl_url }}/images/фонночь.jpg') fixed no-repeat;-moz-background-size:cover; /* Firefox 3.6+ */
-webkit-background-size:cover; /* Safari 3.1+ и Chrome 4.0+ */
-o-background-size:cover; /* Opera 9.6+ */
background-size: cover; /* Современные браузеры */}</style>{% endif %}
{% if ((now|date("H")) >= 6) and ((now|date("H")) <= 12) %}<style type="text/css">body {background: url('{{ tpl_url }}/images/утро.jpg') fixed no-repeat;-moz-background-size:cover; /* Firefox 3.6+ */
-webkit-background-size:cover; /* Safari 3.1+ и Chrome 4.0+ */
-o-background-size:cover; /* Opera 9.6+ */
background-size:cover; /* Современные браузеры */}</style>{% endif %}
{% if ((now|date("H")) >= 12) and ((now|date("H")) <= 18) %}<style type="text/css">body {background: url('{{ tpl_url }}/images/день.jpg') fixed no-repeat;-moz-background-size:cover; /* Firefox 3.6+ */
-webkit-background-size:cover; /* Safari 3.1+ и Chrome 4.0+ */
-o-background-size:cover; /* Opera 9.6+ */
background-size: cover; /* Современные браузеры */}</style>{% endif %}
{% if ((now|date("H")) >= 18) and ((now|date("H")) <= 22) %}<style type="text/css">body {background: url('{{ tpl_url }}/images/вечер.jpg') fixed no-repeat;-moz-background-size:cover; /* Firefox 3.6+ */
-webkit-background-size:cover; /* Safari 3.1+ и Chrome 4.0+ */
-o-background-size:cover; /* Opera 9.6+ */
background-size:cover; /* Современные браузеры */}</style>{% endif %}
{% if pluginIsActive('rss_export') %}<link href="{{ home }}/rss.xml" rel="alternate" type="application/rss+xml" title="RSS" />{% endif %}
{% if ((now|date("H")) >= 0) and ((now|date("H")) <= 6) %}<style type="text/css">body {background: url('{{ tpl_url }}/images/фонночь.jpg') fixed no-repeat;-moz-background-size:cover; /* Firefox 3.6+ */
-webkit-background-size:cover; /* Safari 3.1+ и Chrome 4.0+ */
-o-background-size:cover; /* Opera 9.6+ */
background-size: cover; /* Современные браузеры */}</style>{% endif %}

Можешь почитать и вот эту статейку "HTML caption"

mistakes

Это тоже интересно

Уважаемый посетитель, Вы зашли на сайт как незарегистрированный пользователь.
Мы рекомендуем Вам зарегистрироваться либо войти на сайт под своим именем.

Ваше мнение

Как вам наш дизайн сайта?
Результаты

Облако тегов

Anything in here will be replaced on browsers that support the canvas element