Как управлять отображением картинок, загруженных на Осинку
(руководство для продвинутых)
После загрузки фото, у вас есть базовый код с номером картинки. По нему картинка отображается в теме среднего размера миниатюрой. Этот размер задан по умолчанию, одинаковый для всех. По клику на картинку можно посмотреть картинку в максимально доступном размере.
Так выглядит код:
Так выглядит стандартный результат (можно нажать и посмотреть на большой кадр):
[img]107596[/img]
Возможно, вы делаете мастер-класс или оформляете статью, и стандартный вариант миниатюры вам не подходит. Для таких случаев у нас предусмотрены варианты ручной настройки кода, которые позволяют реализовать практически все возможные потребности.
Итак, шаг первый: короткую запись кода меняем на более полную:
Новый код:
Код: Выделить всё
[img]https://images.osinka.net/107596/s250[/img]
Его результат:
[img]
https://images.osinka.net/107596/s250[/img]
Да, все верно, выглядит эта картинка точно так же, как и предыдущая.
![Wink :wink:](./images/smilies/icon_wink.gif)
Это специально сделано, чтобы было понятно, что разный код может давать одинаковый результат.
Давайте посмотрим, что же изменилось в коде? В простом варианте достаточно лишь номера картинки, чтобы все работало. В полном коде надо добавить 1) ссылку на сервер Осинки перед номером картинки и 2) "довесок" после номера картинки - в данном примере, /s250. Если стереть первую и вторую часть, то останется только номер картинки, и код перейдет в формат стандартного.
[img]
https://images.osinka.net/107614/s400[/img]
Теперь самое главное: все управление отображением картинок находится во втором "довеске"! Меняя эту часть, можно изменять отображение картинки. Часть эта (s250) состоит из двух элементов: буквы S и цифры 250. Цифра - это размер в пикселях, вы его можете выбрать по своему усмотрению. А буква - это сигнал серверу, к чему применить эту цифру.
Возможные варианты:
c250 = crop (вырезает квадрат со стороной 250 px, то есть делает изображение квадратным)
s250 = square (вписывает ваше изображение в квадрат без вырезания, это позволяет сохранить пропорции сторон кадра)
h250 - размер по высоте (задает высоту картинки)
w250 - размер по ширине (задает ширину картинки)
Итого, четыре варианта букв - C, S, H, W.
И бесчисленное количество размеров в цифрах. Стандартная миниатюра, как вы теперь видите по расширенному коду - s250 - вписывает изображение в квадрат с размером 250 px. При моей пропорции сторон кадра, миниатюра получается 166 px в высоту и 250 px в ширину.
[img]
https://images.osinka.net/107596/s250[/img]
Посмотрим теперь как изменится кадр, если применить в коде другие значения. Я буду это делать кратко - код и результат. Саму запись, я думаю, вы уже понимаете и можете применять самостоятельно. Кстати, чтобы не писать вручную полный код каждый раз заново, можно копировать нужную строчку, вставляя туда лишь свой номер кадра.
-----------------
C = crop
Код: Выделить всё
[img]https://images.osinka.net/107596/c350[/img]
Вырезает квадрат с указанной стороной в пикселях.
[img]
https://images.osinka.net/107596/c350[/img]
-----------------
S = square
Код: Выделить всё
[img]https://images.osinka.net/107596/s350[/img]
Вписывает в квадрат с сохранением пропорции сторон.
[img]
https://images.osinka.net/107596/s350[/img]
-----------------
H = height
Код: Выделить всё
[img]https://images.osinka.net/107596/h350[/img]
Устанавливает высоту кадра.
[img]
https://images.osinka.net/107596/h350[/img]
-----------------
W = width
Код: Выделить всё
[img]https://images.osinka.net/107596/w350[/img]
Задает ширину кадра.
[img]
https://images.osinka.net/107596/w350[/img]
-----------------