Плагин Joomla для вывода команды сайта с портфолио

Если у вас есть сайт на Joomla и нужно красиво показать сотрудников, логопедов, воспитателей или любую другую команду — этот материал для вас. Я сделал простой и удобный плагин, который выводит карточки сотрудников из обычных статей, с фотографиями, должностью и полным резюме в модальном окне.

Раньше приходилось вручную верстать блоки, копировать HTML, следить за количеством карточек в ряду. И главная проблема, что менеджеры не знают HTML, и постоянно ломали верстку, когда добавляли новых сотрудников. Теперь всё автоматически. Создаёте категорию, добавляете статьи-сотрудников, в нужном месте ставите тег {darvil_team} — и готово.

В этой статье я расскажу, как устроен плагин, как его установить и как добавлять сотрудников. Код вы можете скачать или скопировать — всё работает из коробки.

---

Что умеет плагин

• Выводит карточки сотрудников из выбранной категории
• Автоматически выстраивает карточки в сетку (по 4 в ряд на большом экране, адаптивно)
• Берёт фото из стандартного поля изображений статьи
• Берёт должность из краткого описания (introtext)
• Полное резюме показывает в модальном окне (из полного текста статьи)
• Вставляется в любую статью тегом {darvil_team}
• Не требует создания отдельных таблиц в базе данных — использует стандартные таблицы Joomla

---

Структура плагина

Плагин состоит из нескольких файлов. Вот как они выглядят:

darvil_team/
├── darvil_team.php          # основной код плагина
├── darvil_team.xml          # файл установки и настроек
├── tmpl/
│   └── default.php          # шаблон вывода карточек
└── language/
    └── ru-RU/
        └── ru-RU.plg_content_darvil_team.ini   # русский язык

Файлы нужно разместить в папке /plugins/content/darvil_team/ на сервере, после чего обнаружить и включить плагин в админке Joomla.

1. darvil_team.php — основной файл

Этот файл отвечает за логику: поиск тега в статье, получение данных из базы данных, передачу их в шаблон.

<?php
defined('_JEXEC') or die;

class PlgContentDarvil_team extends JPlugin
{
    public function __construct(&$subject, $config)
    {
        parent::__construct($subject, $config);
        $this->loadLanguage();
    }
    
    public function onContentPrepare($context, &$article, &$params, $page = 0)
    {
        if ($context != 'com_content.article') {
            return;
        }
        
        if (strpos($article->text, '{darvil_team}') === false) {
            return;
        }
        
        $categoryId = $this->params->get('category_id', 0);
        $columns = (int) $this->params->get('columns', 4);
        
        if (!$categoryId) {
            $article->text = str_replace('{darvil_team}', 
                '<div class="alert alert-warning">Ошибка: не выбрана категория сотрудников</div>', 
                $article->text);
            return;
        }
        
        $members = $this->getTeamMembers($categoryId);
        
        if (empty($members)) {
            $article->text = str_replace('{darvil_team}', 
                '<div class="alert alert-info">Нет сотрудников в выбранной категории</div>', 
                $article->text);
            return;
        }
        
        $colClass = 'col-lg-' . (12 / $columns);
        
        ob_start();
        include dirname(__FILE__) . '/tmpl/default.php';
        $html = ob_get_clean();
        
        $article->text = str_replace('{darvil_team}', $html, $article->text);
    }
    
    private function getTeamMembers($categoryId)
    {
        $db = JFactory::getDbo();
        $query = $db->getQuery(true);
        
        $query->select($db->quoteName(array('id', 'title', 'alias', 'introtext', 'fulltext', 'images', 'catid')))
              ->from($db->quoteName('#__content'))
              ->where($db->quoteName('catid') . ' = ' . (int) $categoryId)
              ->where($db->quoteName('state') . ' = 1')
              ->order($db->quoteName('ordering') . ' ASC');
        
        $db->setQuery($query);
        
        try {
            return $db->loadObjectList();
        } catch (Exception $e) {
            return array();
        }
    }
}

2. darvil_team.xml — файл установки и настроек

Здесь хранятся параметры плагина: выбор категории и количество колонок.

