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

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

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

Shredder » 26.08.13 07:20

По умолчанию прикреплённые к сообщениям в 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 байт) Скачиваний: 1089
Мои моды и расширения для phpBB
Выполняю работы по phpBB3 на заказ. Пишите в личку или на почту.
Бесплатная поддержка - только в темах.

Mario Cimarro
Сообщения: 25
Зарегистрирован: 23.08.13 07:26

Mario Cimarro » 26.08.13 07:22

Shredder
Спасибо, это класс! ;)

Shredder
Администратор
Сообщения: 1064
Зарегистрирован: 22.08.13 09:05

Shredder » 19.01.14 01:14

Инструкция для стиля subsilver2 обновлена, добавлена поддержка для мода Highslide 4.1.8 Zoom/Slideshow/Watermark
Мои моды и расширения для phpBB
Выполняю работы по phpBB3 на заказ. Пишите в личку или на почту.
Бесплатная поддержка - только в темах.

Аватара пользователя
vladimir1983
Сообщения: 40
Зарегистрирован: 19.01.14 05:09

vladimir1983 » 19.01.14 18:40

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

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

[attachment=0]31973.gif[/attachment][attachment=0]31973.gif[/attachment][attachment=0]31973.gif[/attachment][attachment=0]31973.gif[/attachment]

31973.gif
31973.gif
31973.gif
31973.gif

Вот так это уже не сработает

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

[attachment=0]31973.gif[/attachment]
[attachment=0]31973.gif[/attachment]
[attachment=0]31973.gif[/attachment]
[attachment=0]31973.gif[/attachment]

31973.gif

31973.gif

31973.gif

31973.gif

Shredder не думал заморочиться по второму варианту?

Shredder
Администратор
Сообщения: 1064
Зарегистрирован: 22.08.13 09:05

Shredder » 19.01.14 18:49

А по-моему, это очень даже логично: не хочешь в столбец, не добавляй перенос. Ведь не во всех случаях удобно, чтобы картинки были в строку - иногда нужно сделать и с переносом. Мой вариант как раз полностью под это подходит.
Мои моды и расширения для phpBB
Выполняю работы по phpBB3 на заказ. Пишите в личку или на почту.
Бесплатная поддержка - только в темах.

Аватара пользователя
vladimir1983
Сообщения: 40
Зарегистрирован: 19.01.14 05:09

vladimir1983 » 19.01.14 18:54

Ну хотя да, логика действий тут есть.

Алкаш
Сообщения: 76
Зарегистрирован: 16.02.14 12:52

Алкаш » 11.03.14 15:25

Владимир, пользуясь случаем: редиска ты, нехороший человек ©, понел, зачем забанил мну на Гуру? Изображение

Аватара пользователя
c61
Разработчик модов
Сообщения: 249
Зарегистрирован: 24.08.13 16:46

c61 » 11.03.14 17:13

Алкаш писал(а):...редиска...
:lol:
Теперь здесь, у Shredder'а, на нейтральной земле, все начнут счёты сводить :)

БОРИСЫЧ
Сообщения: 4
Зарегистрирован: 29.03.14 12:59

БОРИСЫЧ » 29.03.14 14:17

Добрый день! Прошу уточнить - будет ли появляться горизонтальная прокрутка в браузере или же картинки будут автоматически переходить на следующий ряд при достижении ширины окна?

Shredder
Администратор
Сообщения: 1064
Зарегистрирован: 22.08.13 09:05

Shredder » 29.03.14 14:20

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

БОРИСЫЧ
Сообщения: 4
Зарегистрирован: 29.03.14 12:59

БОРИСЫЧ » 29.03.14 14:37

Спасибо )

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

win37rus » 22.02.15 22:00

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

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

[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]
Вложения

Xisp
Сообщения: 196
Зарегистрирован: 05.04.14 18:00

Xisp » 22.02.15 23:00

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


А если человек захочет с переносом? Как это осуществить?

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

win37rus » 22.02.15 23:03

Xisp писал(а):А если человек захочет с переносом? Как это осуществить?


мне это не важно. для меня главное чтобы фото автоматически размещались горизонтально!

igorbond
Сообщения: 81
Зарегистрирован: 13.07.14 03:07

igorbond » 26.02.15 15:43

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

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

div.inline-attachment p {


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

Ответить