воскресенье, 14 марта 2010 г.

Размещение фотографий в блогах Blogger, или как сделать красивый фотоблог.

Всё в "Блоггере", казалось бы, продумано, и нет ничего проще размещения фотографии.
Тут тебе и с компьютера можно сразу залить без посредничества каких-либо сторонних фотохостингов, и ссылку на уже выложенную фотографию дать можно.
Потом есть возможность выбрать из четырёх вариантов размера - "маленький", "средний", "крупный" и "очень крупный", а затем выравнивать картинку по центру, правому или левому краю.
С недавнего времени появилась и возможность делать подписи под фото.
Но и тут, как не странно, есть свои "но".

Главным неудобством является то, что стандартные размеры фото не всем подходят.
А размеры эти следующие. Фотографию уменьшают по большей стороне (меньшая сторона в этом случае уменьшается автоматически, пропорционально первой).
Размеры большей стороны в автоматическом редакторе фото выходят такие:
  • "маленький" - 200 px
  • "средний" - 320 px
  • "крупный" - 400 px
  • "очень крупный" - 640 px
Но дело в том, что не у всех ширина блога одинаковая. Тем более, с появлением новых шаблонов, где ширина регулируется куда проще, чем раньше.
Оптимально (особенно для людей, выкладывающих фотографии в большом разрешении), чтобы все фотографии были равны ширине основной колонки блога.
Это выглядит эстетично и, кроме этого, позволяет читателю видеть фото в максимальном, насколько то позволяет дизайн блога, разрешении.

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



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



Оба фото одинаковой ширины.
Я уже давно размещаю фотографии только так. Выглядит аккуратнее.
Пример можно увидеть тут.
При этом, щёлкнув на фото - можно увидеть его в ещё большем разрешении на отдельной странице.
Но для этого я пользуюсь не автоматическим редактором, а вношу, при написании поста, в режиме "изменить html" свой код. Код такой:

<div class="separator" style="clear: both; text-align: left;">
<a href="ссылка на фотографию"><img border="0" src="ссылка на фотографию" title="Название картинки" alt="Тэги картинки" width="ширина вашего блога" /></a>
</div>

Указывать теги изображения полезно для того, чтобы оно легче искалось поисковиками. Название картинки будет видно, если человек наведёт мышку на фото.
Узнать нужную ширину для вашего блога (если у него постоянная ширина, естественно, т.е. если это не "резиновый" шаблон) можно следующим образом.

Если вы пользуетесь старыми (уже два дня как старыми =)) шаблонами - то надо зайти в "Дизайн / изменить html", и посмотреть там в разделе #main-wrapper строку, выделенную ниже жирным:

#main-wrapper {
margin-$startSide: 20px;
width: 680px;

Значит, ширина вашей основной колонки блога - 680 пикселей. Она может быть и другой.
Всё, вы узнали ширину основной колонки.

Если же вы пользуетесь новыми шаблонами - то можете даже не лезть в код и посмотреть ширину основной колонки в "Дизайн / Дизайнер шаблонов / Дизайн / Изменение ширины" и вычесть из общей ширины блога ширину боковых колонок.
Предположим, что общая ширина вашего блога - 900 пикселей, а боковые колонки - 290 пикселей.
900 - 290 = 610.
Казалось, бы, это значит, что длина основной колонки блога - 610 пикселей.

Но дело в том (и это важно как для старых,так и новых шаблонов), что между основной колонкой и боковой существует промежуток, отделяющий одно от другого. Он также обычно занимает некоторое количество пикселей. Оно может быть разным - обычно где-то 25. Да ещё не забывайте про то, что изображения в блоггере довольно часто автоматически окружаются рамочкой.
Таким образом, надо вычесть ещё количество пикселей от промежутка между колонками и пикселей десять на рамочку.

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

P.S.: В старом "интернет-эксплорере" уменьшенные таким образом изображения показываются с грубой пикселизацией. Но учитывая, что этим браузером уже почти никто не пользуется (и мы должны делать всё, чтобы про него и вовсе забыли) - можно этим пренебречь.

