Справка

Справка

Как правильно вставлять картинки.

Миниатюра 200х200, отображение в Лайтбоксе 640х480.

Я думаю, что нет нужды объяснять как вставить картинку в блог или статью.

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

Начальная стадия этого процесса такая же, как и при обычной вставке картинок, нужно на панели визуального редактора нажать на кнопку "Вставить/Редактировать изображение"(см. Рисунок 1, позиция 1.). Далее в редакторе картинок нажать на кнопку "Просмотреть на сервере"(см. Рисунок 1, позиция 2.), откроется еще одно окно - окно обозревателя файлов (см. Рисунок 2).

.
Рисунок 1.Рисунок 1.

Здесь можно загрузить изображение(Рисунок 2, позиция 1.), при загрузке больших (больше чем 640х480) изображений надо отметить галки "Thumb" и "Lighbox" в "Создать превью"(Рисунок 2, позиция 3.). В этом случае во время загрузки файла будут созданы уменьшенные копии с именами "thumb_filename_small.*" размером 200х200 (здесь и далее вместо filename нужно будет подставить реальное имя загружаемого файла) и "thumb_filename.*" размером 640х480. Если картинка имеет отличный от указанного размер, то она будет отмасштабирована по большей стороне.

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

Обращайте внимание на размер полученного уменьшенного изображения, иногда его размер получается больше размера оригинала. В таком случае лучше в качестве уменьшенного изображения используйте оригинальное изображение, просто установите ширину изображения не более 640 (см. Рисунок 1, поле "Ширина").

Так же можно создать уменьшенные копии на закладке "Миниатюры".

Рисунок 2.

Рисунок 2.

Следующим шагом надо выделить файл "thumb_filename_small.*" и нажать "Insert file"(Рисунок 2, позиция 5.). Окно обозревателя файлов закроется.

Так же в окне "Свойства Изображения" можно установить иные параметры изображения: размеры отступов (рекомендуется ставить 10), выравнивание, бордюр, альтернативный текст.

Затем надо перейти на закладку "Ссылка"(см. Рисунок 3), в поле "URL" надо ввести или выбрать файл картинки с исходным большим размером (Рисунок 3, позиция 4), на который будет ссылаться уменьшенное изображение. Затем в селекторе "Не использовать LightBox" выбрать опцию "Одиночное раскрытие в LightBox"(Рисунок 3, позиция 5).


Рисунок 3.

Далее нужно нажать "ОК". В текст материала будет вставлено изображение размером 200х200 (по максимальной стороне), при нажатии на которое в LightBox будет открываться изображение большего размера которое вы указали на закладке "Ссылка".

Комментарии

Отправить комментарий

Содержание этого поля является приватным и не предназначено к показу.
  • Syntax highlight code surrounded by the {syntaxhighlighter SPEC}...{/syntaxhighlighter} tags, where SPEC is a Syntaxhighlighter options string or "class="OPTIONS" title="the title".
  • Адреса страниц и электронной почты автоматически преобразуются в ссылки.
  • Доступны HTML теги: <a> <p> <span> <s> <strike> <div> <h1> <h2> <h3> <h4> <h5> <h6> <img> <map> <area> <hr> <br> <br /> <ul> <ol> <li> <dl> <dt> <dd> <table> <caption> <tbody> <tr> <td> <em> <b> <u> <i> <strong> <del> <ins> <sub> <sup> <quote> <blockquote> <pre> <address> <code> <cite> <embed> <object> <param> <strike>
  • Использовать как разделитель страниц.

Подробнее о форматировании