Персональный блог верстальщика и php-программиста Руслана Дерепко http://derepko.ru/ ru Персональный блог верстальщика и php-программиста Руслана Дерепко DataLife Engine Множество блоков Топ новостей в DLE http://derepko.ru/modules/modules_datalife_engine/8_top-news-blocks-in-dle/ http://derepko.ru/modules/modules_datalife_engine/8_top-news-blocks-in-dle/ разных категорий. Дабы не изобретать велосипед и не тратить свое время, я решил немного погуглить в поисках быстрого решения. Нашел много всякого, но все либо платное, либо чересчур корявое и не совсем то, что мне нужно было. Буквально за две минуты я придумал очень простое и оригинальное решение: а почему бы не взять всем хорошо известный тег {custom} и его немного модифицировать? Это я собственно и сделал. Для этого нужно:
1) Открыть /engine/modules/functions.php и найти в нем функцию custom_print, которая обрабатывает custom вывод:

function custom_print($custom_category, $custom_template, $aviable, $custom_from, $custom_limit, $custom_cache, $do) {

Заеняем на:

function custom_print($custom_category, $custom_template, $aviable, $custom_from, $custom_limit, $custom_cache, $do, $top) {

Кто не заметили, здесь мы добавили $top.

2) Здесь же, в этой функции ищем:

$sql_select = "SELECT id, autor, date, short_story, full_story, xfields, title, category, alt_name, comm_num, allow_comm, allow_rate, rating, vote_num, news_read, flag, editdate, editor, reason, view_edit, tags, icon, flash_size, game_lang FROM " . PREFIX . "_post WHERE " . $stop_list . $where_category . " AND approve" . $where_date . " ORDER BY " . $fixed . $news_sort . " " . $news_msort . " LIMIT " . $custom_from . "," . $custom_limit;


Заменяем на:

if( $top == "yes") {
$sql_select = "SELECT id, autor, date, short_story, full_story, xfields, title, category, alt_name, comm_num, allow_comm, allow_rate, rating, vote_num, news_read, flag, editdate, editor, reason, view_edit, tags FROM " . PREFIX . "_post WHERE " . $stop_list . $where_category . " AND approve" . $where_date . " ORDER BY rating DESC, comm_num DESC, news_read DESC, date DESC LIMIT " . $custom_from . "," . $custom_limit;
} else {
$sql_select = "SELECT id, autor, date, short_story, full_story, xfields, title, category, alt_name, comm_num, allow_comm, allow_rate, rating, vote_num, news_read, flag, editdate, editor, reason, view_edit, tags FROM " . PREFIX . "_post WHERE " . $stop_list . $where_category . " AND approve" . $where_date . " ORDER BY " . $fixed . $news_sort . " " . $news_msort . " LIMIT " . $custom_from . "," . $custom_limit;
}


Здесь мы поставили условие - если будет указано, что в блоке выводить только Топ новости, то запрос будет немного другой, для топа новостей. Сам запрос был взят из штатного Топа новостей в DLE.

3) Открываем index.php в корне сайта и находим:

$tpl->copy_template = preg_replace ( "#\\{custom category=['\"](.+?)['\"] template=['\"](.+?)['\"] aviable=['\"](.+?)['\"] from=['\"](.+?)['\"] limit=['\"](.+?)['\"] cache=['\"](.+?)['\"]\\}#ies", "custom_print('\\\1', '\\\2', '\\\3', '\\\4', '\\\5', '\\\6', '{$dle_module}')", $tpl->copy_template );


Заменяем на:

$tpl->copy_template = preg_replace ( "#\\{custom category=['\"](.+?)['\"] template=['\"](.+?)['\"] aviable=['\"](.+?)['\"] from=['\"](.+?)['\"] limit=['\"](.+?)['\"] cache=['\"](.+?)['\"] top=['\"](.+?)['\"]\\}#ies", "custom_print('\\\1', '\\\2', '\\\3', '\\\4', '\\\5', '\\\6', '{$dle_module}', '\\\7')", $tpl->copy_template );


Здесь изменили обработку самого тега {custom}, а именно добавили один параметр - top, который может принимать значение yes или no.

На этом все прелести закончились, переходим непосредственно к самому шаблону, а точнее к месту, где будет выводить блоки Топ новостей.
Открываем main.tpl и в нужном для нас месте вставляем наш модифицированный тег {custom} следующего вида:

{custom category="1" template="custom" aviable="global" from="0" limit="10" cache="yes" top="yes"}

Надеюсь разжевывать не надо, за что отвечает каждый параметр. Внимание лишь на один - top="yes".
Догадайтесь сами, что он значит :)]]> aL13n Fri, 09 Jul 2010 11:09:22 +0300 Автоматическое создание превью с эффектом Philips Ambilight http://derepko.ru/modules/modules_datalife_engine/7_-philips-ambilight-effect-datalife-engine/ http://derepko.ru/modules/modules_datalife_engine/7_-philips-ambilight-effect-datalife-engine/ приложил хабраюзер Aidsoid. Я лишь по просьбе желающих захотел реализовать возможность создания такого эффекта и в DLE.
Итак, наша задача получить превью показанного ниже типа, используя CMS DatalifeEngine.
Автоматическое создание превью с эффектом Philips Ambilight

Делается это очень просто.

Открываем класс обработки изображений /engine/classes/thumb.class.php и находим строчку:
1) function size_auto($size = 100, $site = 0)

Выше вставляем следующий кусок кода:

