AfricaRP Logo

Картинки, видео и медиа

Статьи с визуальным контентом читаются в несколько раз лучше! Здесь вы узнаете, как вставлять фотографии, гифки и видеоролики.

Важно: Откуда брать картинки!

Никогда не вставляйте прямые ссылки на картинки из ВКонтакте, Discord или Telegram! Социальные сети удаляют такие ссылки через пару дней, и картинка в вашей статье превратится в "битый пиксель".

Как правильно:

  1. Либо загружайте картинки к нам в папку /public/media/... и указывайте путь к ней.
  2. Либо используйте надежные фотохостинги (например, Imgur, Unsplash, Pinterest) и вставляйте их постоянные ссылки.

Обычные картинки и Гифки

Для вставки картинок и анимаций (.gif) используется стандартный синтаксис. При клике на любую картинку в статье, она плавно увеличится на весь экран (работает как лупа).

Как писать:

![Аппетитные панкейки](https://i.pinimg.com/1200x/03/33/f9/0333f9e4f0179908dd9a21d0b5c6ff43.jpg)



![Тестовая гифка](/media/tutorial/test.gif)

Как выглядит:

Аппетитные панкейкиНажмите, чтобы увеличитьАппетитные панкейки

Тестовая гифкаНажмите, чтобы увеличитьТестовая гифка

Галерея скриншотов

Если у вас много скриншотов (например, 4 штуки), не стоит вставлять их друг за другом — это займет слишком много места. Используйте тег <ImageGrid>, чтобы выстроить их в красивую сетку. Укажите в columns количество колонок (от 2 до 4). Здесь мы покажем пример загрузки картинок напрямую из нашей локальной папки.

Как писать:

<ImageGrid columns={2}>

  ![Фото 1](/media/tutorial/image.jpg)

  ![Фото 2](/media/tutorial/image2.jpg)

  ![Фото 3](/media/tutorial/image3.jpg)

  ![Фото 4](/media/tutorial/image4.jpg)

</ImageGrid>

Как выглядит:

Фото 1Нажмите, чтобы увеличитьФото 1
Фото 2Нажмите, чтобы увеличитьФото 2
Фото 3Нажмите, чтобы увеличитьФото 3
Фото 4Нажмите, чтобы увеличитьФото 4

Лупа для мелких деталей

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

Как писать:

<Magnifier src="/media/tutorial/galactic.jpg" zoom={2.5} />

Как выглядит:

Слайдер "До / После"

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

Как писать:

<ImageCompare 

  before="/media/tutorial/image.jpg" 

  after="/media/tutorial/image2.jpg" 

  beforeLabel="Первый вариант"

  afterLabel="Второй вариант"

/>

Как выглядит:

Второй вариант
Второй вариант
Первый вариант
Первый вариант

Видео (YouTube, RuTube и локальные)

Вы можете легко вставлять видеоролики. Если видео загружено к нам на сервер, используйте <VideoPlayer>. Если это ролик с Ютуба или Рутуба, просто скопируйте его ID из ссылки (набор непонятных букв и цифр в конце ссылки) и используйте соответствующие теги.

Как писать:

<VideoPlayer src="/media/tutorial/video.mp4" title="Тестовое видео" />



<YouTube id="fKABMFgUYXE" title="Тестовое видео YouTube" />



<Rutube id="c0b30bb7e8e88c159eda91ac01fa9e14" title="Тестовое видео Rutube" />

Как выглядит:

Аудиоплеер (Голосовые заметки)

Иногда текст лучше сопроводить аудиокомментарием или звуковым эффектом. Для этого используйте тег <VoiceBox>.

Как писать:

<VoiceBox src="/media/tutorial/sound.mp3" title="Шеф выдал базу" />

Как выглядит:

Шеф выдал базу
Нажмите Play
Назад
Текст и базовые элементы
Для редакторов
Вперед
Интерактивные элементы
Для редакторов