Сегодня 18 марта, среда

Какой рейтинг вас больше интересует?

получить код

Главная /

Каталог блогов

/

Cтраница блогера Заметки - Блог о web-разработке. Сервисы для блоггеров. Блоговое

Записи в блоге

	Заметки - Блог о web-разработке. Сервисы для блоггеров. Блоговое Голосов: 1 Адрес блога: http://www.blogovoe.ru/blog/ Добавлен: 2013-12-27 23:28:54 блограйдером panevin

Масштабирование картинок на лету под адаптив

2016-09-21 23:34:48 (читать в оригинале)

Приехала тут антересная задачка: верстальщик навернул на сайте адаптив, а по пожеланию заказчика сделал масштабирование превьюшек CSS`ом. Превьюшки, соответственно, стали превращаться в говно при масштабировании в 150%, а в 201,5% в полное.

Прочитал нотацию верстальщику, да делать-то нечего — надо как-то выкручиваться.

Введение
Превьюшки на десктопном разрешении 100 и 105 точек по ширине. Максимально масштабируются до 370. Я решил наваять чукотский трюк: программно нарезаются картинки с шагом в 20 точек (105, 125, 145 и т.д.), а яваскрипт подменяет src превьюшки в зависимости от отображаемой ширины. Т.е. если на разрешении 360 точек стилями превьюшка увеличена до 340 точек, то хорошо будет смотреться картинка 345 по ширине с обрезанными сторонами (тут верстальщик мне подсобил и масштабирование картинок заменил масштабированием внешнего слоя с overflow:hidden внутри которого картинка с родным размером, чтобы не билось качество).

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

Нарежем картинки и пихнём в HTML:

$file = CFile::ResizeImageGet($arItem["PREVIEW_PICTURE"]['ID'], array ('width'  => 225,
                                                                               'height' => 150
        ), BX_RESIZE_IMAGE_EXACT, TRUE);

$file_max = CFile::ResizeImageGet($arItem["PREVIEW_PICTURE"]['ID'], array ('width'  => 270,'height' => 180), BX_RESIZE_IMAGE_EXACT, TRUE);

unset($add_html);

$start_width = 105;
$start_height = 70;
$end_width = 370;
$c = 0;
$c2 = 0;
for ($i = $start_width;$i < $end_width;$i+=20) {
$nwidth = $i;
$nheight = ($nwidth / $start_width) * $start_height;
$c2 += 20;
$file_c = CFile::ResizeImageGet($arItem["PREVIEW_PICTURE"]['ID'], array ('width'  => $nwidth,'height' => $nheight), BX_RESIZE_IMAGE_EXACT, TRUE);
$add_html .= ' data-img'.$c.'="'.$file_c['src'].'"';
$add_html .= ' data-imgWidth'.$c.'="'.$file_c['width'].'"';
$add_html .= ' data-imgHeight'.$c.'="'.$file_c['height'].'"';
$c++;
}

+ HTML:
<div class="image">
<a href="<?= $arItem["DETAIL_PAGE_URL"] ?>" title="<?= $arItem["NAME"] ?>"><img
src="<?= $file["src"] ?>"
alt="<?= $arItem["NAME"] ?>"
title="<?= $arItem["NAME"] ?>" <?=$add_html; ?> /></a>
</div>

А яваскрипт уже отслеживает какая ширина блока с картинкой стала на данном разрешении, и подгрузит нужную превьюшку.

jQuery(document).ready(function() {
	if ($('.block_footer_photo_stream').html()) resizeImgs('block_footer_photo_stream',100);
	if ($('.projlist').html()) resizeImgs('projlist',105);
	if ($('.photolist').html()) resizeImgs('photolist',100);
	jQuery(window).resize(function() {
		if ($('.block_footer_photo_stream').html()) resizeImgs('block_footer_photo_stream',100);
		if ($('.projlist').html()) {
			resizeImgs('projlist',105);
			//alert('resize');
		}
		if ($('.photolist').html()) resizeImgs('photolist',100);
	});
});
function resizeImgs(cclass,step) {
var cBlock = $('.' + cclass);
var cImg = $('.' + cclass).find('a');
if (!cImg.width() || cImg.width() <= 0) cImg = $('.' + cclass + ' .image');
var imgToShow = (cImg.width() - step) / 20;
imgToShow = Math.round(imgToShow);
cBlock.find('img').each(function(e){
	if ($(this).data('img' + imgToShow)) {
		$(this).attr('src', $(this).data('img' + imgToShow));
		$(this).attr('width', $(this).data('imgWidth' + imgToShow));
		$(this).attr('height',$(this).data('imgHeight' + imgToShow));
		// alert($(this).data('img' + imgToShow) + ' - ' + $(this).data('imgWidth' + imgToShow) + ' - ' + imgToShow);return false;
	}
});
}

Вуаля!
Живой пример: http://www.stalform.ru/.

Описал как смог, сорян :) Задавайте вопросы в комменты, постараюсь помочь (задачи у всех разные, тут особый случай, хотя распростанённый)

Постоянная ссылка

Масштабирование картинок на лету под адаптив

$file = CFile::ResizeImageGet($arItem["PREVIEW_PICTURE"]['ID'], array ('width'  => 225,
                                                                               'height' => 150
        ), BX_RESIZE_IMAGE_EXACT, TRUE);

$file_max = CFile::ResizeImageGet($arItem["PREVIEW_PICTURE"]['ID'], array ('width'  => 270,'height' => 180), BX_RESIZE_IMAGE_EXACT, TRUE);

unset($add_html);

$start_width = 105;
$start_height = 70;
$end_width = 370;
$c = 0;
$c2 = 0;
for ($i = $start_width;$i < $end_width;$i+=20) {
$nwidth = $i;
$nheight = ($nwidth / $start_width) * $start_height;
$c2 += 20;
$file_c = CFile::ResizeImageGet($arItem["PREVIEW_PICTURE"]['ID'], array ('width'  => $nwidth,'height' => $nheight), BX_RESIZE_IMAGE_EXACT, TRUE);
$add_html .= ' data-img'.$c.'="'.$file_c['src'].'"';
$add_html .= ' data-imgWidth'.$c.'="'.$file_c['width'].'"';
$add_html .= ' data-imgHeight'.$c.'="'.$file_c['height'].'"';
$c++;
}

jQuery(document).ready(function() {
	if ($('.block_footer_photo_stream').html()) resizeImgs('block_footer_photo_stream',100);
	if ($('.projlist').html()) resizeImgs('projlist',105);
	if ($('.photolist').html()) resizeImgs('photolist',100);
	jQuery(window).resize(function() {
		if ($('.block_footer_photo_stream').html()) resizeImgs('block_footer_photo_stream',100);
		if ($('.projlist').html()) {
			resizeImgs('projlist',105);
			//alert('resize');
		}
		if ($('.photolist').html()) resizeImgs('photolist',100);
	});
});
function resizeImgs(cclass,step) {
var cBlock = $('.' + cclass);
var cImg = $('.' + cclass).find('a');
if (!cImg.width() || cImg.width() <= 0) cImg = $('.' + cclass + ' .image');
var imgToShow = (cImg.width() - step) / 20;
imgToShow = Math.round(imgToShow);
cBlock.find('img').each(function(e){
	if ($(this).data('img' + imgToShow)) {
		$(this).attr('src', $(this).data('img' + imgToShow));
		$(this).attr('width', $(this).data('imgWidth' + imgToShow));
		$(this).attr('height',$(this).data('imgHeight' + imgToShow));
		// alert($(this).data('img' + imgToShow) + ' - ' + $(this).data('imgWidth' + imgToShow) + ' - ' + imgToShow);return false;
	}
});
}

Постоянная ссылка

YouTube: монетизация видео

2016-09-01 12:16:58 (читать в оригинале)

Продолжительное время мне не давал покоя феномен украинского журналиста Анатолия Шария, после того как он обмолвился о своём заработке с видео на Ютубе — 20 000 € в месяц (двадцать тысяч евро в месяц! пересчитайте в наши тугрики, прослезитесь). Ну, то, конечно, недостижимая планка, у Шария > 200 000 просмотров роликов, а ролики он штампует пачками в день. Но мы попробуем, что нам, кабанам.

Делаем ролик. Не умеем делать? Спиздим чужое.

Главное авторские права не нарушать, а тут и видео удачное — во-первых оно на Вимео, есть слабая надежда, что его нет на YouTube (оказалось что уже есть, ну да ладно), во-вторых я же фактически рекламирую эту яхту, размещая ролик.

Затем включаем монетизацию роликов и связываем аккаунт на YouTube с аккаунтом в AdSense. Идём в Канал—>Монетизация
{IMG_2 alt="YouTube: монетизация видео, связь с AdSense"}

В настройках видео во вкладке Монетизация включаем её. Пол дела сделано.

Нам нужны тысячи просмотров, иначе овчинка выделки не стоит. Если у вас есть посещаемый сайт нужной тематики, проблем нет. У меня такого сайта под рукой не оказалось, я решил запилить псто на Яплакал (как раз нужная аудитория и суперпосещаемый форум). Мне повезло и псто набрал вожделенные 50 плюсов и попал на глагне :) Вуаля! > 8 000 просмотров за 2 дня. А дня через 3 раздуплится статистика Ютуба и покажет мне сколько я заработал.

Обн:
{IMG_3 alt="YouTube: монетизация видео, связь с AdSense. Доход на 100 показов"}

Т.е. доход на 1000 просмотров видею YouTube такой:
первый ролик — 0.09 $
второй ролик — 0.08 $

Постоянная ссылка

YouTube: монетизация видео

Постоянная ссылка

Перенос записей из Wordpress в Битрикс

2016-08-29 08:30:10 (читать в оригинале)

Задача:
Перенести из Wordpress все записи в Битрикс.

Решение:
Накатываем в Вордпрессе плагин Export Featured Images, делаем экспорт записей в XML файл. А теперь, самое интересное — распарсить XML и засунуть записи в инфоблок в Битриксе.
Поехали:

$DOCUMENT_ROOT = $_SERVER["DOCUMENT_ROOT"];

define("NO_KEEP_STATISTIC", true);
define("NOT_CHECK_PERMISSIONS", true);
require($DOCUMENT_ROOT."/bitrix/modules/main/include/prolog_before.php");

set_time_limit(0);
ini_set('max_execution_time', '36000');
// ini_set('memory_limit', '512M');
$IBLOCK_ID = 14;
$update = true;

//////////////
CModule::IncludeModule("iblock");
CModule::IncludeModule("catalog");
CModule::IncludeModule("sale");
$obE = new CIBlockElement();

$file = $_SERVER["DOCUMENT_ROOT"].'/scripts/wordpress.2016-06-06.xml';

$xml = simplexml_load_file($file);

function castr_str ($text,$length) {
	$temp_text = explode(" ",$text);
	$temp1_string = '';
	for ($h=0; $h 5) $text = $temp1_string.'...';
	else $text = $temp1_string;
	return($text);
}

function xmlObjToArr($obj) {
        $namespace = $obj->getDocNamespaces(true);
        $namespace[NULL] = NULL;
       
        $children = array();
        $attributes = array();
        $name = strtolower((string)$obj->getName());
       
        $text = trim((string)$obj);
        if( strlen($text) <= 0 ) {
            $text = NULL;
        }
       
        // get info for all namespaces
        if(is_object($obj)) {
            foreach( $namespace as $ns=>$nsUrl ) {
                // atributes
                $objAttributes = $obj->attributes($ns, true);
                foreach( $objAttributes as $attributeName => $attributeValue ) {
                    $attribName = strtolower(trim((string)$attributeName));
                    $attribVal = trim((string)$attributeValue);
                    if (!empty($ns)) {
                        $attribName = $ns . ':' . $attribName;
                    }
                    $attributes[$attribName] = $attribVal;
                }
               
                // children
                $objChildren = $obj->children($ns, true);
                foreach( $objChildren as $childName=>$child ) {
                    $childName = strtolower((string)$childName);
                    if( !empty($ns) ) {
                        $childName = $ns.':'.$childName;
                    }
                    $children[$childName][] = xmlObjToArr($child);
                }
            }
        }
       
        return array(
            'name'=>$name,
            'text'=>$text,
            'attributes'=>$attributes,
            'children'=>$children
        );
}
$array = xmlObjToArr($xml);
$count = 0;
$count_err = 0;
$tags = array();
foreach ($array['children'] as $item) {
	foreach ($item[0]['children']['item'] as $post) {

		$text = $post['children']['content:encoded'][0]['text'];
		if (!empty($text)) {
			$atext = strip_tags($text);
			$atext = castr_str($atext,210);
		}

		$date = $post['children']['wp:post_date'][0]['text'];
		list($day,$time) = explode(' ',$date);
		list($year,$month,$dayc) = explode('-',$day);
		$date = $dayc.'.'.$month.'.'.$year.' '.$time;

		$code = $post['children']['wp:post_name'][0]['text'];
		$name = $post['children']['title'][0]['text'];

		$status = $post['children']['wp:status'][0]['text'];
		if ($status == 'trash') $active = "N";
		else $active = "Y";

		if (empty($name)) {//если название пустое Битрикс не даст сохранить элемент
			$name = 'Без названия';
			$active = 'N';
		}
		if (empty($code)) {//сгенерируем символьный код, если он пустой
			$arParams = array("replace_space"=>"-","replace_other"=>"-");
			$code = Cutil::translit($name,"ru",$arParams);
		}


		$link = $post['children']['link'][0]['text'];//old url

		$keywords = $post['children']['wp:postmeta'][2]['children']['wp:meta_value'][0]['text'];
		unset($tags,$title,$description,$keywords);
		foreach ($post['children']['wp:postmeta'] as $k => $meta) {//титлы, дискрипшены, кейвордзы
			if ($meta['children']['wp:meta_key'][0]['text'] == '_aioseop_title') $title = $post['children']['wp:postmeta'][$k]['children']['wp:meta_value'][0]['text'];
			if ($meta['children']['wp:meta_key'][0]['text'] == '_aioseop_description') $description = $post['children']['wp:postmeta'][$k]['children']['wp:meta_value'][0]['text'];
			if ($meta['children']['wp:meta_key'][0]['text'] == '_aioseop_keywords') $keywords = $post['children']['wp:postmeta'][$k]['children']['wp:meta_value'][0]['text'];
		}
		$SECTION_ID = 13;//другое
		foreach ($post['children']['category'] as $k2 => $tag) {//распихивание записей по рубрикам, совпадающим с тегами
			if ($tag['attributes']['domain'] == 'post_tag') $tags[] = $tag['text'];
			$tag['text'] = strip_tags($tag['text']);
			if ($tag['text'] == 'разработка сайтов' || $tag['text'] == 'аудит') $SECTION_ID = 12;
			if ($tag['text'] == 'SEO') $SECTION_ID = 14;
			if ($tag['text'] == 'контекстная реклама') $SECTION_ID = 15;
			if ($tag['text'] == 'продвижение в соцсетях' || $tag['text'] == 'SMM' || $tag['text'] == 'продвижение в facebook' || $tag['text'] == 'продвижение в одноклассниках') $SECTION_ID = 16;
			if ($tag['text'] == 'аналитика' || $tag['text'] == 'аудит') $SECTION_ID = 17;
			if ($tag['text'] == 'конверсия') $SECTION_ID = 18;
	
		}
		if (!empty($tags)) $tags_txt = implode(",", $tags);
		else $tags_txt = '';

			$arSelect = array(
				"ID",
				"NAME",
				"IBLOCK_ID",
				"IBLOCK_SECTION_ID",//added
				"*",//added
				"DETAIL_TEXT",
				"ACTIVE",
				"ACTIVE_DATE",
				"SORT",
				"DETAIL_PICTURE"
			);
			$arFilter = array(
				"IBLOCK_ID" => $IBLOCK_ID,
				"IBLOCK_ACTIVE" => "Y",
				"CODE" => $code,
				//"ACTIVE_DATE" => "Y",
				//"ACTIVE" => "Y",
			);
			$r = CIBlockElement::GetList(
				array(), 
				$arFilter, 
				false, 
				false, 
				$arSelect
			);
			$arFields = Array(
				"ACTIVE" => $active,
				"IBLOCK_ID" => $IBLOCK_ID,
				"NAME" => $name,
				"CODE" => $code,
				"PREVIEW_TEXT" => $atext,
				"PREVIEW_TEXT_TYPE" => 'html',
				"DETAIL_TEXT" => $text,
				"DETAIL_TEXT_TYPE" => 'html',
				"TAGS" => $tags_txt,
				"DATE_CREATE" => $date,
				"IPROPERTY_TEMPLATES"=>Array(
					"ELEMENT_META_TITLE" => $title,
					"ELEMENT_META_DESCRIPTION" => $description,
					"ELEMENT_META_KEYWORDS" => $keywords,
				)
			);
			if ( $arCurrentItem = $r->GetNext() ) {//update
				$arFields_update = $arFields;
				$arFields_update["SECTION_ID"] = $SECTION_ID;
				$arFields_update["IBLOCK_SECTION_ID"] = $SECTION_ID;
				
				$obE->Update($arCurrentItem["ID"], $arFields_update);
				echo ''.$name.' update
';
			}
			else {//insert
				$arFields_insert = $arFields;
				$arFields_insert["CODE"] = $code;
				$arFields_insert["SECTION_ID"] = $SECTION_ID;
				
				if ( $ID = $obE->Add($arFields_insert) ) {
					//CIBlockElement::SetPropertyValuesEx($ID, $IBLOCK_ID, $arProps_add);
					echo ''.$name.' add
';
					$count++;
				}
				else {
					echo $name.' ошибка добавления
';
					$count_err++;
				}
				
			}




	}
}

echo 'Успешно: '.$count.'
';
echo 'Ошибок: '.$count_err;

Вот таким вот кандебобером. А перенос картинок опишу следующим постом.

Постоянная ссылка

Страницы: 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18

Блограйдеров
14523

Блогов
219978
(+0 сегодня)

Сообществ
1312
(+0 сегодня)

Рыбалка
по среднему баллу (5.00) в категории «Спорт»

Категория «Программы»

Взлеты Топ 5


+557	564	Виктор Имантович Алкснис
+548	625	Все для людей
+520	561	krodico
+519	560	sich
+500	511	Выводы простого человека

Падения Топ 5


-2	15	dandr
-6	11	Записки океанолога
-7	12	Internet business in Ukraine
-8	10	Markup
-9	73	Кукуц Шмукуц

Загрузка...

BlogRider.ru не имеет отношения к публикуемым в записях блогов материалам. Все записи
взяты из открытых общедоступных источников и являются собственностью их авторов.