как установить автоматический размер изображения в Blogger

Доброго времени суток, друзья. Блоггер нам предоставил удобный редактор для работы с изображениями в блоге. Инструмент позволяет загружать и изменять размеры нужных картинок в один клик, в зависимости от типа содержания.

После установки есть опции определиться с размером - маленький, средний, крупный, очень крупный и исходный. Однако, бывают случаи, когда возникает желание загрузить картинку и сделать её на всю ширину колонки. Если вы будете устанавливать изображение маленького размера и задавать ему значение "очень крупный", то оно несомненно потеряет качество.

размеры картинок в блоггере

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

Предлагаю простой и оптимальный вариант. Допустим, у меня картинка размером 1366 × 768 px.  При этом, когда я сделаю ей размер "исходный", она в сообщении будет обрезана, вот как - то так (это скриншот).

картинки в блоггере

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

изображение для Блоггер

Посмотрите на этом тестовом блоге в идеале. Там у меня ещё отдельно эффект добавлен, но это к данной теме не относится.


Как сделать автоматическое изменение размера картинки в Bloggere.

Не переживайте, эффект будет применён только к тем картинкам, которые вы сами захотите так показать. С остальными будет всё, как обычно. Сначала нужно убедиться что изображение шириной больше 640 px. Затем зайти во вкладку тема и найти строку ]]></b:skin>. Сразу перед ней установить вот этот небольшой код.

.post-body img {
max-width: 100%;
max-height: auto;
display: block;
margin: auto;
}


Затем, когда вы вставляете картинку в пост, нужно выбрать именно опцию "исходный размер"


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

.post-body img
{  max-width: 100%;
max-height: auto;
display: block;
margin: auto;  box-shadow: none;
padding: 0px;  }

Если посмотреть код сейчас в режиме HTML можно увидеть следующее. 

<a href="https://1366x768.ru/children/6/children-wallpaper-1366x768.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="450" data-original-width="800" src="https://1366x768.ru/children/6/children-wallpaper-1366x768.jpg" /></a>

Размеры с 1366x768 стали 450 на 800 и изображение встало на всю ширину поля с сохранением качества. Как я писала уже выше, нужно обязательно при выборе размера нажать на функцию "исходный размер". Естественно не стоит его располагать слева или справа. В любом случае они автоматически отобразятся в полную ширину.

Такие картинки на странице смотрятся очень стильно.

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

.post-body img {
width: 100%;
высота: 100%;
display: block;
}


Пробуйте. Такой вариант с автоматическим изменением размера картинок гораздо удобнее, качественнее и элегантнее.

P.S. Чтобы пост отдельный не писать, поделюсь, как сделать эффект переливающихся картинок. Это именно то, что вы могли видеть на тестовом блоге по ссылке в начале статьи. При наведении курсора на изображение идёт изменение цвета. Радужные картинки можно применить на какой - то праздник. Для игровых или детских блогах, как дополнение к дизайну.

Совершенно маленькая строка кода позволяет этого добиться. Так же во вкладке Тема перед строкой ]></b:skin> устанавливаем вот такую строчку и сохраняем шаблон.

@-webkit-keyframes hue{100%{-webkit-filter:hue-rotate(360deg)}}img:hover{-webkit-animation:hue 1s linear infinite}

Вот, пожалуй и всё. Спасибо за внимание.


Получайте новые сообщения с блога прямо на почту

Введите Ваш email


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

  1. Очень полезная функция, буду разбираться )) Спасибо за подробную инструкция и информацию, Виктория!

    ОтветитьУдалить
    Ответы
    1. Попробуйте девчата. очень современно и красиво смотрится. На многих современных сайтах такие изображения сейчас.

      Удалить
  2. Это просто замечательно!!!! Спасибо, Вика!!!

    ОтветитьУдалить
    Ответы
    1. Елена, для Вашего блога вообще классно будет.

      Удалить
  3. Ответы
    1. Валерия. У вас и правда много красивых фото. Попробуйте. Я тут пока эксперименты проводила столько фоток перепробовала. Я увидела у этого паренька в блоге и просто загорелась. http://www.salmandean.com/

      Удалить

ВСЕГДА РАДА УСЛЫШАТЬ ВАШЕ МНЕНИЕ!
Ели у вас возникла необходимость опубликовать код в комментарии, то воспользуйтесь encoder HTML

Пользовательский поиск