Как сделать обтекание картинки слева/справа используя bb код?

Westergraf · 2012-07-25 08:10:30

Прошелся поиском несколько раз по форуму тема не обсуждалась

Суть в том чтобы сделать обтекание картинки слева (на данный момент я пользуюсь этим)

<img src= align="left"  style="margin-right:10px;margin-bottom:10px;" alt="" title="" />

но это HTML

А как с правами журналиста сделать тоже самое ? т.е обтекание текста.

из стандартного набора bb кода

[left][/left]
[img][/img]

я могу сделать только так но это не решает проблему

[left][img][/img][/left]

в других движках при использование

[img=left][/img]

происходит обтекание здесь такое видемо непредусмотрено!

Изменено Westergraf (2012-07-25 08:13:31)

easmik · 2012-07-25 08:15:12

Westergraf, http://ngcms.ru/forum/viewtopic.php?pid=30231#p30231

Westergraf · 2012-07-25 08:25:32

easmik пишет:

Westergraf, http://ngcms.ru/forum/viewtopic.php?pid=30231#p30231

Эту тему я прочел здесь немного нето исполязуя конструкцию

 [img align="left"]IMG_URL[/img]

получается

А мне хотелось бы добиться (чтобы отступ был)

style="margin-right:10px;margin-bottom:10px;"

Может можно как-то в Движке прописать class

по другому вроде некак CSS ???

Изменено Westergraf (2012-07-25 09:08:34)

vvovvo · 2012-07-25 09:57:33

В статье о поддерживаемых bbcode сказано:

ФЛАГИ - доп. флаги, пишутся в формате ФЛАГ="ЗНАЧЕНИЕ":
* width - ширина в пикселях
* height - высота в пикселях
* border - граница в пикселях
* align - расположение ( left / right / center )
* class - любой текст

Вам нужно в .css добавить

.imgleft {
text-align:left;
margin-right:10px;
margin-bottom:10px;
}

Westergraf · 2012-07-25 11:45:53

vvovvo, CSS немного не сработал, но если сделать чуть - чуть по-другому, то все шикарно функционирует

[img="Адрес картинки"  border="0" width="" height="" class="imgleft"]название картинки.gif (5.94 Kb)[/img]

В CSS добавить

.imgleft {
float:left;
margin-right:10px;
margin-bottom:10px;
}

Изменено Westergraf (2012-07-25 11:50:00)

vitaly · 2012-07-25 17:34:42

Вообще-то [img align="left"]URL[/img]
должен работать

Westergraf · 2012-07-25 18:59:26

vitaly пишет:

Вообще-то [img align="left"]URL[/url]
должен работать

Да все врено данная конструкция работает но только без отступов

Так что без "класса" и "стиля" никак не обойтись

vitaly · 2012-07-25 19:24:15

Можно сделать глобальный стиль для картинок
Или назначить определённый класс блоку с полной новостью (это задаётся в шаблоне) и в стилях прописать настройки для всех картинок, которые внутри твоего класса.
Типа такого:

.myNewsClass IMG { тут параметры }

Westergraf · 2012-07-25 19:58:08

vitaly пишет:

Можно сделать глобальный стиль для картинок

Глобальный стиль я так понимаю все картинки будут выровнена только по одному параметру тоесть если мне надо обтекание текста справа, то все картинки только так и буду выглядеть. Но мне нужно только заглавную картинку с обтеканием, а в тексте, что бы была возможность публиковать в разных вариациях!

vitaly пишет:

Или назначить определённый класс блоку с полной новостью (это задаётся в шаблоне) и в стилях прописать настройки для всех картинок, которые внутри твоего класса.
Типа такого:
.myNewsClass IMG { тут параметры }

Опять же для всех это не выход!

bb коды мне нужны для того чтобы журналист публикуя статью не парился что ему надо прописать какой-то класс, чтобы картинка обтекалась текстом !
Вариант в принципе хорош единственный недостаток как я уже говорил ранее это отступ

[img align="left"]URL[/url]