<?xml version="1.0" encoding="utf-8"?>
<extension type="plugin" group="content" version="3.9" method="upgrade">
    <name>Команда ДАРвиль</name>
    <author>Your Name</author>
    <creationDate>2026-03-27</creationDate>
    <copyright>Copyright (C) 2026</copyright>
    <license>GNU General Public License version 2 or later</license>
    <authorEmail>email@site.com</authorEmail>
    <authorUrl>https://site.com</authorUrl>
    <version>1.0.0</version>
    <description>Выводит карточки сотрудников по тегу {darvil_team}</description>
    
    <files>
        <filename plugin="darvil_team">darvil_team.php</filename>
        <folder>tmpl</folder>
        <folder>language</folder>
    </files>
    
    <config>
        <fields name="params">
            <fieldset name="basic">
                <field
                    name="category_id"
                    type="category"
                    label="Категория сотрудников"
                    description="Выберите категорию, в которой созданы статьи-сотрудники"
                    extension="com_content"
                    required="true"
                />
                
                <field
                    name="columns"
                    type="list"
                    label="Количество колонок"
                    description="Сколько карточек в ряд на десктопе"
                    default="4"
                >
                    <option value="2">2 колонки</option>
                    <option value="3">3 колонки</option>
                    <option value="4">4 колонки</option>
                    <option value="6">6 колонок</option>
                </field>
            </fieldset>
        </fields>
    </config>
</extension>

3. tmpl/default.php — шаблон вывода карточек

Этот файл формирует HTML-код карточек и модальных окон.

<?php
defined('_JEXEC') or die;

$root = JURI::root();
?>

<div class="container col-lg-9 col-md-12 col-sm-12" style="margin-top:2em; margin-bottom:2em">
    <div class="row">
        
        <?php foreach ($members as $member): ?>
            <?php
            // Получаем изображение и его параметры
            $images = json_decode($member->images, true);
            $photo = '';
            $caption = ''; // это будет должность
            
            if (isset($images['image_intro']) && !empty($images['image_intro'])) {
                $photo = $root . $images['image_intro'];
                // Берём подпись к картинке (caption)
                $caption = isset($images['image_intro_caption']) ? $images['image_intro_caption'] : '';
            } elseif (isset($images['image_fulltext']) && !empty($images['image_fulltext'])) {
                $photo = $root . $images['image_fulltext'];
                $caption = isset($images['image_fulltext_caption']) ? $images['image_fulltext_caption'] : '';
            } else {
                $photo = $root . 'images/placeholder.jpg';
            }
            
            // Разбираем ФИО из заголовка
            $nameParts = explode(' ', $member->title, 2);
            $lastname = isset($nameParts[0]) ? $nameParts[0] : '';
            $firstname = isset($nameParts[1]) ? $nameParts[1] : '';
            
            // Уникальный ID для модального окна
            $modalId = 'teamModal_' . $member->id;
            ?>
            
            <div class="col-sm-12 col-md-12 <?php echo $colClass; ?>" style="text-align:center; background:#4645a3; border:#3d3c92 5px solid; margin-bottom:20px;">
                <img src="<?php echo $photo; ?>" style="border-radius:50%; margin-top:1em; padding-bottom:1em; width:100%"><br/>
                <p class="bold" style="font-weight:bold; color:#fff;"><?php echo $lastname; ?><br/> <?php echo $firstname; ?></p>
                
                <?php if (!empty($caption)): ?>
                    <p style="color:#fff;"><?php echo htmlspecialchars($caption); ?></p>
                <?php endif; ?>
                
                <div class="button" style="margin-bottom:1em;">
                    <button type="button" class="btn btn-primary btn-light" data-bs-toggle="modal" data-bs-target="#<?php echo $modalId; ?>">
                        Резюме
                    </button>
                </div>
            </div>
            
            <!-- Модальное окно с полным резюме -->
            <div class="modal fade" id="<?php echo $modalId; ?>" tabindex="-1" aria-hidden="true">
                <div class="modal-dialog modal-lg">
                    <div class="modal-content" style="color:#fff; text-align:left; background: #313075; padding:1em">
                        <div class="container">
                            <div class="row">
                                <div class="col-sm">
                                    <button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal" aria-label="Close"></button>
                                    <p style="font-size: 16pt; font-weight:bold;"><?php echo $member->title; ?></p>
                                    
                                    <?php if (!empty($caption)): ?>
                                        <p><span style="color:#ffd966;"><?php echo htmlspecialchars($caption); ?></span></p>
                                    <?php endif; ?>
                                    
                                    <div style="color:#fff;">
                                        <?php 
                                        // Резюме из полного текста
                                        if (!empty($member->fulltext)) {
                                            echo $member->fulltext;
                                        } else {
                                            echo $member->introtext;
                                        }
                                        ?>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            
        <?php endforeach; ?>
        
    </div>
