Не нравятся результаты поиска? Попробуйте другой поиск!

Расположение картинок в ряд при массовой вставке


     31.10.2011    FAQ (все вопросы), Общие вопросы по вёрстке    5002

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

Ответил: rocksmart


Создай новый бб-код


[abreast]тут bb-коды картинок[/abreast]


В css твоей темы добавь стиль

.Abreast {margin: 10px 0px 10px 0px;width:100%;display:block;}
.Abreast .ListImg {margin: 0px 0px 5px 0px;}
.Abreast .ListImg div {display: inline-block;}
.Abreast .ListImg img {margin: 0px 0px 5px 5px;border: 1px solid #cccccc;background: #ffffff;padding: 3px;vertical-align: top;}


В файл engine/classes/parse.class.php


В функции function BB_Parse($source, $use_html = TRUE) добавить перед строкой

if( $this->filter_mode ) $source = $this->word_filter( $source );


Следующий код


    $source = str_replace("[abreast]", "<!--AbreastStart--><div class=\"Abreast\"><div class=\"ListImg\">", $source);
        $source = str_replace("[/abreast]", "</div></div><!--AbreastEnd-->", $source);



Далее в функции decodeBBCodes($txt, $use_html = TRUE, $wysiwig = "no")

Добавить

$txt = preg_replace( "#<!--AbreastStart--><div class=\"Abreast\"><div class=\"ListImg\">(.+?)</div></div><!--AbreastEnd-->#ie", "[abreast]\\1[/abreast]", $txt );

Комментарии пользователей (2)

rus mod
7

rus mod - 28 августа 2015 21:10 - Юзер

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

rus mod
7

rus mod - 28 августа 2015 21:22 - Юзер

Есть куда более простое решение:
1. Оставляем минимум в короткой новости
<div class="foto">{full-story}</div>


2. задаем класс в css
.foto img {
     display: block;
     float: left;
     width: 200px; /*настраиваем под себя*/
     margin: 0 10px 10px 0;
}
.foto img + br {
     display: none;
}


всё

Чтобы комментировать - войдите или зарегистрируйтесь на сайте

Похожие вопросы