function insert_bg($width, $height, $padding) {

$dest_image = imagecreatetruecolor($width, $height);

$result = imagecopyresized($dest_image, $this->img['src'], 0, 0, 0, 0, $width, $height, $this->img['lebar'], $this->img['tinggi']);

if (!$result) return FALSE;

for ($i= 0; $i <= 100; $i++) {
$result = imagefilter($dest_image, IMG_FILTER_SMOOTH, 6);
if (!$result) return FALSE;
}

if ( ($this->img['lebar'] == 0) or ($this->img['tinggi'] == 0) ) {
return FALSE;
}

$ratio = min( ($width-2*$padding)/$this->img['lebar'] , ($height-2*$padding)/$this->img['tinggi'] );

$new_width = $ratio * $this->img['lebar'];
$new_height = $ratio * $this->img['tinggi'];

if ( ($new_width >= $this->img['lebar']) or ($new_height >= $this->img['tinggi']) ) {
$new_width = $this->img['lebar'];
$new_height = $this->img['tinggi'];
}

imagecopyresampled($dest_image, $this->img['src'], round(($width-$new_width)/2), round(($height-$new_height)/2), 0, 0, $new_width, $new_height, $this->img['lebar'], $this->img['tinggi']);
$this->img['src'] = $dest_image;

return true;

}


2) return $this->crop( intval($size[0]), intval($size[1]) );

Заменяем ее на:

return $this->insert_bg( $size[0], $size[1], 10 ); // 10 - отступ

где 10 - это отступ от краев, который будет размыт.

3) При загрузке изображения указываем размеры создания тумбы, указывая ширину и высоту. Например, 150x100, либо 300x200 и т.п.

Дело сделано, пользуйтесь на здоровье. И напоследок наш результат, протестированный на DLE 8.3 и 8.5:
Автоматическое создание превью с эффектом Philips Ambilight
]]> aL13n Thu, 20 May 2010 05:04:00 +0300 Борьба с альфа прозрачностью PNG в IE6 http://derepko.ru/articles/xhtml/6_test/ http://derepko.ru/articles/xhtml/6_test/ похоронили IE 6 версии, но все же осталась довольно таки большая доля пользователей интернета по прежнему бороздящих его на своем "друге". И клиент, заказывающий верстку, порой просит поддержку IE6. Деваться нам некуда, надо делать.
Предлагаю использовать самый лучший на данный момент хак для поддержки прозрачности png изображений в Internet Explorer 6 - DD_belatedPNG.
Официальный сайт: http://www.dillerdesign.com/experiment/DD_belatedPNG/

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

Подключаем его в <head></head> и пишем комментарий, чтобы скрипт работал только для IE6:

<!--[if IE 6]>
<script type="text/javascript" src="/js/belatedpng-min.js">
<script language="javascript" type="text/javascript">
DD_belatedPNG.fix('#menu');

<![endif]-->


С помощью функции DD_belatedPNG.fix мы указываем в каком блоке, изображении обрабатывать наши png. В данном примере мы обрабатываем блок/изображение с ID menu.

Можно задавать сразу несколько селекторов:

<script language="javascript" type="text/javascript">
DD_belatedPNG.fix('.right input, #main_menu li a, .block_side, .index_page_1, .index_page_2, .index_page_3, .images img');



Огромный плюс, которым не обладает ни один подобный хак, является возможность позиционировать изображение в фоне.

Сайт автора скрипта с примерами и использованием: http://www.dillerdesign.com/experiment/DD_belatedPNG/]]> aL13n Wed, 10 Mar 2010 00:57:04 +0200 Очистка потока. Метод clearfix http://derepko.ru/articles/xhtml/5_clearing-ochistka-potoka-metodom-clearfix/ http://derepko.ru/articles/xhtml/5_clearing-ochistka-potoka-metodom-clearfix/ clear: both;, но при этом придется добавить еще несколько свойств к элементу, чтобы отображение было идентичное во всех браузерах.

Итак, вариант первый, не удовлетворяющий семантике - использование тега с определенными свойствами, среди которых clear: both.

Свойства CSS, с помощью которых происходит кроссбраузерная очистка потока:

.clr {
clear: both; /* очистка потока */
height: 0;
line-height: 0;
font-size: 0;
}


line-height: 0 и font-size: 0 используется для IE, т.к. он отображает пустоту в блоке с заданным размером шрифта и меж строчным интервалом.

Рабочий пример:







Левый блок

Правый блок







Смотреть результат.

Вариант второй: использование псевдо-класса :after для контейнера, внутри которого находятся те самые плавающие элементы, и hasLayout для IE.

.clearfix:after {
visibility: hidden;
display: block;
font-size: 0;
content: " ";
clear: both;
height: 0;
}

* html .clearfix { zoom: 1; } /* IE6 */
*:first-child+html .clearfix { zoom: 1; } /* IE7 */


Смотреть результат.

Единственный минус этого варианта в том, что данный код не проходит валидацию CSS, потому что валидатор ничего не знает о zoom. Поэтому лучше закрыть глаза на те 2 строчки ошибок и использовать именно этот вариант.

Но если Вы стремитесь к валидности кода, то можно использовать еще один вариант (в IE7 возможны глюки, куда же без них):

.clearfix:after {
visibility: hidden;
display: block;
font-size: 0;
content: " ";
clear: both;
height: 0;
}
.clearfix { display: inline-table; }
/* Hides from IE-mac \*/
* html .clearfix { height: 1%; }
.clearfix { display: block; }
/* End hide from IE-mac */


Существует еще несколько вариантов очистки потока, о которых нагляднее всего можно узнать из таблицы, приведенной здесь. Там же указано как работает тот или иной метод в разных браузерах.]]> aL13n Sun, 31 Jan 2010 19:30:39 +0200