32 комментария:

  1. Хорошая мысль про равную ширину. Фото действительно лучше смотрятся с одинаковой шириной. Правда я, перед публикацией, уменьшаю фото по ширине до 600 (ширина основной части). Иногда уменьшение средствами блоггера "съедают" четкость немного

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

    ОтветитьУдалить
  3. River joy, если фотографии занимают значительную часть экрана, так, что на экране в один момент можно по-нормальному разглядывать только одно фото (примерно как у меня по ссылке) - то все фото воспринимаются примерно одинаково.

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

    ОтветитьУдалить
  4. По поводу ширины - использую одинаковую высоту для фотографий, т.е. с портретной ориентацией размер 400x600, а с альбомной - 900x600. Так всегда вся фотография видна сразу, без скороллов. А для более детального рассмотрения - полный вариант.
    По поводу фотоблога - вот сейчас мучаюсь с шаблонами blogger, что бы сделать нормальный фотоблог. Может знаете, как сделать так, что бы сразу после обращения к главной странице перекидывало на последнее сообщение (страницу типа item)? Если делать отображение на странице одного сообщения, то потом ссылки выглядят некрасиво (с всякими search и т.д.), а хочется, что бы сразу было видно последнее сообщение вместе с комментариями, т.е. навигация по сообщениям блога.

    ОтветитьУдалить
  5. Ru, по поводу последнего - не приходилось этим заниматься.
    Шаблоны для фотоблогов как-то выкладывались здесь:
    http://www.bloggerbuster.com/2008/08/12-free-photoblog-templates-for-blogger.html

    Думаю что есть ещё.

    ОтветитьУдалить
  6. Я вот для нового блога обзавёлся Windows write...
    А также прикрутил Fancybox...
    Получилось ничего так
    http://obskurino-oko.blogspot.com/2010/03/biti-li-dniu-pobedi_17.html

    ОтветитьУдалить
  7. Дак это же Гермиона Грейнджер!
    а для фотоблогов я бы tumblr.com порекомендовал.

    ОтветитьУдалить
  8. Michael de`Oz, Она, она родимая! =)

    ОтветитьУдалить
  9. Спасибо большое за отличные советы!!!
    Такая полезная информация!!!
    Я только начинаю вести свой блог, поэтому вопросов очень много :-))

    Скажите, а можно ли удалить созданный блог.
    Я пробовала, у меня получается только деактивировать ненужный блог, а из списка он не исчезает...
    А ещё не знаете, как удалить профиль (я создала 2 по неопытности :-), один из которых мне не нужен оказался)?

    Спасибо заранее!!!

    ОтветитьУдалить
  10. А как вы делаете такие красивые рамки для ваших фото (как у тех, что в этом посте)?

    ОтветитьУдалить
  11. PeeKaBoo - никак. Они делаются автоматически в этом шаблоне от Blogger.

    ОтветитьУдалить
  12. Я тоже одинаковой ширины делаю чаще всего

    ОтветитьУдалить
  13. Супер, супер, супер пост!!!! Я два дня в инете искала мучалась, как размер фотки увеличить и качество, чтоб хорошее осталось. Спасибо вам огромное за такую ценную информацию!!!

    ОтветитьУдалить
  14. Очень интересно! Кстати предлагаю вам поучаствовать в фотоконкурсе с главным призом в 10000 рублей!
    Условия конкурса: 1. В одном из альбомов конкурса разместите фотографию, размером не более 2 Мб. 2. Можно разместить 1 фотографию в каждом альбоме конкурса: -Наше лето с юмором! -Наше лето с творчеством! -Наше лето с любимыми! -Наше лето с друзьями! -Наше лето с питомцами! 3. Зарегистрированные пользователи сайта будут голосовать за вашу фотографию. Один человек может отдать один голос за 1 фотографию пользователя. 4. Каждый голосующий может дать вам монетку или забрать у вас рублик. В конце конкурса будут разыграны 3 приза: 1-ый приз - 10 000 рублей; 2-ой приз – сумма определяется количеством голосов; 3-ий приз - купон на льготные экскурсии и подарки-впечатления в Санкт-Петербурге. Если вы решили принять участие, тогда вам сюда: http://myavantura.ru/sluzhebnyi/pravila-konkursa.html

    ОтветитьУдалить
  15. Этот комментарий был удален автором.

    ОтветитьУдалить
  16. Собственно сабж..Изменился режим отображений фото в моем блоге. Ранше была лента с превюшками(стандарт от блоггера)а теперь, фотки открываються в полоноэкранном режиме, возврат в блог только через кнопу назад, как вернуть обратно стандартный режим просмотра? Спасибо. С ув.

    ОтветитьУдалить
  17. Roy Tim, чёт я не совсем понял даже какой у вас шаблон.

    ОтветитьУдалить
  18. Почитал немного, и понял что лучше почитать, чем задавать такие вопросы)) Извините. Немного разобрался в терминологии. Проблема с лайтбоксом. В настройках он включен. Использую станд. шаблон. Сегодня лайтбокс перестал работать. Смена шаблона не решает проблему. В код добавил только возможность коментирования с соц сети. Где искать проблему? (Искать в коде своих генов не предлагать, это бесполезно)))) Спасибо.

    ОтветитьУдалить
  19. Roy Tim, хрень какая-то. Если вы ничего не меняли и он перестал работать - значит, видимо, меняют что-то в коде блоггера его программисты, не знаю, что тут делать! Я не программист, кода лайтбокса самого по себе не знаю!

    ОтветитьУдалить
  20. Roy Tim, попробуйте убрать то, что вы внесли в код - если не поможет - вина не ваша.

    ОтветитьУдалить
  21. Этот комментарий был удален автором.

    ОтветитьУдалить
  22. Спасибо Вам большое! Очень полезная информация!

    ОтветитьУдалить
  23. Благодарю! давно не могла сделать все фото по одной ширине. Ваша информация помогла это исправить)

    ОтветитьУдалить
  24. не могу найти данных по размеру :((( Весь код просмотрела

    ОтветитьУдалить
  25. интересно было посмотреть, т.к. еще вчера искала ответы на свои вопросы

    ОтветитьУдалить
  26. В Дизайне нет изменить хтмл.

    ОтветитьУдалить
  27. Спасибо, полезная информация. Взял на заметку.
    Особо интересный момент про тэги в фотографиях.

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