Выстраиваем картинки-вложения в ряд

И избавляемся от ненужных элементов вокруг них

Хаки, скрипты, BB-коды и другие вещи, не оформленные в виде полноценных модов, но способствующие улучшению функциональности движка.
Shredder
Администратор
Сообщения: 1069
Зарегистрирован: 22.08.13 09:05
Благодарил (а): 132 раза
Поблагодарили: 264 раза
Контактная информация:

Выстраиваем картинки-вложения в ряд

Сообщение Shredder »

По умолчанию прикреплённые к сообщениям в 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-block;
}
Теперь нужно отредактировать шаблон attachment.html, находящийся в папке styles/prosilver/template
Найти:

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

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

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

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

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

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

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

		<!-- IF _file.S_IMAGE -->
		<dl class="file"<!-- IF not _file.COMMENT --> style="display: inline-block;"<!-- 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
(925 байт) 1132 скачивания
inline_attachments_subsilver2.zip
(925 байт) 1132 скачивания
Мои моды и расширения для phpBB
Выполняю работы по phpBB3 на заказ. Пишите в личку или на почту.
Бесплатная поддержка - только в темах.
Mario Cimarro
Сообщения: 25
Зарегистрирован: 23.08.13 07:26
Благодарил (а): 8 раз
Поблагодарили: 1 раз

Выстраиваем картинки-вложения в ряд

Сообщение Mario Cimarro »

Shredder
Спасибо, это класс! ;)
Shredder
Администратор
Сообщения: 1069
Зарегистрирован: 22.08.13 09:05
Благодарил (а): 132 раза
Поблагодарили: 264 раза
Контактная информация:

Выстраиваем картинки-вложения в ряд

Сообщение Shredder »

Инструкция для стиля subsilver2 обновлена, добавлена поддержка для мода Highslide 4.1.8 Zoom/Slideshow/Watermark
Мои моды и расширения для phpBB
Выполняю работы по phpBB3 на заказ. Пишите в личку или на почту.
Бесплатная поддержка - только в темах.
Аватара пользователя
vladimir1983
Сообщения: 40
Зарегистрирован: 19.01.14 05:09
Благодарил (а): 12 раз
Поблагодарили: 5 раз

Выстраиваем картинки-вложения в ряд

Сообщение vladimir1983 »

Надо добавить что картинки будут в ряд при условии что в посте они размещены в одну строку без переноса

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

[attachment=0]31973.gif[/attachment][attachment=0]31973.gif[/attachment][attachment=0]31973.gif[/attachment][attachment=0]31973.gif[/attachment]
31973.gif
31973.gif (4.99 КБ) 6899 просмотров
31973.gif
31973.gif (4.99 КБ) 6899 просмотров
31973.gif
31973.gif (4.99 КБ) 6899 просмотров
31973.gif
31973.gif (4.99 КБ) 6899 просмотров
31973.gif
31973.gif (4.99 КБ) 6899 просмотров
31973.gif
31973.gif (4.99 КБ) 6899 просмотров
31973.gif
31973.gif (4.99 КБ) 6899 просмотров
31973.gif
31973.gif (4.99 КБ) 6899 просмотров
Вот так это уже не сработает

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

[attachment=0]31973.gif[/attachment]
[attachment=0]31973.gif[/attachment]
[attachment=0]31973.gif[/attachment]
[attachment=0]31973.gif[/attachment]
31973.gif
31973.gif (4.99 КБ) 6899 просмотров
31973.gif
31973.gif (4.99 КБ) 6899 просмотров
31973.gif
31973.gif (4.99 КБ) 6899 просмотров
31973.gif
31973.gif (4.99 КБ) 6899 просмотров
31973.gif
31973.gif (4.99 КБ) 6899 просмотров
31973.gif
31973.gif (4.99 КБ) 6899 просмотров
31973.gif
31973.gif (4.99 КБ) 6899 просмотров
31973.gif
31973.gif (4.99 КБ) 6899 просмотров
Shredder не думал заморочиться по второму варианту?
Shredder
Администратор
Сообщения: 1069
Зарегистрирован: 22.08.13 09:05
Благодарил (а): 132 раза
Поблагодарили: 264 раза
Контактная информация:

Выстраиваем картинки-вложения в ряд

Сообщение Shredder »

А по-моему, это очень даже логично: не хочешь в столбец, не добавляй перенос. Ведь не во всех случаях удобно, чтобы картинки были в строку - иногда нужно сделать и с переносом. Мой вариант как раз полностью под это подходит.
Мои моды и расширения для phpBB
Выполняю работы по phpBB3 на заказ. Пишите в личку или на почту.
Бесплатная поддержка - только в темах.
Аватара пользователя
vladimir1983
Сообщения: 40
Зарегистрирован: 19.01.14 05:09
Благодарил (а): 12 раз
Поблагодарили: 5 раз

