Выравнивание изображений и сетка

[Lilly (Lillian)]

	Краткое описание	Добавляет кнопки сетки изображений и выравнивания на панель инструментов редактора
	Репозиторий	https://github.com/Lillinator/image-alignment
	Руководство по установке	Как установить тему или компонент темы
	Новичок в темах Discourse?	Начинающее руководство по использованию тем Discourse

Установить этот компонент темы

Этот компонент темы добавляет на панель инструментов редактора постов кнопки для выравнивания загруженных изображений: по левому краю, по правому краю, по центру или в сетку с использованием недавно реализованных тегов сетки. Сетка автоматически подстраивает размер изображений в зависимости от их количества и размеров каждого изображения, а также создаёт ссылки на полноразмерные версии. Кнопки и функции выравнивания можно использовать несколько раз в одном посте для создания различных макетов. Работает как в десктопной, так и в мобильной версиях.

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

Обратите внимание: функция сетки в этом компоненте предназначена для выравнивания загруженных изображений, а не ссылок на изображения (другие варианты выравнивания работают и для ссылок на изображения).

---

Скриншоты

Кнопка сетки на панели инструментов редактора (с примером кода сетки)

Пример сетки изображений

Кнопка выравнивания по правому краю на панели инструментов редактора (с примером кода выравнивания по правому краю)

Изображение, выровненное по правому краю текста

Кнопка выравнивания по левому краю на панели инструментов редактора (с примером кода выравнивания по левому краю)

Изображение, выровненное по левому краю текста

Кнопка выравнивания по центру на панели инструментов редактора (с примером кода выравнивания по центру)

Изображение, выровненное по центру (с текстом)

[Lilly (Lillian)]

Добавлена кнопка для центрирования изображений.

[piffy]

Отличный инструмент! Можете показать, как это выглядит в редакторе?

[Lilly (Lillian)]

Спасибо, @piffy!

@piffy

Можешь показать, как это выглядит в редакторе?

Ты имеешь в виду композер/редактор с панелью инструментов? Это первый скриншот с примером сетки. Я добавлю несколько скриншотов редактора с другими кодами выравнивания вокруг изображений.

[thoka (Thomas Kalka)]

Спасибо за это решение для Image Alignment

[Heliosurge (Dan DeMontmorency)]

@Lilly

Кнопка выравнивания по правому краю в панели инструментов Composer (с примером кода для выравнивания по правому краю)

Отличный компонент! Я как раз собирался задать подобный вопрос!

Вы настоящий рок-звезда, создающий ценные дополнения!

[Lilly (Lillian)]

@Dan DeMontmorency

Ты настоящий рок-звезда, создающий ценные дополнения!

Спасибо, Дэн! Я ценю комплимент и рад, что они тебе полезны

[Heliosurge (Dan DeMontmorency)]

Пожалуйста. Как, например, сделать так, чтобы текст «Align left» отображался жирным в вашем скриншоте? Я пробовал использовать markdown, но он показывает сам код markdown.

Я вижу, что это работает с ###, но стандартное выделение жирным через

**Текст**

не срабатывает.

[Lilly (Lillian)]

Не совсем понимаю, что вы имеете в виду, @Heliosurge?

[Heliosurge (Dan DeMontmorency)]

Приношу извинения, когда я пробовал это раньше, это не сработало. Не уверен, что изменилось. Это довольно круто, спасибо.

[Heliosurge (Dan DeMontmorency)]

Хорошо, если вы используете более одного изображения, я получаю это.

Из этого кода. Как сделать так, чтобы информация «прилипала» к каждому изображению? Информация о Шоне должна быть рядом со вторым изображением.

Как это исправить?

[Lilly (Lillian)]

Просто вставьте несколько тегов <br><br> между первым блоком текста и вторым тегом <div-data-theme…>, пока отступы не станут правильными. Я попробую запрограммировать там жесткий перенос строки или что-то подобное, когда у меня появится время.

[Heliosurge (Dan DeMontmorency)]

Круто, добавьте количество тегов
, пока текст не выровняется с соответствующей картинкой.

Ещё раз спасибо за вашу помощь и потрясающий #theme-component!

[Canapin (Coin-coin le Canapin)]

Я думаю, что это ненадёжный метод, так как высота контента будет отличаться в зависимости от размера окна.

Очистка плавающих элементов (floats), когда рядом с ними произвольный контент, — задача непростая. Не уверен, что здесь есть очевидное решение…^[1]

Это также было проблемой редактора WordPress на протяжении долгого времени.

Люди часто полагаются на «костыли», используя элементы, единственная цель которых — задать clear: both;, чтобы сбросить предыдущие плавающие элементы.

---

1. пока не появится don ↩︎

[Lilly (Lillian)]

@Canapin

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

Очистка плавающих элементов, когда рядом с ними произвольное содержимое, — задача нетривиальная. Не уверен, что здесь есть очевидное решение…^[1]

Да, мне тоже не нравится этот метод. Я думал, возможно, стоит попробовать решение с использованием свойства white-space. В конечном счёте, лучше всего работает, когда выровненные изображения находятся в отдельных сообщениях. К сожалению, изображения в таблицах тоже работают не очень хорошо.

---

1. пока не появится don ↩︎

[Canapin (Coin-coin le Canapin)]

Может, стоит рассмотреть другие решения вместо float?

Я попробовал заменить float на flex… Без углубления в детали.

[data-theme-image=left] {
    display: flex;
    float: none;
}

[data-theme-image=right] {
    display: flex;
    float: none;
    justify-content: flex-end;
}

[data-theme-image=left] {
    display: flex;
    float: none;
}

[data-theme-image=right] {
    display: flex;
    float: none;
    flex-direction: row-reverse;
}

Или, возможно, стоит посмотреть на grid-раскладку? Правда, я ничего о ней не знаю. Мои знания CSS уже устарели.

[Lilly (Lillian)]

@Canapin

Или, может быть, посмотреть на сеточную разметку? Хотя я ничего о ней не знаю. Мои знания CSS уже много лет как устарели.

ха-ха, вариант с сеткой является частью этого компонента темы

Я тоже определённо думаю, что мои знания ещё более старые .

что это такое? печенье? Не могу понять, это картофель, пельмени или какой-то вид печенья.

[Canapin (Coin-coin le Canapin)]

Вчера я приготовил дайфуку моти, начинённый домашней анко.

[Lilly (Lillian)]

Попробовал решения со свойствами flex и align, но не смог найти что-то, что работало бы стабильно. Однако я нашёл рабочий обходной путь. Если обернуть каждый блок «изображение-текст» в цитату, они разделятся (но текст получит форматирование цитаты):

редактор / предпросмотр:

результат:

[Canapin (Coin-coin le Canapin)]

Это связано с тем, что в Discourse в теге <blockquote> присутствует свойство clear: both;.