Оформление картинок в постах через CSS в Blogger(Blogspot)

  Фотографии, скриншоты, картинки являются неотъемлемой частью любого современного блога. Они дополняют, подчеркиваю, а может и вовсе, полностью формируют его содержимое. По-этому нельзя упускать из вида, такой немаловажный момент как оформление и дизайн изображений в блоге.
  С помощью CSS свойств можно настроить отображение практически любого элемента веб-страницы, в том числе и картинок. В этой статье речь пойдет о структуре блока с изображениями и какие основные селекторы можно использовать для стилевого оформления картинок в постах блога на Blogger. А также рассмотрим вопрос о том, как сделать первые изображения(превью) в постах одного размера и задать им одинаковый стиль.  Итак, начнем с блоков добавляемых изображений.
  Изображение добавленное в режиме HTML имеет самый простой код:

<a href=".../image.jpg" imageanchor="1"><img border="0" src=".../image.jpg" /></a>

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

<div class="separator" style="clear: both; text-align: center;">
 <a href=".../image.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;">
  <img alt="альтернативное описание" border="0" height="значение высоты(только цифры)" src=".../image.jpg" width="значение ширины(только цифры)" />
 </a>
</div>

  У этого контейнера есть свой селектор - .separator. который можно использовать для оформления всего блока картинки.
  Если же добавляется подпись, то вместо блока, изображение оборачивается в таблицу:

<table align="center" cellpadding="0" cellspacing="0" class="tr-caption-container" style="margin-left: auto; margin-right: auto; text-align: center;">
 <tbody>
  <tr>
  <td style="text-align: center;">
  <a href=".../image.jpg" imageanchor="1" style="margin-left: auto; margin-right: auto;">
  <img border="0" height="" src=".../image.jpg" width="" />
  </a>
  </td>
  </tr>
  <tr>
  <td class="tr-caption" style="text-align: center;">Подпись к изображению</td></tr>
 </tbody>
</table>

  Вся конструкция имеет селектор: .tr-caption-container, а ячейка с подписью отдельный - .tr-caption. 

СЕЛЕКТОРЫ ИЗОБРАЖЕНИЙ В CSS ШАБЛОНА BLOGGER

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

.post-body img, .post-body .tr-caption-container, .Profile img, .Image img,
.BlogList .item-thumbnail img {
  padding: $(image.border.small.size);

  background: $(image.background.color);
  border: 1px solid $(image.border.color);

  -moz-box-shadow: 1px 1px 5px rgba(0, 0, 0, .1);
  -webkit-box-shadow: 1px 1px 5px rgba(0, 0, 0, .1);
  box-shadow: 1px 1px 5px rgba(0, 0, 0, .1);
}

.post-body img, .post-body .tr-caption-container {
  padding: $(image.border.large.size);
}

.post-body .tr-caption-container {
  color: $(image.text.color);
}

.post-body .tr-caption-container img {
  padding: 0;

  background: transparent;
  border: none;

  -moz-box-shadow: 0 0 0 rgba(0, 0, 0, .1);
  -webkit-box-shadow: 0 0 0 rgba(0, 0, 0, .1);
  box-shadow: 0 0 0 rgba(0, 0, 0, .1);
}

  Стилей не много, селекторы различных блоков с картинками объединены для записи общих свойств, но мы можем записывать необходимые свойства только к нужным нам селекторам, отделяя их. Для изображений поста они следующие:
- .post-body img - изображения в сообщении, или .entry-content img что в принципе одно и тоже;
- .separator - контейнер с изображением без подписи;
- .post-body .tr-caption-container img - селектор для изображения к которому добавлена подпись;
- .tr-caption-container - селектор всей таблицы с изображением;
- .tr-caption - селектор для ячейки с подписью изображения;

КАК СДЕЛАТЬ ВСЕ ИЗОБРАЖЕНИЯ В ПОСТАХ БЛОГА ОДИНАКОВОГО РАЗМЕРА

  Задавая общий стиль, иногда возникает потребность, чтобы картинки в сообщениях имели одинаковую высоту или ширину, не зависимо от исходных размеров. Тут все предельно просто, можно каждый раз добавлять к каждому изображению атрибут width с необходимым значением, а можно поступить проще - всего один раз добавить в шаблон примерно следующий CSS:

.post-body img {
 height: 150px; /*высота, любое нужное значение, можно в %*/
 width: auto; /*ширина, обязательное значение*/
}

   Или наоборот:

.post-body img {
 height: auto; /*высота, обязательное значение*/
 width: 150px; /*ширина, любое нужное значение, можно в %*/
}

КАК ИЗМЕНИТЬ СТИЛЬ ТОЛЬКО ПЕРВОЙ КАРТИНКИ ПОСТА В BLOGGER

  К сожалению, используя стандартные селекторы шаблона, сделать такое не возможно, даже применяя псевдоклассы.
  Но тегу <img>, как и любому другому, можно добавить отдельный class с необходимым стилевым оформлением. При создании сообщения достаточно будет перейти в режим HTML-редактирования и дописать его к тегу первого изображения.
  Например:

<img class="first-img" src=:".../image.jpeg" />

  А в CSS задать глобально, например такой:

.first-img {
 float: left;
 border-radius: 5px;
 margin: 5px;
 height: 200px;
 width:auto;
}

  Но с применением JavaScript все может быть еще проще. А если написать скрипт на jQuery, то такое ответственное задание, как выбрать первое изображение из набора и присвоить ему нужный класс будет состоять всего из двух строчек кода.

$function(){
 $('div.post-body').each(function(){
    $(this).find('img:first').addClass('first-img');
 });
});

  Не забываем что для работы скрипта, к блогу надо подключить библиотеку jQuery, если конечно вы не сделали этого ранее.

  На этом все, надеюсь пост был полезен.

источник