14 заметок с тегом

верстка РСС

Отличный ресайзер изображений для 1С-Битрикс

30 ноября 2012, 15:26

Модуль для изменения размеров изображений в шаблонах битрикса.

http://zebrus.ru/resizer/

С недавних пор начал использовать этот модуль в своих проектах, очень удобно.

После установки модуля в необходимые шаблоны нужно дописать перед переменной url изображения /resize/90x0x90x0x80

Возможные параметры: /resize/WxWRxHxHRxQ

W — Число пикселей. Указываем, когда необходимо масштабирование по ширине. от 10 до 2000
WR — Число пикселей. Оставить область в центре по горизонтали.
H — Число пикселей. Указываем, когда необходимо масштабирование по высоте. от 10 до 2000
HR — Число пикселей. Оставить область в центре по вертикали.
Q — Качество jpeg компрессии генерируемой превью. от 10 до 100. По умолчанию 80

Все параметры обязательно должны быть указаны! Если вам не нужно использовать какой либо параметр просто укажите его значение 0 (например: 100x0x0x0x0).

Конечно модуль не без недостатков. Например нет возможности накладывать водяные знаки на изображения, также нет возможности регулировать резкость. Еще он некорректно обрабатывает прозрачные png изображения, добавляя им черный фон. Надеюсь разработчики не забросят его и доработают, модуль хороший и нужный.

Генерация изображений любого размера в шаблонах вывода 1С-Битрикс

30 ноября 2012, 14:31

Генерация изображения произвольного разрешения из детальной картинки в шаблоне детального просмотра:

Добавляем следующий код в файл result_modifier.php (если этого файла нет, то создаем и кладем в папку шаблона):

<? if(is_array($arResult["DETAIL_PICTURE"]))
{
	$arFilter = '';
	$arFilter = array(array('name' => 'sharpen', 'precision' => 20), 
        array('name' => 'watermark','position' =>'br',
        'size'=>'real','type'=>'image','alpha_level'=>'70',
        'file'=>$_SERVER['DOCUMENT_ROOT'].'/include/watermark_white.png'));

	$arFileTmp = CFile::ResizeImageGet(
		$arResult['DETAIL_PICTURE'],
		array('width' => 762, 'height' => 465),
		BX_RESIZE_IMAGE_EXACT,
		true, $arFilter
	);

	$arResult['DETAIL_PICTURE_762'] = array(
		'SRC' => $arFileTmp['src'],
		'WIDTH' => $arFileTmp['width'],
		'HEIGHT' => $arFileTmp['height'],
	);
}?>

В данном случае применен фильтр резкости, и наложение водяного знака на изображение.

В $arResult формируется массив $arResult['DETAIL_PICTURE_762'].
Для вывода адреса изображения, вставляем в шаблон:
$arResult['DETAIL_PICTURE_762']['SRC']

Генерация изображений произвольного разрешения для множественного свойства типа «файл»

<? if (is_array($arResult['DISPLAY_PROPERTIES']['IMAGES']))
{

	foreach ($arResult['DISPLAY_PROPERTIES']['IMAGES']['FILE_VALUE'] as $key => $arFile)
	{
		$arFilter = '';
		$arFilter = array(array('name' => 'sharpen', 'precision' => 20), 
                array('name' => 'watermark','position' =>'br',       
                'size'=>'real','type'=>'image','alpha_level'=>'70',
                'file'=>$_SERVER['DOCUMENT_ROOT'].'/include/watermark_white.png'));
		$arFileTmp = CFile::ResizeImageGet(
			$arFile,
			array('width' => 762, 'height' => 465),
			BX_RESIZE_IMAGE_EXACT,
			true, $arFilter
		);

		$arFile['PREVIEW_WIDTH'] = $arFileTmp['width'];
		$arFile['PREVIEW_HEIGHT'] = $arFileTmp['height'];

		$arFile['SRC_PREVIEW'] = $arFileTmp['src'];
		$arResult['MORE_PHOTO'][$key] = $arFile;
	}
}
?>

Для вывода в шаблоне детального просмотра, вставляем код:

Дизайн сайта Салона красоты Натальи Владыкиной

19 января 2012, 8:12

