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

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

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

новая версия pan uploader порадовала глаз админу управлении картинками наводишь мышку маленькую картинку красиво фото PunBB

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

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

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

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

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

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


новая версия pan uploader порадовала глаз админу управлении картинками наводишь мышку маленькую картинку красиво фото PunBB


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

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

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

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

[url]http://krokovod.org[/url]

Поделиться

2

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

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

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

Поделиться

3

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

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

Сайт Grand91

Поделиться

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

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

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

Кликаем:

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

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

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

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

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

Spoiler

Это на phpbb.

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

[url]http://krokovod.org[/url]

Поделиться

5

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

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

Сайт sempai

Поделиться

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

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

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

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

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

Spoiler

Скриншот, ибо эта ветка для гостей закрыта
dontknow когда-то летал диал-апе сейчас такого наворотили создании редактировании сообщений штука реально класс фото PunBB

[url]http://krokovod.org[/url]

Поделиться

7

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

kisa сказал:

А вот он.

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

Сайт Grand91

Поделиться

8

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

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

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

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

Установленная версия Jquery: v1.6.1 (2011)  присутствуют миниатюры расположение увеличение картинок отвечает следующий скрипт name highslide version october 2009 уста фото PunBB

Сайт sempai

Поделиться

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

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

sempai сказал:

Jquery: v1.6.1 (2011

jquery 2011 примерно появилось присутствуют миниатюры догадывалс проверить болтался сейчас органично догадался  фото PunBB

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

sempai сказал:

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

Точно. Я не догадывалс проверить, когда там болтался, а сейчас - оно так органично, что тоже не догадался  jquery 2011 примерно появилось присутствуют миниатюры догадывалс проверить болтался сейчас органично догадался  фото PunBB Ну, наверное, для такого дела и не жалко места. Тем более, там единицы килобайт.

А у нас в админке аплоадера без миниатюр jquery 2011 примерно появилось присутствуют миниатюры догадывалс проверить болтался сейчас органично догадался  фото PunBB  jquery 2011 примерно появилось присутствуют миниатюры догадывалс проверить болтался сейчас органично догадался  фото PunBB (отмечаю не из-за жадности насчёт места, а из любви к техническому изяществу, в т.ч. программных алгоритмов  jquery 2011 примерно появилось присутствуют миниатюры догадывалс проверить болтался сейчас органично догадался  фото PunBB )

[url]http://krokovod.org[/url]

Поделиться

10

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

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

Поделиться

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

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

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

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

[url]http://krokovod.org[/url]

Поделиться

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

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

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

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

Хм. Как я мог назвать так таблицу в апоадере? Странно, только сейчас обратил внимание.   сторонними картинками копировать директории превьюшек внешними прокатывает вроде прямая ссылка изображени фото PunBB

Поделиться

13

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

PunBB сказал:

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

Да нормально, золотое правило программиста: "работает - не трогай!". назвать таблицу апоадере нормально золотое правило программиста работает трогай merge posts bbcode добавлено 2017 адм фото PunBB)

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

kisa сказал:

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

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

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

Сайт sempai

Поделиться

14

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

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

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




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

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

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

Поделиться

15

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

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

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

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

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

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

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

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

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

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

[url]http://krokovod.org[/url]

Поделиться

16

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

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

kisa сказал:

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

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

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

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

Поделиться

17

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

Ссылка на Github

Сайт sempai

Поделиться

1

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

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

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

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

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

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

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

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

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

[url]http://krokovod.org[/url]

Поделиться

1

19

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

kisa сказал:

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

нужет компьютер одной кнопкой rofl фото PunBB

Сайт sempai

Поделиться

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

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

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

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

[url]http://krokovod.org[/url]

Поделиться