- Денис Горелов
- Модуль
- Просмотров: 0
В данном видео рассмотрим примеры массового редактирования изображений. В предыдущем видео я показывал как можно массово загружать изображения по заготовленному шаблону, кому интересно, переходите по ссылке, а в данном видео более детально будем разбирать каким образом можно массово редактировать элементы картинок и применять к ним подготовленные шаблоны.
Исходники: скачать
И так давайте приступим, и для начала добавим еще один шаблон, который будет очищать все наши стили. Перейдем в сервисы, в пункте «Массовое редактирование изображений» выберем шаблоны, и нажмем кнопку добавить, в названии пропишем «Чистка» сортировку укажем 90, у элемента обертки удалим теги, и удалим теги у элемента изображения оставим только макрос и <img />, далее сохранимся.
Перейдем на нашу страничку, где в первом видео я показывал, как массово добавлять изображения обработав их своим шаблоном. Теперь разберем, как их можно массово редактировать.
Но для начала разберем некоторые тонкости, на пару примеров.
Как видите на одной страничке представлено много фотографий, предположим, что мы хотим применить стиль первого блока ко всем изображениям.
Откроем страничку на редактирование, в визуальном редакторе первый блок представлен в виде иконок элементов изображений «Якорь», это из за того что у нас в ссылке <a> не проставлен атрибут «href» и теперь на нужно исправить все элементы в данном блоке к каждой ссылке добавить этот атрибут.
Нажмем радом с элементом в этом блоке, и в низу на тег <div>, из выпадающего списка выберем наше «Массовое редактирование изображений в выделенной области». Как видим изображения в редакторе не отобразились, причина всему тому нету атрибута href в самой ссылке для этого добавим каждому элементу и дополнительно отредактируем шаблон, кликнем по ссылке «Создать (редактировать) html шаблон», из списка выберем наш шаблон, и добавим недостающий атрибут, можем также указать порядковый номер для сортировки изображений при помощи маркера {COUNTER1}, сохранимся.
<ul id="elasticstack" class="elasticstack"> <li><img src="img/1.jpg" alt="01"/><h5>Saudade</h5></li> <li><img src="img/2.jpg" alt="02"/><h5>Tuqburni</h5></li> <li><img src="img/3.jpg" alt="03"/><h5>Retrouvailles</h5></li> <li><img src="img/4.jpg" alt="04"/><h5>Onsra</h5></li> <li><img src="img/5.jpg" alt="05"/><h5>Mamihlapinatapai</h5></li> <li><img src="img/6.jpg" alt="06"/><h5>Koi No Yokan</h5></li> </ul>
Код для редактора портфолио:
Обертка: <ul id="elasticstack" class="elasticstack"> {ITEMS} </ul> Элемент <li> <img src="{SRC}" alt="{TITLE}"/> <h5>{TITLE} Описание #{COUNTER1}</h5> </li>
<div class="slides"> <ul> <!-- Слайды --> <li><img src="images/pic1.jpg" alt="image01" /> <div>Описание #1</div> </li> <li><img src="images/pic2.jpg" alt="image02" /> <div>Описание #2</div> </li> <li><img src="images/pic3.jpg" alt="image03" /> <div>Описание #3</div> </li> <li><img src="images/pic4.jpg" alt="image04" /> <div>Описание #4</div> </li> </ul> </div>
Код для редактора Сладер:
Шаблон <div class="slides"> <ul> <!-- Слайды --> {ITEMS} </ul> </div> Элемент <li> <img src="{SRC}" alt="image{COUNTER1}" /> <div>Описание #{COUNTER1}</div> </li>
Если у Вас остались вопросы, и что-то не понятно пишите в комментариях, также можете задавать вопросы у нас на сайте, с вами был Денис, до встречи в следующих видео.
Оставить комментарий:
Отзывы
Отзывов нет.
Написать отзыв
Выбирай свою тему, и мы напишем когда выйдет по ней очередное видео.