3273
- 0
- Обсудить на :на форуме
- Адаптировал: infinity237
- Уровень сложности исполнения: нужны навыки css html
Модернизируя городской портал ,решил сделать разный фон из фотографий города по времени суток,утро,день,вечер,ночь.Два дня провозился пробуя варианты с твигом, и функцией date. Решение как всегда подсказал infinity237 .Там оказалось простое условие.
Код:
{% if ((now|date("H")) >= 0) and ((now|date("H")) <= 5) %}123{% endif %}((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 %}Можешь почитать и вот эту статейку "Адаптивная галерея на jquery плагине LEAST.JS"
Это тоже интересно
03.08.17Дата на русском часть вторая
