info navigation

phpbb-belk.ru

темы, связанные с форумом phpbb 3.0.x



Новая тема  Страница 1 из 1
  [ Сообщений: 2 ]  Просмотры: 4009

Картинки-вложения в одну строчку
  Версия для печати Пред. тема | След. тема 
Автор Сообщение
Не в сети
 (Андрей)  
 Картинки-вложения в одну строчку
Администратор
Аватара пользователя

Стаж: 9 лет 2 месяца 19 дней
Сообщения: 1235
Откуда: здешние мы

Стиль: subsilver2


Репутация: 11


Russia

Тиц и PR

перейти на сайт пользователя
Найти темы пользователя

Картинки-вложения в одну строчку в phpbb 3

небольшая доработка, найденная в сети, по переделке вывода картинок во вложениях. по умолчанию на форуме картинки из вложений выводятся в столбик (друг под другом) с кучей информации (размером, названием и т.д.).
эта доработка убирает всё лишнее и выводит картинки "горизонтально", то еcть в одну строчку.

сканы переделки из стилей prosilver и subsilver2:

Вложение:
Комментарий к файлу: prosilver
scan prosilver.png
scan prosilver.png [ 283.31 КБ | Просмотров: 4009 ] scan prosilver.png



Вложение:
Комментарий к файлу: subsilver2
scan subsilver2.png
scan subsilver2.png [ 283.85 КБ | Просмотров: 4009 ] scan subsilver2.png



[dombelk]prosmotret-vashe-soobshhenie_t33.html[/dombelk]

оригинальная тема: https://www.phpbb-work.ru/vistraivaem-kartinki-vlojeniya-v-ryad-t14.html

внимание! чтоб модификация работала как надо - не пишите комментарий к картинке и коды должны быть на страничке выставлены в ряд. то есть выбрали изображение, загрузили во вложения (без надписей), нажали "добавить в сообщение". одно за другим. примерно так:

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

[attachment=4]Gaiking Legend of Daiku-Maryu poster.jpg[/attachment][attachment=3]meiji_tokyo_renka_tv poster.jpg[/attachment][attachment=2]Nana Toshi Monogatari poster.jpg[/attachment][attachment=1]poster_Log Horizon.jpg[/attachment]



Как это прописывается:

prosilver
Открыть styles/prosilver/theme/content.css
Найти (показана часть строки)

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