Сайт для Североуральского салона красоты.
Необходимо было сделать яркий дизайн с тёмным фоном. Верстать подобный макет пожалуй сложновато, образы в круге будут меняться, необходимо делать круглую png маску над ними.
Дизайн этого сайта отличается от всего, что я делал в последнее время. Попробовал себя в другом стиле, так сказать...)
Дизайн сайта Салона красоты Натальи Владыкиной

Разработка сайта для блинной

14 ноября 2011, 11:03

Сайт — визитка для блинной, которая недавно открылась в городе где я живу. Сделан на joomla 1.5.
http://blin-m.ru/
Не знаю, стоит ли уже переходить на джумла 1.7, ведь пока далеко не все расширения для нее работают как надо. Поэтому коммерческие проекты пока делаю на joomla 1.5.
Использую в верстке материалов на этом сайте абсолютное позиционирование элементов. Также использовал расширение Content Templater, что позволило отказаться от использования тяжелых расширений CCK, типа K2 и Resources.

Разработка сайта для блинной

Stylizer — ускорение верстки страниц в несколько раз

13 октября 2011, 13:20

Какой редактор css вы используете при верстке сайтов?
Существует множество редакторов для написания css кода, начиная от обычного windows-блокнота до такого монстра как Adobe Dreamweaver.
Но использовать dreamweaver только для того чтоб писать css код — не очень удачное решение. Он сильно нагружает систему и расходует довольно много оперативной памяти.

Stylizer — ускорение верстки страниц в несколько раз

В своей работе, я использую редактор HTMLPad.
Пишу в нём html код, javascript, php и иногда редактирую css.
Но это все обычные текстовые редакторы, в этой статье речь пойдет о другом...

Вы когда-нибудь использовали плагин firebug для mozilla firefox? ...сейчас он существует и для браузера google chrome. Думаю любой, кто занимается версткой сайтов знает этот плагин, и знает как удобно им редактировать css код, видя при этом изменения на странице сайта прямо в реальном времени. Но есть одно «Но»... Вы не можете сохранять изменения в css файлы на хостинге... Т. е. написав правила css для какого-нибудь заголовка или блока в firebug, вам нужно будет скопировать их и вставить в файлы стилей вашего сайта на хостинге.

Когда я только начинал заниматься версткой, мне казалось, что это очень неудобно... а просто писать правила в html редакторе, подгоняя отступы по несколько раз, выбирая цвет и т. д... совсем уж долго и быстро надоедает.

Я начал искать программу, которая позволяла бы редактировать css код в визуальном режиме и при этом умела бы сохранять все изменения в файлы на хостинге.
И вот после долгих поисков я её нашел. Пожалуй это уникальная программа, ничего подобного больше я не встречал. Называется она Stylizer.
Сайт разработчиков: http://www.skybound.ca/

Stylizer — ускорение верстки страниц в несколько раз

Программа платная и стоит 80 долларов, но она поразительно ускоряет продуктивность. С её помощью, верстать страницы можно в несколько раз быстрее.
Использую её уже больше года, обалденный инструмент для верстальщика.

На официальном сайте есть ознакомительная версия, которая работает 14 дней.

С одной лицензией можно использовать программу на 2-х разных компьютерах, причем один компьютер должен быть стационарный, а второй — ноутбук. Лицензия привязывается к компьютерному железу.
Каждые 90 дней можно устанавливать программу на новый компьютер, при этом на старом она работать естественно перестает)

Суффикс класса страницы в 1C-Битрикс

7 октября 2011, 16:14

Сегодня, верстая один из очередных сайтов на Битрикс столкнулся с одной небольшой задачкой... Все страницы сайта однотипные, используется один шаблон для всех. Потребовалось сделать одну страницу частично уникальной в плане дизайна и простыми манипуляциями с кодом внутри материала эту задачу нельзя было решить, нужно было немного изменить шаблон сайта на этой конкретной странице.

В джумле есть такое понятие как суффикс класса страницы, т. е. для страниц джумла можно прописывать суффикс для класса основного контейнера body или div в зависимости от конкретного шаблона.
Ну к примеру в шаблоне используется такой контейнер —
<div class=«content»>всякий разный код, бла бла бла...</div>

