Картинки в горизонтальну лінію

Відповісти

Topic author
Vpoltave
Адміністратор
Адміністратор
Повідомлень: 710
З нами з: 16 серпня 2013 23:18

Картинки в горизонтальну лінію

#1

Повідомлення Vpoltave »

Типово прикріплені до повідомлень у phpBB3 картинки- вкладення відображаються стовпчиком. До того ж, навколо них йде різна додаткова інформація , така як ім'я файлу , кількість скачуваннь вкладення і т.д. Деяким користувачам це не подобається , вони вважають такий вид невдалим і шукають спосіб зробити інакше . Іноді картинки намагаються вибудувати в ряд , задавши блокам з картинками властивість float . Це рішення , на мій погляд , невдало , тому що оформлені за допомогою float елементи - нестабільні і будуть розповзатися при кожному зручному випадку. Але є спосіб зробити більше культурно , в цьому нам допоможе чудове CSS- властивість display : inline . Інструкція буде дана для тих випадків , коли картинка вставлена ​​в текст і до неї не заданий коментар .

Відкриваємо файл styles/prosilver/theme/content.css, шукаємо там код:

Код: Виділити все

div.inline-attachment p {
Додаємо ПЕРЕД ним:

Код: Виділити все

div.inline-attachment, dl.thumbnail dt, dl.file dt.attach-image {
	display: inline;
}
Тепер потрібно відредагувати шаблон attachment.html, що знаходиться в папці styles/prosilver/template знайти:

Код: Виділити все

<dl class="thumbnail">
Замінити на:

Код: Виділити все

<dl class="thumbnail"<!-- IF not _file.COMMENT --> style="display: inline;"<!-- ENDIF -->>
знайти:

Код: Виділити все

		<!-- IF _file.S_IMAGE -->
		<dl class="file">
Замінити на:

Код: Виділити все

		<!-- IF _file.S_IMAGE -->
		<dl class="file"<!-- IF not _file.COMMENT --> style="display: inline;"<!-- ENDIF -->>
Також потрібно буде прибрати додаткову інформацію у звичайних картинок (НЕ мініатюр) у стилі prosilver, щоб вона не спотворювала нове оформлення. Для цього в шаблоні attachment.html потрібно видалити рядок:

Код: Виділити все

			<dd>{_file.DOWNLOAD_NAME} ({_file.FILESIZE} {_file.SIZE_LANG}) {_file.L_DOWNLOAD_COUNT}</dd>
У мініатюр у стилі prosilver додаткової інформації немає за замовчуванням , тому що вона знаходиться в атрибуті title тега img і показується тільки при наведенні миші. При бажанні цю інформацію можна додати в title і звичайним картинок , раз вже прибрали її з тексту.

Оновлюємо шаблони і тему для prosilver , і очищаємо кеш браузера , якщо не видно результат.
Ось , власне , і все. Просто і зі смаком. Всі вставлені в текст картинки будуть йти один за одним горизонтально , якщо тільки ви не захочете зробити перенесення між ними вручну.

Робити картинку в ряд , коли до неї є коментар , по-моєму , не має сенсу , тому що якщо картинка маленька або вузька , то коментарю , особливо довгому , буде ніде поміститися. Він або скулиться по горизонталі до такої міри , що блок з картинкою розтягнеться у висоту , і це буде виглядати непривабливо , або заїде на що стоять поруч вкладення.

Інструкцію для стилю subsilver2 я доклав у вигляді текстового файлу в архіві :
inline_attachments_subsilver2.zip
Інструкцію для стилю [color=#0080FF]subsilver2[/color]
(683 байт) Завантажено 531 раз


Відповісти