1 (изменено: kisa, 2017.05.13 22:09)

Тема: Оформление изображений в контенте. Превью.

Новая версия Pan Uploader порадовала глаз админу в управлении картинками. Наводишь мышку на маленькую картинку - она красиво плавно увеличивается. Эстетиично  PunBB_INFO_ICQ/thumbsup

Оформление изображений в контенте. Превью.

Сама техническая возможность такой работы с картинками наталкивает на идею: показать такую красоту не одному админу, а тем, кому это действительно нужно и даже полезно - читателям форума.

Аплоадер прекрасно справляется со своей работой (не устаю хвалить), поэтому, наверное, его этим нагружать не нужно. Он может потерять свою суровую и приятную аскетичность и предельную простоту для пользователя.

Кроме того, на форуме оказываются изображения, вставленные через тэги [ img][/img ] . Как, впрочем, и картинки, закачанные аплоадером. Показываются они одинаковым образом, следовательно обрабатывать, наверное, их тоже можно одинаково и независимо от происхождения и расположения картинок.

Тем не менее, огромные картинки часто мешают восприятибю текста во время чтения, но при этом требуется их и рассматривать. Понятно, для этого везде используются маленькие превьюшки. А вот в нашем арсенале ничего подобного в нормальном виде и нет.

Как я понял, превью в админке аплоадера получаются уменьшением для показа самих оригиналов, а не хранятся где-то в виде дубля? (впрочем, для такого дела не жалко места и для дублей, пожалуй)

Вот и было бы очень красиво и удобно  вылавливать в контенте картинки в  [ img][/img ] (пропуская готовые превьюшки фотохостингов, если такие попадаются), и уменьшать их для показа на странице до какого-то одного небольшого размера. При клике на такую картинку, она увеличивается до своего нормального размера. Никаких кнопок, никаких слайд-шоу, никаких громоздких рамок. Пожалуй, и никакого полупроззрачного чёрного фона, как сейчас это популярно. Это тогда будет не punbb PunBB_INFO_ICQ/bigsmile . Один клик - увеличилась. Другой - спряталась. Всё.


Оформление изображений в контенте. Превью.


Поведение - точь-в-точь, как у маленьких картинок в админке аплоадера. Только не при наведении, а при клике.

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

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

По-видимому, такое поведение, функционал, и внешний вид (точнее, отсутствие каких-либо элементов внешнего вида) как нельзя лучеше будут соответствовать здоровой аскетичности и скорости работы форума, минимально (но грамотно) используя новомодные примочки  PunBB_INFO_ICQ/bigsmile Ничего лишнего, всё предельно функционально - и от этого красиво, интуитивно понятно даже не глазами, а пальцем на мышке, и приятно.

2 (изменено: PunBB, 2017.05.13 01:27)

Re: Оформление изображений в контенте. Превью.

Вот пример того, как подробно надо описывать  PunBB_INFO_ICQ/bigsmile свои запросы, и нам будет проще, хоть знать куда копать.  PunBB_INFO_ICQ/thumbsup

Если вам долго не отвечают, пишите автору темы в личку или на Email.

3

Re: Оформление изображений в контенте. Превью.

kisa, и снова жесточайше плюсую! Пожалуй, именно этого сейчас и не хватает больше всего. На форуме, на котором я и наши пользователи сидели до этого, был специальный тег для этих целей - вроде бы [thumb]. Очень без него неудобно... Поставили расширение какого-то фотохостинга, там вроде бы есть миниатюры, но оно изображения уменьшает не полностью, а как бы обрезает. Да и по клику на такую миниатюру картинка не открывается в полный размер на этой же странице, а редиректит на тот фотохостинг - костыль...

4 (изменено: kisa, 2017.05.13 10:13)

Re: Оформление изображений в контенте. Превью.