Суффикс класса страницы в 1C-Битрикс

Прописав суффикс для этой страницы в настройках пункта меню, мы получим что-то типо
<div class=«content_page»>всё тот же код, бла бла бла... </div>

Теперь мы можем изменять внешний вид данной страницы, добавляя в файлы css различные правила для контейнеров внутри тега div.content_page

В битриксе такого функционала по умолчанию нет, поэтому мне пришлось придумывать как добиться чего-то подобного.
Первый вариант для решения моей задачи — это скопировать основной шаблон сайта и применить копию к странице которую требуется изменить. Именно так я бы и сделал буквально несколько месяцев назад, когда только начинал изучать битрикс. Это нифига не рациональный вариант :)

Можно проще!

Переходим к редактированию шаблона сайта, ищём тэг body или любой другой контейнер. Я использовал тег <body>

Мне нужно, чтоб у страницы с адресом /services/restaurant.php был свой суффикс... ну или в данном случае просто класс для тега body

Прописываем такую конструкцию:
<body<?if($APPLICATION->GetCurPage(false)==«/services/restaurant.php»):?> class=«restaurant»<?else:?><?endif?>>

Теперь у данной страницы к тегу body будет применяться класс restaurant, а на всех остальных страницах сайта тег будет без css класса.

Сайт Краснотурьинского кирпичного завода

10 сентября 2011, 1:15

О да) И опять сайт с белым фоном... Делал уже давненько, весной... Устраивал фотосессию кирпичам)
Сайт сделан на joomla, ничего необычного, минимум страниц.
http://bkz.su/

Сайт Краснотурьинского кирпичного завода

Сайт ЖБИК (Краснотурьинского завода железобетонных изделий и конструкций)

10 сентября 2011, 0:54

Сайт краснотурьинского завода железобетонных изделий и конструкций.
Пришлось довольно долго повозиться с поиском и обработкой образов изделий.
http://www.uralgbi.ru/

Сайт ЖБИК

1C-Битрикс, разные шаблоны для разных разделов или один шаблон с условиями?

6 сентября 2011, 13:44

Когда я разрабатывал свой первый сайт на 1C-Битрикс, я нигде не мог найти информацию... Как правильно делать? Использовать много шаблонов для отдельных разделов сайта или использовать один шаблон, но прописывать в нем какие-то условия... В джумле на мой взгляд это реализовано намного удобнее. Ведь очень часто приходится выводить информацию совершенно различным образом... Почти всегда верстка главной страницы отличается от верстки внутренних. Где-то есть боковая колонка, где-то нет, где-то она с другой стороны. В joomla все это реализовано с помощью интерфейса управления модулями (блоками информации). В Битриксе такого нет, что сначала мне показалось очень неудобным.

1C-Битрикс, разные шаблоны для разных разделов или один шаблон с условиями?

Первый свой сайт я сделал на отдельных шаблонах, получилось 4 разных шаблона страниц с незначительными изменениями в дизайне... Можно было конечно реализовать все на одном шаблоне) но тогда я не умел и нигде не нашёл информацию как это делается. Может плохо искал конечно)))

В сайтах которые делаю сейчас стараюсь использовать только один шаблон, по моему так гораздо удобнее и правильнее.
Ведь очень неудобно использовать несколько шаблонов, потому что файлы стилей у них разные и приходится создавать один общий файл стилей, переносить туда основные css правила для всех шаблонов, лишняя трата времени, да и работает реализация с разными шаблонами медленнее. По крайней мере мне так показалось.

Для примера приведу небольшой кусочек кода:

Данная конструкция выводит код только на главной странице.

<?if($APPLICATION->GetCurPage(false)==SITE_DIR):?>

Какой-нибудь код

<?else:?>

<?endif?>

Сайт краснотурьинской детской больницы

5 сентября 2011, 23:41

http://dgb-krasnoturinsk.ru/

Немного необычно верстал этот сайт. Взял макет, сделал его полупрозрачным и поставил в качестве фона для тега body. Было довольно удобно, и всё сверстано точно по сетке.
Сайт сделан на CMS joomla 1.5

Сайт краснотурьинской детской больницы
Ctrl +  Ранее