Хорошо, давайте разместим несколько фотографий в ваших сообщениях!
Базовый код: <img src = "https://www.website.com/imagename.jpg">
img = изображение
src = источник
Теперь, если у вас есть изображения в iNat, которые вы хотели бы использовать, вам нужен путь к конкретной фотографии (а не к наблюдению). Итак, я выбрал случайный объект https://www.inaturalist.org/observations/19800494 для работы. Все фотографии, использованные в этом посте, принадлежат Тани Ди @outramps - она так любезно просила о помощи :-)
ШАГ ПЕРВЫЙ - размещение изображения на iNat
ЩЕЛКНИТЕ ПРАВОЙ кнопкой мыши по изображению, которое вы хотите использовать в своем журнале, ЛЕВОЙ ЩЕЛЧОК на месте копирования изображения. Мы будем использовать первое изображение в качестве примера. Затем в своем журнальном сообщении добавьте текст <img scr = "
и затем ВСТАВЬТЕ место, которое вы скопировали с вашего изображения - в данном случае https://static.inaturalist.org/photos/30519569/large.jpeg?1548163737,
затем введите ">
это выглядит так
<img src ="https://static.inaturalist.org/photos/30519569/large.jpeg?1548163737 ">
Это одно изображение, и это будет ширина почтового ящика журнала.
ШАГ ВТОРОЙ - поиск изображения не на iNat
Чтобы создать ссылку на изображение, которое находится в Интернете, но не на iNat, используйте тот же метод, что и выше. Изображение должно быть вашим или у вас должно быть разрешение на его использование и указание имени фотографа / иллюстратора (это, конечно, верно и для фотографий iNat !!). Изображение должно быть в Интернете, а не на вашем жестком диске / компьютере!
ШАГ ТРЕТИЙ - изображения рядами
Теперь, если вы хотите добавить, скажем, 3 картинки подряд, вам нужно добавить немного дополнительного кода, чтобы указать ширину каждой картинки. Мы будем использовать процент, а не конкретную ширину, чтобы он хорошо смотрелся на экранах разных размеров (надеюсь). Итак, дополнительный код - style = "width: 33%"
, который даст вам 3 картинки подряд. Если вы хотите 2 картинки, вы должны использовать 50% и т. д. Итак, наш код для трех изображений подряд выглядит так: <img src = "https://static.inaturalist.org/photos/30519569/large.jpeg?1548163737" style = "width: 33%">
(повторяется 3 раза ) и выглядит это так (на том же рисунке):
Конечно, вы хотите использовать 3 разных изображения, поэтому вы копируете местоположение изображения для каждого из них, как в шаге 1, например:
<img src="https://static.inaturalist.org/photos/30519569/large.jpeg?1548163737" style="width: 33%">
<img src="https://static.inaturalist.org/photos/28828589/large.jpeg?1543914495" style="width: 33%">
<img src="https://static.inaturalist.org/photos/14337452/large.jpeg?1521637401" style="width: 33%">
и вы получите что-то вроде этого:
ШАГ ЧЕТВЕРТЫЙ - добавление пробелов между картинками в строках
Теперь все картинки «слиплись», что неплохо, но вам может понадобиться «передышка» между ними, поэтому вам нужно добавить немного кода в атрибут стиля - padding: 10px;
- так что ваш код для каждого изображения теперь выглядит следующим образом - <img src = "https://static.inaturalist.org/photos/30519569/large.jpeg?1548163737" style = "width: 33%; padding: 10px;">
а картинки выглядят так:
Вы можете изменить ширину промежутка между фотографиями по своему усмотрению. Я использовал здесь 10 пикселей, но вы можете использовать меньше (~ 5 пикселей) или больше (~ 20 пикселей). Поиграйте с ним и посмотрите, что работает для вас в конкретном посте, который вы создаете.
ШАГ ПЯТЫЙ - Расширенное изменение размера
(Иди сюда, только если чувствуешь себя храбрым.) В приведенном выше примере все изображения разного размера, и вы можете захотеть, чтобы они были одинаковой высоты, но не сдавливали их по ширине. Для этого вы должны указать максимальную высоту max-height
и максимальную ширину max-width
. Максимальная ширина может оставаться в процентах, но максимальная высота должна быть фактической высотой в пикселях, из-за которой все может немного шататься. Итак, чтобы получить максимальную высоту, вам придется поиграть с размерами пикселей, пока не получите то, что ищете. Измените размер, а затем проверьте в PREVIEW, как это будет выглядеть. Если это не так, увеличьте или уменьшите количество пикселей. В этом примере я использовал 200px - style="max-width: 33%; max-height: 200px; padding: 10px;"
и это выглядит так:
Исходные фотографии должны иметь высоту больше, чем ваша максимальная высота, чтобы в конечном итоге на вашем посте с использованием этого метода была такая же высота. Если исходные фото меньше, то в любом случае у вас будет ряд фото разной высоты. Это очень продвинутая штука, так что, если вы здесь, то молодец, можете пойти и выпить кофе ;-)
Автор @karoopixie
評論
Не должно быть пробелов вокруг знака равно в аттрибутах тега. И куда-то потерялись угловые скобки, видимо в процессе перевода
<img src="https://www.website.com/imagename.jpg"/>
Можно ещё воспользоваться синтаксисом markdown, если не нужны стили.
![Alt-текст](https://static.inaturalist.org/photos/30519569/large.jpeg?1548163737 "Заголовок изображения")
"ШАГ ПЕРВЫЙ - размещение изображения на iNat"
Гораздо правильнее будет нажать на на изображении в наблюдении, после чего в списке справа выбрать картинку, подходящую по размеру.
Спасибо, что доверили мне :-)
исходный пост - https://www.inaturalist.org/journal/karoopixie/21170-adding-photos-to-journal-and-news-posts
To show angle brackets as code use & l t ; and & g t ; (without the spaces!) for < and > respectively.
Спасибо за помощь. Все поправил.
@karoopixie, iNat now uses markdown to markup the posts and comments. If you use backticks (`) to highlight the code, you don't need to escape the < symbols. Also, to show < you can use & entity (
&lt;
).@kildor thanks for those tips! The problem is that markdown isn't supported on all the pages yet, I don't think?
@alex_iosipenko С удовольствием. Я так взволнован, что написал кое-что, достойное перевода на русский язык :-D (Used goog translate, so I hope it's translated it correctly!)
@karoopixie, I don't know. It has to be tested. I think that bigger problem with markdown is lacking styles and attributes support. So if you want to use styles, or some bootstrap classes, you have to use clear HTML.
新增評論