воскресенье, 7 апреля 2013 г.

Стройные ряды картинок


Да, сегодня я опять про картинки в блоге.
Мы, народ рукодельный, жуть как любим хвастаться своими творениями. Нащелкаем фотоаппаратом, немного приукрасим-обрежем фотки и бежим выкладывать на суд общественности. Я не исключение http://skrapttt.blogspot.ru

Блоггер позволяет отображать фото в 4-х стандартных размерах: маленьком, среднем, крупном и очень крупном. Дополнительно может отобразить в исходном размере. Но все эти размеры не всегда хороши для каждого конкретного случая.
Далеко не всегда мы размещаем фотографии одинаковой высоты и ширины.
В результате размещенные картинки выглядят лесенкой. Не смертельно, но весьма неаккуратно.





Такое положение не оставило меня равнодушной и заставило покопаться в html-коде сообщения.

1. В режиме создания-редактирования сообщения переходим на вкладку "HTML"



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


 Розовым я подчеркнула название фоток, а галочками отметила, где прописаны сами фотографии

3. Находим ширину отображения фотографий: widht="ширина". На картинке пометила зеленым.




Не удивительно: ширина одной фотографии 306, другой - 278 пикселей. Вот Вам и лесенка. Я правлю число в кавычках на 400 во всех случаях. Вы же ширину для своего блога подбирайте опытным путем: можно оставить "средний" размер - это около 320 пикселей, можно сделать во всю ширину блога - около 600 пикселей. Подставляем и просматриваем, как больше нравится.

4. Делаем отображение фото пропорциональными. Дело в том, что блоггер автоматически прописывает не только ширину, но и высоту картинок: height="высота". Пометила красным



Чтобы не высчитывать пропорции каждой фотографии, я просто удалила упоминание о высоте (весь текст, обведенный красным). В данном случае пропорции фото сохранятся автоматически.

5. Сохраняем и любуемся стройными рядами фотографий.






PS: если у кого большая боязнь править html-код, не бойтесь! Это всего лишь одно сообщение. Скажу больше, если удалите что-то лишнее в коде, просто перезалейте фотографию по новой. Пара тренировок - и все будет само собой разумеющимся))

1 комментарий:

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

    ОтветитьУдалить