Еще проблема в том что многие просто не понимают HTML и CSS да и bb многие не знают (для меня это тоже когда-то было затруднительно) в DLE на этот счет немного попроще там при выборе картинки сразу можно выбрать по какому краю она будет выровнена, в NG CMS нужно все ручками дописывать, что для обычного человека желающего опубликовать статью вызывает трудность.

Поэтому я и хочу сделать все как можно проще, чтобы не редактировать постоянно каждую статью после журналиста! Надеюсь мысль ясна! Если это поможет для понимания того что я тут пытаюсь разъяснить, вот сайт на котором я сейчас делаю все при помощи HTML. http://infosborka.com/

Немного повторюсь: Вариант хорош единственный недостаток это отступ

[img align="left"]URL[/url]

если бы можно было решить проблему отступа, где, то на уровне движка было бы замечательно. (Возможно в следующем РЕЛИЗЕ)

Я думаю ну не нано нагружать журналиста знаниями HTML, а то он уйдет к тем, у кого проще и удобней - это Мое мнение!!!

.

Изменено Westergraf (2012-07-25 20:08:19)

Knopik · 2012-07-26 10:45:38

Глобальный стиль я так понимаю все картинки будут выровнена только по одному параметру тоесть если мне надо обтекание текста справа, то все картинки только так и буду выглядеть. Но мне нужно только заглавную картинку с обтеканием, а в тексте, что бы была возможность публиковать в разных вариациях!

нет, просто ко всем картинкам добавить отступы. например у тебя шаб полной новости выглядит так

<div class="newsItem">
<div class="newsTitle">{category} || {title}</div>
<div class="newsInfo">(c) {author} at {date} [update](changed at {update})[/update] Viewed: {views} times[comheader], commented: {comnum} times[/comheader]</div>
<div class="newsBody">{short-story} {full-story} {pagination}</div>
</div>
<br/>
{plugin_comments}

тебе в css нужно прописать так

.newsBody IMG {
margin: 10px;
}

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

[img align="left"]URL[/url]

Изменено Knopik (2012-07-26 10:50:14)

Westergraf · 2012-07-26 17:50:14

Knopik, Интересный вариант надо подумать !

Westergraf · 2012-09-19 09:06:02

Knopik пишет:

<div class="newsItem">
  <div class="newsTitle">{category} || {title}</div>
  <div class="newsInfo">(c) {author} at {date} [update](changed at {update})[/update] Viewed: {views} times[comheader], commented: {comnum} times[/comheader]</div>
  <div class="[u]newsBody[/u]">[color=red]{short-story} {full-story} {pagination}[/color]</div>
  </div>
<br/>
{plugin_comments}

Knopik, Дайте полный адрес где это все написано (Где искать ?)

Knopik пишет:

тебе в css нужно прописать так
.newsBody IMG {
margin: 10px;
}
и затем в новости все картинки будут с отступами, даже
[img align="left"]URL[/url]

А в каком CSS нужно прописать???

Если в шаблоне default то у меня все остается по прежнему. Нет отступов картинка прилипшая!

Изменено Westergraf (2012-09-19 09:06:56)

easmik · 2012-09-19 09:18:06

Westergraf, в текущем шаблоне, дай доступ к админке посмотрю.

Westergraf · 2012-09-19 09:24:43

easmik пишет:

Westergraf, в текущем шаблоне, дай доступ к админке посмотрю.

Скинул в личку!

easmik · 2012-09-19 09:36:34

Westergraf, усе. проверяй.

Westergraf · 2012-09-19 09:44:31

easmik пишет:

Westergraf, усе. проверяй.

Все отлично Спасибо !

Отпиши пожалуйста где проблема ? в чем косяк ?

easmik · 2012-09-19 09:47:23

Westergraf, увы кода перед глазами уже нет, так что возьму пример у Knopik

У тебя было .newsBody {margin: 10px;}
ты просто пропустил img, нужно .newsBody IMG {margin: 10px;}

Westergraf · 2012-09-19 09:51:05

easmik пишет:

Westergraf, увы кода перед глазами уже нет, так что возьму пример у Knopik
У тебя было .newsBody {margin: 10px;}
ты просто пропустил img, нужно

