Any plan to add a feature for Image Alignment and Wrapping Text Around Images? More formmating options for photos (uploaded or linked) would be very useful. Cheers.
This question comes up all the time in my community. We’d love to be able to include a small image or two in our posts without interrupting the flow of text.
Here’s a typical example…
2 лайка
You don’t need a plugin to whitelist classes anymore, you can just use data-theme-* attributes directly in your post’s markup.
You’d do something like
<div data-theme-image="left">
<img src="https://example.com/example.jpg" >
</div>
and then in your site customizations you’d have add corresponding CSS
[data-theme-image="left"] {
float: left;
img {
margin: 1.3em 1em 0 0;
}
}
Might be a good case for a simple theme component.
17 лайков
I had to look this one up. In case anyone else is wondering how this works, here you go:
So let’s see if I understand how this would work. One way would be to add a toolbar button that would add a div with the data-theme-image attribute, just like here (where a different attribute is added):
Right?
Now, if I think that adding a toolbar button each for aligning images, say, left right centre (or even adding a toolbar button at all) and I instead want to manually add a [floatl] tag which would then be converted into html, then I would need a plugin, right?
1 лайк
I’ve done a plugin with some formatting options, center, align right, float element, color. You can activate/deactivate any option
It’s using bbcodes tho, it may not be as clean as other options
6 лайков
Панель форматирования сделала своё дело — для меня это было проще простого! Спасибо @Steven
BBCode для выравнивания по правому краю
У нас есть BBCode floatl (и соответствующая кнопка), который позволяет добавлять контент слева от текста (как изображение в этом примере). Также существует BBCode
[floatr][/floatr], который добавляет контент справа. Этот BBCode уже создан, но я не добавил для него кнопку, так как считаю это излишним.
Я немного привёл эту тему в порядок, чтобы выделить наиболее важную информацию.
Ниже приведено резюме текущих вариантов для выравнивания изображений в постах, отсортированное по простоте установки и использования:
- MD Composer extras (компонент темы)
- Formatting toolbar (плагин)
- Создайте собственное решение: Image Alignment - #19 by awesomerobot, а если вы хотите добавить кнопку на панель инструментов, пример можно найти здесь: Image Alignment - #20 by tophee
2 лайка
Какие-то новости? Я пользователь, мне нужно просто разместить контент с выравниванием изображения по правому краю.
1 лайк
Смотрите What is the code for centering an uploaded image? - #14 by jomaxro. Вместо center используйте right.
2 лайка
Это может выровнять изображение по правому краю, но не позволит обтекать его текстом, верно? То есть текст не будет обтекать изображение, что, вероятно, и требуется?
Верно. Тема, на которую я дал ссылку, касалась центрирования изображения, и она делает только это. Если вам также нужно свойство float, вам нужно следовать предложению Криса (для этого администратор должен выполнить необходимые действия по настройке) или установить плагин, например «Formatting toolbar».
1 лайк
Просто отмечу, что компонент MD Composer extras также поддерживает плавающий режим. Он добавит кнопку в редактор, что может сделать процесс немного более плавным.
4 лайка