div.inline-attachment p {


Вставить перед найденным

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

div.inline-attachment, dl.thumbnail dt, dl.file dt.attach-image {
   display: inline-block;
}


Открыть styles/prosilver/template/attachment.html
Найти

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

<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 -->>


Найти

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

         <dd>{_file.DOWNLOAD_NAME} ({_file.FILESIZE} {_file.SIZE_LANG}) {_file.L_DOWNLOAD_COUNT}</dd>


Удалить найденное (вывод названия, размера картинки и т.д.)


Теперь почистить кэш шаблона стиля, кэш темы и кэш браузера. Всё должно работать по-новому.


subsilver2
Открыть styles/subsilver2/template/bbcode.html
Найти

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

<!-- BEGIN inline_attachment_open -->
<div class="attachtitle">{L_ATTACHMENT}:</div><div class="attachcontent">
<!-- END inline_attachment_open -->

<!-- BEGIN inline_attachment_close -->
</div>
<!-- END inline_attachment_close -->


Заменить найденное на

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

<!-- BEGIN inline_attachment_open -->
<span style="font-size: 0.8em;">
<!-- END inline_attachment_open -->

<!-- BEGIN inline_attachment_close -->
</span>
<!-- END inline_attachment_close -->


Открыть styles/subsilver2/template/attachment.html
Найти

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

<!-- BEGIN _file -->


Добавить после найденного

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

<!-- IF _file.COMMENT or not (_file.S_THUMBNAIL or _file.S_IMAGE) --><div><!-- ENDIF -->


Найти

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

      <!-- IF _file.S_THUMBNAIL -->
         <a href="{_file.U_DOWNLOAD_LINK}"><img src="{_file.THUMB_IMAGE}" alt="{_file.DOWNLOAD_NAME}" /></a><br />
         <span class="gensmall">{_file.DOWNLOAD_NAME} [ {_file.FILESIZE} {_file.SIZE_LANG} | {_file.L_DOWNLOAD_COUNT} ]</span>
      <!-- ENDIF -->

      <!-- IF _file.S_IMAGE -->
         <img src="{_file.U_INLINE_LINK}" alt="{_file.DOWNLOAD_NAME}" /><br />
         <span class="gensmall">{_file.DOWNLOAD_NAME} [ {_file.FILESIZE} {_file.SIZE_LANG} | {_file.L_DOWNLOAD_COUNT} ]</span>
      <!-- ENDIF -->


Заменить найденное на

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

      <!-- IF _file.S_THUMBNAIL -->
         <a target="_blank" href="{_file.U_DOWNLOAD_LINK}"><img src="{_file.THUMB_IMAGE}" alt="{_file.DOWNLOAD_NAME}" title="{_file.DOWNLOAD_NAME}
{_file.FILESIZE} {_file.SIZE_LANG}, {_file.L_DOWNLOAD_COUNT}" /></a>
      <!-- ENDIF -->

      <!-- IF _file.S_IMAGE -->
         <img src="{_file.U_INLINE_LINK}" alt="{_file.DOWNLOAD_NAME}" title="{_file.DOWNLOAD_NAME}
{_file.FILESIZE} {_file.SIZE_LANG}, {_file.L_DOWNLOAD_COUNT}" />
      <!-- ENDIF -->


Найти

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

      <br />
   <!-- ENDIF -->


Заменить найденное на

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

      <!-- IF _file.COMMENT or not (_file.S_THUMBNAIL or _file.S_IMAGE) --></div><!-- ENDIF -->
   <!-- ENDIF -->



Очистить кэш шаблона и всё готово.


Может кому и пригодится. Хак хороший и лёгкий. Спасибо автору.

Добавлено спустя 15 часов 34 минуты 14 секунд:
если кому надо выровнять для "красивости" изображение по высоте - достаточно добавить код фиксирования высоты изображения (для сабсилвера).

открыть attachment.html

Найти

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

<!-- IF _file.S_IMAGE -->
<img src="{_file.U_INLINE_LINK}" alt="{_file.DOWNLOAD_NAME}" title="{_file.DOWNLOAD_NAME}
                        {_file.FILESIZE} {_file.SIZE_LANG}, {_file.L_DOWNLOAD_COUNT}" />
<!-- ENDIF -->


Заменить на

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

<!-- IF _file.S_IMAGE -->
<img src="{_file.U_INLINE_LINK}" alt="{_file.DOWNLOAD_NAME}" title="{_file.DOWNLOAD_NAME}
                        {_file.FILESIZE} {_file.SIZE_LANG}, {_file.L_DOWNLOAD_COUNT}" height="300" />
<!-- ENDIF -->


Почистить кэш. Картинки стоят ровненько.

Вложение:
Комментарий к файлу: выравнивание по высоте subsilver2
scan_height.png
scan_height.png [ 569.26 КБ | Просмотров: 4000 ] scan_height.png



трёхголовый белк семейства рептилоидов:
"три головы - хорошо, на как же трудно придти к согласию..."
Картинки-вложения,горизонтально,в одну строчку,phpbb 3
Не в сети
 Belk (Андрей)  
2021-05-23 
Администратор
Аватара пользователя

Стаж: 9 лет 2 месяца 19 дней
Сообщения: 1235
Откуда: здешние мы

Стиль: subsilver2


Репутация: 11


Russia

Тиц и PR

перейти на сайт пользователя
Найти темы пользователя

Добавление:

Если вы хотите добавить в код открытие через highslide отсюда (highslide-dlya-izobrazhenij-vo-vlozheniyax_t21.html), то надо заменить код вывода картинки

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

<!-- IF _file.S_IMAGE -->
<img src="{_file.U_INLINE_LINK}" alt="{_file.DOWNLOAD_NAME}" title="{_file.DOWNLOAD_NAME}
                        {_file.FILESIZE} {_file.SIZE_LANG}, {_file.L_DOWNLOAD_COUNT}" height="300" />
<!-- ENDIF -->


на

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

<!-- IF _file.S_IMAGE -->
                        <a href="{_file.U_INLINE_LINK}" title="{_file.DOWNLOAD_NAME}" class="highslide" onclick="return hs.expand(this)">
<img src="{_file.U_INLINE_LINK}" alt="{_file.DOWNLOAD_NAME}" title="{_file.DOWNLOAD_NAME}
                        {_file.FILESIZE} {_file.SIZE_LANG}, {_file.L_DOWNLOAD_COUNT}" height="300" class="galery_img" />
                        </a>
<!-- ENDIF -->


и всё. будет открываться "красивенько":

Вложение:
Комментарий к файлу: добавление highslide
highslide_info.png
highslide_info.png [ 267.89 КБ | Просмотров: 3990 ] highslide_info.png



Добавлено спустя 12 часов 35 минут 31 секунду:
добавление к теме:

если вы хотите выровнять изображения по высоте (прижать к верху), но при этом сохранить соотношение сторон изображения, вот так:

Вложение:
Комментарий к файлу: прижатие к верху с сохранением пропорций
002.png
002.png [ 231.83 КБ | Просмотров: 3984 ] 002.png



открыть highslide/highslide.css

найти код (показана часть кода)

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

.galery_img {


и заменить на

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

.galery_img {
  width:200px;
  height:auto;
  padding:5px;
  background:#FFFFFF;
  border:1px solid #1C1C1C;
  border-radius:10px;
  margin:10px;
  vertical-align:top;
}


Добавлено спустя 22 часа 35 минут 5 секунд:
если кому надо убрать белую рамку на увеличенном highslide изображении - то вот вам комментарий пользователя, который нашёл для себя решение этой проблемы:

Цитата:
Андрей, может Вам пригодиться.
Я нашёл где на увеличенной картинке можно убрать белую рамку.
Это в скрипте highslide, который ставиться в overall_header.html
Там нужно убрать вот эти две строки:

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

hs.dimmingOpacity = 0.8;
hs.outlineType = 'rounded-white';


А если убрать только одну:

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

hs.outlineType = 'rounded-white';


то подпись на белом фоне внизу картинки останется.


//имеется в виду вставка кода скрипта highslide в шапке сайта - overall_header.html
трёхголовый белк семейства рептилоидов:
"три головы - хорошо, на как же трудно придти к согласию..."
Показать сообщения за:  Поле сортировки  
Ответить на тему  Страница 1 из 1
  [ Сообщений: 2 ] 

Кто сейчас на сайте:
Всего посетителей: 0, из них зарегистрированных: 0, скрытых: 0 и гостей: 0 (основано на активности пользователей за последние 5 минут)
Больше всего посетителей (122) здесь было 19 дек 2023, 12:10

Сейчас этот раздел просматривают: нет зарегистрированных пользователей и гости: 0



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

Найти:
Перейти:  



cron

Текущее время: 11 дек 2024, 15:00

Создано на основе phpBB® Forum Software © phpBB Group
Яндекс.Метрика

Полная версия Мобильный вид