Добавление фотографий в "журнал" и "новостные сообщения"

Хорошо, давайте разместим несколько фотографий в ваших сообщениях!
Базовый код: <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

由使用者 alex_iosipenko alex_iosipenko2020年11月02日 20:48 所貼文

評論

Не должно быть пробелов вокруг знака равно в аттрибутах тега. И куда-то потерялись угловые скобки, видимо в процессе перевода
<img src="https://www.website.com/imagename.jpg"/>

Можно ещё воспользоваться синтаксисом markdown, если не нужны стили.
![Alt-текст](https://static.inaturalist.org/photos/30519569/large.jpeg?1548163737 "Заголовок изображения")

"ШАГ ПЕРВЫЙ - размещение изображения на iNat"
Гораздо правильнее будет нажать на на изображении в наблюдении, после чего в списке справа выбрать картинку, подходящую по размеру.

發佈由 kildor 超過 3 年 前

Спасибо, что доверили мне :-)

исходный пост - 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 超過 3 年 前

Спасибо за помощь. Все поправил.

發佈由 alex_iosipenko 超過 3 年 前

@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 &lt; you can use &amp; entity (&amp;lt;).

發佈由 kildor 超過 3 年 前

@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 超過 3 年 前

@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.

發佈由 kildor 超過 3 年 前

新增評論

登入註冊 添加評論