Способы отображения картинок в блоге.

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

1-й способ. Миниатюрное отображение с увеличением по щелчку в окне браузера.

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

Добавив таким образом картинку, Вы обнаружите в HTML-коде статьи следующий фрагмент:

<a onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="http://путь к картинке/s1600-h/имя картинки"><img style="display:block; margin:0px auto 10px; text-align:center;cursor:pointer; cursor:hand;width: 320px; height: 206px;" src="http://путь к картинке/s320/имя картинки" border="0" alt=""id="BLOGGER_PHOTO_ID_5397032663587218226" /></a>

Не спрашивайте меня, что всё означает. ;-) Скажу лишь, что тут использовано два HTML-тега: <img> и <a>. Первый отображает уменьшенное изображение, а второй предназначен для создания ссылок. И в данном случае ссылается на картинку в оригинальном размере. При переходе по ссылке, картинка в оригинальном размере откроется взамен вашего блога. И поситителю Вашего блога придётся нажимать кнопку "Назад" в браузере, чтобы вернуться к блогу. Для того, чтобы картинка в оригинальном размере отобтажалась в новом окне/вкладке надо добавить в тег <a> параметр target="blank".

Параметры width и height тега <img> задают соответственно ширину и высоту уменьшенного изображения.

Достоинство такого метода добавления картинок в блог - это его простота. Вам не нужно практически ничего менять. Но на мой взгляд, существенным недостатком такого размещения картинки является отображение её в оригинальном размере в новом или существующем окне браузера, при щелчке по ней. Это просто некрасиво.

2-й способ. Простое отображение.

Картинки среднего и малого размера могут уместиться в блоге в оригинальном размере, поэтому их не нужно увеличивать, щёлкая по ним мышью. Вы можете добавить их сами спомощью тега <img>. Или опять же нажать в окне редактирования сообщений кнопку "Добавить изображение" и отредактировать полученный HTML-код. А именно удалите тег <a> (вводную <a> и закрывающую </a>части) и измените параметры width и height тега <img> при необходимости. Желательно также заменить в пути к картинке s320 на s1600. Так как гуголовский сервис хранит для каждого изображения несколько вариантов (для минимизированного и полного отображения).

<img style="display:block; margin:0px auto 10px; text-align:center;cursor:pointer; cursor:hand;width: 650px height: 419px src="http://путь к картинке/s1600/имя картинки" border="0" alt=""id="BLOGGER_PHOTO_ID_5397032663587218226" />

3-й способ. Миниатюрное отображение с увеличением по щелчку в всплывающем pop-up-окне.

На мой взгляд, это наилучший способ размещения картинок большого размера в блоге. Посетитель Вашего блога видит уменьшенные картинки, читая статью и может увеличить заинтересовавшею его картинку, щёлкнув по ней левой кнопкой мыши. При этом увеличенное изображение появляется не как в 1-ом варианте в том же или новом окне браузера, а в специалцном всплывающем pop-up-окне. При щелчке вне pop-up-окна, оно закрывается и посетитель читает статью дальше.

Этод способ использует скрипт Lightbox 2. Который надо разместить на каком-либо сайте. Поскольку в блоге невозможно разместить файлы, Вам придётся использовать подходящий интернет сервис или какой-либо другой ваш сайт. Вот последовательность действий по установке Lightbox 2 (взята с его сайта и дополнена):

1) скачайте Lightbox 2.

2) Найдите в скаченной папке CSS файл lightbox.css. Откройте его и, найдя строки:

#prevLink:hover, #prevLink:visited:hover { background: url(../images/prevlabel.gif) left 15% no-repeat; }

#nextLink:hover, #nextLink:visited:hover { background: url(../images/nextlabel.gif) right 15% no-repeat; }

замените .. перед /images на путь, по которому Вы разместите скаченную папку images.

3) Найдите в скаченной папке JS файл lightbox.js. Откройте его и, найдя строки:

fileLoadingImage:        'images/loading.gif',

fileBottomNavCloseImage: 'images/closelabel.gif',

допешите перед images путь, по которому Вы разместите скаченную папку images.

4) Разместите все скаченные директории на интернет сервисе или вашем сайте.

5) В настройках блога перейдите на закладку "Дизайн" выберите подраздел "Изменить HTML". На всякий случай, сделайте резервную копию шаблона. Для этого нажмите "Загрузить весь шаблон".

6)Далее найдите в HTML коде шаблона тег </head>. И вставьте непосредственно перед ним четыре следующие строки:

<script src='http://dl.getdropbox.com/u/1056476/lightbox2.04/js/prototype.js' type='text/javascript'/>
<script src='http://dl.getdropbox.com/u/1056476/lightbox2.04/js/scriptaculous.js?load=effects,builder' type='text/javascript'/>
<script src='http://dl.getdropbox.com/u/1056476/lightbox2.04/js/lightbox.js' type='text/javascript'/>
<link href='http://dl.getdropbox.com/u/1056476/lightbox2.04/css/lightbox.css' media='screen' rel='stylesheet' type='text/css'/>

7) Сохраните шаблон.

Теперь Вы можете использовать скрипт со всеми добавляемыми в Ваш блог картинками. Для этого добавьте картинку также как и в первом способе. Найдите соответствующей картинке HTML код (см. 1-й способ). И измените его следующим способом:
a) добавьте параметр rel="lightbox" в тег <a>
б) в конце пути ссылки уберите два символа "-" и "h".

У Вас получится HTML код:

<a onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="http://путь к картинке/s1600/имя картинки" rel="lightbox"><img style="display:block; margin:0px auto 10px; text-align:center;cursor:pointer; cursor:hand;width: 320px; height: 206px;" src="http://путь к картинке/s320/имя картинки" border="0" alt=""id="BLOGGER_PHOTO_ID_5397032663587218226" /></a>

Этот способ только на первый взгляд кажется сложным. После однократного добавления скрипта в Ваш сайт, Вам потребуется только чуть-чуть поправлять HTML код созданный редактором автоматически при нажатии кнопки "Добавить изображение".

Возможно Вам будет интересно:

В разделе Cправки-Blogger "Какие еще способы публикации картинок предусмотрены?" перечислен ряд интернет-сервисов для размещения картинок.