Как выравнять фото по ширине в blogspot.

Вступление (длинное -для новых пользователей блогспота), но способ более надежный и предельно понятный.

Если не терпится, то можете сразу посмотреть внизу быстрые способы выравнивания

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

Дело в том. что когда вы загружаете много фотографий в свой блог, то они как правило скачены из различных ресурсов и имеют разные характеристики и размеры.

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

Уникальность изображений ванна для поисковых систем. Я про это уже писал в SEO для вашего блога. Теперь давайте остановимся на том. как сделать ваш блог красивым и привлекательным для посетителей. Ведь не очень приятно, заходя в блог видеть разноразмерные фото, особенно когда их много, разбросанными по всем сторонам. Может быть, конечно, кому – то и нравится столь экстравагантные стили, но сейчас не о вкусах.  J

 Допустим, вы добавили несколько фото в вертикальный ряд вашего блога и видите, что даже выравнивая фото в редакторе, то есть – задавая им определенные параметры размера - «Крупный», «Очень крупный», «Исходный», они все равно получаются разного формата и качества.

Вот на этом и остановимся. Для начала хочу вас сразу предупредить, что если вы хотите сделать ваши фото большими, то не следует пытаться их сделать в Power Point за счет увеличения изображения. Во первых вы потеряете качество. Фото получатся размытые и неопрятные. Лучше заранее выбирать крупные  изображения. Но здесь следует помнить, что они наряду с хорошим качеством имеют и «большой вес». То есть стоит быть готовым к тому, что страница вашего сайта или блога будет дольше грузиться. Да и еще отмечу, что лучше всего выбирать изображения формата  JPEG. У него оптимальные сочетания качества и «веса» фото. Для того. чтобы перевести ваше изображение в этот формат можно воспользоваться программой  Photoshop 5cs или другими версиями. Мне нравится возможность онлайн работы с  Photoshop 5cs на этом сайте – http://www.bfoto.ru/photoshop_online_na_russkom.php

Там же вы можете изменить формат вашего изображения, просто загрузив его на этот сайт и сохранив его обратно уже в нужном формате.

Итак, вы загрузили фото. Рекомендую сразу все загруженные фото на страницу редактировать в визуальном редакторе и установить им всем одинаковый размер («Крупный»,»Средний»,»Очень крупный»- цифра 1 на фото). Не пугайтесь, что даже после этого они будут выглядеть неодинаковыми. Далее, нажимаем «редактировать HTML» (цифра 2 на фото)и попадаем в наш код. Здесь все просто. Каждое фото представлено отдельным абзацем и вам остается только найти его параметры : height  width.
Помните, я советовал вам выравнивать фото в редакторе одинаково («Крупный», «Средний» и тд), так вот это для вашего удобства в дальнейшем. Сейчас расскажу для чего.

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

Ширина (width)– 285, высота(height) – 400.

Мы хотим получить ширину 400 ( потому что при выравнивании и задания размера «Крупный», у нас получился один из размеров наших фото -400), а высоту – найдем из пропорции.
wi=285---hi=400 wi -исходная ширина; hi-исходная высота.

wn=400---hn=Х  wn -ширина нужная; hn-высота нужная.

Х=400*400/285 ; Х=561,4035..округляем до 561

Получаем изображение

Width=400 –Height=561.
Теперь остается только изменить цифры в коде на полученные.

А вот теперь маленькая хитрость. Можно конечно сидеть и все перемножать и делить вручную, но если вы задали изображениям параметр «Очень крупный», То они у вас получились уже по ширине 640, а по высоте….разные, а вот те, что по ширине. Нам нужно менять (не 640, а меньше), то у них получился параметр высоты – 640(!) То есть нам можно составить обычную таблицу в Exel
 слева указываем высоту настоящую, а в строке рядом полученный результат из уравнения , где

Высота нужная = ширина должная (640, 400,420 или еще

какая-то)* на высоту текущую и / на ширину текущую.

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

Я сделал ее под все основные параметры, которые получает редактор, и вы можете ее сделать самостоятельно или просто скачать по ссылке. 
https://docs.google.com/spreadsheets/d/1RS3LLNMl4uFKm6bUa2STTcEgfAbHAwn2-yrBROdaIhs/pubhtml?gid=969190912&single=true


