С помощью 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. который можно использовать для оформления всего блока картинки.<a href=".../image.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;">
<img alt="альтернативное описание" border="0" height="значение высоты(только цифры)" src=".../image.jpg" width="значение ширины(только цифры)" />
</a>
</div>
Если же добавляется подпись, то вместо блока, изображение оборачивается в таблицу:
<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. <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>
Селекторы изображений в 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);
}
Стилей не много, селекторы различных блоков с картинками объединены для записи общих свойств, но мы можем записывать необходимые свойства только к нужным нам селекторам, отделяя их. Для изображений поста они следующие:.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; /*ширина, обязательное значение*/
}
Или наоборот:height: 150px; /*высота, любое нужное значение, можно в %*/
width: auto; /*ширина, обязательное значение*/
}
.post-body img {
height: auto; /*высота, обязательное значение*/
width: 150px; /*ширина, любое нужное значение, можно в %*/
}
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, то такое ответственное задание, как выбрать первое изображение из набора и присвоить ему нужный класс будет состоять всего из двух строчек кода.float: left;
border-radius: 5px;
margin: 5px;
height: 200px;
width:auto;
}
$function(){
$('div.post-body').each(function(){
$(this).find('img:first').addClass('first-img');
});
});
Не забываем что для работы скрипта, к блогу надо подключить библиотеку jQuery, если конечно вы не сделали этого ранее.$('div.post-body').each(function(){
$(this).find('img:first').addClass('first-img');
});
});
На этом все, надеюсь пост был полезен.
А как настроить так, чтобы картинки добавлялись без фона. Т.е, когда вставляем картинку без фона, чтобы фона в сообщении не было.
ОтветитьУдалитьТам где в шаблоне записаны стили для .post-body img в свойстве background укажите значение none, т.е. вот так - background: none;
УдалитьЕсли я правильно понял ваш вопрос...
Спасибо, но не во всех шаблонах это есть.Подскажите, есть ли другая альтернатива кода?
УдалитьХотелось бы взглянуть на шаблон, если можно конечно. Но во всех шаблонах селекторы одинаковые, и если в стилях шаблона его нет, то можно дописать самостоятельно и задать нужные свойства.
УдалитьОпределить(узнать) селектор, можно инструментами браузера - "Проинспектировать элемент" (Opera) или "Просмотр кода элемента" (Chrome).
"а можно поступить проще - всего один раз добавить в шаблон примерно следующий CSS:
ОтветитьУдалить..." - это не работает.Да, по ширине фотографии выравниваются (если взять 2-й вариант), но качество изображения очень сильно ухудшается. При этом, оригиналы фотографий больше по размерам.
Первый вариант может не работать если в шаблоне имеются правила для этого селектора, ситуация правится с помощью important.
Удалитьhttp://www.magentawave.com/2012/02/adding-css-to-html-blogger.html
Ни когда не видел чтобы качество ухудшалось при масштабировании большого изображения методами CSS. Возможно вам следует обратить обратить внимание на ссылку картинки? Которая примерно имеет вид:
http://3.bp.blogspot.com/***/s1600/img.png - выделенное жирным устанавливает показатель масштаба-качества 1600 - максимальный. Качество такого изображения, если оно качественное, вряд ли ухудшится при уменьшении средствами CSS.
Я перепробовал много кодов, которые нашёл в сети. Но во всех случаях качество картинок ухудшается. Вот тестовый блог - test-blogger-9.blogspot.com , оригиналы картинок разных размеров и качества, и у всех фото очень видна потеря качества на блоге.
УдалитьВот блоги, где в сообщениях несколько фотографий, и все без потери качества:
lifeofaladybear.com
jimmartinphotoblog.blogspot.ru
Мне важно, чтобы не терялось качество и выравнивалось при загрузке сразу несколько (10-15) фотографий в одном сообщении, как у этих блогов, чтобы не править всё вручную. Просьба помочь.
Забыл добавить - или несоответствие по длине с величиной, указанной в коде.
УдалитьУ вас в тестовом, когда вы загружаете фото, появляется окно с выравниванием и размером, вы выбираете выравнивание какое вам надо, а размер указываете как - исходный, тогда у вас будет наилучшее качество(s1600 сейчас у вас - s320) , а чтобы картинки в сообщениях были того размера, который вам нужен, добавьте CSS из поста, с нужными параметрами. Это все то, что я вам писал сразу.
УдалитьИ если вы пишите max-width: ..., то не забывайте указывать и просто width свойство.
Удалитьесть ли код для автоматической подписи каждой заливаемой в блог картинки?
ОтветитьУдалитьА поподробнее? Все зависит от потребностей, например: подписи должны быть одинаковые или для каждой разные и т.д.
УдалитьЗдравствуйте, а вы не подскажите как сделать как в этом блоге картинки.http://denver011974.blogspot.ru/
УдалитьТам когда увеличиваешь картинку, то внизу получается много маленьких.Или может вы подскажете, чтобы когда увеличивалась картинка можно было нажимать на стрелочку и просматривать остальные картинки.Так было бы даже лучше.Спасибо.
Просто включить Lightbox в настройках панели администратора блога - Настройки - Сообщения и комментарии - Показывать изображения в Lightbox - "Да".
УдалитьДля второго варианта нужно прикручивать уже альтернативный вариант все того же Лайтбокса
Да это получилось..на тестовом форуме.А на моем форуме я его брала не здесь..не работает.А вы не могли бы посмотреть скрипт (не за бесплатно) чтобы убрать то что мешает работать правильно Ну рублей 150-200.Блог у меня точно такой же тематики какой я вам показывала.А повелась я на шапку которая меняет картинки.Обсолютно не приносящий прибыли.http://gor2104va.blogspot.com/ ( Спасибо.
ОтветитьУдалитьОставьте пожалуйста заявку в форме на странице - http://www.magentawave.com/p/adv.html
УдалитьИли напишите через форму связи из бокового меню
Ребят, спасибо работает, но приходится вручную в сообщении проставлять исходный размер. ТАк блоггер автоматом ставит маленький размер, а из-за указаного кода их растягивает по ширине и высоте и они фигово выглядят. Что в CSS надо заменить, чтобы они добавлялись по умолчанию в исходном размере?
ОтветитьУдалитьМожно посмотреть здесь:
Удалитьhttp://www.magentawave.com/2016/05/links-ads-seo-in-blog.html
http://www.magentawave.com/2016/09/make-responsive-website.html
А вообще для селекторов блоков с изображением и картинок, можно поставить width:auto; height:auto;, а в редакторе, при загрузке, выбирать "исходный размер".