Хаки и Скрипты Next Generation CMS : TWIG, Интерфейс : Выводим блок по времени на TWIG

irbees2008 Опубликовано - 8 - мая TWIG

Обсудить на :на форуме
Адаптировал: 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 %}

Можешь почитать и вот эту статейку "Чашка чая на CSS3"

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

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