1 (edited by kisa 2017.05.13 12:09)

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

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

https://punbb.softplaza.net/uploads/images/2017/05/e2d3aa3c5fd5acb80acdcc3fcb5e54c3.png

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

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

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

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

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

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


https://punbb.softplaza.net/uploads/images/2017/05/a58ddc5eb1b727549681a69c984b0d41.png


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

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

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

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

2 (edited by PunBB 2017.05.12 15:27)

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

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

3

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

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

4 (edited by kisa 2017.05.13 00:13)

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

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

https://punbb.softplaza.net/uploads/images/2017/05/09ca43b9d119b9ceda1afd0725392ab8.png

Кликаем:
https://punbb.softplaza.net/uploads/images/2017/05/2a5b77c4a336c80135d969d948c9671e.png

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

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

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

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

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

Spoiler

https://punbb.softplaza.net/uploads/images/2017/05/70bd90f672a7b8b67592eb51d797ce60.png

Это на phpbb.

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

5

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

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

6 (edited by kisa 2017.05.13 05:23)

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

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

$matches[1]

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

Spoiler

Скриншот, ибо эта ветка для гостей закрыта
https://punbb.softplaza.net/uploads/images/2017/05/61163c7bf4bbe3d60a97987de0908713.png

7

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

kisa wrote:

А вот он.

Здорово там сделано  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 (edited by kisa 2017.05.13 06:06)

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

sempai wrote:

