attached_images — изображения в несколько строк

[_Дмитрий_]

Установил модуль attached_images1.0.11, который показывает на главной странице несколько миниатюр изображений, из тех, что были прикреплены к сообщениям. Несколько последних, и несколько в случайном порядке. В настройках модуля можно задать их количество. Вывод миниатюр сделан в виде таблицы — только одна горизонтальная строка. Вот фрагмент шаблона (random_images.html), ответственный за показ:

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

		<tbody>
			<tr class="bg2">
				<!-- BEGIN random_images -->
				<td align="center" valign="top">
					<a href="{random_images.U_FILE_POSTE}"><img src="{random_images.ATTACH_IMAGE}" height="{random_images.IM_HEIGHT}" width="{random_images.IM_WIDTH}" alt="{random_images.TOPICTITLE}"/></a>
					<br />
					<a href="{random_images.U_VIEW_TOPIC}">{random_images.TOPICTITLE}</a><br />	
					{L_ATTACH_SENDER}{random_images.ATTACH_POSTER}
				</td>
				<!-- END random_images -->	
			</tr>
		</tbody>

При выводе фрагмент между метками <!-- BEGIN random_images --> ... <!-- END random_images --> несколько раз повторяется для каждого изображения. Собственно вопрос: как можно организовать таблицу миниатюр из нескольких строк (с заданным количеством колонок)? Возможно, здесь нельзя обойтись правкой шаблона, а требуется изменение кода? Идея-то проста: после некоторого количества изображений (колонок) вставлять в вывод дополнительно </tr><tr> — закрыть и открыть строку. Только вот где это исправить — не знаю.

Пока что просто убрал таблицу, оставил одни картинки, вот так:

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

<!-- BEGIN random_images -->
					<a href="{random_images.U_FILE_POSTE}"><img src="{random_images.ATTACH_IMAGE}" height="{random_images.IM_HEIGHT}" width="{random_images.IM_WIDTH}" alt="{random_images.TOPICTITLE}"/></a>
<!-- END random_images -->	

Когда они не помещаются по ширине экрана, то сами переносятся на новую строку. Получилось нормально, но несколько неряшливо смотрится при разных пропорциях картинок.

[Татьяна5]

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

<div>
<!-- BEGIN random_images -->
<div style="display: inline-block; width: (сколько надо?)%;">
<a href="{random_images.U_FILE_POSTE}"><img src="{random_images.ATTACH_IMAGE}" height="{random_images.IM_HEIGHT}" width="{random_images.IM_WIDTH}" alt="{random_images.TOPICTITLE}"/></a>
</div>
<!-- END random_images -->	
</div>

[_Дмитрий_]

Так изображения просто выстраиваются по вертикали, по одному в каждой строке.

[Татьяна5]

Процентов сколько поставили?

[_Дмитрий_]

Процентов сколько поставили?

Разные значения пробовал. Эта конструкция имеет некоторый смысл, если <div style="display: inline-block; width: (сколько надо?)%;"> и соответствующий закрывающий тег </div> вынести "за скобки", то есть за пределы блока <!-- BEGIN random_images --> ... <!-- END random_images -->. Тогда количество процентов задаст относительную ширину строки картинок, после которой картинка переносится на следующую строку. Но таблицы так всё равно не получится...

Да, чего-то я не понимаю в архитектуре phpbb, попробовал всунуться прямо в код с выводом echo, так этот вывод лепится впереди заголовка html...

[Татьяна5]

Конструкция имеет смысл как раз внутри цикла. Каждая картинка в блоке заданной ширины с display: inline-block;.
Есть ещё более кроссбраузерный вариант (IE 6-7) с обтеканием

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

<!-- BEGIN random_images -->
<div style="float: left; width: (сколько надо?)%;">
<a href="{random_images.U_FILE_POSTE}"><img src="{random_images.ATTACH_IMAGE}" height="{random_images.IM_HEIGHT}" width="{random_images.IM_WIDTH}" alt="{random_images.TOPICTITLE}"/></a>
</div>
<!-- END random_images -->	
<div style="clear: both;">&nbsp;</div>

[_Дмитрий_]

Благодарю, получается почти то, что надо. Только сделал не проценты, а абсолютные размеры такого типа: <div style="float: left; width: 250px; height: 300px"> и все картинки становятся по ровной сеточке, и переносятся на новую строку по мере необходимости. В блок <div> можно и прочее описание добавить.

Но как правильно делать вывод из кода phpbb, всё равно пока не понимаю...

[Татьяна5]

$template->assign_vars (примеры практически в любом файле)