</div>

<style>
.row {
    display: flex;
    flex-wrap: wrap;
}
.btn-close-white {
    filter: invert(1);
    margin-bottom: 15px;
}
</style>

4. language/ru-RU/ru-RU.plg_content_darvil_team.ini — языковой файл

; Russian language file for plg_content_darvil_team
PLG_CONTENT_DARVIL_TEAM="Команда ДАРвиль"
PLG_CONTENT_DARVIL_TEAM_DESC="Плагин выводит карточки сотрудников из выбранной категории"

Как установить плагин вручную

Если у вас нет возможности или желания возиться с ZIP-архивом, можно установить плагин вручную через FTP или файловый менеджер хостинга.

1. Зайдите в папку /plugins/content/ на вашем сервере.
2. Создайте там папку darvil_team.
3. Скопируйте в неё все файлы, как показано в структуре выше.
4. Зайдите в админку Joomla → Расширения → Плагины.
5. Нажмите кнопку Обнаружить (слева вверху).
6. В списке появится плагин Команда ДАРвиль. Поставьте галочку и нажмите Установить.
7. Найдите плагин в списке, нажмите на название, включите его и выберите категорию сотрудников.

---

Как подготовить данные

1. Создать категорию для сотрудников

В админке Joomla: Материалы → Категории → Создать.

• Заголовок: Сотрудники
• Статус: Опубликовано

2. Создать статьи-сотрудников

В админке: Материалы → Материалы → Создать.

• Заголовок: Фамилия Имя Отчество (например, Андреева Виктория Николаевна)
• Категория: выберите Сотрудники
• Статус: Опубликовано
• Изображение: загрузите фото сотрудника (вкладка "Изображения и ссылки")
• Краткое описание (introtext): укажите должность (например, Директор сети логопедических садов)
• Полный текст (fulltext): вставьте полное резюме с образованием, опытом, курсами и т.д.

3. Создать страницу с выводом команды

Создайте статью и в тексте укажите:

{darvil_team}

Создайте пункт меню, ведущий на эту статью, и откройте страницу на сайте.

---

Настройки плагина

В админке Joomla зайдите в Расширения → Плагины → Команда ДАРвиль. Там доступны два параметра:

• Категория сотрудников — выберите категорию, в которой лежат статьи-сотрудники.
• Количество колонок — сколько карточек показывать в ряд на больших экранах (по умолчанию 4).

---

Заключение

Плагин получился простым, но очень удобным. Он не требует сложной настройки, работает на стандартных механизмах Joomla и позволяет гибко управлять командой сайта. Добавление нового сотрудника сводится к созданию обычной статьи в нужной категории — карточка появляется автоматически.

Если вы хотите изменить оформление карточек, редактируйте файл tmpl/default.php. Если нужна поддержка кастомных полей или дополнительных данных — код легко дорабатывается.

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

стили сами делайте ) но если в коментах попросите то "вырежу" стиль и опубликую тут

---

Категории:

Категории

• Главная
• 1С
• 2040
• AD
• CG
• IOT умный дом
• Joomla
• Linux
• macOS
• mysql
• php
• SEO
• Windows
• Безопасность
• Железо
• Защита данных
• Простотак
• Сети LAN
• Создание сайтов
• Электрика
• Электроника

← Назад к списку