качество и надёжность с 2008 года

8 (800) 200-25-11

Техническая поддержка support@komtet.ru —

круглосуточно и без выходных дней

load-whois

Онлайн-касса

для интернет-магазина

Подключите ваш интернет-магазин

к онлайн-кассе в соответствии с 54-ФЗ

Главная Техническая библиотека Блоги Movable Type Функции Movable Type 4.3: Менеджер ввода картинок

Функции Movable Type 4.3: Менеджер ввода картинок

В статье "Features of 4.3: Entry Asset Manager" автор описывает основные возможности новой функции (Entry Asset Manager) платформы MT (версия 4.3). Автор: Matt Jacobs

Журнал Beau сообщил о том, что обновлена документацию для MT 4.3. Сегодня у меня есть для Вас информация об одной из наших новых функций - entry asset manager (управление картинками).

Более легкий Путь

1До сих пор единственный способ связать изображение с записью (entry) состоял в том, чтобы разместить его внутри записи (entry body). После сохранения Movable Type запишет эту связь в базу данных. Для этого, около изображения был помещен тег (который делился на разделы при публикации), который вводил многих в заблуждение. В версии 4.3, мы решили сделать управление этой взаимосвязью яснее и проще.

Как Вы видите справа, каждое изображение, связанное с этой записью отображено списком в новой панели виджетов на странице редактирования записи. Всплывающее окно над изображением отображает мини скриншот. Щелчок по кнопке 'Добавить Новый' ('Add New') в виджете добавит лишь изображение к списку, а не в запись. Это означает, что Вы можете теперь использовать тег mt:EntryAssets mt:EntryAssets для доступа к изображениям, не вставляя их в запись.

Конечно, Вы все ещё можете добавлять изображения в Запись, но теперь они не будут иметь такую уродливую форму тега. Это не только упрощает работу для начинающих, но имеет также дополнительный эффект, в значительной степени улучшая производительность текстового редактора (RTE) в современных браузерах. Изменение размеров и перемещение фотографий в RTE теперь происходит очень быстро в таких браузерах, как Firefox.

Итак, что я могу сделать с его помощью? Cлайд-шоу!

Часто Вы хотите создать слайд-шоу внутри записи, но это означало бы вставку всех кодов в запись. Специалисты по шаблонам могли бы справиться с этим, но объяснить этот процесс клиенту было бы практически невозможно. Теперь им  необходимо лишь указать положение, выбрать фотографии, которые они хотят использовать в менеджере изображений (asset manager), и сохранить. Они пишут, а разработчик разрабатывает.

Я предоставляю несколько Java-скриптов, которые создадут очень простое слайд-шоу. В них нет никаких новых тегов, это лишь пример того, как Вы можете чисто отделить код от контента.

Код Слайд-шоу

Этот код не идеален, но он четко иллюстрирует функциональные возможности. Для производства, Вам следует создать настоящую функцию Javascript для всего этого - или, еще лучше, создать его в приблизительно 1/4 части от общего количества строк, используя jQuery — и предоставить несколько CSS-стилей.

Для начала вверху записи введите следующую строку html:

<div id="entry-gallery"></div>

Затем, в любом месте ниже, добавьте следующий блок Javascript. Это создаст ряд картинок записи. Затем создайте  HTML-элементы, используя DOM. И наконец, вот функции, посредством которых предыдущие и последующие ссылки загружают новое изображение в img-тег.

<script type="text/javascript">

var entryAssets = new Array(<mt:EntryAssets>'<mt:AssetThumbnailURL width="500">'<mt:Unless name="__last__">,</mt:Unless></mt:EntryAssets>);

if ( entryAssets.length != 0) {
var entrySlideshow = document.getElementById('entry-gallery');
var imgIndex = 0

function viewImage(direc) {
if (direc == 'next') imgIndex++;
if (direc == 'prev') imgIndex--;
if (imgIndex >= entryAssets.length) imgIndex = 0;
if (imgIndex < 0 ) imgIndex = (entryAssets.length - 1);
slideshowImage.setAttribute('src',entryAssets[imgIndex]);
return false;
}

var slideshowImage = document.createElement('img');
slideshowImage.setAttribute('src',entryAssets[imgIndex]);
slideshowImage.setAttribute('alt','Slideshow Image');
entrySlideshow.appendChild(slideshowImage);

var slideshowNav = document.createElement('p');

var slideshowPrev = document.createElement('a');
slideshowPrev.setAttribute('id','slideshow-prev');
slideshowPrev.innerHTML = '&laquo; Previous';
slideshowPrev.setAttribute('href','#');
slideshowPrev.setAttribute('onclick','viewImage("prev")');
slideshowNav.appendChild(slideshowPrev);

var slideshowNext = document.createElement('a');
slideshowNext.setAttribute('id','slideshow-next');
slideshowNext.setAttribute('href','#');
slideshowNext.innerHTML = 'Next &raquo;';
slideshowNext.setAttribute('onclick','viewImage("next")');
slideshowNav.appendChild(slideshowNext);

entrySlideshow.appendChild(slideshowNav);
}

</script>

Если Вы хотите это попробовать, то Вам необходимо загрузить последнюю beta-версию или подождать выпуска основного релиза. Вы можете разместить свои собственные версии кода слайд-шоу в комментариях! Всегда приятно видеть примеры того, как люди используют функции Movable Type.

Локализованная (русская) версия блога Movable Type доступна для Клиентов хостинга КОМТЕТ.

 

Другие документы на эту тему

Виртуальный хостинг Perl/PHP/Python/Ruby

Тарифные планы «Виртуальный хостинг» — от размещения статических HTML-страниц, до поддержки PHP, Python, CGI скриптов (Shell, Perl), SSI, Ruby. В рамках тарифных планов предоставляется доступ к серверам баз данных MySQL или PostgreSQL.

Movable Type

Одна из самых мощных систем блогинга. Распространяется бесплатно, есть русская локализация.

Акция от КОМТЕТ и TemplateMonster
Клиентам — домены в подарок!
Бесплатный тест виртуального хостинга
Перенос сайта — бесплатно
Все акции
На сайте КОМТЕТ используются cookie-файлы, данные о IP-адресе и местоположении посетителей. Если, прочитав это сообщение, вы остаетесь на нашем сайте, это означает, что вы не возражаете против использования этих технологий.