Странно но изначально я делал именно .newsBody IMG {margin: 10px;} и ничего не работало

а потом уже .newsBody {margin: 10px;}

Изменено Westergraf (2012-09-19 09:51:30)

easmik · 2012-09-19 09:53:41

Westergraf, у тебя это .otstup_чего_то_там посмотри, я не стал убирать твой код, просто ниже дописал еще одну строчку.

Westergraf · 2012-09-19 09:58:42

easmik пишет:

Westergraf, у тебя это .otstup_чего_то_там посмотри, я не стал убирать твой код, просто ниже дописал еще одну строчку.

Блин туплю по полной загляни в личку

easmik · 2012-09-19 10:13:08

Westergraf, смотри личку

Westergraf · 2012-09-19 10:33:28

easmik пишет:

Westergraf, смотри личку

Отлично я понял свой косяк

=====================

Итак может кому-то будет полезно!

Прежде чем паниковать, как я, загляните в свой шаблон news.search.tpl и news.full.tpl если у вас там прописаны класы - class то и пляшите от них!

К примеру у меня прописан класс class="otstup_krat" (у вас будет свой или не будет ничего, тога естественно надо, его ручками прописать)

<table border="0" width="100%" cellspacing="0" cellpadding="0" class="otstup_krat">

Значит стиль CSS будет

.otstup_krat img {margin: 10px;}

Изменено Westergraf (2012-09-19 10:34:38)

qwas · 2012-09-19 12:26:35

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

Изменено qwas (2012-09-19 12:27:36)

Next Generation CMS :: Форум поддержки

Объявление

#1 2012-07-25 08:10:30

Как сделать обтекание картинки слева/справа используя bb код?

#2 2012-07-25 08:15:12

Re: Как сделать обтекание картинки слева/справа используя bb код?

#3 2012-07-25 08:25:32

Re: Как сделать обтекание картинки слева/справа используя bb код?

#4 2012-07-25 09:57:33

Re: Как сделать обтекание картинки слева/справа используя bb код?

#5 2012-07-25 11:45:53

Re: Как сделать обтекание картинки слева/справа используя bb код?

#6 2012-07-25 17:34:42

Re: Как сделать обтекание картинки слева/справа используя bb код?

#7 2012-07-25 18:59:26

Re: Как сделать обтекание картинки слева/справа используя bb код?

#8 2012-07-25 19:24:15

Re: Как сделать обтекание картинки слева/справа используя bb код?

#9 2012-07-25 19:58:08

Re: Как сделать обтекание картинки слева/справа используя bb код?

#10 2012-07-26 10:45:38

Re: Как сделать обтекание картинки слева/справа используя bb код?

#11 2012-07-26 17:50:14

Re: Как сделать обтекание картинки слева/справа используя bb код?

#12 2012-09-19 09:06:02

Re: Как сделать обтекание картинки слева/справа используя bb код?

#13 2012-09-19 09:18:06

Re: Как сделать обтекание картинки слева/справа используя bb код?

#14 2012-09-19 09:24:43

Re: Как сделать обтекание картинки слева/справа используя bb код?

#15 2012-09-19 09:36:34

Re: Как сделать обтекание картинки слева/справа используя bb код?

#16 2012-09-19 09:44:31

Re: Как сделать обтекание картинки слева/справа используя bb код?

#17 2012-09-19 09:47:23

Re: Как сделать обтекание картинки слева/справа используя bb код?

#18 2012-09-19 09:51:05

Re: Как сделать обтекание картинки слева/справа используя bb код?

#19 2012-09-19 09:53:41

Re: Как сделать обтекание картинки слева/справа используя bb код?

#20 2012-09-19 09:58:42

Re: Как сделать обтекание картинки слева/справа используя bb код?

#21 2012-09-19 10:13:08

Re: Как сделать обтекание картинки слева/справа используя bb код?

#22 2012-09-19 10:33:28

Re: Как сделать обтекание картинки слева/справа используя bb код?

#23 2012-09-19 12:26:35

Re: Как сделать обтекание картинки слева/справа используя bb код?

Подвал раздела