Вот один из форумов, заваленных  свистелками и вертолётными панелями ВВ-кодов (я там с некоторых пор в посте кроме простого текста ничего не умею  PunBB_INFO_ICQ/bigsmile ). Но.  Так, как я пишу, там устроен показ картинок (закачка их там тоже по-дурацки сложно наворочена). Это идеально как раз для punbb. Такое ощущение, что по-другому и быть не может:

Оформление изображений в контенте. Превью.

Кликаем:
Оформление изображений в контенте. Превью.

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

Нет НИ-ЧЕ-ГО. Показ картинок. Тооненькая рамочка - только на полном размере. Тень, дающая некоторый красивый объём. Всё. Когда картинки в тексте - они как вклееные, как оттуда, а не уменьшенные  PunBB_INFO_ICQ/thumbsup

Заметил, что там так обрабатываются только встроенные картинки. А вот те, которые вставлены через [ img][/img ], так и торчат во весь размер. Видимо, эта обработка встроена в качалку, а не обрабатывает готовые картинки  PunBB_INFO_ICQ/pardon

Это на "крутом" IPBoard.

Отрицательный пример со свистелками и мутным фоном показал выше, почёрканным. Вертолётная панель, мутный фон.. Превьюшки там не менее дурацкие  - с ненужной информацией вроде количества просмотров, имени файла, и ещё каким-то мусором. Они выделены целым цветным полем, что выглядит особенно глупо, когда картинка маленькая. И превью там - отдельный файл со своим адресом. Короче, пример, как не надо делать превью.

Spoiler

Оформление изображений в контенте. Превью.

Это на phpbb.

Если учесть недостатки первого (необработку сторонних картинок), второго (ну там вообще буээ), и перенять достоинства перврго (предельную лаконичность, при которой не теряем ни-че-го, продукт может получиться идеальным. Лучшим.

5

Re: Оформление изображений в контенте. Превью.

Скиньте адрес этого красивого форума, там где картинки вклеины в текст, с большой долей вероятности все красивости обыграны CSS, возможно даже с со стилевым сжатием оригинала. А для увеличения картинок используется "кастрированный" скрипт, аля Lightbox  PunBB_INFO_ICQ/bigsmile

6 (изменено: kisa, 2017.05.13 15:23)

Re: Оформление изображений в контенте. Превью.

PunBB_INFO_ICQ/dontknow
А вот он. Когда-то летал на диал-апе, сейчас там такого наворотили.. Особенно в создании и редактировании сообщений. Но эта штука реально классная. И давно уже.
ссылка

Добавлено: 2017.05.13 14:22

Стили... А почему оно тогда  не обрабатывает вставленные с улицы через [img ][ /img] картинки?

Spoiler

Скриншот, ибо эта ветка для гостей закрыта
Оформление изображений в контенте. Превью.

7

Re: Оформление изображений в контенте. Превью.

kisa сказал:

А вот он.

Здорово там сделано  PunBB_INFO_ICQ/thumbsup
Разве что на мой взгляд было бы лучше, если бы изображения центрировались при увеличении размера.

8

Re: Оформление изображений в контенте. Превью.

1) Присутствуют миниатюры.

2) За расположение и увеличение картинок отвечает следующий скрипт:

Name:    Highslide JS
Version: 4.1.8 (October 27 2009)

Установленная версия Jquery: v1.6.1 (2011)  PunBB_INFO_ICQ/bigsmile

9 (изменено: kisa, 2017.05.13 16:06)

Re: Оформление изображений в контенте. Превью.

sempai сказал:

Jquery: v1.6.1 (2011

PunBB_INFO_ICQ/bigsmile

Примерно тогда оно и появилось там.

sempai сказал:

1) Присутствуют миниатюры.

Точно. Я не догадывалс проверить, когда там болтался, а сейчас - оно так органично, что тоже не догадался  PunBB_INFO_ICQ/bigsmile Ну, наверное, для такого дела и не жалко места. Тем более, там единицы килобайт.