Jquery: v1.6.1 (2011

PunBB_INFO_ICQ/bigsmile

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

sempai wrote:

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

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

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

10

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

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

11 (edited by kisa 2017.05.13 08:27)

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

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

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

12 (edited by PunBB 2017.05.13 09:06)

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

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

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

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

13

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

PunBB wrote:

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

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

$matches[1]

kisa wrote:

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

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

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

вот ссылка

14

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

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

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


https://punbb.softplaza.net/uploads/images/2017/05/d63bc88198c4750458fb97ecae12ed39.jpg
https://punbb.softplaza.net/uploads/images/2017/05/1f2ec264ef06543143866222717625d7.jpg


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

$matches[1]

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

15

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

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

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

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

https://punbb.softplaza.net/uploads/images/2017/05/66440c11acfdf83e7bf76f596e5dbeab.png

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

https://punbb.softplaza.net/uploads/images/2017/05/f9fbf4fca84145ad52aedad8ddf205c2.jpg

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

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

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

$matches[1]

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

16

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

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

kisa wrote:

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

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

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

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

17

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

Ссылка на Github

1

18 (edited by kisa 2017.05.13 12:41)

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

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

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

$matches[1]

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

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

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

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

19

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

kisa wrote:

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

PunBB_INFO_ICQ/rofl

20 (edited by kisa 2017.05.14 04: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] - как это всё вместе сработает?

21

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

kisa wrote:

Если не обособить, как это сработает?

да тут что нибудь придумать можно. Скорее вопрос в другом, начал ли кто нибудь уже писать это расширение? А то получится как с лайками и рейтингом. Почти дописал, как уже рейтинг появился. Оно то может и хорошо иметь разнообразие, но плохо что все несогласованно как то что ли  PunBB_INFO_ICQ/scratch

$matches[1]

да, кстати. расширение должно быть на чистом JS, это спасет от страшной зависимости от jQuery,

22

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

Чистым js практический не владею, так что думаю, тебе и карты в руки.  PunBB_INFO_ICQ/yes

P.S. вот вы сейчас хотите вшить в uploader сторонню библиотеку увеличения изображений на фронте. А как быть с пользователями, которые используют другой "lightbox"? И какие конфликты могут возникнуть при совместном использовании разных библиотек!?

PunBB, ты знаешь что мне нравится Fancybox, но я то под себя при необходимости легко "перебью", функционал, а другие...  PunBB_INFO_ICQ/scratch

23 (edited by PunBB 2017.05.14 07:43)

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

sempai, нет, ну никто не собирается вшивать. Будут 2 отдельных расширения.

И было бы неплохо если бы ты вынес фэнсибох как отдельное расширение. Тогда у админов был бы выбор что использовать. Мне нравятся обе идеи, но у пользователей разные вкусы как видишь.
PunBB_INFO_ICQ/ok  я тогда займусь реализацией аскетичной версии на чистом JS  PunBB_INFO_ICQ/write

24 (edited by sempai 2017.05.14 08:07)

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

Fancybox на фронте не требует никаких добавок, если он установлен, то при формировании страницы инициализирует все присутствующие изображения, и не важно  как эти изображерия были вставлены в пост.

This content is available only to registered users.

25 (edited by PunBB 2017.05.14 09:07)

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

sempai wrote:

и не важно как эти изображерия были вставлены в пост.

вот меня этот вопрос заинтересовал, как только мы выпустили бета версию аплоадера. Но что то после установки фэнси не  работал, а я с ним разбираться не стал что к чему, не до этого было... PunBB_INFO_ICQ/sad

Сейчас аплоадер уже на стадии финала, так что можно теперь всякие плюшки к нему присобачивать   PunBB_INFO_ICQ/smile

26 (edited by kisa 2017.05.14 09:18)

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

sempai, Попробовал Фанси Бокс. Наконец-то, хоть увидел, что оно такое.
Тот, что я находил до того - не работал.
Ну это слайд-шоу в чистом виде, фактически - совсем другие задачи решает. В отличие от других, которые мне на форумах попадались, очень приятно, что со всей страницы картинки подбирает, а не из одного поста.

А вот то, как подбирает - наверное, интересно в контексте обсуждаемого.

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

Надо что-то решать с этими превью от фотосвалок.

$matches[1]

PunBB wrote:

аскетичной версии

PunBB_INFO_ICQ/thumbsup  PunBB_INFO_ICQ/music

27

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

kisa wrote:

Дальше превьюшки не лезет, показывает только её...

В хуке ps_handle_img_tag_start инициализируем проверку на существование превьюхи, типа:

if (!file_exists($url.'_thumb) ) {
    $url_thumb = $url.'_thumb;
} else {
    $url_thumb = $url;
}

В хуке ps_handle_img_tag_end вставляем превьюху:

   $img_tag = '<span class="postimg"><a class="fancybox fancybox.image" rel="group" href="'.$url.'"><img class="fb_img" src="'.$url_thumb.'" alt="'.forum_htmlencode($alt).'" /></a></span>';   

$matches[1]

P.S. само собой проверку на существование изображений, делать только для файлов, хранящихся на своем сервере, иначе тормозить будет мама не горюй!  PunBB_INFO_ICQ/bigsmile

28

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

sempaiPunBB_INFO_ICQ/shock Ой..
Я понял Ваш код  PunBB_INFO_ICQ/rofl

29

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

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

$matches[1]

А с другой стороны, возвращаясь к реализации запроса, проверять не имеет смысла, при условии что за превьюшками осуществляется жесткий контроль, т.е. чтобы картинка и превью были железно связаны.
Можно так:
1. Размещать превью в той же папке где основная фото.
2. Для имени превью, при ее создании добавлять префикс
3 Конвертировать все фото в формат .jpg, так как занимает меньше места чем .png

30 (edited by kisa 2017.05.15 01:13)

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

Наша картинка:
Если удаляется пост с "нашей" картинкой, аплоадер должен отследить и грохнуть и её превью.
Если удаляется только картинка (при редактировании) , аплоадер должен отследить и гохнуть и её превью.

Сторонняя картинка через [im g][/img ]:
Если удаляется чужая картинка где-то там, превью остаётся (просто не срабатывает на увеличение).
Если при редакции поста удаляется ссылка на чужую картинку - нужно  удалить и её превью.
Если удаляется пост с чужой картинкой - нужно удалить её превью у нас.

$matches[1]

Если автор поста удалит превью с фотосвалки, обработанное так, как говорит sempai,  - ничего у нас делать не нужно, ведь используется превью с фотохостинга.

31

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

видите теперь какое непростой механизм получается, но за то надежный и шустрый будет.
Вот только отдельным расширением. Уже начал работу над проектом. Скоро выложу каркас для критики  PunBB_INFO_ICQ/blum

32

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

PunBB_INFO_ICQ/thumbsup Он с другого конца простым будет - с самого важного. С той стороны монитора PunBB_INFO_ICQ/bigsmile

33

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

PunBB, если превьюхи "желнзно" будут присутстаовать, то проверку конечно можно и не делать!
PunBB_INFO_ICQ/yes

34

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

Реализовано. Продолжение обсуждения в теме релиза вот ссылка

Тема закрыта.