Помощь по сайту

Вы находитесь на страничке, отвечающий на частый вопрос наших посетителей: «Вставка изображений в тексты при помощи BB-кодов». В разделе помощи по сайту имеются ответы на другие наиболее частые вопросы, а главное - краткое руководство по системе. С последним мы настоятельно рекомендуем вам ознакомиться прямо сейчас, не откладывая это на потом. Если все же у вас останутся еще вопросы, ответы на которые вы там не найдете, или просто имеете пожелания по поводу улучшения нашего сервиса, обязательно обращайтесь в нашу службу поддержки, и вам ответят в кратчайшие сроки.

Вставка изображений в тексты при помощи BB-кодов

Нередко в дополнение к текстовым материалам на сайте, возникает необходимость разместить и изображения. Вы можете загружать и вставлять свои картинки и фото при помощи соответствующей кнопки панели BB-кодов: Вставить картинку.


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


окно загрузки и вставки изображений
окно загрузки и вставки изображений

При помощи раздела "Загрузить картинку с компьютера" вы можете загрузить фото с вашего ПК, для последующей его вставки на сайт. В разделе "Вставить из ранее загруженного" содержаться уже загруженные фото. Для вставки кода изображения, вам достаточно просто кликнуть по нужной его картинке. Обратите также внимание на раздел "Параметры вставки изображения", он содержит параметры, которые будут использованы при вставке текущей картинки. Всего имеется 4 параметра:


№1. Граница - определяет толщину рамки вокруг картинки. Параметры №1 - №3 измеряются в пикселях (если вкратце, пиксель - точка, минимального размера, который способен отобразить монитор; на практике это квадратная область с длиной стороны ~0.25мм), допустимые значения: от 0 до 10 включительно. Примеры использования этого и следующих параметров будут представлены ниже по тексту.


№2. Горизонтальный отступ указывает расстояние, на котором изображение будет находиться относительно окружающих его элементов по горизонтали.


№3. Вертикальный отступ - аналогично предыдущему пункту, только для вертикали.


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


Теперь самое главное. Давайте рассмотрим, как данные параметры влияют на отображение картинки на страничках сайта. Для начала покажем пример, как будет отображаться изображение, вставленное в начало текста, без изменения параметров вставки по умолчанию (граница = 0, горизонтальный и вертикальный отступы = 0, без указания способа обтекания):


изображение с параметрами вставки по умолчанию
изображение с параметрами вставки по умолчанию

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


Что делать? Воспользоваться обтеканием! Например, при левом обтекании, фото будет обтекать текст по левой стороне. Выглядеть это все будет примерно так:


изображение с обтеканием по левому краю текста
изображение с обтеканием по левому краю текста

Совершенно другое дело! Ну, разве что, текст немного "врезается" в нашу картинку в ее правой части. И это тоже можно исправить, воспользуемся горизонтальным отступом, указав его значение, например, 10:


добавили к предыдущему примеру горизонтальный отступ в 10 пикселей
добавили к предыдущему примеру горизонтальный отступ в 10 пикселей

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


добавили границу толщиной в 1 пиксель
добавили границу толщиной в 1 пиксель

 

Создать свой сайт с интернет-магазином прямо сейчас!