А у нас в админке аплоадера без миниатюр PunBB_INFO_ICQ/cool  PunBB_INFO_ICQ/thumbsup (отмечаю не из-за жадности насчёт места, а из любви к техническому изяществу, в т.ч. программных алгоритмов  PunBB_INFO_ICQ/music )

10

Re: Оформление изображений в контенте. Превью.

sempai, вот с миниатюрами самый удачный вариант для лучшей производительности. А сжимать все картинки, что есть на странице тоже не дело. Но при таком подходе админ должен быть готов раскошелится на дополнительное место на диске.

Если вам долго не отвечают, пишите автору темы в личку или на Email.

11 (изменено: kisa, 2017.05.13 18:27)

Re: Оформление изображений в контенте. Превью.

Ага, тогда небольшим местом лучше жертвовать. Несколько килобайт картинки получаются. Для примера  глянул там, на КиЯ - 2,5% прирост занятого места  PunBB_INFO_ICQ/bigsmile

Нононо. А как быть со сторонними картинками? Это не дело - их необработанными оставлять. Будет некрасиво и неудобно. А сыпать себе на сервак их превьюшки - тоже как-то не алё.

12 (изменено: PunBB, 2017.05.13 19:06)

Re: Оформление изображений в контенте. Превью.

. А как быть со сторонними картинками?

Так же копировать их в директории превьюшек. Со внешними это только прокатывает вроде только тогда когда есть прямая ссылка на изображение.
Где нибудь в адмнке кнопочку, тык, "Создать преаьюшки для внешних картинок".
Скрипт пройдется по всем постам где есть картинки и преобразует их в превьюшки.

Хм. Как я мог назвать так таблицу в апоадере? Странно, только сейчас обратил внимание.   PunBB_INFO_ICQ/scratch

Если вам долго не отвечают, пишите автору темы в личку или на Email.

13

Re: Оформление изображений в контенте. Превью.

PunBB сказал:

назвать так таблицу в апоадере

Да нормально, золотое правило программиста: "работает - не трогай!". PunBB_INFO_ICQ/smile)

Добавлено: 2017.05.13 19:18

kisa сказал:

А у нас в админке аплоадера без миниатюр

тоже на любителя, вообще любая программка - это конструктор, каркас если хотите, главное чтобы основные функции работали как часы, а "марафет" ожно и свой навести.

У себя сделал так:

14

Re: Оформление изображений в контенте. Превью.

Костя, смотри, вот твои фотки уменьшил до 100 пикселей по высоте. Сохранял в 2 вида расширений. 1 PNG вес = 17кб, JPG вес = 2кб.

Для визуального обзора, загружаю их в пост. Посмотри, как выглядит.


Оформление изображений в контенте. Превью.
Оформление изображений в контенте. Превью.


да, кстати, какую структуру будем использовать для хранения превьюшек?

Добавлено: 2017.05.13 19:37

РАНЬШЕ при загрузке картинки добавлялся символ перевода строки, для защиты от слепленных тегов вместе, иначе картинки исчезают. Что то сейчас его нет.  Тогда в этом новом расширении может лучше с помощью CSS картинки в ряд выстаивать?

Если вам долго не отвечают, пишите автору темы в личку или на Email.

15

Re: Оформление изображений в контенте. Превью.

Ну там 120 норм. Здесь они, конечно,  страшненькие, ибо три раза пережатые скриншоты. Думаю, админ должен выставлять. Или (как я люблю - чтоб без лишнего - задать 120, но рассказать, где в файле меняется, если кому-то очень надо PunBB_INFO_ICQ/bigsmile ).

Превьюху от *.png  в виде *.jpg - не? Если такая разница? Понимаю, что разницы мизер, конечно.

Вот 120 по высоте, *.png (37,9 Кб)

Оформление изображений в контенте. Превью.

и  *.jpg (9,6 Кб) с 97%"качества".

Оформление изображений в контенте. Превью.