Выстраиваем картинки-вложения в ряд

Сообщение vladimir1983 »

Ну хотя да, логика действий тут есть.
Алкаш
Сообщения: 76
Зарегистрирован: 16.02.14 12:52
Благодарил (а): 23 раза
Поблагодарили: 3 раза

Выстраиваем картинки-вложения в ряд

Сообщение Алкаш »

Владимир, пользуясь случаем: редиска ты, нехороший человек ©, понел, зачем забанил мну на Гуру? Изображение
Аватара пользователя
c61
Разработчик модов
Сообщения: 249
Зарегистрирован: 24.08.13 16:46
Благодарил (а): 20 раз
Поблагодарили: 62 раза

Выстраиваем картинки-вложения в ряд

Сообщение c61 »

Алкаш писал(а):...редиска...
:lol:
Теперь здесь, у Shredder'а, на нейтральной земле, все начнут счёты сводить :)
БОРИСЫЧ
Сообщения: 4
Зарегистрирован: 29.03.14 12:59
Откуда: Москва
Контактная информация:

Выстраиваем картинки-вложения в ряд

Сообщение БОРИСЫЧ »

Добрый день! Прошу уточнить - будет ли появляться горизонтальная прокрутка в браузере или же картинки будут автоматически переходить на следующий ряд при достижении ширины окна?
Shredder
Администратор
Сообщения: 1069
Зарегистрирован: 22.08.13 09:05
Благодарил (а): 132 раза
Поблагодарили: 264 раза
Контактная информация:

Выстраиваем картинки-вложения в ряд

Сообщение Shredder »

БОРИСЫЧ
Будут переходить на следующий ряд.
Мои моды и расширения для phpBB
Выполняю работы по phpBB3 на заказ. Пишите в личку или на почту.
Бесплатная поддержка - только в темах.
БОРИСЫЧ
Сообщения: 4
Зарегистрирован: 29.03.14 12:59
Откуда: Москва
Контактная информация:

Выстраиваем картинки-вложения в ряд

Сообщение БОРИСЫЧ »

Спасибо )
win37rus
Сообщения: 2
Зарегистрирован: 22.02.15 21:54

Выстраиваем картинки-вложения в ряд

Сообщение win37rus »

Установил данный мод, но данный мод работает если только вложения вставлять в сообщение через код

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

[attachment=1]   [/attachment] 
вот вопрос:
как сделать что бы

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

[attachment=1]    [/attachment] 
выставлялся автоматически при каждом добавлении картинок?

Что бы не вручную вставлять этот код в сообщение, а что бы к примеру создает человек тему загрузил 4 фотографии:

фото 1
фото 2
фото 3
фото 4

а они уже автоматически вставляются в сообщение с кодом что бы получалось так:

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

[attachment=1]фото 1[/attachment] [attachment=1]фото 2[/attachment] [attachment=1]фото 3[/attachment] [attachment=1]фото 4[/attachment]
кто нибудь даст совет? или подскажет как это осуществить?


Я добавил фото где на сайте данную фишку осуществили при загрузке фото она тут же добавляется в сообщение с кодом

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

[attachment=1] [/attachment]
Вложения
Безымянный.png
Xisp
Сообщения: 196
Зарегистрирован: 05.04.14 18:00
Благодарил (а): 15 раз
Поблагодарили: 30 раз

Выстраиваем картинки-вложения в ряд

Сообщение Xisp »

win37rus писал(а):а они уже автоматически вставляются в сообщение с кодом что бы получалось так:
А если человек захочет с переносом? Как это осуществить?
win37rus
Сообщения: 2
Зарегистрирован: 22.02.15 21:54

Выстраиваем картинки-вложения в ряд

Сообщение win37rus »

Xisp писал(а):А если человек захочет с переносом? Как это осуществить?
мне это не важно. для меня главное чтобы фото автоматически размещались горизонтально!
igorbond
Сообщения: 81
Зарегистрирован: 13.07.14 03:07
Благодарил (а): 17 раз
Поблагодарили: 4 раза

Выстраиваем картинки-вложения в ряд

Сообщение igorbond »

У меня не стандартный стиль стоит, а CA Vintage, и в нем не нашел строку

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

div.inline-attachment p {
Что делать подскажите где смотреть? вот этот стиль http://demo.phpbb3styles.net/CA+Vintage
Ответить