Способы вставки изображений в сообщение (ИНСТРУКЦИЯ)

[Pavlentiy]

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

Итак, большинство пользователей вставляют фотографии как вложения к сообщению. У этого способа есть несколько недостатков:
1. Вы не можете добавить больше 5 изображений в одном сообщении
2. Вы не можете чередовать изображения и текст - они всегда будут отображаться в конце сообщения.
3. Существует ограничение места, которое выделяется на изображения, загруженные на форум одним пользователем, и однажды вам сообщат, что вы достигли лимита. Для того чтоб загрузить новые изображения вам придется удалить старые.

Чтоб избежать этих неудобств, можно загружать фото на фотохостинги.
Фотохостинг - это сайт, на который вы загружаете изображение со своего компьютера и на котором они хранятся. Этих сайтов сейчас очень много бесплатных и в принцип у них у всех одинаковый: вы выбираете файлы со своего компьютера, они загружаются на сайт, сайт дает вам ссылки на изображения, которые вы потом вставляете в своих сообщениях на форуме.
Используя сайты, которые дают возможность загружать сразу несколько фото, вы можете значительно ускорить процесс размещения изображений в ваших сообщениях по сравнению с вложением файлов и при этом вы не загружаете форум.

Как я уже говорил, таких сайтов множество и у них может немного отличаться интерфейс и функционал, но в целом принцип у них одинаковый. Я покажу вам как заливать фото на примере одного из них.

Выбираем понравившийся сайт. Окно загрузки изображений выглядит примерно так:

1. Нажимаем кнопку "Обзор" и находим у себя на компьютере нужный файл. Если сайт позволяет загружать несколько файлов одновременно то выбираем нужные файлы.
2. Поле для превью. Это маленькое изображение нашего фото при нажатии на которое открывается само фото. Если превью нам не нужно - не трогаем, если нужно - можем задать его размеры и надпись на нем.
3. Дополнительные операции с загружаемым файлом. Обычно ничего тут делать не нужно. Только обратите внимание, что на некоторых сайтах может стоять по умолчания галочка "Сжимать изображение до ___ пикселей" и если её не снять, то все ваши фото будут сжиматься до этого размера. Чтоб этого не случилось просто нужно галочку снять.
4. Загружаем изображения.

После того, как изображения загрузятся, сайт предоставит нам разные варианты ссылок:

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

Если у вас есть просто ссылка на изображение, то нужно вставить её в тэг IMG для того, чтоб картинка сразу отображалась на форуме, а не была просто ссылкой. Для этого в окне сообщения нужно нажать соотв. кнопку:


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

[La_De_Vill]

Супер, я так понял, что кроме меня ещё кто-то в ЛС просил обучить ?

[Pavlentiy]

Как оказалось, это массовая проблема

[drumnbass]

Чому б не зробити сполйлер для картинок?

[Pavlentiy]

Чому б не зробити сполйлер для картинок?

На сколько я знаю, на форуме этот тег не поддерживается

[bonza]

600 на 1200 не грузится на сайт. Они весят больше 200

[start1394]

тупая и неудобная затея с загрузкой фото

[Maxon_87]

Чому б не зробити сполйлер для картинок?

На сколько я знаю, на форуме этот тег не поддерживается

Администрирование->Сообщения->BB Codes->Добавить BB Code

Использование:

Code: Select all

[spoiler={TEXT1}]{TEXT2}[/spoiler]

Замена HTML:

Code: Select all

<div style="margin: 5px">
   <div style="background-color: #E9E9E6; border: 1px solid #C3CBD1">
      <input style="margin: 3px; padding: 0; border: 1px solid #999999; background-color: #FAFAFA; font-weight: bold; font-size: 0.8em" type="button" value="+" onclick="if (this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display != '') { this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display = ''; this.innerText = ''; this.value = '−'; } else { this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display = 'none'; this.innerText = ''; this.value = '+'; }" />
      <span style="display: inline-block; font-weight: bold; font-size: 0.9em; padding: 2px 0 0"> {TEXT1}</span>
   </div>
   <div>
      <div style="display: none; background-color: #F5F5F5; border: 1px solid #C3CBD1; border-top: none; padding: 5px">
         {TEXT2}
      </div>
   </div>
</div>

Подсказка:
[spoiler=текст, который видно]текст, который не видно[/spoiler]

Пример как писать, и как выглядит в действии:

Spoiler.jpg (50.25 KiB) Viewed 43565 times

[Johnik]

извиняюсь что тут пишу. Некоторые модеры не заходят на форум по несколько лет
Не могу создать новую тему, пишет 413 Request Entity Too Large к кому обратиться*

[Pavlentiy]

извиняюсь что тут пишу. Некоторые модеры не заходят на форум по несколько лет
Не могу создать новую тему, пишет 413 Request Entity Too Large к кому обратиться*

Скорее всего вы пытаетесь загрузить слишком большой файл