Главная / Разработчикам / Вспомогательные классы

landings_image_collection

Коллекция для хранения изображений. Из особенностей этой коллекции следует отметить:

  • Встроенный механизм массовой AJAX-загрузки изображений;
  • Встроенный механизм создания миниатюр.

Рассмотрим эти особенности ближе.

 

AJAX-загрузка изображений

Для того, чтобы сделать загрузку изображений максимально простой, мы сделали jQuery плагин и серверную инфораструктуру для приема изображений на базе коллекции.

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

<script type="text/javascript" src="{$wa_app_static_url}js/load-image.min.js"></script>
<script type="text/javascript" src="{$wa_url}wa-content/js/jquery-plugins/fileupload/jquery.iframe-transport.js"></script>
<script type="text/javascript" src="{$wa_url}wa-content/js/jquery-plugins/fileupload/jquery.fileupload.js"></script>
<script type="text/javascript" src="{$wa_app_static_url}js/gofileupload.js"></script>

<h2 class="l-tab-caption l-block mt20">
    Изображения
</h2>
<form id="slider_file_upload" action="?module=block&action=exec&block_id={$block.id|escape}&func=uploadImages" method="POST" enctype="multipart/form-data">
    <div class="l-dropbox">
        <a class="l-fileinput-button">
            <i class="icon16 upload"></i> Выберите изображения
            <input type="file" name="files[]" multiple="">
        </a>
        <span class="gray">или просто перетащите их сюда, чтобы начать загрузку</span>
    </div>
    {$wa->csrf()}
    <div class="dialog width500px height400px" id="l_upload_notification">
        <div class="dialog-background"></div>
        <div class="dialog-window">
            <div class="l-upload-list"></div>
            <div class="dialog-buttons">
                <div class="block float-right" style="padding-top: 22px;">
                    <a href="#" class="l-cancel hint cancel">Отмена</a>
                </div>
                <div style="display:none; padding-top: 25px;" class="l-upload-errors block errormsg">
                    Некоторые файлы загружены с ошибками
                </div>
            </div>
        </div>
    </div>
</form>
<script type="text/javascript">
    $(document).ready(function() {
          $('#slider_file_upload').goFileUpload(function(jData) {
              // Будет вызвано в случае успешной загрузки изображения
              console.log(jData);
          }); 
    });
</script>

Обратите внимание на атрибут action формы. Как и откуда он берется, Вы можете прочитать в статье "Настройки блока".

Теперь серверная часть:

public function uploadImages()
{
    // Инициализация коллекции
    $image_collection_id = ifempty($this->settings['image_collection_id'], 0);
    if(!$image_collection_id)
    {
        $image_collection = new landingsImageCollection(null, $this->id);
        $this->settings['image_collection_id'] = $image_collection->getId();
        $this->saveSettings();
    }
    else {$image_collection = new landingsImageCollection($image_collection_id);}
    
    // Самая мякотка. Для загрузки нужно всего лишь вызвать этот метод коллекции    
    return $image_collection->uploadFromPost('files'); // files - имя параметра с файлами в запросе
}

 

Механизм создания миниатюр

Да, данная коллекция, получив изображение, может масштабировать его и отдавать в нужном разрешении. Чтобы получить ссылку на миниатюру, нужно вызвать метод:

landingsImageCollection::getThumbUrl($collection_id, $image_id = null, $size = null, $ext = null, $absolute = false)

Параметры:

  • collection_id - идентификатор коллекции;
  • image_id - идентификатор изображения (позиции);
  • size - размер изображения. Указывается, как принято в Webasyst, сторокой, например, '512x512' или '970x0' (если требуется фиксированный размер только по одной стороне, вторая авто);
  • ext - расширение файла изображения;
  • absolute - если true - выдаст абсолютную ссылку, иначе - относительную.

Все необходимые данные можно получить, если знать id изображения и запросить его при помощи метода getItem($item_id).

Информация