Уважаемые пользователи!
C 7 ноября 2020 года phpBB Group прекратила выпуск обновлений и завершила дальнейшее развитие phpBB версии 3.2.
С 1 августа 2024 года phpBB Group прекращает поддержку phpBB 3.2 на официальном сайте.
Сайт официальной русской поддержки phpBB Guru продолжит поддержку phpBB 3.2 до 31 декабря 2024 года.
С учетом этого, настоятельно рекомендуется обновить конференции до версии 3.3.

Стандартный тег [IMG] и 70%

Проблемы с установкой или работой phpBB 3.2.x? Получите помощь здесь!
Внимание: с 7 ноября 2020 года phpBB Group завершено дальнейшее развитие phpBB версии 3.2, а с 1 августа 2024 года будет прекращена её поддержка.
Сайт официальной русской поддержки phpBB Guru продолжит поддержку phpBB 3.2 до 31 декабря 2024 года.

Правила форума
Местная Конституция | Шаблон запроса | Документация (phpBB3) | Мини [FAQ] по phpBB 3.1.x/3.2.x | FAQ | Как задавать вопросы | Как устанавливать расширения

Ваш вопрос может быть удален без объяснения причин, если на него есть ответы по приведённым ссылкам (а вы рискуете получить предупреждение ;) ).
Аватара пользователя
SigmaTel71
phpBB 1.4.0
Сообщения: 32
Стаж: 5 лет 6 месяцев
Откуда: Тула, Россия
Благодарил (а): 7 раз
Поблагодарили: 1 раз

Стандартный тег [IMG] и 70%

Сообщение SigmaTel71 »

Добрый вечер!
Я хочу по всему форуму уменьшить максимальный размер изображений со 100% до 70% по ширине. Покопавшись в файлах /includes/bbcode.php и /styles/prosilver/templates/bbcode.html, я выяснил, что всё это дело завязано на классе "postimage" в CSS. И да, такие строки обнаруживаются, к примеру в стилях Digi они выглядят так:

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

.postbody img.postimage {
  max-width: 100%;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box; } 
Меняю 100% на 70%, ожидаемый результат вроде бы получаю, но если изображение имеет превью, по нажатию на которое в новой вкладке открывается полноразмерное, то при наведении на него можно увидеть область "hover", занимающую 100% области изображения.
Лишний hover 
30 процентов лишней области.jpg
Навожу мышкой на область "hover" в консоли F12, вижу, что эта область a.postlink (то бишь, выделения ссылки), а изображение, соответственно, img.postimage. Вот как сузить область "hover" для изображений с превью? :?
Я имел ввиду такого вида картинки с превью, по нажатию открывающие полную "версию".

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

[url=link.to/full-image.png][img]link.to/thumbnail-image.png[/img][/url]
Hello, Moto! :D
Аватара пользователя
Татьяна5
Поддержка
Поддержка
Сообщения: 12372
Стаж: 12 лет 7 месяцев
Благодарил (а): 223 раза
Поблагодарили: 3517 раз
Контактная информация:

Re: Стандартный тег [IMG] и 70%

Сообщение Татьяна5 »

Никак. Полноразмерные изображения открываются не на форуме, сами по себе
(Есть вариант с написанием плагинов для браузеров, но заставить установить те плагины всех посетителей форума нереально)
Аватара пользователя
Beer
phpBB 2.0.9
Сообщения: 708
Стаж: 12 лет 8 месяцев
Благодарил (а): 193 раза
Поблагодарили: 69 раз

Re: Стандартный тег [IMG] и 70%

Сообщение Beer »

Сконвертировался с SMF2 в phpBB3.2
Аватара пользователя
SigmaTel71
phpBB 1.4.0
Сообщения: 32
Стаж: 5 лет 6 месяцев
Откуда: Тула, Россия
Благодарил (а): 7 раз
Поблагодарили: 1 раз

Re: Стандартный тег [IMG] и 70%

Сообщение SigmaTel71 »

Beer писал(а): 30.10.2018 10:02 для владельцев SPOILER от ppk
Ещё бы найти его...

