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: punbb.info@gmail.com

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: punbb.info@gmail.com

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: punbb.info@gmail.com

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: punbb.info@gmail.com

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: punbb.info@gmail.com

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] - как это всё вместе сработает?