Функции Movable Type 4.3: Менеджер ввода картинок
Журнал Beau сообщил о том, что обновлена документацию для MT 4.3. Сегодня у меня есть для Вас информация об одной из наших новых функций - entry asset manager (управление картинками).
Более легкий Путь
До сих пор единственный способ связать изображение с записью (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 = '« 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 »';
slideshowNext.setAttribute('onclick','viewImage("next")');
slideshowNav.appendChild(slideshowNext);
entrySlideshow.appendChild(slideshowNav);
}
</script>
Если Вы хотите это попробовать, то Вам необходимо загрузить последнюю beta-версию или подождать выпуска основного релиза. Вы можете разместить свои собственные версии кода слайд-шоу в комментариях! Всегда приятно видеть примеры того, как люди используют функции Movable Type.
Локализованная (русская) версия блога Movable Type доступна для Клиентов хостинга КОМТЕТ.