Явно можно ещё ужать. Или задавать.

Ну и расширение должно пропахать форум и создать превью, и отслеживать [ img][/img ] в новых постах. А откуда оно там взялось - от апллоадера или от вставки слева - неважно. Если я правильно понимаю.

По структуре.. может  /forum/uploads/preview - параллельно загруженным аплоадером файлам и картинкам и с такой же структурой внутри (каталог года, в нём - месяцы). Хотябы для порядку и единообразия. А туда навалить превьюхи и от внешних, и от своих. А как ещё?

Добавлено: 2017.05.13 19:02

В ряд лучше - сколько помещается. С переводом строки будет тупо некрасиво. Ровнять все по высоте, а по ширине - какие получатся, понятно.

16

Re: Оформление изображений в контенте. Превью.

Если будут по кб 2-5 и то супер! Страницы тогда вообще летать будут, Пусть даже если на каждой будет по 3-5 фоток  PunBB_INFO_ICQ/thumbsup

kisa сказал:

Ну там 120 норм. Здесь они, конечно,  страшненькие, ибо три раза пережатые скриншоты.

Даа, согласен. 120 изящней смотрятся.

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

Скрипт, кстати можно выдрать с того же форума и усовершенствовать до макс версии. Интересно, а на чистом JS такое реально?

Если вам долго не отвечают, пишите автору темы в личку или на Email.

17

Re: Оформление изображений в контенте. Превью.

Ссылка на Github

18 (изменено: kisa, 2017.05.13 22:41)

Re: Оформление изображений в контенте. Превью.

Как-то ж надо порешать с превью дохлых картинок - из удалённых постов и т.д. Причём, наверное.. О! Как идея? Не нужно удалять превью сторонней картинки, если оригинал сдох по какой-то причине там, откуда он подтянут! Это ж решает пресловутую проблему некасивых дырок в контенте!

А вот в остальном нужно ещё понять, как порешать с удалениями.

Добавлено: 2017.05.13 21:39

sempai, Видал Ваше оформление, что на видео. Ну оно обычное, как везде (для пользователя). Я такой подход подверг критике в первом посте, видимо, исходя из специфики форумов, где приходится болтаться. Будь то форум-любимая тусовка, или случайный, куда я попал на минутку из поиска, например, возжелав лично починить  или сделать руками что-то из быта или строительства. 

Все они технические. И слайд-шоу не нужно. Тёмный фон мешает. Ну и т.д. Опять-таки, на таких форумах болтаются люди, часто старшего поколения. Им нужет компьютер с одной кнопкой  PunBB_INFO_ICQ/bigsmile . Вертолётные панели их раздражают. Ну и мой форум такой.

Ваша модель хороша для менее эээ... делового, что ли, общения. Для более гуманитарного. Для такого контента, где много картинок и мало текста, причём картинки к тексту привязаны не чётко. Как в художественной книге бывает.

Первое, что почему-то пришло в голову - "как я провёл отпуск" PunBB_INFO_ICQ/bigsmile . Причём в виде скорее фотоальбома, а не рассказа.

19

Re: Оформление изображений в контенте. Превью.

kisa сказал:

Им нужет компьютер с одной кнопкой

PunBB_INFO_ICQ/rofl

20 (изменено: kisa, 2017.05.14 14:00)

Re: Оформление изображений в контенте. Превью.

PunBB_INFO_ICQ/smile
Вот такие конструкции нужно как-то по-своему обрабатывать - пропускать, или обозначать.... Это готовая превью стороннего фотохостинга, скопипащенная оттуда, он такие генерирует.

[url=https://itmages.ru/image/view/5726930/ddfef987][img]http://storage8.static.itmages.ru/i/17/0512/s_1494566653_2754769_ddfef98754.jpg[/img][/url]

Если не обособить, как это сработает? Вставится наша превьюшка на их превьюшку? Оно внутри [ur l][/u rl] - как это всё вместе сработает?