Datalife Engine 0 комм. 83 просм.

Множество блоков Топ новостей в DLE

Понадобилось мне на днях в одном проекте на Datalife Engine вывести блоки Топ новостей из разных категорий. Дабы не изобретать велосипед и не тратить свое время, я решил немного погуглить в поисках быстрого решения. Нашел много всякого, но все либо платное, либо чересчур корявое и не совсем то, что мне нужно было. Буквально за две минуты я придумал очень простое и оригинальное решение: а почему бы не взять всем хорошо известный тег {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".
Догадайтесь сами, что он значит :)
Datalife Engine 0 комм. 680 просм.

Автоматическое создание превью с эффектом Philips Ambilight

Данный хак может послужить одним из вариантов оформления галереи фотографий в стиле технологий Philips (Philips Ambilight). Руку к реализации такого эффекта приложил хабраюзер 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
X/HTML 0 комм. 437 просм.

Борьба с альфа прозрачностью PNG в IE6

За всю историю существования Internet Explorer 6, было предложено много методов для корректного отображения PNG с альфа прозрачностью (alpha transperency). Многим думаю известно, что IE6 не поддерживает альфа-канал, а с настоящими стилями веб-дизайна без поддержки так называемых "фич" PNG создать нечто красивое и сверхъестественное очень сложно. Хоть и некоторые большие комьюнити, например, YouTube похоронили 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>
<script language="javascript" type="text/javascript">
	DD_belatedPNG.fix('#menu');
</script>
<![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');
</script>
 


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

Сайт автора скрипта с примерами и использованием: http://www.dillerdesign.com/experiment/DD_belatedPNG/
X/HTML 1 комм. 457 просм.

Очистка потока. Метод clearfix

В природе существует несколько способов очистки потока от float. И каждый из них в какой-то мере по разному работает в различных браузерах. Можно воспользоваться простым свойством clear: both;, но при этом придется добавить еще несколько свойств к элементу, чтобы отображение было идентичное во всех браузерах.

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

Свойства CSS, с помощью которых происходит кроссбраузерная очистка потока:
 
.clr {
    clear: both; /* очистка потока */
    height: 0;
    line-height: 0;
    font-size: 0;
}
 


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

Рабочий пример:
 
<html>
<head>
<style type="text/css">
.container {
	background #000000;
	border: 1px solid #666666;
}
 
.clr {
	clear: both; /* очистка потока */
	height: 0;
	line-height: 0;
	font-size: 0;
}
</style>
</head>
<body>
<div class="container">
	<div style="float: left;">Левый блок</div>
	<div style="float: right;">Правый блок</div>
	<div class="clr"></div>
</div>
</body>
</html>
 


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

Вариант второй: использование псевдо-класса :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 */


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