https://docs.google.com/spreadsheets/d/1BDwZX6WUFNfIU1Xsy8I4hY4WjpEm0He20nXC3mmz3ZQ/edit?usp=sharing

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

Результат можно увидеть здесь.   

http://wordaxis2.blogspot.com/2016/03/foto-dly-proby.html    

Все ссылки в блоге намеренно оставил открытыми.

---

Простой способ выравнивания фото-картинок ( CSS )

1. Переходите сразу в редактор HTML поста.
2. Внутри блока div, как правило это основной блок поста, как обычно добавляете фото, которые вы хотите.
3. Отмечаем все как на фото ниже. Курсор - куда будем добавлять фото - 1 и отметить размер очень большой и по центру - 2







4. Фото добавились, но в виде "каши кода". Для того, чтобы было легче ориентироваться нажимаем сочетание клавиш Ctrl + F и в открывшемся окошке слева вводим - <div class="separator". Теперь заработала подсветка кода и нам легче выделить каждое отдельное фото из нашего кода. Оно начинается именно с той строки, которую вы ввели в поиск.







5. Разбиваем наши фото пробелом, или <br /> и находим значения ширины width высоты height фото. Если вы хотите, чтобы фото занимали всю ширину блока, то меняем значение width на 100%. Значение высоты - height, в любом случае, меняем на auto

Я, в данном случае поставил ширину - 80%, просто потому что мне так больше нравится. Вы можете поставить ширину любую, в зависимости от того, какой процент от ширины блока будут занимать ваши картинки (фото).

Осталось только предупредить, чтобы вы были внимательны и меняли именно ширину width и height, не data-original-width="значение" и data-original-height="значение".

Посмотреть как это работает можно здесь - для блога ТРЕНИРОВКА

---

А теперь - самое простое выравнивание по ширине с соблюдением пропорций (JS):

1. Все картинки нужно поместить внутри блока <div id="test_block">
2. В конце страницы, или отдельным гаджетом "Добавить Java Script" пишем такой код:



<script>

function setWidth()
{
    var allImg = document.getElementById('test_block').getElementsByTagName('img');
    for (var i=0; i<allImg.length; i++)
    {

       
        if (allImg[i].widht != 460)
        {
            allImg[i].height = allImg[i].height*(460/allImg[i].width);
            allImg[i].width = 460;
        }
    }
}
onload = setWidth;

</script>



3. Нужную ширину подставьте в код, заменив значение 460, на любое значение в px
4. Посмотреть готовый пример можно здесь:

See the Pen Одинакова ширина img(m) by YaroslavW (@YaroslavW) on CodePen.

Размер картинок от ширины экрана - JS

А теперь - вишенка на торте - размеры картинки от ширины экрана

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

Есть очень простой способ это избежать.

Я в макете - настройки темы. установил ширину шаблона 1100px. В код добавил изменяемую величину в переменной - width_photos, которая в свою очередь зависит от ширины экрана пользователя (без полосы прокрутки) width_screen.

В моем случае я решил поставить в 2.5 раза меньше ширины экрана ( width_photos = width_screen / 2.5; ) для экранов более 500px и в 4 раза меньше на маленьких экранах. Вы можете изменить эти значения по своему усмотрению.

Да и чуть не забыл. Размещать ваши изображения нужно внутри блока<div id="test_block"> Photos </div >.
При добавлении изображений в блок выбрать - 'ровнять по центру' и 'оригинальный размер изображений'

<script>
function setWidth(){
 var width_screen = document.documentElement.clientWidth; //ширина экрана без прокрутки 
 var width_photos; 
 if(width_screen >= 500) {
 width_photos = width_screen / 2.5;
}else{
width_photos = width_screen / 4;
}
    var allImg = document.getElementById('test_block').getElementsByTagName('img');
    for (var i=0; i




То что получилось, можете посмотреть в  тестовом блоге.





Если нужно задать другие размеры, или другие пропорции для выравнивания. то пишите. Придумаем! :-)