В этой статье мы рассмотрим как можно сделать симпатичную сетку сателитов с разными дизайнами. Советую конечно купить вёрстку понравившихся сайтов на http://themeforest.net/ в HTML и CSS версии свёрстанных на Bootstrap 3, тогда сайт у нас будет сразу адаптивным и поисковики будут намного эфективней индексировать странички. Можно конечно рипнуть понравившийся шаблон с помощью програмки Cyotek WebCopy, но это на свой страх и риск. Итак приступим. Для удобства я для себя накатал простенький компонент под названием Satellite в который включил такие разделы как видео с Youtube и панель сайтов, аналог PR-CY панели. Табличка для Youtube под названием modx_satellite_youtube простая и имеет следующие поля в базе: id, video, title, description, context В video мы будем парсить ссылки, в title — заголовок, в description — описание и наконец в context контекст нашего сайта для которого будем ваять контент. Нам нужна структура, чтобы всё у нас было по папочкам. Для этого создайте в Категориях папку Satellite, а в неё создайте категорию с url'ом вашего сайта, чтобы в конечном счёте у нас получилась примерно такая структура. За пример возьмём один из сателитов babysecret34.ru, который находится на этой же установке MODX, что и наше сообщество:
Как видим из скриншота, в категории Satellite -> babysecret34.ru у нас расположены шаблоны в начале которых большими буквами написано BABYSECRET34.RU: и после двоеточия название шаблона по предназначению. По такой же схеме делаем чанки:
А вот как выглядит чанк tpl.BABYSECRET34.RU.head:
[[MinifyX? &minifyCss=`1` ®isterCss=`1` &cssSources=Как можно заметить в корне у нас есть папки с вложеностью: assets --sites ----babysecret34.ru и в этой папке assets/sites/babysecret34.ru/ у нас храняться файлы нашего сайта. Так же вы можете заметить такой плейсхолдер [[++msat_images]], мы создали его через системные настройки:assets/sites/babysecret34.ru/style.css, assets/sites/babysecret34.ru/screen.css, assets/sites/babysecret34.ru/custom.css, assets/sites/babysecret34.ru/rs-plugin/css/settings.css&minifyJs=`1` ®isterJs=`1` &jsSources=assets/sites/babysecret34.ru/js/main.js, assets/sites/babysecret34.ru/js/libs/modernizr.min.js, assets/sites/babysecret34.ru/js/libs/respond.min.js, assets/sites/babysecret34.ru/js/jquery.spritely.min.js, assets/sites/babysecret34.ru/js/jquery.easing.min.js, assets/sites/babysecret34.ru/js/general.js, assets/sites/babysecret34.ru/js/hoverIntent.js, assets/sites/babysecret34.ru/rs-plugin/js/jquery.themepunch.plugins.min.js, assets/sites/babysecret34.ru/rs-plugin/js/jquery.themepunch.revolution.min.js]]
Как видим на скриншоте, у нас появились уникальные системные настройки, которые путь до нужной папки подставляют из плейсхолдера [[++http_host]] мы видели такую системную настройку в настройках контекста. Главное в папке /assets/sites/ создавать папку с вашим контекстом, который по умолчанию должен являться адресом. А вот таким образом мы выводим видео с YouTube, которые находятся у нас в базе:
[[!pdoPage? &class=`Youtube` &tpl=`tpl.BABYSECRET34.RU.youtubelist` &element=`YouTubeList` &limit=`15` &context=`[[++site_url]]` &where=`{«context:>»:[[++site_url]]}` &tplPage=`@INLINE [[+pageNo]]` &tplPageWrapper=`@INLINE [[+first]][[+prev]][[+pages]][[+next]][[+last]]` &tplPageActive=`@INLINE [[+pageNo]]` &tplPageFirst=`@INLINE «` &tplPageLast=`@INLINE »` &tplPagePrev=`@INLINE «` &tplPageNext=`@INLINE »` &tplPageSkip=`@INLINE ...` &tplPageFirstEmpty=`@INLINE «` &tplPageLastEmpty=`@INLINE »` &tplPagePrevEmpty=`@INLINE <` &tplPageNextEmpty=`@INLINE >` ]]
[[!+page.nav]]
Для этого нужно установить pdoTools и создать сниппет YouTubeList с таким содержимым:
getService('pdofetch','pdoFetch', $path, $scriptProperties);
$pdoFetch->setConfig($scriptProperties);
return $pdoFetch->run();
а чанк tpl.BABYSECRET34.RU.youtubelist
Для работы ссылок в виде /video/234/ нам нужно установить Virtual Page, или же UserProfile2, который автоматом ставит этот компонент. Для отображения видео нужно создать снипет YouTube:
This video requires the free Flash plugin.")
&related - Show related videos? (boolean, default 1)
&autoplay - Sets whether or not the initial video will autoplay when the player loads (boolean, default 0)
&loop - Sets whether video will loop (boolean, default 0)
&disablekb - Disable keyboard controls (boolean, default 0)
&egm - Enhanced Genie Menu - Causes menu ti appear when user's mouse enters video instead of clicking menu button (boolean, default 0)
&border - Display a border around the video player, the colors can be set with color paramaters (boolean, default 0)
&color1, &color2 - Hexadecimal color for the border colour and video control bar/secondary border color respectively (hex)
*/
//SETTINGS
$width = isset($width)?$width:100;
$height = isset($height)?$height:350;
// YouTube API settings
$related = isset($related)?$related:true;
$autoplay = isset($autoplay)?$autoplay:false;
$loop = isset($loop)?$loop:false;
$disablekb = isset($disablekb)?$disablekb:false;
$egm = isset($egm)?$egm:false;
$border = isset($border)?$border:false;
$color1 = isset($color1)?$color1:'';
$color2 = isset($color2)?$color2:'';
// Javascript
$js = isset($js)?$js:true;
$swfobject_url = isset($swfobject_url)?$swfobject_url:'/assets/js/swfobject/swfobject.js';
$swfobject_express_url = isset($swfobject_url)?$swfobject_url:'/assets/js/swfobject/expressInstall.swf';
$missing = isset($missing)?$missing:'This video requires the free Flash plugin.
';
// If a URL is supplied, work out the ID part of it
if (isset($url) && $ytid = (getIdFromUrl(urldecode($url))) ) {
// $ytid is already set
} else if (isset($id)) {
$ytid = $id;
} else { // No URL or ID supplied
return;
}
// Ensure the "related" value is appropriate for the YouTube URL
$related_val = ($related)?'&rel=1':'&rel=0';
$autoplay_val = ($autoplay)?'&autoplay=1':'&autoplay=0';
$loop_val = ($loop)?'&loop=1':'&loop=0';
$disablekb_val = ($disablekb)?'&disablekb=1':'&disablekb=0';
$egm_val = ($egm)?'&egm=1':'&egm=0';
$border_val = ($border)?'&border=1':'&border=0';
$color1_val = (!empty($color1))?'&color1='.$color1:'';
$color2_val = (!empty($color2))?'&color2='.$color2:'';
// Construct the YouTube URL
$yturl =' http://www.youtube.com/v/'.$ytid.$related_val.$autoplay_val.$loop_val.$disablekb_val.$egm_val.$border_val.$color1_val.$color2_val.'&hl=en&theme=light&version=3';
// HTML template, based on cross-browser recommendation from SWFobject project
$html = '
Статья носит ознакомительный характер. Статья сырая, для удобочитаемого руководства привиду в ближайшее время. Пишите комментарии, буду рад любой критике. Предыдущие статьи: Сетка сателитов и парсер контента на MODX Revo (часть 1) Сетка сателитов и парсер контента на MODX Revo (часть 2) Сетка сателитов и парсер контента на MODX Revo (часть 3) Сетка сателитов и парсер контента на MODX Revo (часть 4) 
Комментарии ()