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

Логотип Blogger и разноцветный картинки разных размеров  Фотографии, скриншоты, картинки являются неотъемлемой частью любого современного блога. Они дополняют, подчеркиваю, а может и вовсе, полностью формируют его содержимое. По-этому нельзя упускать из вида, такой немаловажный момент как оформление и дизайн изображений в блоге.
  С помощью 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, если конечно вы не сделали этого ранее.

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

10 комментариев:

  1. А как настроить так, чтобы картинки добавлялись без фона. Т.е, когда вставляем картинку без фона, чтобы фона в сообщении не было.

    ОтветитьУдалить
    Ответы
    1. Там где в шаблоне записаны стили для .post-body img в свойстве background укажите значение none, т.е. вот так - background: none;
      Если я правильно понял ваш вопрос...

      Удалить
    2. Спасибо, но не во всех шаблонах это есть.Подскажите, есть ли другая альтернатива кода?

      Удалить
    3. Хотелось бы взглянуть на шаблон, если можно конечно. Но во всех шаблонах селекторы одинаковые, и если в стилях шаблона его нет, то можно дописать самостоятельно и задать нужные свойства.
      Определить(узнать) селектор, можно инструментами браузера - "Проинспектировать элемент" (Opera) или "Просмотр кода элемента" (Chrome).

      Удалить
  2. "а можно поступить проще - всего один раз добавить в шаблон примерно следующий CSS:
    ..." - это не работает.Да, по ширине фотографии выравниваются (если взять 2-й вариант), но качество изображения очень сильно ухудшается. При этом, оригиналы фотографий больше по размерам.

    ОтветитьУдалить
    Ответы
    1. Первый вариант может не работать если в шаблоне имеются правила для этого селектора, ситуация правится с помощью important.
      http://www.magentawave.com/2012/02/adding-css-to-html-blogger.html
      Ни когда не видел чтобы качество ухудшалось при масштабировании большого изображения методами CSS. Возможно вам следует обратить обратить внимание на ссылку картинки? Которая примерно имеет вид:
      http://3.bp.blogspot.com/***/s1600/img.png - выделенное жирным устанавливает показатель масштаба-качества 1600 - максимальный. Качество такого изображения, если оно качественное, вряд ли ухудшится при уменьшении средствами CSS.

      Удалить
    2. Анонимный27.11.15, 9:01

      Я перепробовал много кодов, которые нашёл в сети. Но во всех случаях качество картинок ухудшается. Вот тестовый блог - test-blogger-9.blogspot.com , оригиналы картинок разных размеров и качества, и у всех фото очень видна потеря качества на блоге.

      Вот блоги, где в сообщениях несколько фотографий, и все без потери качества:

      lifeofaladybear.com
      jimmartinphotoblog.blogspot.ru

      Мне важно, чтобы не терялось качество и выравнивалось при загрузке сразу несколько (10-15) фотографий в одном сообщении, как у этих блогов, чтобы не править всё вручную. Просьба помочь.

      Удалить
    3. Анонимный27.11.15, 9:03

      Забыл добавить - или несоответствие по длине с величиной, указанной в коде.

      Удалить
    4. У вас в тестовом, когда вы загружаете фото, появляется окно с выравниванием и размером, вы выбираете выравнивание какое вам надо, а размер указываете как - исходный, тогда у вас будет наилучшее качество(s1600 сейчас у вас - s320) , а чтобы картинки в сообщениях были того размера, который вам нужен, добавьте CSS из поста, с нужными параметрами. Это все то, что я вам писал сразу.

      Удалить
    5. И если вы пишите max-width: ..., то не забывайте указывать и просто width свойство.

      Удалить

Следующее Предыдущее

BestProject