# Интеграция с компонентом Collections

Вот как выводить превью первого изображения из галереи `Gallery3x` прямо в таблице дочерних ресурсов компонента **Collections**.

Это значительно упрощает навигацию и управление контентом, так как менеджер сразу видит, какая картинка относится к какому ресурсу.

#### Подключение JS-рендера в системных настройках

[![Screenshot_1.jpg](https://docs.ivan345.com/uploads/images/gallery/2025-09/scaled-1680-/ae8KVcEPj73BC9fA-screenshot-1.jpg)](https://docs.ivan345.com/uploads/images/gallery/2025-09/ae8KVcEPj73BC9fA-screenshot-1.jpg)

Теперь нужно "сказать" компоненту Collections, чтобы он загружал JS-файл.

1. Перейдите в **Настройки (⚙️) → Системные настройки**.
2. В фильтре выберите пространство имен **collections**.
3. Найдите ключ **`collections.user_js`** (Пользовательский JS-файл).
4. Впишите в него путь к файлу: `/assets/components/gallery3x/js/mgr/misc/renderers.js`

#### Настройка колонки в Collections

Это финальный шаг, где мы связываем всё вместе.

1. Перейдите на ресурс-контейнер и откройте настройки вида Collections (вкладка "Дочерние ресурсы" → ⚙️).
2. Откройте на редактирование или создайте новую колонку со следующими параметрами:
    
    
    - **Заголовок:** `Превью`
    - **Название:** `g3xCollectionsThumbnail`
    - **Рендерер:** `Gallery3x.renderer.image`
    - **Сниппет-рендер:** `g3xCollectionsThumbnail`
    - #### `<a href="https://docs.ivan345.com/uploads/images/gallery/2025-09/RXODGq3eZw1gYZ7K-screenshot-2.jpg" rel="noopener" target="_blank"><img alt="Screenshot_2.jpg" src="https://docs.ivan345.com/uploads/images/gallery/2025-09/scaled-1680-/RXODGq3eZw1gYZ7K-screenshot-2.jpg"></img></a>`  
          
          
        Результат:  
          
        [![Screenshot_3.jpg](https://docs.ivan345.com/uploads/images/gallery/2025-09/scaled-1680-/X02TCQqiUpjGEYPC-screenshot-3.jpg)](https://docs.ivan345.com/uploads/images/gallery/2025-09/X02TCQqiUpjGEYPC-screenshot-3.jpg)