BBcode "матрица"

Питер · **Питер** 13 янв 2018, 10:01 Сообщение

Общая идея.
http://impossible-crimes.ru/Forum/viewtopic.php?t=1655
Это для переводных рассказов. Но такая же для авторов. Слева соответствующая картинка, справа что вроде "визитки". В приведенном примере использованы сразу несколько bbcodes. И таблица с двумя колонками. И textarea. И center. Из-за этого "набора" не получается "играться" расстоянием между колонками, и вообще целый геморрой при оформлении.
Можно ли придумать один общий bbcode, условно назвал его "матрица", что бы было одинаковое оформление (только менять текст и картинку", если необходимо добавлять коменты.
Идея как тут https://ru.wikipedia.org/wiki/Карр,_Джон_Диксон Только в нашем случае: две колонки: картинка (слева), "визитка (справа) Без всякого доп.набора, о котором я писал выше. Да. И с возможностью менять фон в "визитке". Размер "визитки" тоже может иногда меняться, в зависимости от количества инфы. Получается, что бы и первая колонка (с изображением) соответствовала второй (естественно что нужно будет "играться" с размером изображения, но это не проблема) .
Как то так.
Заранее спасибо за помощь

Jim · **Jim** 13 янв 2018, 10:57 Сообщение

Разве текст в картинке не одно и то же

Питер · **Питер** 13 янв 2018, 11:10 Сообщение

Честно говоря не понял вопроса?

CabinetAdmin · **CabinetAdmin** 13 янв 2018, 13:35 Сообщение

Если я правильно понял. Вот такой вариант:

Код: Выделить всё

<div class="matrix">
	<div class="matrix_right">
		<div style="border: 1px solid #a2a9b1; padding: 10px; background-color: {COLOR};">{TEXT1}</div>
	</div>
	<div class="matrix_body">
		<div class="matrix_body_left">{TEXT2}</div>
		<div class="matrix_body_right">{TEXT3}</div>
	</div>
</div>

Стили:

Код: Выделить всё

.matrix {
	padding-bottom: 15px;
}
.matrix:after {
	clear: both;
	content: '';
	display: block;
}
.matrix_right {
	float: right;
	width: 250px;
}
.matrix_body {
	margin-right: 260px;
}
.matrix_body_left {
	float: left;
	width: 200px;
}
.matrix_body_left img {
	max-width: 100%;
}
.matrix_body_right {
	margin-left: 220px;
}

Использование:

Код: Выделить всё

[matrix={COLOR}|{TEXT1}]{TEXT2}|{TEXT3}[/matrix]

Подсказка:

Код: Выделить всё

[matrix=цвет правой колонки(например #FFFFFF) | содержимое правой колонки]содержимое левой колонки | содержимое центральной колонки[/matrix]

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

Код: Выделить всё

<div style="border: 1px solid #a2a9b1; padding: 10px; background-color: {COLOR};">{TEXT1}</div>

это правая колонка.

Код: Выделить всё

<div class="matrix_body_left">{TEXT2}</div>

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

Код: Выделить всё

<div class="matrix_body_left"><img src="{URL}" alt="Изображение" /></div>

Если так больше нравится, тогда в использовании ббкода надо будет поменять {TEXT2} на {URL}.

Питер · **Питер** 13 янв 2018, 15:13 Сообщение

Что то не получается.
Если я правильно делаю.
1. Это замена bbcode. Так?
2. Это в content?
Далее "использование" и "замена"

[matrix={COLOR}|{TEXT1}]{TEXT2}|{TEXT3}[/matrix]
Цвет это понятно. Но для текста "визитки" (как и сама "визитка" должна быть как бы в рамке). Слева изображение. Разделения между ними не должно быть вообще, только возможность менять расстояние. А пока bbcode вообще никак не срабатывает.

По большому счету, должно быть точно как примере рассказа, который я привел. Только еще возможность менять цвет фона "визитки" и расстояние между картинкой и "визиткой".