UPD: расширение нашёл, но тогда возникает проблема с адаптивными стилями. Изображения не вписываются по ширине и сообщение нужно прокручивать.
Проблема с адаптивностью 
Screenshot_20181030-132030~2[1].jpg
Hello, Moto! :D
Аватара пользователя
Beer
phpBB 2.0.9
Сообщения: 708
Стаж: 12 лет 8 месяцев
Благодарил (а): 193 раза
Поблагодарили: 69 раз

Re: Стандартный тег [IMG] и 70%

Сообщение Beer »

Не совсем понятно, но все остальное - css. Правда от балалайки тоже зависит.
Кстати на фото нет работы скрипта prettyPhoto.
Сконвертировался с SMF2 в phpBB3.2
Аватара пользователя
SigmaTel71
phpBB 1.4.0
Сообщения: 32
Стаж: 5 лет 6 месяцев
Откуда: Тула, Россия
Благодарил (а): 7 раз
Поблагодарили: 1 раз

Re: Стандартный тег [IMG] и 70%

Сообщение SigmaTel71 »

Пересмотрел ещё раз вопрос странного поведения изображений. В спойлерах расписываю, как надо было сделать, оказывается.
1. Исправляем блок img.postimage 
Находим этот блок

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

postbody img.postimage {
    max-width: 100%;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box; }
Заменяем в max-width 100% на нужное количество пикселей (512) и добавляем автоматический подбор высоты:

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

postbody img.postimage {
    max-width: 512px;
    height: auto;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box; }
2. Настраиваем подбор размера 
Для удобства открываем пустой текстовый документ и создаём в нём следующий шаблон:

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

@media (min-width: npx) {
 .postbody img.postimage {
  max-width: (n-30)px; }
}
Смотрим, под какие ширины стиль "умеет" выстраивать разметку. В моём случае это были 320, 350, 400, 430, 450 и 500. Пишем в соответствии с шаблоном такой код:

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

@media (min-width: 320px) {
	.postbody img.postimage {
		max-width: 290px; }
}
@media (min-width: 350px) {
	.postbody img.postimage {
		max-width: 320px; }
}
@media (min-width: 400px) {
	.postbody img.postimage {
		max-width: 370px; }
}
@media (min-width: 430px) {
	.postbody img.postimage {
		max-width: 400px; }
}
@media (min-width: 450px) {
	.postbody img.postimage {
		max-width: 420px; }
}
@media (min-width: 500px) {
	.postbody img.postimage {
		max-width: 470px; }
}
3. Интегрируем в стиль 
Открываете CSS-файл, в котором были строки из первого пункта, проматываете его в самый конец и вставляете полученный вами результат.
Ответы на вопросы 
Q. Почему не max-width в блоке @media?
A. Конфликтует.

Q. Почему нельзя подключать отдельным файлом через import?
A. У меня такой способ не сработал и не гарантирую, что получится у вас.

Q. Почему размер изображений меньше на 30 пикселей, чем ширина "экрана"?
A. Разные стили работают по-разному с отступами, поэтому картинка сделана меньше с целью обеспечения совместимости.

Q. Зачем вставлять в конец?
A. Если вас не устроит результат, вы сможете быстро найти нужный код и изменить/удалить его.
Hello, Moto! :D
Аватара пользователя
toxic steel
phpBB 1.4.0
Сообщения: 36
Стаж: 13 лет 2 месяца
Откуда: .msk.ru
Благодарил (а): 10 раз
Поблагодарили: 1 раз

Re: Стандартный тег [IMG] и 70%

Сообщение toxic steel »

Если я правильно понял задачу:

Написать скриптик, который будет подхватывать $_SERVER['REQUEST_URI'] и забирать из папки картинку с таким же названием, снимать с неё размер и скейлить до заданных. Хотите - просто стилем картинки, хотите - ресайзом прям на лету.

Настроить .htaccess, таким образом, чтобы браузерные запросы к папке с фуллсайзами подхватывались эти скриптом.

PROFIT!


Таким образом устраивают защиту от хотлинков, можете погуглить именно по этому пути.
Ответить

Вернуться в «Поддержка phpBB 3.2.x»