Page 1 of 1

Изменение картинки для каждой страницы

Posted: Fri Jan 14, 2011 8:16 am
by al77
Сюда попробую вопросик...
Задача следующая - сайт http://tent-disign.ru/...картинка с лего прописана в css...хотелось бы в шаблоне прописать для этой картинки возможность изменения для каждой страницы...

Code: Select all

#header .container {background:url(uploads/red_diz/images/header-bg.jpg) no-repeat 100% 100%;height:513px}
пробовал по разному, но видимо не хватает навыков и знаний...посоветуйте пожалуйста какой либо вариант...пока что на ум приходит лишь свой шаблон для каждой страницы главного меню.
Шаблон прикручивал сам...поэтому могут быть косяки...

Re: Изменение картинки для каждой страницы

Posted: Fri Jan 14, 2011 1:58 pm
by Sonya
al77 wrote:Сюда попробую вопросик...
Задача следующая - сайт http://tent-disign.ru/...картинка с лего прописана в css...хотелось бы в шаблоне прописать для этой картинки возможность изменения для каждой страницы...

Code: Select all

#header .container {background:url(uploads/red_diz/images/header-bg.jpg) no-repeat 100% 100%;height:513px}
пробовал по разному, но видимо не хватает навыков и знаний...посоветуйте пожалуйста какой либо вариант...пока что на ум приходит лишь свой шаблон для каждой страницы главного меню.
Шаблон прикручивал сам...поэтому могут быть косяки...
Есть по крайней мере три варианта (но самом деле их больше :))
1. Простой, не гибкий
Прописываете в шаблоне

Code: Select all

<div id="header" style="background-image: url(uploads/images/{$content_id}.jpg)">
Вариант подразумевает, что все изображения пронумерованы по id страниц и залиты в папку uploads/images

2. Простой, для редакторов
Прописываете в шаблоне

Code: Select all

<div id="header" style="background-image: url(uploads/images/{$content_obj->GetPropertyValue('image')})">
Вариант подразумевает, что изображения выбираются во вкладке Опции при редактировании страницы.

3. Гибкий с проверкой на наличие привязанного изображения. Как и в предыдущем варианте, используете вкладку Опции при редактировании страницы, выбирая для нее нужное изображение в поле Изображение. После этого добавляете в глобальные мета-данные сайта под пунктом Администрирование в админке такой код:

Code: Select all

{if !empty($content_obj->GetPropertyValue('image'))}
<style text="text/css">
{literal}
div#header {
{/literal}
background-image: url(uploads/images/{$content_obj->GetPropertyValue('image')})
{literal}
}
{/literal}
{/if}
Убирите мысленно этого кода все {literal} и станет ясно, что он делает. При загрузке каждой страницы, он проверяет задано ли изображение под вкладкой опции, если задано, то добавляет строчку CSS для этой страницы, перекрывая значение основного стиля. Если изображение не задано, то не выдается вообще ничего. Код не тестировала.

ЗЫ: В следующий раз выговор за НЕсоздание своей темы :)

Re: Изменение картинки для каждой страницы

Posted: Mon Jan 17, 2011 10:18 am
by al77
Попытался сделать по 3-му способу... Видимо где то что то не понимаю.
Глобальные метаданные это : Администрирование сайта -> Страница по умолчанию ???
попытался подправить Ваш код, вставив то что получаю в шаблоне

Code: Select all

<!--{content_module block="Anons" module="GBFilePicker" assign=page_img_anons dir="red_diz/anons"}-->
...результат 0. Страница совершенно пустая открывается. Смарти для меня пока что темный лес.
Возможно я все же не точно описал, что хотелось бы получить.
Попробую еще раз:
...с помощью стиля прописана картинка в бекгроунде, код из css такой

Code: Select all

/* GLOBAL*/
.container {width:960px;margin:0 auto;font-size:.875em;position:relative}
#header {height:513px;background:url(images/header-tail.gif) 0 0 repeat-x #f7f7f7}
#header .container {background:url(images/header-bg.jpg) no-repeat 100% 100%;height:513px}
#content {background:#fff;padding:32px 0 60px 0}
#content .aside {width:269px;float:left;margin-right:49px}
.inner_copy, .inner_copy a {border:0;float:right;background:#fff;color:#f00;width:50%;line-height:10px;font-size:10px;margin:-220% 0 0 0;overflow:hidden;padding:0}
#content .mainContent {float:left;width:602px}
#footer {background:url(images/footer-bg.gif) 0 0 repeat-x #f2f2f2;text-align:center;padding:45px 0}
3-ей строчкой идет то, что хотелось бы индивидуально, для каждой страницы, отображать, меняя картинку в редакторе контента.
Из стилей шаблона убрал эту строку и добавляю в самом шаблоне.
Через {literal} прописать стиль

Code: Select all

{literal}
<style text="text/css">
#header .container {background:url(images/[[$page_img_anons]]) no-repeat 100% 100%;height:513px}
</style>
{/literal}
В исходном коде страницы наблюдал url(images/[[$page_img_anons]]
...как то так...извините, что сумбурно. И огромное спасибо за помощь!!!

На удивление - сам сделал)))
вставил в шаблон таким образом

Code: Select all

<style text="text/css">
#header .container 
{literal}{{/literal}background:url(uploads/{$page_img_anons}) no-repeat 100% 100%;height:513px
{literal}}{/literal}
</style>

Re: Изменение картинки для каждой страницы

Posted: Tue Apr 05, 2011 7:01 pm
by SergeyMorozov
shindyaev wrote:Рабочий код:

Code: Select all

{if $content_obj->GetPropertyValue('image') eq '-1'}
<style text="text/css">
{literal}div#contentimg { {/literal}
background: url(uploads/images/default_image.jpg);
{literal} } {/literal}
</style>
{else}
<style text="text/css">
{literal}div#contentimg { {/literal}
background: url(uploads/images/{$content_obj->GetPropertyValue('image')});
{literal} } {/literal}
</style>
{/if}
У меня этот код не заработал =(

Code: Select all

<div id="header" style="background-image: url(uploads/images/{$content_obj->GetPropertyValue('image')})">
Этот кусок свою роль выполняет на 5+. Вопрос к гуру, как сюда прикрутить проверку на пустое значение и вывод картинки по умолчанию. Заранее благодарен за помощь.
P.S. Все варианты описанные выше пробовал но безрезультатно =(