Как вывести картинку в контенте нажимая поделится в соцсети modx evo?

Для того чтобы вывести картинку в контенте и добавить функционал "Поделиться" в социальные сети в MODX Evolution, вам понадобится использовать плагин и шаблон для вывода элементов контента.

Для начала, установите и активируйте плагин "SocialShare" в административной панели MODX Evolution. Этот плагин добавит кнопки "Поделиться" в ваш контент.

Шаг 1. Создание переменных:
В файле шаблона, где вы хотите отобразить контент с кнопками "Поделиться", создайте переменные, в которых будет храниться URL страницы и путь к изображению, которое вы хотите поделиться. Например:

[[!SetVar?
    &var=`shareURL`
    &value=`[[++site_url]][[~[[*id]]]]`
    &type=`string`
]]

[[!SetVar?
    &var=`shareImage`
    &value=`[[!phpthumb? &input=`[[*tv.image]]` &options=`w=400,h=300`]]`
    &type=`string`
]]

Здесь мы создаем две переменные - shareURL и shareImage. shareURL содержит URL текущей страницы, а shareImage содержит путь к изображению, которое мы хотим поделиться. В этом примере мы использовали плагин phpthumb для изменения размера изображения до 400x300 пикселей.

Шаг 2. Вывод контента с кнопками "Поделиться":
Теперь, используя созданные переменные, выведите контент с кнопками "Поделиться". Например:

<h1>[[*pagetitle]]</h1>
<p>[[*content]]</p>
<img src="[[+shareImage]]" alt="[[*pagetitle]]">

<div class="social-share">
    [[!SocialShare?
        &url=`[[+shareURL]]`
        &image=`[[+shareImage]]`
    ]]
</div>

В приведенном выше примере мы выводим заголовок страницы ([[*pagetitle]]), контент ([[*content]]) и изображение ([[+shareImage]]). Затем мы вставляем блок с классом social-share, в котором вызывается плагин SocialShare и передаются переменные shareURL и shareImage через параметры url и image.

Шаг 3. Стилизация кнопок "Поделиться":
Теперь, чтобы визуально стилизовать кнопки "Поделиться", вы можете использовать CSS. Например:

.social-share {
    display: flex;
    justify-content: center;
    margin-top: 20px;
}

.social-share .social-btn {
    display: inline-block;
    margin-right: 10px;
    width: 40px;
    height: 40px;
    background-color: #ccc;
    border-radius: 50%;
}

.social-share .social-btn:hover {
    background-color: #333;
}

.social-share .social-btn.facebook {
    background-color: #3b5998;
}

.social-share .social-btn.twitter {
    background-color: #55acee;
}

.social-share .social-btn.linkedin {
    background-color: #0077b5;
}

В этом примере каждая кнопка "Поделиться" имеет класс social-btn и дополнительный класс, указывающий на социальную сеть, например facebook, twitter, linkedin. Это позволяет применить разные стили для каждой кнопки социальной сети.

Таким образом, вы сможете вывести картинку в контенте и добавить кнопки "Поделиться" в социальные сети в MODX Evolution. Это позволит пользователям легко делиться вашим контентом в социальных сетях и расширит охват вашей аудитории.